/* GrantPost v2 — Design Tokens
   Palette: deep navy ink + warm cream paper + single terracotta accent
   Type: Fraunces (editorial serif) + Satoshi (precise sans) */

:root, [data-theme='light'] {
  --color-bg:            #f4efe6;
  --color-paper:         #faf6ee;
  --color-surface:       #ffffff;
  --color-surface-offset:#ece4d6;
  --color-divider:       #ddd3c2;
  --color-border:        #d2c7b3;

  --color-ink:           #14213a;
  --color-text:          #1b2740;
  --color-text-muted:    #5c6679;
  --color-text-faint:    #9aa0ac;
  --color-text-inverse:  #f6f1e7;

  --color-accent:        #c75b35;
  --color-accent-hover:  #ad4827;
  --color-accent-active: #8f3a1f;
  --color-accent-soft:   rgba(199,91,53,0.16);
  --color-accent-tint:   #f0d9cd;

  --viz-1: #c75b35;
  --viz-2: #14213a;
  --viz-3: #6f7d5a;
  --viz-4: #c69a3f;
  --viz-5: #8a8170;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16,1,0.3,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --shadow-sm: 0 1px 2px rgba(20,33,58,0.06);
  --shadow-md: 0 6px 24px rgba(20,33,58,0.08);
  --shadow-lg: 0 24px 60px rgba(20,33,58,0.14);

  --content-narrow: 680px;
  --content-default: 1020px;
  --content-wide: 1240px;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.2vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --text-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.3vw, 2.3rem);
  --text-2xl:  clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --text-3xl:  clamp(2.6rem, 1.2rem + 5vw, 5.2rem);
  --text-hero: clamp(3rem, 0.6rem + 8vw, 7.5rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;
}

[data-theme='dark'] {
  --color-bg:            #0b0f1a;
  --color-paper:         #111625;
  --color-surface:       #161c2b;
  --color-surface-offset:#1d2435;
  --color-divider:       #2a3145;
  --color-border:        #313a52;

  --color-ink:           #f1ece1;
  --color-text:          #e7e3d8;
  --color-text-muted:    #9aa3b6;
  --color-text-faint:    #5f6b82;
  --color-text-inverse:  #0b0f1a;

  --color-accent:        #e07a4f;
  --color-accent-hover:  #ee8c61;
  --color-accent-active: #f4a07b;
  --color-accent-soft:   rgba(224,122,79,0.2);
  --color-accent-tint:   #2e201a;

  --viz-1:#e07a4f; --viz-2:#7d93c4; --viz-3:#9bb07e; --viz-4:#dcb45c; --viz-5:#a99e88;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#0b0f1a; --color-paper:#111625; --color-surface:#161c2b;
    --color-surface-offset:#1d2435; --color-divider:#2a3145; --color-border:#313a52;
    --color-ink:#f1ece1; --color-text:#e7e3d8; --color-text-muted:#9aa3b6;
    --color-text-faint:#5f6b82; --color-text-inverse:#0b0f1a;
    --color-accent:#e07a4f; --color-accent-hover:#ee8c61; --color-accent-active:#f4a07b;
    --color-accent-soft:rgba(224,122,79,0.2); --color-accent-tint:#2e201a;
    --viz-1:#e07a4f; --viz-2:#7d93c4; --viz-3:#9bb07e; --viz-4:#dcb45c; --viz-5:#a99e88;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
  scroll-padding-top: 5rem;
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

#grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.038; mix-blend-mode: multiply;
}
[data-theme='dark'] #grain, :root:not([data-theme]) #grain { mix-blend-mode: screen; opacity: 0.045; }

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.08; }
p, li, figcaption { text-wrap: pretty; max-width: 72ch; }

::selection { background: var(--color-accent-soft); color: var(--color-text); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }

