/* Me the Star: design tokens for the SEO layer.
   Source of truth: the app's Tailwind config in index.html (cream, paper, bone,
   forest, gold, ink, warm, mute) plus the landing chrome values (nav, hero,
   footer). Change the brand here, never inside a template.
   Rules baked in (playbook 02-design-system.md): two font families only,
   one accent (gold), no monospace, no gradient fills on cards, sentence-case
   labels, headings within two lines. */

:root {
  /* Surfaces */
  --cream: #F5EFE3;        /* app body background, page bands */
  --bone: #FBF7EE;         /* reading surface, cards */
  --paper: #EAE2D0;        /* table stripes, subtle fills */
  --forest: #2C3E37;
  --forest-deep: #1F2D27;
  --forest-ink: #1B2A23;   /* nav, hero, footer background */
  --forest-soft: #3F564D;

  /* The one accent */
  --gold: #C9A14A;
  --gold-soft: #D9B873;
  --gold-deep: #A88033;    /* eyebrows and links on light surfaces (AA on cream) */
  --gold-light: #E3C079;   /* accent text and buttons on dark surfaces */
  --gold-hover: #EFCF8C;

  /* Text on light surfaces (WCAG AA against cream, as set in the app) */
  --ink: #1A1612;
  --warm: #4A4039;
  --mute: #6F6357;

  /* Text on dark surfaces */
  --on-dark: #F3ECDD;
  --on-dark-soft: #C9BFA8;
  --on-dark-mute: #8A9187;

  /* Lines and shadows */
  --hairline: rgba(28, 38, 32, 0.10);
  --hairline-strong: rgba(28, 38, 32, 0.18);
  --hairline-dark: rgba(227, 192, 121, 0.18);
  --shadow-card: 0 10px 30px rgba(28, 38, 32, 0.08);
  --shadow-lift: 0 18px 44px rgba(28, 38, 32, 0.14);

  /* Type */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 16.5px;
  --text-lg: 18.5px;
  --lh-body: 1.62;
  --lh-tight: 1.08;

  /* Layout */
  --nav-h: 58px;
  --container: 1100px;     /* matches .landing-section-inner in the app */
  --gutter: 28px;
  --rail-w: 236px;
  --rail-gap: clamp(40px, 5vw, 72px);
  --measure: 70ch;

  /* Shape */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
}

/* Added 17 Sep 2026 (design pass 2): values lifted from the app's landing CSS
   so the SEO pages and the app read as one site. */
:root {
  --card: #FCF9F2;                 /* .landing-flow-step / .landing-proof-pair */
  --forest-wedge: #21332B;         /* .landing-wedge background */
  --gold-tint: rgba(201, 161, 74, 0.10);
  --gold-rule: rgba(227, 192, 121, 0.28);
  --radius-lg: 18px;
  --radius-xl: 24px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --shadow-soft: 0 1px 2px rgba(31, 45, 39, 0.04), 0 22px 42px -28px rgba(31, 45, 39, 0.26);
  --shadow-soft-hover: 0 2px 5px rgba(31, 45, 39, 0.06), 0 32px 56px -26px rgba(31, 45, 39, 0.36);
  --shadow-photo: 0 40px 84px -30px rgba(31, 45, 39, 0.45), 0 0 0 1px rgba(31, 45, 39, 0.06);
  --shadow-photo-dark: 0 46px 100px -34px rgba(0, 0, 0, 0.74), 0 0 0 1px rgba(227, 192, 121, 0.2);
  --glow-gold: 0 18px 38px -16px rgba(227, 192, 121, 0.65);
  --lede-dark: #CBC1AB;
  --trust-dark: #98A096;
}

/* Me the Star: the universal shell and the GEO component kit.
   Design pass 2 (17 Sep 2026): every surface, radius, shadow and type size
   below is lifted from the app's landing CSS (index.html) so the SEO pages
   read as the same site as the homepage. One shell owns width, nav, hero,
   the answer band, the two-column body with the frozen TOC rail, related
   links, the CTA band and the footer. Templates only arrange content blocks
   inside .geo-col and never set their own max-width. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 160ms; }
a:hover { color: var(--forest); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; line-height: 1.05; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.2vw, 38px); font-weight: 500; margin: 88px 0 22px; }
h3 { font-size: 22px; font-weight: 500; margin: var(--s-6) 0 var(--s-3); }
p { margin: 0 0 18px; }
p, li { max-width: var(--measure); }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }
.gold { color: var(--gold-light); font-style: italic; font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold-light); color: var(--forest-ink); padding: 8px 14px; border-radius: var(--radius-pill); z-index: 100; }
.skip:focus { left: 12px; }

/* Eyebrow: the app's .landing-section-eyebrow (italic Newsreader with a gold star) */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--gold-deep); }
.eyebrow::before { content: '★'; font-style: normal; font-size: 12px; color: var(--gold); transform: translateY(-1px); }
.eyebrow--dark { color: var(--gold-light); }

