/* ── Self-hosted webfonts ──────────────────────────────────
   Newsreader + Inter, both SIL OFL 1.1, served from this origin. No request ever leaves
   for fonts.googleapis.com / fonts.gstatic.com — a visitor's IP is never handed to a
   third party, so this page needs no consent gate at all. Provenance + the two OFL 1.1
   license texts live in fonts/ (see fonts/README.md). Subsets and unicode-ranges match
   what Google Fonts serves for latin / latin-ext.
   ───────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Colors/type hand-matched to the app's design tokens
   (apps/web/src/design-system/tokens.ts) — a visual match, not a shared pipeline.
   Radii follow the app's 4 / 6 / 9 scale: tags(4) · controls(6) · panels(9). */
:root {
  --paper: #f6f1e8;
  --paper-2: #fbf8f2;
  --surface: #fffdfa;
  --ink: #211f1b;
  --secondary: #59544b;
  --muted: #716b61;
  --subtle: #968b7f;
  --line: #d9d1c3;
  --line-strong: #cbc1b3;
  --accent: #7b3438;
  --accent-100: #ead9d7;
  --accent-300: #cba09d;
  --accent-700: #682b2f;
  --accent-800: #4f2124;
  --sage: #667566;
  --sage-soft: #dce3d8;
  --font-heading: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow-soft: 0 1px 2px rgba(25,22,18,.05), 0 12px 40px rgba(25,22,18,.07);
  --shadow-elevated: 0 20px 60px rgba(42,34,24,.14);
  --radius-tag: 4px;
  --radius-control: 6px;
  --radius-panel: 9px;
  /* Paper-texture radii (2px/3px) are an INTENTIONAL divergence from the app's 4/6/9
     scale: manuscript sheets, notes, and highlighter marks read as paper, not as UI
     chrome, and a 4px+ corner reads like a card. Earned exception — do not "fix". */
  --radius-paper: 3px;
  --radius-paper-tight: 2px;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  border-radius: var(--radius-control); font-family: var(--font-body); font-weight: 600; font-size: 14px;
  transition: top .15s ease;
}
.skip-link:focus { top: 16px; }

/* Focus rings: oxblood on paper (≥3:1 against every light background here), paper on any
   dark surface (.on-dark — the final CTA and the footer). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-paper); }
.on-dark :focus-visible { outline-color: var(--paper); }

.eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-700);
  margin: 0 0 16px;
}
.on-dark .eyebrow { color: var(--accent-300); }

/* ── Header ─────────────────────────────────────────────── */
header {
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.nav {
  height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 4px; height: 24px; border-radius: var(--radius-paper-tight); background: var(--accent); flex-shrink: 0; }
.brand-word { font-family: var(--font-heading); font-size: 19px; font-weight: 600; color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-signin { font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--secondary); text-decoration: none; white-space: nowrap; }
.nav-signin:hover { color: var(--ink); }

@media (max-width: 359px) {
  .nav-actions { gap: 10px; }
  .nav-signin, .nav-actions .btn { white-space: nowrap; }
  .nav-actions .btn { padding-inline: 12px; font-size: 13.5px; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; text-decoration: none;
  border-radius: var(--radius-control); border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn-primary { background: var(--accent); color: var(--paper-2); padding: 10px 20px; font-size: 14.5px; box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--accent-700); }
.btn-primary:active { background: var(--accent-800); transform: translateY(1px); }
.btn-primary.large { padding: 14px 26px; font-size: 16px; }
.btn-quiet { background: transparent; border-color: var(--line-strong); color: var(--ink); padding: 14px 26px; font-size: 16px; }
.btn-quiet:hover { border-color: var(--ink); background: var(--paper-2); }
.btn-quiet:active { background: var(--accent-100); }
.btn-invert { background: var(--paper); color: var(--ink); padding: 14px 26px; font-size: 16px; }
.btn-invert:hover { background: var(--surface); }

@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  padding-block: 76px 96px;
  display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 1fr; padding-block: 92px 112px; }
}
.hero h1 {
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1.06; letter-spacing: -.02em; max-width: 14ch;
}
.hero-sub {
  font-size: 18px; line-height: 1.7; color: var(--secondary);
  max-width: 46ch; margin-top: 22px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-fine { font-size: 13px; color: var(--muted); margin-top: 22px; line-height: 1.6; }

/* Hero visual: a manuscript sheet with an overlapping editorial note. */
.hero-visual { position: relative; min-height: 380px; }
.ms-sheet {
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-elevated); border-radius: var(--radius-paper);
  padding: 40px 34px 32px; transform: rotate(1.1deg);
  max-width: 420px; margin-inline: auto;
}
.ms-sheet .chapter-mark {
  font-family: var(--font-heading); font-style: italic; color: var(--muted);
  text-align: center; font-size: 13px; letter-spacing: .04em; margin-bottom: 22px;
}
.ms-sheet .ms-text { font-family: var(--font-heading); font-size: 15.5px; line-height: 1.85; color: var(--secondary); }
.ms-sheet .ms-text p { margin-bottom: 14px; }
.ms-sheet .ms-text p:last-child { margin-bottom: 0; }
.ms-flag { background: var(--accent-100); padding: 1px 2px; border-radius: var(--radius-paper-tight); }
.ms-note {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-elevated); border-radius: var(--radius-paper);
  padding: 20px 22px; max-width: 300px;
  margin-top: -46px; margin-left: auto; margin-right: 6%;
  transform: rotate(-1.4deg); position: relative;
}
@media (min-width: 900px) {
  .ms-note { margin-top: -58px; }
}
.ms-note .cat { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-700); }
.ms-note .ms-note-title { font-family: var(--font-heading); font-size: 17px; line-height: 1.4; margin: 8px 0 6px; }
.ms-note .ms-note-body { font-size: 13px; color: var(--secondary); line-height: 1.55; }
.marginalia {
  font-family: var(--font-heading); font-style: italic; color: var(--accent-700);
  font-size: 13px; position: absolute; top: 2px; right: 2%; opacity: .8;
  transform: rotate(-4deg); display: none; z-index: 1;
}
@media (min-width: 900px) { .marginalia { display: block; } }

