/* JKST Note site — Warm Paper system.
   Design contract: quick-capture-notes-app/designs/website/DESIGN.md in the ideation repo —
   the refero.design style 2bf4c61f (Notion's warm-paper marketing grammar) recolored with
   the app's own brand tokens (brand/palette.md). Light-only by design: the app is
   dark-mode-first, but this site is a document; the app's night palette appears only where
   the product itself is drawn (the trust band and the phone illustration).

   One typeface: Inter, self-hosted (assets/fonts/, SIL OFL) so the site keeps making zero
   third-party requests — the same property the app claims for itself. Inline code uses the
   system monospace stack. The contract's serif accent (Source Serif 4) was dropped on
   2026-09-20: three passages in a second family read as a mistake rather than an accent.

   Two measured divergences from the contract's raw tokens, both for AA contrast on paper
   (#f6f5f4 is darker than the old #fdfdfe page):
   - text links use #276aa8, one step below the brand azure: #2d78bd is 4.26:1 on paper,
     under the 4.5:1 floor for body text; #276aa8 is 5.2:1. The azure itself stays on
     fills (white text on #2d78bd is 4.6:1) and on the brand mark.
   - tertiary ink is #6e6e6e, not #757575: the contract's value is 4.23:1 on paper.
   - type-chip text uses each accent darkened ~10% (e.g. jot #296eae, not #2d78bd): the raw
     light accents measure 3.98:1–4.40:1 on their own 10% tints. The tint itself and the
     chip icons keep the contract accents; only the label ink is darkened. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/inter-latin.woff2) format('woff2');
}

:root {
    --paper: #f6f5f4;
    --surface: #ffffff;
    --ink: #111111;
    --body: rgba(17, 17, 17, 0.85);
    --graphite: #615d59;
    --tertiary: #6e6e6e;
    --border: rgba(17, 17, 17, 0.08);
    --accent: #2d78bd;
    --link: #276aa8;
    --link-hover: #1f5586;
    --wash: #e9f1f9;
    --night: #08090a;
    --night-card: #1c1f22;
    --night-field: #25292e;
    --night-hairline: #34383d;
    --night-text: #dfe2e6;
    --night-emphasis: #f2f3f5;
    --night-secondary: #8c939a;
    --jot: #2d78bd;
    --todo: #5e8133;
    --log: #ad5c15;
    --account: #865eb1;
    --expense: #8e7002;
    --contact: #a6528a;
    --link-type: #4c816a;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--body);
    font: 400 16px/1.65 var(--sans);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { color: var(--ink); margin: 0; }
p { margin: 0 0 1rem; text-wrap: pretty; }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

code {
    font-family: var(--mono);
    font-size: 0.9375em;
    background: var(--paper);
    border: 1px solid var(--border);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

.content { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---- Header ---- */

.site-header { border-bottom: 1px solid var(--border); }
.site-header .content {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand svg { width: 27px; height: 27px; color: var(--accent); flex: none; }
.brand span { font-size: 16px; font-weight: 700; letter-spacing: -0.025em; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--graphite);
    text-decoration: none;
}
.site-nav a:hover { color: var(--ink); background: rgba(17, 17, 17, 0.04); }
.site-nav a[aria-current="page"] { color: var(--ink); background: rgba(17, 17, 17, 0.04); }