a, button, [role='button'], input, textarea, select {
  transition: color var(--transition-interactive), background var(--transition-interactive),
    border-color var(--transition-interactive), box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.wrap { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
section { position: relative; }
.section-pad { padding-block: clamp(4.5rem, 10vw, 9rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow::before { content:""; width: 1.75rem; height: 1px; background: currentColor; opacity:.7; }
.eyebrow.no-rule::before { display:none; }

h1,h2,h3 { font-family: var(--font-display); font-weight: 400; color: var(--color-ink); letter-spacing: -0.01em; }
.serif-display { font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto; }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  padding: 0.95rem 1.6rem; border-radius: var(--radius-full);
  text-decoration: none; line-height: 1; white-space: nowrap;
  transition: transform 200ms var(--ease-spring), background var(--transition-interactive),
    box-shadow var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive);
  will-change: transform;
}
.btn-primary { background: var(--color-accent); color: #fff; box-shadow: 0 6px 20px rgba(199,91,53,0.28); }
.btn-primary:hover { background: var(--color-accent-hover); box-shadow: 0 12px 36px rgba(199,91,53,0.36); }
.btn-primary:active { transform: translateY(1px) scale(0.99); }
.btn-ghost { background: transparent; color: var(--color-ink); border: 1px solid var(--color-border); }
.btn-ghost:hover { border-color: var(--color-ink); background: var(--color-surface-offset); }
.btn .arrow { transition: transform var(--transition-interactive); display: inline-block; }
.btn:hover .arrow { transform: translateX(3px); }

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) clamp(1.25rem, 4vw, 3rem);
  transition: background var(--transition-interactive), border-color var(--transition-interactive), backdrop-filter var(--transition-interactive);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.25);
  border-bottom: 1px solid var(--color-divider);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--color-ink); }
.brand svg { width: 26px; height: 26px; color: var(--color-accent); }
.brand-name { font-family: var(--font-display); font-size: 1.32rem; font-weight: 500; letter-spacing: -0.02em; color: var(--color-ink); }
.header-nav { display: flex; align-items: center; gap: var(--space-8); }
.header-nav a.navlink {
  position: relative; font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; font-weight: 500; padding: 0.25rem 0;
}
.header-nav a.navlink::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--color-accent); transition: width var(--transition-interactive); }
.header-nav a.navlink:hover { color: var(--color-ink); }
.header-nav a.navlink:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full); color: var(--color-text-muted);
  border: 1px solid transparent; transition: transform 200ms var(--ease-spring);
}
.theme-toggle:hover { color: var(--color-ink); background: var(--color-surface-offset); transform: rotate(12deg); }
@media (max-width: 860px) { .header-nav a.navlink { display: none; } }