/* ── Section rhythm ─────────────────────────────────────── */
section.band { padding-block: 76px; }
section.band.alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { max-width: 700px; margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.35rem); letter-spacing: -.015em; line-height: 1.1; }
.section-head p.lede {
  font-family: var(--font-heading); font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.55; color: var(--secondary); margin-top: 18px;
}
.section-head p.body-copy { font-size: 15.5px; line-height: 1.75; color: var(--secondary); margin-top: 16px; }

/* ── Inside FirstRead — three stacked, always-visible blurbs (no JS, no tabs) ── */
.showcase-stack { display: grid; gap: 64px; }
.showcase-block { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 850px) { .showcase-block { grid-template-columns: .9fr 1.2fr; align-items: start; } }

.feature-kicker {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-700);
  margin-bottom: 10px;
}
.showcase-lede h3 { font-size: 24px; margin-bottom: 14px; max-width: 18ch; }
.showcase-lede p { font-size: 15px; color: var(--secondary); line-height: 1.7; margin-bottom: 22px; }
.showcase-lede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.showcase-lede li { font-size: 14px; color: var(--secondary); padding-left: 18px; position: relative; line-height: 1.6; }
.showcase-lede li::before { content: '—'; position: absolute; left: 0; color: var(--accent-700); }

/* The visual is a decorative mockup (aria-hidden) — the adjacent list carries the same
   information. Its two-column split is deliberately raised ABOVE .showcase-block's own
   850px split so the manuscript column never gets squeezed to ~180px in between. */
.showcase-visual {
  display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: var(--radius-panel);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow-soft);
}
@media (min-width: 1080px) { .showcase-visual:not(.full) { grid-template-columns: 1fr 1fr; } }
.showcase-ms { padding: 26px 24px; border-bottom: 1px solid var(--line); }
@media (min-width: 1080px) { .showcase-ms { border-bottom: none; border-right: 1px solid var(--line); } }
.showcase-ms .chapter-mark { font-family: var(--font-heading); font-style: italic; color: var(--muted); font-size: 12px; margin-bottom: 16px; }
.showcase-ms .ms-text { font-family: var(--font-heading); font-size: 14.5px; line-height: 1.85; color: var(--secondary); }
.showcase-ms .ms-text p { margin-bottom: 12px; }
.showcase-ms .ms-text p:last-child { margin-bottom: 0; }
.showcase-ms .ms-flag { background: var(--accent-100); padding: 1px 2px; border-radius: var(--radius-paper-tight); }
.showcase-ms del {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  text-decoration: line-through; text-decoration-color: var(--accent-700); color: var(--secondary);
}
.showcase-ms ins { background: var(--sage-soft); text-decoration: none; color: var(--ink); }

.showcase-side { padding: 26px 24px; }
.showcase-side h4 { font-family: var(--font-heading); font-size: 17px; margin-bottom: 4px; }
.finding-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }
.finding-kind:first-of-type { margin-top: 18px; }
.finding { padding: 12px 0; border-top: 1px solid var(--line); }
.finding:first-of-type { border-top: none; padding-top: 0; }
.finding .cat { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-700); }
.finding .finding-title { font-size: 14.5px; font-weight: 600; margin: 4px 0 4px; line-height: 1.4; }
.finding p { font-size: 13px; color: var(--secondary); line-height: 1.6; }