/* ---------- Width contract ---------- */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Buttons (mirror .landing-hero-cta) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gold-light); color: var(--forest-ink); font-weight: 600; font-size: 14px;
  padding: 11px 20px; border-radius: var(--radius-pill); text-decoration: none; border: 0; cursor: pointer;
  box-shadow: var(--glow-gold);
  transition: transform 500ms var(--ease), background 160ms, box-shadow 500ms var(--ease);
}
.btn:hover { background: var(--gold-hover); color: var(--forest-ink); transform: translateY(-2px); box-shadow: 0 24px 46px -16px rgba(227, 192, 121, 0.7); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--lg { font-size: 15px; padding: 15px 18px 15px 30px; }
.btn__arrow { width: 30px; height: 30px; border-radius: 50%; background: rgba(27, 42, 35, 0.12); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; transition: transform 500ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.nav .btn { box-shadow: none; padding: 9px 16px; }
.nav .btn:hover { transform: none; box-shadow: none; }
.textlink { color: var(--on-dark-soft); font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(201, 191, 168, 0.4); padding-bottom: 2px; transition: color 140ms, border-color 140ms; }
.textlink:hover { color: var(--on-dark); border-color: var(--gold-light); }

/* ---------- Nav (mirrors .landing-nav in the app) ---------- */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(24, 38, 31, 0.82);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(227, 192, 121, 0.14);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--nav-h); }
.brand {
  font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.025em;
  color: var(--on-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.brand:hover { color: var(--on-dark); }
.brand em { color: var(--gold-light); font-weight: 400; }
.brand .star { color: var(--gold-light); }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link {
  font-size: 14px; font-weight: 500; color: var(--on-dark-soft); text-decoration: none;
  padding: 8px 14px; border-radius: var(--radius-pill); transition: background 120ms, color 120ms; white-space: nowrap;
}
.nav__link:hover { background: rgba(227, 192, 121, 0.12); color: var(--on-dark); }
.nav__link[aria-current="true"] { color: var(--on-dark); }
.nav__toggle { display: none; background: none; border: 0; color: var(--on-dark); font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: var(--radius-pill); cursor: pointer; }
@media (max-width: 860px) {
  .nav__links { display: none; position: absolute; left: 0; right: 0; top: var(--nav-h); flex-direction: column; align-items: stretch; background: var(--forest-ink); padding: var(--s-3) var(--gutter) var(--s-5); border-bottom: 1px solid var(--hairline-dark); }
  .nav__links.is-open { display: flex; }
  .nav__link { padding: 12px 10px; font-size: 16px; }
  .nav__links .btn { margin-top: var(--s-3); justify-content: center; }
  .nav__toggle { display: inline-flex; }
}

/* ---------- Hero (mirrors .landing-hero) ---------- */
.hero { position: relative; background: var(--forest-ink); color: var(--on-dark); padding: 84px 0 96px; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(74% 60% at 90% 8%, rgba(227, 192, 121, 0.18), transparent 60%), radial-gradient(80% 80% at 2% 108%, rgba(63, 86, 77, 0.55), transparent 58%); }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: url('/assets/pattern-stars-moons-cream.jpg'); background-size: 440px; mix-blend-mode: screen; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; align-items: center; }
.hero__grid--split { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.hero__copy { min-width: 0; }
.crumbs { font-size: 12.5px; letter-spacing: 0.01em; color: var(--on-dark-mute); margin-bottom: 28px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li { max-width: none; }
.crumbs li + li::before { content: '/'; margin-right: 8px; color: rgba(138, 145, 135, 0.7); }
.crumbs a { color: var(--on-dark-soft); text-decoration: none; }
.crumbs a:hover { color: var(--on-dark); }
.crumbs [aria-current="page"] { color: var(--on-dark); }
.chip { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--gold-light); margin-bottom: 20px; }
.chip::before { content: '★'; font-style: normal; font-size: 12px; color: var(--gold); transform: translateY(-1px); }
.hero h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.0; letter-spacing: -0.018em; max-width: 16ch; color: #F6EFE0; }
.hero h1 .gold { color: var(--gold-light); }
.hero__grid--split h1 { font-size: clamp(34px, 3.6vw, 46px); max-width: 24ch; }
.lede { font-size: 18px; line-height: 1.62; color: var(--lede-dark); max-width: 488px; margin: 26px 0 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 34px; }
.hero__trust { font-size: 13px; color: var(--trust-dark); letter-spacing: 0.01em; margin: 30px 0 0; }
.hero__art { position: relative; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-photo-dark); }
.hero__art img { width: 100%; height: 100%; aspect-ratio: var(--art-aspect, 1 / 1); object-fit: cover; object-position: 50% 40%; }
.hero__art figcaption { position: absolute; left: 16px; bottom: 14px; right: 16px; font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--on-dark); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
@media (max-width: 900px) {
  .hero { padding: 56px 0 60px; }
  .hero__grid--split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero__art { order: -1; max-width: 420px; }
  .hero h1, .hero__grid--split h1 { max-width: none; }
}
@media (max-width: 600px) { .hero { padding: 40px 0 52px; } .hero h1, .hero__grid--split h1 { font-size: 32px; } .hero__art { max-width: none; } .lede { font-size: 17px; } }

/* Byline (E-E-A-T) */
.byline { display: flex; align-items: center; gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--hairline-dark); font-size: 13.5px; color: var(--on-dark-mute); }
.byline__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--forest-soft); color: var(--gold-light); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; overflow: hidden; flex: none; }
.byline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.byline__name { color: var(--on-dark); font-weight: 500; }
.byline a { color: var(--on-dark); text-decoration: none; }
.byline a:hover { text-decoration: underline; }
.byline__sep { opacity: 0.6; }