/* Hero */
.hero { padding-top: clamp(8rem, 14vw, 11rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.hero-headline {
  font-size: var(--text-3xl); line-height: 0.98; letter-spacing: -0.025em; color: var(--color-ink);
  font-weight: 380;
}
.hero-headline em { font-style: italic; color: var(--color-accent); }
.hero-headline .line { display: block; overflow: hidden; }
/* Hero — words visible by default so a static screenshot still reads fully */
.hero-headline .line .word { display: inline-block; opacity: 1; transform: translateY(0); }
.js .hero-headline .line .word { transform: translateY(110%); opacity: 0; }
.js .hero-headline.animate .line .word { animation: word-rise 1.05s var(--ease-out) forwards; }
.js .hero-headline .line:nth-child(1) .word:nth-child(1) { animation-delay: 0.12s; }
.js .hero-headline .line:nth-child(1) .word:nth-child(2) { animation-delay: 0.20s; }
.js .hero-headline .line:nth-child(2) .word:nth-child(1) { animation-delay: 0.28s; }
.js .hero-headline .line:nth-child(2) .word:nth-child(2) { animation-delay: 0.36s; }
.js .hero-headline .line:nth-child(3) .word:nth-child(1) { animation-delay: 0.48s; }
.js .hero-headline .line:nth-child(3) .word:nth-child(2) { animation-delay: 0.56s; }
@keyframes word-rise {
  to { transform: translateY(0); opacity: 1; }
}
.hero-sub { margin-top: var(--space-6); font-size: var(--text-lg); color: var(--color-text-muted); max-width: 42ch; line-height: 1.5; }
.hero-cta-row { margin-top: var(--space-8); display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.hero-note { font-size: var(--text-sm); color: var(--color-text-muted); display:flex; align-items:center; gap:.5rem; }
.hero-note .dot { width:7px;height:7px;border-radius:50%;background:var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }

.letter-card {
  position: relative; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem); overflow: hidden; transform-style: preserve-3d;
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.letter-card:hover { transform: translateY(-6px) rotateX(2deg); box-shadow: 0 32px 72px rgba(20,33,58,0.18); }
.letter-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 60% 20%, rgba(199,91,53,0.14), transparent 45%);
}
.letter-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-5); }
.letter-stamp {
  display:flex; align-items:center; gap:.55rem; font-family: var(--font-body); font-size: var(--text-xs);
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--color-accent);
}
.letter-stamp svg { width:18px; height:18px; }
.letter-date { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.letter-body p {
  font-family: var(--font-display); font-weight: 380; color: var(--color-text); line-height: 1.5;
  margin-bottom: var(--space-3); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
}
.letter-body .salutation { color: var(--color-ink); }
/* Compose letter tokens — visible by default, JS hides then types them */
.tok { transition: opacity .45s var(--ease-out); opacity: 1; }
.js .tok { opacity: 0; }
.js .tok.visible { opacity: 1; }
.caret { display:inline-block; width:2px; height:1.05em; background: var(--color-accent); vertical-align:-0.18em; margin-left:1px; opacity:0; }
.js .caret { opacity:0; }
.js .caret.blink { opacity:1; animation: caretblink 1s steps(1) infinite; }
@keyframes caretblink { 50% { opacity:0; } }
.letter-meta { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.letter-tag { font-size: var(--text-xs); color: var(--color-text-muted); display:flex; align-items:center; gap:.5rem; }
.letter-tag .badge { width:30px; height:30px; flex-shrink:0; border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent); display:flex; align-items:center; justify-content:center; }
.letter-tag .badge svg { width:16px; height:16px; }
.letter-match { font-size: var(--text-xs); font-weight:700; color: var(--color-accent); font-variant-numeric: tabular-nums; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero-sub { max-width: 52ch; }
}

/* Problem */
.problem { background: var(--color-ink); color: var(--color-text-inverse); }
.problem h2, .problem .serif-display { color: var(--color-paper); }
.problem .eyebrow { color: var(--color-accent); }
.problem-head { max-width: 22ch; font-size: var(--text-2xl); line-height: 1.05; font-weight: 380; margin-bottom: var(--space-16); }
.problem-head em { font-style: italic; color: var(--color-accent); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
.stat { border-top: 1px solid rgba(255,255,255,0.16); padding-top: var(--space-5); }
.stat-num { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; color: var(--color-paper); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-num .unit { color: var(--color-accent); }
.stat-label { margin-top: var(--space-4); color: rgba(246,241,231,0.72); font-size: var(--text-base); max-width: 32ch; line-height:1.45; }
@media (max-width: 760px) { .stat-grid { grid-template-columns: 1fr; gap: var(--space-10); } .problem-head { margin-bottom: var(--space-10); } }

/* Steps */
.steps-head { display:flex; justify-content:space-between; align-items:flex-end; gap: 2rem; margin-bottom: var(--space-16); flex-wrap: wrap; }
.steps-head h2 { font-size: var(--text-2xl); font-weight: 380; max-width: 18ch; }
.steps-head h2 em { font-style: italic; color: var(--color-accent); }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,2.5rem); }
.step { position: relative; }
.step-index { font-family: var(--font-body); font-size: var(--text-sm); font-weight:700; color: var(--color-accent); letter-spacing:.1em; }
.step-rule { height:1px; background: var(--color-border); margin: var(--space-5) 0; position: relative; }
.step-rule::after { content:""; position:absolute; left:0; top:-3px; width:7px; height:7px; border-radius:50%; background: var(--color-accent); }
.step h3 { font-size: var(--text-lg); font-weight: 500; margin-bottom: var(--space-3); color: var(--color-ink); }
.step p { color: var(--color-text-muted); font-size: var(--text-base); }
.step-visual { margin-top: var(--space-6); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transform: translateY(0); transition: transform 400ms var(--ease-out); }
.step:hover .step-visual { transform: translateY(-4px); }
.step-visual svg { width: 100%; height: auto; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: var(--space-12); } }

/* Sample */
.sample { background: var(--color-paper); }
.sample-grid { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,5vw,4.5rem); align-items: start; }
.sample-copy h2 { font-size: var(--text-2xl); font-weight: 380; margin-bottom: var(--space-5); }
.sample-copy h2 em { font-style: italic; color: var(--color-accent); }
.sample-copy p { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.match-card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); }
.match-row { display:flex; align-items:center; gap: var(--space-4); }
.match-party { flex:1; }
.match-party .label { font-size: var(--text-xs); color: var(--color-text-faint); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.match-party .name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); font-weight:500; }
.match-link { display:flex; flex-direction:column; align-items:center; gap:.35rem; color: var(--color-accent); }
.match-link svg { width:26px; height:26px; }
.match-link .pct { font-size: var(--text-sm); font-weight:700; font-variant-numeric: tabular-nums; }
.match-why { margin-top: var(--space-5); padding-top: var(--space-5); border-top:1px solid var(--color-divider); }
.match-why .label { font-size: var(--text-xs); color: var(--color-text-faint); text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin-bottom: var(--space-3); }
.match-why ul { list-style:none; display:grid; gap: var(--space-3); }
.match-why li { display:flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text); }
.match-why li svg { width:16px; height:16px; color: var(--color-accent); flex-shrink:0; margin-top:3px; }