.suggestion-card { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-control); padding: 16px 18px; margin-top: 4px; }
.suggestion-card .cat { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-700); }
.suggestion-card p.why { font-size: 13px; color: var(--secondary); line-height: 1.6; margin-top: 8px; }
.suggestion-actions { display: flex; gap: 8px; margin-top: 14px; }
/* Static picture of the in-app controls — plain spans, never focusable/disabled buttons. */
.pill {
  display: inline-block; font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: var(--radius-control); border: 1px solid var(--line-strong);
  background: var(--paper-2); color: var(--secondary);
}
.pill.accept { background: var(--sage); border-color: var(--sage); color: #fff; }

.chat-turn { margin-bottom: 16px; }
.chat-turn:last-child { margin-bottom: 0; }
.chat-role { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.chat-turn.editor .chat-role { color: var(--accent-700); }
.chat-bubble { font-size: 14px; line-height: 1.65; color: var(--secondary); }
.chat-turn.editor .chat-bubble { color: var(--ink); }

/* ── How it works (4-step grid) ────────────────────────── */
.steps { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  padding: 28px 22px 28px 0; border-bottom: 1px solid var(--line); position: relative;
}
/* Any step that is NOT in grid column 1 needs left padding to clear the divider it sits
   against — at 2-up that's the even children, at 4-up it's everything but the first. */
@media (min-width: 700px) {
  .step:nth-child(even) { padding-left: 22px; }
  .step:nth-child(odd) { border-right: 1px solid var(--line); }
}
@media (min-width: 1000px) {
  .step { border-right: 1px solid var(--line); padding-left: 22px; }
  .step:first-child { padding-left: 0; }
  .step:last-child { border-right: none; }
}
.step .step-num { font-family: var(--font-heading); font-size: 13px; color: var(--accent-700); letter-spacing: .02em; margin-bottom: 20px; }
.step h3 { font-size: 16px; margin-bottom: 8px; }
.step p { font-size: 13.5px; color: var(--secondary); line-height: 1.65; }

/* ── Trust checklist ───────────────────────────────────── */
.trust-grid { display: grid; gap: 40px; }
@media (min-width: 850px) { .trust-grid { grid-template-columns: .85fr 1.15fr; align-items: start; } }
.trust-heading { font-size: clamp(1.6rem, 2.6vw, 2.35rem); letter-spacing: -.015em; line-height: 1.1; max-width: 12ch; }
.trust-lede {
  font-family: var(--font-heading); font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.55; color: var(--secondary); margin-top: 0;
}
.trust-list { border-top: 1px solid var(--line); margin-top: 18px; }
.trust-row { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--secondary); }
.trust-row .check { color: var(--sage); font-weight: 900; }
.trust-row b { color: var(--ink); }
.trust-fine { font-size: 13px; color: var(--muted); margin-top: 18px; }
.trust-fine a { color: var(--accent-700); font-weight: 600; text-decoration: none; }
.trust-fine a:hover { text-decoration: underline; }

/* ── Pricing ────────────────────────────────────────────── */
/* 3-up only once each card is wide enough for its five-bullet plan list. */
.pricing-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 940px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.price-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel);
  padding: 30px 26px; display: flex; flex-direction: column; box-shadow: var(--shadow-soft);
  position: relative;
}
.price-card.featured { border-color: var(--accent); box-shadow: var(--shadow-elevated); }
.price-card .badge {
  position: absolute; top: -12px; left: 26px; background: var(--accent); color: var(--paper-2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-tag);
}
.price-card .plan-name { font-family: var(--font-heading); font-size: 21px; margin-bottom: 2px; }
.price-card .plan-tagline { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.price-card .plan-price { font-family: var(--font-heading); font-size: 32px; color: var(--ink); }
.price-card .plan-price .period { font-family: var(--font-body); font-size: 13.5px; color: var(--muted); font-weight: 500; }
.price-card .plan-bullets { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 10px; flex-grow: 1; }
.price-card .plan-bullets li { font-size: 13.5px; color: var(--secondary); line-height: 1.55; padding-left: 20px; position: relative; }
.price-card .plan-bullets li::before { content: '\2713'; position: absolute; left: 0; color: var(--sage); font-weight: 700; }
.price-card .btn { width: 100%; }
.pricing-fine { text-align: center; font-size: 13px; color: var(--muted); margin-top: 30px; }
.pricing-fine a { color: var(--accent-700); font-weight: 600; text-decoration: none; }
.pricing-fine a:hover { text-decoration: underline; }

/* ── Final CTA (dark) ─────────────────────────────────── */
.final-cta { background: var(--ink); color: var(--paper); text-align: center; padding-block: 100px; }
.final-cta h2 { color: var(--paper); font-size: clamp(1.9rem, 4vw, 2.85rem); letter-spacing: -.02em; line-height: 1.08; max-width: 32ch; margin-inline: auto; }
.final-cta p { color: color-mix(in srgb, var(--paper) 72%, transparent); max-width: 50ch; margin: 18px auto 0; font-size: 15.5px; line-height: 1.7; }
.final-cta .hero-ctas { justify-content: center; margin-top: 30px; }
.final-cta .hero-fine { color: color-mix(in srgb, var(--paper) 55%, transparent); text-align: center; }

/* ── Footer ─────────────────────────────────────────────── */
footer { background: var(--ink); color: var(--subtle); border-top: 1px solid #39352f; }
.footer-row { min-height: 76px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; padding-block: 20px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; color: inherit; }
.footer-links a:hover { color: var(--paper); }