/* ---------- Answer band: the frontloaded answer, first thing under the hero ---------- */
.answer { background: var(--cream); border-bottom: 1px solid rgba(28, 38, 32, 0.06); }
.answer__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; padding: 52px 0 56px; }
.answer__copy { min-width: 0; }
.answer p { font-family: var(--font-display); font-size: clamp(20px, 2.1vw, 25px); line-height: 1.42; color: var(--forest-deep); margin: 14px 0 0; max-width: 64ch; letter-spacing: -0.005em; }
.answer__stat { text-align: right; min-width: 170px; padding-left: 44px; border-left: 1px solid var(--hairline-strong); }
.answer__stat-value { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(52px, 6vw, 80px); line-height: 1; color: var(--gold-deep); letter-spacing: -0.02em; }
.answer__stat-label { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-top: 10px; }
@media (max-width: 720px) {
  .answer__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 36px 0 40px; }
  .answer__stat { text-align: left; border-left: 0; padding: 20px 0 0; border-top: 1px solid var(--hairline-strong); }
}

/* ---------- Body: content column + sticky rail ---------- */
.geo-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--rail-gap); padding: 72px 0 120px; }
.geo-col { min-width: 0; counter-reset: sec; }
.geo-col > :first-child { margin-top: 0; }
.geo-col > h2 { position: relative; }
.geo-col > h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 17px; letter-spacing: 0.02em; color: var(--gold-deep); margin-bottom: 14px; }
.geo-col > h2 + p, .geo-col > h2 + .table-wrap, .geo-col > h2 + .steps, .geo-col > h2 + .cards { margin-top: 0; }
.geo-col ul, .geo-col ol { padding-left: 1.25em; margin: 0 0 20px; }
.geo-col li { margin-bottom: 8px; }
.geo-col li::marker { color: var(--gold-deep); }