.loi-paper { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow:hidden; transform: translateY(0); transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.loi-paper:hover { transform: translateY(-8px); box-shadow: 0 32px 72px rgba(20,33,58,0.16); }
.loi-bar { display:flex; align-items:center; justify-content:space-between; padding: var(--space-4) var(--space-6); border-bottom:1px solid var(--color-divider); background: var(--color-surface-offset); }
.loi-bar .tabs { display:flex; gap:.4rem; } .loi-bar .tabs span{width:11px;height:11px;border-radius:50%;background:var(--color-border);}
.loi-bar .fname { font-size: var(--text-xs); color: var(--color-text-muted); font-weight:500; }
.loi-content { padding: clamp(1.5rem,3vw,2.6rem); }
.loi-content .doc-eyebrow { font-size: var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color: var(--color-accent); font-weight:600; margin-bottom: var(--space-4); }
.loi-content h4 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); font-weight:500; margin-bottom: var(--space-4); }
.loi-content p { font-family: var(--font-display); font-weight: 380; color: var(--color-text); line-height:1.6; margin-bottom: var(--space-4); font-size: clamp(0.95rem,.9rem + .3vw,1.08rem); }
.loi-content p .hl { background: var(--color-accent-soft); padding: 0 .15em; border-radius: 3px; }
.loi-fade { position: relative; }
.loi-fade::after { content:""; position:absolute; left:0; right:0; bottom:0; height: 90px; background: linear-gradient(to bottom, transparent, var(--color-surface)); pointer-events:none; }
.loi-foot { display:flex; align-items:center; gap: var(--space-4); padding: var(--space-5) clamp(1.5rem,3vw,2.6rem); border-top:1px solid var(--color-divider); flex-wrap:wrap; }
@media (max-width: 900px) { .sample-grid { grid-template-columns: 1fr; gap: var(--space-12); } }

/* Included */
.included-grid { display:grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
.included-list { display:grid; gap: 0; }
.inc-item { display:flex; gap: var(--space-5); padding: var(--space-6) 0; border-top:1px solid var(--color-divider); }
.inc-item:last-child { border-bottom:1px solid var(--color-divider); }
.inc-mark { flex-shrink:0; width:40px; height:40px; border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent); display:flex; align-items:center; justify-content:center; }
.inc-mark svg { width:20px; height:20px; }
.inc-item h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight:700; color: var(--color-ink); margin-bottom: var(--space-2); }
.inc-item p { color: var(--color-text-muted); font-size: var(--text-sm); }
.included-head h2 { font-size: var(--text-2xl); font-weight:380; }
.included-head h2 em { font-style:italic; color: var(--color-accent); }
@media (max-width:820px){ .included-grid{ grid-template-columns:1fr; gap: var(--space-10);} }

/* Pricing */
.pricing { background: var(--color-ink); color: var(--color-text-inverse); }
.pricing .eyebrow { color: var(--color-accent); }
.pricing-wrap { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.pricing-copy h2 { color: var(--color-paper); font-size: var(--text-2xl); font-weight:380; margin-bottom: var(--space-5); }
.pricing-copy h2 em { font-style:italic; color: var(--color-accent); }
.pricing-copy p { color: rgba(246,241,231,0.7); }
.pricing-cards { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.price-card { position: relative; background: var(--color-paper); color: var(--color-text); border-radius: var(--radius-xl); padding: clamp(1.8rem,3.5vw,2.5rem); box-shadow: var(--shadow-lg); overflow:hidden; transform: translateY(0); transition: transform 400ms var(--ease-out); }
.price-card:hover { transform: translateY(-6px); }
.price-card.featured { border: 2px solid var(--color-accent); transform: translateY(-8px); }
.price-card.featured:hover { transform: translateY(-14px); }
.feature-ribbon {
  position: absolute; top: 0; right: 0; background: var(--color-accent); color: #fff;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 0.8rem; border-bottom-left-radius: var(--radius-md);
}
.price-top { display:flex; align-items:baseline; gap:.5rem; }
.price-amt { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-ink); font-weight:400; line-height:1; }
.price-per { font-size: var(--text-base); color: var(--color-text-muted); font-weight:500; }
.price-name { font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); margin-top: var(--space-2); }
.price-flat { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.price-list { list-style:none; margin: var(--space-6) 0; display:grid; gap: var(--space-4); }
.price-list li { display:flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text); align-items:flex-start; }
.price-list li svg { width:17px;height:17px;color: var(--color-accent); flex-shrink:0; margin-top:2px; }
.price-card .btn { width:100%; justify-content:center; }
.price-free { margin-top: var(--space-4); text-align:center; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width:920px){ .pricing-wrap{grid-template-columns:1fr; gap: var(--space-10);} .pricing-cards{grid-template-columns:1fr;} .price-card.featured{transform:none;} .price-card.featured:hover{transform:translateY(-6px);} }