/* ---- Buttons and pills ---- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.btn-primary { background: var(--accent); color: #ffffff; }
.btn-primary:hover { background: #276aa8; color: #ffffff; }
.btn-ghost { background: var(--wash); color: var(--link); }
.btn-ghost:hover { background: #ddebf7; color: var(--link-hover); }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 13px;
    color: var(--graphite);
}
.status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--accent);
    flex: none;
}

/* ---- Landing hero ---- */

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 72px 24px 0;
    text-align: center;
}
.hero h1 {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.03em;
    max-width: 800px;
    text-wrap: balance;
}
.hero .lede {
    font-size: 21px;
    line-height: 1.5;
    color: var(--graphite);
    max-width: 620px;
    margin: 0;
    text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---- Phone illustration (the app's Browse screen, drawn in the app's own night tokens;
        device-internal values follow the app, not the site scale) ---- */

.phone {
    margin-top: 32px;
    width: 340px;
    max-width: 100%;
    background: #000000;
    border-radius: 40px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}
.phone-screen {
    position: relative;
    background: var(--night);
    border-radius: 32px;
    padding: 52px 16px 0;
    height: 596px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}
.p-title { font-size: 22px; font-weight: 700; color: var(--night-emphasis); letter-spacing: -0.02em; }
.p-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    background: var(--night-field);
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--night-secondary);
}
.p-search svg { width: 15px; height: 15px; flex: none; }
.p-chips { display: flex; gap: 6px; }
.p-chip {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}
.p-chip--all { background: var(--night-emphasis); color: var(--night); font-weight: 600; }
/* Night accents inside the phone (the app's dark-canonical values, 8.5:1+ on #08090a). */
.p-chip--jot { color: #6ab3fd; background: rgba(106, 179, 253, 0.13); }
.p-chip--todo { color: #92be62; background: rgba(146, 190, 98, 0.13); }
.p-chip--expense { color: #ceaa3e; background: rgba(206, 170, 62, 0.13); }
.p-chip--account { color: #c198f0; background: rgba(193, 152, 240, 0.13); }
.p-type--jot { color: #6ab3fd; }
.p-type--account { color: #c198f0; }
.p-type--expense { color: #ceaa3e; }
.p-cards { display: flex; flex-direction: column; gap: 8px; }
.p-card {
    background: var(--night-card);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.p-card-top { display: flex; align-items: center; justify-content: space-between; }
.p-type { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.p-type svg { width: 12px; height: 12px; }
.p-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--night-secondary); }
.p-meta svg { width: 11px; height: 11px; }
.p-card-title { font-size: 14px; font-weight: 600; color: var(--night-text); }
.p-secret { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--night-secondary); }
.p-mask {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--night-text);
    background: var(--night-field);
    border-radius: 4px;
    padding: 2px 8px;
}
.p-tabbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62px;
    background: var(--night);
    border-top: 1px solid var(--night-hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 46px;
}
.p-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--night-secondary); }
.p-tab svg { width: 17px; height: 17px; }
.p-tab--active { color: var(--night-text); }
.p-plus {
    position: absolute;
    left: 50%;
    margin-left: -26px;
    bottom: 30px;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: var(--night-emphasis);
    color: var(--night);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* ---- Trust claim band ---- */

.band { margin-top: 80px; background: var(--night); }
.band .content {
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}
.band h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--night-emphasis); }
.band p { font-size: 16px; line-height: 1.65; color: var(--night-text); max-width: 680px; margin: 0; }
/* #6ab3fd is the app's dark-mode azure: 8.6:1 on the night band. */
.band a { color: #6ab3fd; font-size: 14px; font-weight: 500; text-decoration: none; }
.band a:hover { color: #8ec4fd; text-decoration: underline; }

/* ---- Sections and cards ---- */

.section { padding: 80px 0 0; }
.section > .content > h2, .where-text h2 {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.features { display: flex; flex-direction: column; gap: 24px; }
.features-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.card h3 { font-size: 18px; font-weight: 600; line-height: 1.35; }
.card p { font-size: 15px; line-height: 1.6; color: var(--graphite); margin: 0; }
.card--wide { flex-direction: row; align-items: center; gap: 48px; padding: 32px; }
.card--wide > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 10px; }

.steps { display: flex; align-items: center; gap: 16px; flex: none; }
.steps svg.arrow { width: 18px; height: 18px; color: var(--tertiary); flex: none; }
.step-plus {
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex: none;
}
.step-save {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 22px;
    border-radius: 9999px;
    background: var(--ink);
    color: var(--paper);
    font-size: 14px;
    font-weight: 500;
    flex: none;
}

/* Type chips: icon + accent + name, always all three. Label ink is the accent darkened
   ~10% so it clears 4.5:1 on the tint; the icon and tint carry the contract accent. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
}
.chip svg { width: 13px; height: 13px; flex: none; }
.chip--jot { color: #296eae; background: rgba(45, 120, 189, 0.10); }
.chip--jot svg { color: var(--jot); }
.chip--todo { color: #55742e; background: rgba(94, 129, 51, 0.10); }
.chip--todo svg { color: var(--todo); }
.chip--log { color: #a35614; background: rgba(173, 92, 21, 0.10); }
.chip--log svg { color: var(--log); }
.chip--account { color: #815aaa; background: rgba(134, 94, 177, 0.10); }
.chip--account svg { color: var(--account); }
.chip--expense { color: #856902; background: rgba(142, 112, 2, 0.10); }
.chip--expense svg { color: var(--expense); }
.chip--contact { color: #9f4f84; background: rgba(166, 82, 138, 0.10); }
.chip--contact svg { color: var(--contact); }
.chip--link { color: #44745f; background: rgba(76, 129, 106, 0.10); }
.chip--link svg { color: var(--link-type); }
.step-chip { height: 40px; font-size: 14px; padding: 0 16px; }
.step-chip svg { width: 14px; height: 14px; }

.mask-demo {
    margin-top: 4px;
    background: var(--night);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.mask-demo .p-mask { font-size: 14px; }
.mask-lock { display: flex; align-items: center; gap: 10px; }
.mask-lock svg { width: 14px; height: 14px; color: var(--night-secondary); flex: none; }
.mask-hint { font-size: 12px; color: var(--night-secondary); }

.faceid-row { margin-top: 4px; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--tertiary); }
.faceid-row svg { width: 30px; height: 30px; color: var(--ink); flex: none; }

.search-demo {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--ink);
}
.search-demo svg { width: 15px; height: 15px; color: var(--tertiary); flex: none; }
.search-demo .hint { margin-left: auto; font-size: 12px; color: var(--tertiary); }

/* ---- Where your notes are ---- */

.where-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.where-text p { font-size: 16px; }
.where-text p.small { font-size: 15px; color: var(--graphite); margin-bottom: 0; }
.info-rows { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.info-row { display: flex; align-items: center; gap: 14px; padding: 16px; }
.info-row + .info-row { border-top: 1px solid var(--border); }
.info-row svg { width: 20px; height: 20px; color: var(--ink); flex: none; }
.info-row strong { display: block; font-size: 15px; }
.info-row span { font-size: 14px; color: var(--graphite); }

/* ---- Closing ---- */

.closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 104px 24px 96px;
    text-align: center;
}
.closing p {
    font-size: 21px;
    line-height: 1.5;
    color: var(--graphite);
    max-width: 620px;
    margin: 0;
}

/* ---- Document pages (privacy, support) ---- */

.doc-wrap { padding: 72px 24px 80px; }
.doc { max-width: 720px; margin: 0 auto; }
.doc > h1 { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 12px; }
.dateline { font-size: 17px; color: var(--graphite); margin-bottom: 32px; }
.claim {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 32px;
}
.claim p:last-child { margin-bottom: 0; }
.doc h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 64px 0 16px; }
.doc h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 40px 0 12px; }
.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 6px; text-wrap: pretty; }
.doc dl { margin: 0 0 16px; }
.doc dt { color: var(--ink); font-weight: 600; margin-top: 18px; }
.doc dd { margin: 4px 0 0; color: var(--graphite); text-wrap: pretty; }

/* ---- Footer ---- */

.site-footer { margin-top: 80px; border-top: 1px solid var(--border); }
.site-footer .content { padding: 40px 24px 48px; display: flex; flex-direction: column; gap: 16px; }
.footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.site-footer .brand svg { width: 20px; height: 20px; }
.site-footer .brand span { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-size: 14px; font-weight: 500; color: var(--graphite); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.meta { font-size: 13px; color: var(--tertiary); margin: 0; }

/* Landing pages get no extra footer gap after the closing section. */
.site-footer.tight { margin-top: 0; }

/* ---- Small screens ---- */

@media (max-width: 760px) {
    .hero { padding-top: 44px; gap: 18px; }
    .hero h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; }
    .hero .lede { font-size: 18px; line-height: 1.55; }
    .hero-actions { flex-direction: column; align-self: stretch; padding: 0 12px; }
    .hero-actions .btn { height: 46px; font-size: 15px; }
    .phone { margin-top: 20px; }
    .band { margin-top: 56px; }
    .band .content { padding: 56px 24px; }
    .band h2 { font-size: 26px; }
    .band p { font-size: 15px; }
    .section { padding-top: 56px; }
    .section > .content > h2, .where-text h2 { font-size: 26px; }
    .features, .features-grid { gap: 16px; }
    .features-grid { grid-template-columns: minmax(0, 1fr); }
    .card, .card--wide { padding: 22px; }
    .card--wide { flex-direction: column; align-items: stretch; gap: 16px; }
    .steps { gap: 10px; flex-wrap: wrap; }
    .step-plus { width: 40px; height: 40px; font-size: 18px; }
    .where-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .closing { padding: 64px 32px; }
    .closing p { font-size: 18px; line-height: 1.55; }
    .doc-wrap { padding: 48px 20px 64px; }
    .doc > h1 { font-size: 32px; }
    .doc h2 { font-size: 26px; margin-top: 48px; }
    .footer-row { flex-direction: column; align-items: flex-start; }
}