.geo-toc { min-width: 0; }
.geo-toc__stick { position: sticky; top: calc(var(--nav-h) + 32px); display: flex; flex-direction: column; gap: 28px; }
.rail-label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.rail-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hairline-strong); }
.rail-toc__list li { max-width: none; margin: 0; }
.rail-toc__list a { display: flex; gap: 10px; align-items: baseline; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.35; color: var(--warm); text-decoration: none; transition: color 160ms, border-color 300ms var(--ease); }
.rail-toc__num { font-family: var(--font-display); font-style: italic; font-size: 12.5px; color: var(--mute); min-width: 1.5em; }
.rail-toc__list a:hover { color: var(--ink); }
.rail-toc__list a.geo-toc__active { color: var(--ink); border-left-color: var(--gold); }
.rail-toc__list a.geo-toc__active .rail-toc__num { color: var(--gold-deep); }
.rail-cta { position: relative; overflow: hidden; background: var(--forest-ink); color: var(--on-dark-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.rail-cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 100% 0%, rgba(227, 192, 121, 0.14), transparent 60%); }
.rail-cta__art { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.rail-cta__body { position: relative; padding: 18px 18px 20px; }
.rail-cta strong { color: var(--on-dark); font-family: var(--font-display); font-weight: 500; font-size: 19px; display: block; margin-bottom: 6px; letter-spacing: -0.01em; }
.rail-cta p { font-size: 13px; line-height: 1.5; margin: 0 0 14px; color: var(--on-dark-soft); }
.rail-cta .btn { width: 100%; justify-content: center; box-shadow: none; }
.toc-mobile { display: none; }
@media (max-width: 1080px) {
  .geo-body { grid-template-columns: minmax(0, 1fr); padding: 48px 0 88px; }
  .geo-toc { display: none; }
  .toc-mobile { display: block; margin-bottom: 40px; }
  .toc-mobile summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); padding: 14px 0; border-top: 1px solid var(--hairline-strong); border-bottom: 1px solid var(--hairline-strong); }
  .toc-mobile summary::-webkit-details-marker { display: none; }
  .toc-mobile summary::after { content: '+'; font-family: var(--font-display); font-size: 20px; color: var(--gold-deep); letter-spacing: 0; }
  .toc-mobile[open] summary::after { content: '−'; }
  .toc-mobile ol { margin: 0; padding: 10px 0 12px; list-style: none; border-bottom: 1px solid var(--hairline-strong); }
  .toc-mobile li { padding: 7px 0; font-size: 15px; max-width: none; }
  .toc-mobile a { color: var(--warm); text-decoration: none; }
}