/* Research */
.research-head { max-width: 34ch; margin-bottom: var(--space-16); }
.research-head h2 { font-size: var(--text-2xl); font-weight:380; }
.research-head h2 em { font-style:italic; color: var(--color-accent); }
.research-head p { color: var(--color-text-muted); margin-top: var(--space-4); }
.viz-grid { display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(1.25rem,3vw,2rem); }
.viz-card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.viz-card h3 { font-family: var(--font-body); font-size: var(--text-sm); font-weight:700; color: var(--color-ink); margin-bottom:var(--space-2); }
.viz-card .viz-sub { font-size: var(--text-xs); color: var(--color-text-faint); margin-bottom: var(--space-6); }
.bar-row { display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-4); }
.bar-row .bar-label { width: 38%; font-size: var(--text-xs); color: var(--color-text-muted); }
.bar-track { flex:1; height:8px; background: var(--color-surface-offset); border-radius: var(--radius-full); overflow:hidden; }
/* Bar fills — visible by default when not animating */
.bar-fill { display:block; height:8px; border-radius: var(--radius-full); width: var(--w, 0); transition: width 1s var(--ease-out); }
.js .bar-fill { transition: none; }
.js .bar-fill.animate-ready { width: 0; transition: width 1s var(--ease-out); }
.js .bar-fill.animate-ready.animated { width: var(--w, 0); }
.bar-val { width: 2.6rem; text-align:right; font-size: var(--text-xs); font-weight:700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.donut-wrap { display:flex; align-items:center; gap: var(--space-6); }
.donut { width: 130px; height:130px; flex-shrink:0; }
.donut circle { fill:none; stroke-width: 9.5; stroke-linecap:butt; }
.legend { display:grid; gap: var(--space-3); }
.legend li { display:flex; align-items:center; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.legend .sw { width:11px;height:11px;border-radius:3px; flex-shrink:0; }
.legend .lv { margin-left:auto; font-weight:700; color: var(--color-ink); font-variant-numeric:tabular-nums; }
.viz-big { display:flex; flex-direction:column; }
.viz-stat-row { display:flex; gap: var(--space-8); margin-top:auto; padding-top: var(--space-6); }
.viz-stat .n { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); font-variant-numeric:tabular-nums; }
.viz-stat .l { font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width:920px){ .viz-grid{ grid-template-columns:1fr; } }

/* Trust */
.trust-grid { display:grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
.trust-head h2 { font-size: var(--text-2xl); font-weight:380; max-width: 18ch; }
.trust-head h2 em { font-style:italic; color: var(--color-accent); }
.trust-list { display:grid; gap: 0; }
.trust-item { display:flex; gap: var(--space-5); padding: var(--space-6) 0; border-top:1px solid var(--color-divider); }
.trust-item:last-child { border-bottom:1px solid var(--color-divider); }
.trust-num { flex-shrink:0; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-accent); font-weight:300; line-height:1; width: 3rem; }
.trust-item h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight:700; color: var(--color-ink); margin-bottom: var(--space-2); }
.trust-item p { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width:820px){ .trust-grid{ grid-template-columns:1fr; gap: var(--space-10);} }