/* ---------- StatCallout: one verified number, wedge style (numeral on a gold rule) ---------- */
.stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 22px 0 6px; margin: 36px 0 32px; border-top: 1px solid var(--gold-rule); }
.stat__value { font-family: var(--font-display); font-weight: 300; font-size: 56px; line-height: 1; color: var(--gold-deep); letter-spacing: -0.02em; white-space: nowrap; }
.stat__label { font-size: 15px; line-height: 1.5; color: var(--warm); max-width: none; }
.stat__source { display: block; font-size: 12px; color: var(--mute); margin-top: 6px; }
.stat__source a { color: var(--mute); }
/* A strip of stats on the dark wedge surface (comparison proof) */
.stat-strip { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 28px 0 8px; padding: 40px 40px 44px; background: var(--forest-wedge); color: var(--on-dark); border-radius: var(--radius-xl); }
.stat-strip::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 100% 0%, rgba(227, 192, 121, 0.12), transparent 60%); }
.stat-strip .stat { position: relative; display: block; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--gold-rule); }
.stat-strip .stat__value { color: var(--gold-light); font-size: clamp(30px, 3vw, 38px); white-space: normal; line-height: 1.05; margin-bottom: 14px; display: block; }
.stat-strip .stat__label { color: #BFB6A1; font-size: 14.5px; }
.stat-strip .stat__source, .stat-strip .stat__source a { color: var(--on-dark-mute); }
@media (max-width: 760px) { .stat-strip { grid-template-columns: 1fr; gap: 0; padding: 12px 24px 28px; } .stat-strip .stat { margin-top: 24px; } }
@media (max-width: 520px) { .stat { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- Data table: real HTML rows, editorial rules, scrolls inside its own box on mobile ---------- */
.table-wrap { overflow-x: auto; margin: 28px 0 12px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
caption { text-align: left; font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; padding: 0 0 16px; color: var(--ink); }
th, td { text-align: left; vertical-align: top; padding: 14px 16px; border-top: 1px solid var(--hairline); }
thead th { font-family: var(--font-text); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); border-top: 0; border-bottom: 1px solid var(--hairline-strong); padding-top: 4px; }
tbody th { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--ink); padding-right: 24px; white-space: normal; }
td { color: var(--warm); line-height: 1.5; }
tr:first-child td, tr:first-child th { border-top: 0; }
th.us, td.us { background: var(--gold-tint); color: var(--ink); }
thead th.us { color: var(--gold-deep); }
td.us { font-weight: 500; }
.pending { display: inline-block; font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--mute); background: var(--paper); border-radius: var(--radius-pill); padding: 2px 10px; }
.table-note { font-size: 13px; color: var(--mute); margin: 0 0 var(--s-5); font-style: italic; font-family: var(--font-display); font-size: 15px; }

/* ---------- FAQ: the app's Yearbook list (numeral, question, gold plus) ---------- */
.faq { border-top: 1px solid var(--hairline-strong); margin: 24px 0 0; counter-reset: faq; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 20px 0; font-family: var(--font-display); font-size: 21px; font-weight: 400; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; transition: color 160ms; }
.faq summary:hover { color: var(--forest); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { counter-increment: faq; content: counter(faq, decimal-leading-zero); font-size: 13px; font-style: italic; color: var(--gold-deep); letter-spacing: 0.02em; }
.faq summary::after { content: '+'; color: var(--gold-deep); font-family: var(--font-text); font-size: 22px; font-weight: 300; line-height: 1; align-self: center; transition: transform 500ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { padding: 0 0 24px 2.4em; color: var(--warm); }
.faq .faq__a p { margin-left: 12px; }
.faq .faq__a p:last-child { margin-bottom: 0; }
@media (max-width: 520px) { .faq summary { grid-template-columns: 2em minmax(0, 1fr) auto; font-size: 19px; } .faq .faq__a { padding-left: 0; } .faq .faq__a p { margin-left: 0; } }

/* ---------- Quote: third-party only (mirrors .landing-origin-quote) ---------- */
.quote { margin: 40px 0; padding: 0 0 0 26px; border-left: 2px solid var(--gold); }
.quote p { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.45; color: var(--forest-deep); margin: 0 0 14px; }
.quote cite { font-style: normal; font-size: 13px; letter-spacing: 0.04em; color: var(--mute); }

/* ---------- Steps (mirror .landing-flow-step) ---------- */
.steps { list-style: none; padding: 0; margin: 28px 0 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: none; }
.step { display: flex; flex-direction: column; margin: 0; max-width: none; padding: 24px 24px 24px; background: var(--card); border: 1px solid rgba(31, 45, 39, 0.06); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft-hover); }
.step__num { width: 32px; height: 32px; border-radius: 50%; background: var(--forest-deep); color: var(--cream); font-family: var(--font-display); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.step h3 { font-size: 20px; font-weight: 500; margin: 0 0 6px; }
.step p { font-size: 14.5px; line-height: 1.55; color: #5A4F44; margin: 0; }
.step__art { margin-top: auto; padding-top: 22px; }
.step__art img { border-radius: 12px; border: 1px solid rgba(28, 38, 32, 0.06); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--cream); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Spreads: real illustrated pages (soft photo treatment) ---------- */
.spreads { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 32px 0 24px; }
.spread { margin: 0; }
.spread img { width: 100%; aspect-ratio: 1408 / 768; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow-photo); }
.spread figcaption { font-family: var(--font-display); font-style: italic; font-size: 15px; line-height: 1.45; color: var(--mute); padding: 14px 4px 0; }
/* Likeness pairs (mirror .landing-proof-pair): the sheet on the left, the finished page on the right */
.pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin: 32px 0 24px; }
.pair { margin: 0; background: var(--card); border: 1px solid rgba(31, 45, 39, 0.07); border-radius: 20px; padding: 20px; box-shadow: 0 1px 2px rgba(31, 45, 39, 0.04), 0 24px 46px -28px rgba(31, 45, 39, 0.32); transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.pair:hover { transform: translateY(-4px); box-shadow: 0 2px 5px rgba(31, 45, 39, 0.06), 0 34px 60px -26px rgba(31, 45, 39, 0.42); }
.pair__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.pair__fig { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pair__tile { aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(31, 45, 39, 0.06), 0 10px 20px -12px rgba(31, 45, 39, 0.38); }
.pair__tile img { width: 100%; height: 100%; object-fit: cover; }
.pair__cap { text-align: center; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
.pair__arrow { width: 34px; height: 34px; border-radius: 50%; background: rgba(201, 161, 74, 0.15); color: var(--gold-deep); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.pair figcaption { font-family: var(--font-display); font-style: italic; font-size: 15px; line-height: 1.45; color: var(--mute); padding: 16px 2px 0; }

/* ---------- Two columns for "when to choose" (the honesty contract) ---------- */
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin: 28px 0 8px; }
.choose { padding-top: 22px; border-top: 1px solid var(--hairline-strong); }
.choose--us { border-top-color: var(--gold); }
.choose h3 { margin: 0 0 14px; font-size: 22px; }
.choose ul { margin: 0; padding-left: 1.1em; }
.choose li { font-size: 15.5px; color: var(--warm); }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Sources and inline citations ---------- */
.sources { font-size: 13px; line-height: 1.55; color: var(--mute); margin: 64px 0 0; padding-top: 20px; border-top: 1px solid var(--hairline-strong); }
.sources strong { font-family: var(--font-text); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.sources ol { padding-left: 1.4em; margin: 10px 0 0; }
.sources li { margin-bottom: 5px; max-width: none; }
.sources li::marker { color: var(--mute); }
.cite { font-size: 0.72em; vertical-align: super; text-decoration: none; color: var(--gold-deep); margin-left: 2px; }

/* ---------- Author note ---------- */
.author-note { display: flex; gap: 16px; align-items: flex-start; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--hairline); font-size: 15px; line-height: 1.55; color: var(--warm); }
.author-note .byline__avatar { flex: none; width: 44px; height: 44px; background: var(--forest); }
.author-note strong { display: block; margin-bottom: 3px; font-family: var(--font-display); font-size: 17px; font-weight: 500; }

/* ---------- Related / cluster links: last in the column ---------- */
.related { margin: 80px 0 0; }
.related h2 { font-size: 26px; margin: 0 0 22px; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.related li { margin: 0; max-width: none; }
.related a { display: block; height: 100%; padding: 20px 22px 22px; background: var(--card); border: 1px solid rgba(31, 45, 39, 0.06); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-soft); transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.related a:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft-hover); color: var(--ink); }
.related__title { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.related__note { display: block; font-size: 13.5px; line-height: 1.45; color: var(--mute); margin-top: 6px; }
@media (max-width: 560px) { .related ul { grid-template-columns: 1fr; } }

/* ---------- Index grids (folder hubs) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin: 28px 0; }
.card { background: var(--card); border: 1px solid rgba(31, 45, 39, 0.06); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft-hover); color: var(--ink); }
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card__body { padding: 18px 20px 22px; }
.card__title { font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.card__note { font-size: 13.5px; line-height: 1.45; color: var(--mute); margin-top: 6px; }

/* ---------- Founders (about) ---------- */
.founder { margin: 28px 0; padding: 22px 0 0; border-top: 1px solid var(--hairline-strong); }
.founder h3 { margin: 0 0 2px; }
.founder__role { font-size: 13.5px; color: var(--mute); margin-bottom: 10px; }
.founder__links { font-size: 13.5px; margin: 0; }

/* ---------- CTA band (mirrors the app's footer headline block) ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--forest-ink); color: var(--on-dark-soft); }
.cta-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(74% 60% at 90% 8%, rgba(227, 192, 121, 0.16), transparent 60%), radial-gradient(80% 80% at 2% 108%, rgba(63, 86, 77, 0.5), transparent 58%); }
.cta-band::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: url('/assets/pattern-stars-moons-cream.jpg'); background-size: 440px; mix-blend-mode: screen; }
.cta-band__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: center; padding: 96px 0 100px; }
.cta-band h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.014em; color: #F6EFE0; margin: 0; max-width: 18ch; }
.cta-band__trust { font-size: 13px; color: var(--trust-dark); margin: 22px 0 0; }
.cta-band .btn { margin-top: 30px; }
.cta-band__art { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-photo-dark); position: relative; }
.cta-band__art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
.cta-band__art figcaption { position: absolute; left: 16px; bottom: 14px; font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--on-dark); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
@media (max-width: 860px) { .cta-band__grid { grid-template-columns: 1fr; gap: 40px; padding: 64px 0 72px; } .cta-band h2 { max-width: none; } }

/* ---------- Footer (mirrors .landing-footer) ---------- */
.footer { background: var(--forest-ink); color: var(--on-dark-soft); padding: 52px 0 56px; border-top: 1px solid var(--hairline-dark); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.footer__brand p { font-size: 12.5px; color: var(--on-dark-mute); margin: 10px 0 0; max-width: 26ch; }
.footer h3 { font-family: var(--font-text); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-mute); margin: 0 0 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin: 0 0 9px; max-width: none; }
.footer a { font-size: 13.5px; color: var(--on-dark-soft); text-decoration: none; transition: color 120ms; }
.footer a:hover { color: var(--on-dark); }
.footer__legal { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--hairline-dark); font-size: 12px; color: var(--on-dark-mute); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Scroll reveal (class added by seo.js; no JS means everything is simply visible) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Focus and motion ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}