/* FAQ */
.faq-section { background: var(--color-paper); }
.faq-grid { display:grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
.faq-head h2 { font-size: var(--text-2xl); font-weight:380; position: sticky; top: 6rem; }
.faq-head h2 em { font-style:italic; color: var(--color-accent); }
.faq-list { border-top:1px solid var(--color-divider); }
.faq-item { border-bottom:1px solid var(--color-divider); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--space-6); padding: var(--space-6) 0; text-align:left; font-family: var(--font-display); font-size: var(--text-lg); font-weight:500; color: var(--color-ink); }
.faq-q .ico { flex-shrink:0; width:24px; height:24px; position:relative; }
.faq-q .ico::before, .faq-q .ico::after { content:""; position:absolute; background: var(--color-accent); border-radius:2px; transition: transform var(--transition-interactive), opacity var(--transition-interactive); }
.faq-q .ico::before { left:0; top:50%; width:100%; height:2px; transform: translateY(-50%); }
.faq-q .ico::after { left:50%; top:0; width:2px; height:100%; transform: translateX(-50%); }
.faq-item.open .ico::after { opacity:0; transform: translateX(-50%) rotate(90deg); }
.faq-a { overflow:hidden; max-height:0; transition: max-height .4s var(--ease-out); }
.faq-a p { color: var(--color-text-muted); padding-bottom: var(--space-6); max-width: 60ch; }
@media (max-width:760px){ .faq-grid{ grid-template-columns:1fr; gap: var(--space-8);} .faq-head h2{ position:static; } }

/* Final CTA */
.cta-final .wrap { display:grid; place-items:center; }
.cta-card {
  width: 100%; max-width: var(--content-wide);
  background: var(--color-ink); color: var(--color-text-inverse);
  border-radius: var(--radius-xl); padding: clamp(3rem, 7vw, 5rem);
  text-align: center; position: relative; overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.cta-card::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 30% 30%, rgba(199,91,53,0.18), transparent 45%);
}
.cta-card h2 { position: relative; color: var(--color-paper); font-size: var(--text-2xl); font-weight:380; margin-bottom: var(--space-5); }
.cta-card h2 em { font-style:italic; color: var(--color-accent); }
.cta-card p { position: relative; color: rgba(246,241,231,0.72); max-width: 48ch; margin-inline:auto; margin-bottom: var(--space-8); }
.cta-row { position: relative; display:flex; justify-content:center; gap: var(--space-4); flex-wrap:wrap; }
.cta-row .btn-ghost { border-color: rgba(246,241,231,0.35); color: var(--color-paper); }
.cta-row .btn-ghost:hover { border-color: var(--color-paper); background: rgba(255,255,255,0.06); }

/* Footer */
.site-footer { background: var(--color-ink); color: var(--color-text-inverse); padding-block: clamp(3rem,6vw,5rem); }
.footer-top { display:flex; justify-content:space-between; gap: var(--space-12); flex-wrap:wrap; align-items:flex-start; }
.footer-brand { display:flex; align-items:center; gap:.6rem; color: var(--color-paper); }
.footer-brand svg { width:28px;height:28px; color: var(--color-accent); }
.footer-brand .brand-name { color: var(--color-paper); font-family: var(--font-display); font-size:1.4rem; font-weight:500; }
.footer-mission { margin-top: var(--space-4); color: rgba(246,241,231,0.6); max-width: 34ch; font-size: var(--text-sm); }
.footer-right { text-align:right; }
.footer-right a { color: var(--color-paper); text-decoration:none; font-family: var(--font-display); font-size: var(--text-lg); border-bottom:1px solid var(--color-accent); padding-bottom:2px; }
.footer-right a:hover { color: var(--color-accent); }
.footer-right p { margin-top: var(--space-2); color: rgba(246,241,231,0.4); font-size: var(--text-xs); }
.footer-bottom { margin-top: clamp(2.5rem,6vw,4rem); padding-top: var(--space-6); border-top:1px solid rgba(255,255,255,0.12); display:flex; justify-content:space-between; gap: var(--space-4); flex-wrap:wrap; font-size: var(--text-xs); color: rgba(246,241,231,0.5); }
@media (max-width:640px){ .footer-right{ text-align:left; } }

/* Reveal — content always readable; motion uses clip-path so a static view still shows everything */
.reveal, .reveal-up {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
}
.js .reveal {
  clip-path: inset(0 0 18px 0);
  opacity: 0.92;
  transform: translateY(10px);
}
.js .reveal.in {
  clip-path: inset(0 0 -2px 0);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), clip-path .85s var(--ease-out);
}
.js .reveal-up {
  clip-path: inset(0 0 24px 0);
  opacity: 0.92;
  transform: translateY(14px);
}
.js .reveal-up.in {
  clip-path: inset(0 0 -2px 0);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .85s var(--ease-out), transform .9s var(--ease-out), clip-path .95s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-up {
    opacity: 1; transform: none; clip-path: none !important;
  }
}