/* ============================================================================
   HOME.CSS — Spearn homepage (cinematic scroll showcase)
   Scoped to the homepage only. The quiz/results pages keep style.css.
   Type: Fraunces (editorial serif display) + Space Grotesk (geometric sans).
   ========================================================================== */

:root {
  --bg: #e8e7e3;          /* warm grey-white — more body than plain off-white */
  --bg-2: #e0dfd9;        /* deeper grey for section rhythm */
  --panel: #f7f6f2;       /* light card surface, pops on the grey-white */
  --ink: #18181b;         /* near-black */
  --ink-dim: #55555c;     /* label / secondary */
  --ink-faint: #6b6b73;   /* faint margin detail — kept ≥4.5:1 on the off-white */
  --line: rgba(22, 22, 30, 0.14);
  --accent: #2b46c8;      /* saturated blue, readable on light */
  --accent-soft: #33509a;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --card: "Archivo", "Archivo Expanded", ui-sans-serif, system-ui, sans-serif; /* heavy expanded grotesque — MASTERCARD-stamp accent */
  --head: "Hanken Grotesk", "Space Grotesk", ui-sans-serif, system-ui, sans-serif; /* techy-premium display sans for headlines */
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.js { scroll-behavior: auto; } /* Lenis owns scrolling when JS runs */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Soft, non-flat light background: gentle top highlight + faint warm wash */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.6), transparent 55%),
    radial-gradient(95% 70% at 85% 115%, rgba(204, 196, 182, 0.4), transparent 60%),
    linear-gradient(180deg, #ecebe7 0%, #e7e6e1 58%, #e2e1db 100%);
}

/* Fine film grain */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
em { font-style: italic; }

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 54px);
  mix-blend-mode: normal;
}
/* Wordmark — SPEARN. set in Space Grotesk 700, uppercase, tight optical
   tracking; the full stop is the signature, rendered in brand blue. */
.wordmark {
  font-family: var(--sans);
  font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: baseline; line-height: 1;
}
.wordmark .wm-dot { color: var(--accent); font-size: 1.15em; }

.nav-links { display: flex; gap: 30px; }
.nav-links a {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.02em; color: var(--ink-dim);
  position: relative; padding: 4px 0;
  transition: color 0.25s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-right { display: flex; align-items: center; gap: 16px; }
.icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-dim); cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-dim); background: rgba(0,0,0,0.05); }
.nav-cta {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.01em; color: var(--bg);
  background: var(--ink); padding: 10px 20px; border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.nav-cta:hover { background: #000; box-shadow: 0 8px 24px rgba(43, 70, 200, 0.30); transform: translateY(-1px); }

/* ---------- FIXED 3D STAGE (behind the WHOLE page) ----------
   The canvas stays fixed to the viewport; the hero narrative and the content
   sections scroll OVER it. During the hero it's the full art-show; behind the
   content it fades to a calm, blurred ambient (driven in home3d.js). */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stage canvas { display: block; width: 100%; height: 100%; }
.stage-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 68% at 50% 46%, transparent 58%, rgba(232,231,227,0.5) 100%);
}
.hero { position: relative; z-index: 2; }

/* ---------- MARGIN RAILS ---------- */
.rail {
  position: fixed; top: 0; bottom: 0; z-index: 4; width: 48px;
  transition: opacity 0.4s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 118px 0 34px; pointer-events: none;
}
.rail-left { left: 0; border-right: 1px solid var(--line); }
.rail-right { right: 0; border-left: 1px solid var(--line); }
.rail-label {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.28em; color: var(--ink-faint);
  writing-mode: vertical-rl; text-orientation: mixed;
}
.rail-coord, .rail .plus { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--ink-faint); }
.rail .plus { font-size: 1rem; }

/* ---------- STORY / CHAPTERS ---------- */
.story { position: relative; z-index: 2; }
.chapter {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 12vh clamp(64px, 12vw, 200px);
}
.chapter-inner { width: 100%; max-width: 1100px; margin: 0 auto; }
.align-left  .chapter-meta, .align-left  .line { text-align: left; }
.align-right { display: flex; justify-content: flex-end; }
.align-right .chapter-inner { text-align: right; }
.align-right .chapter-meta { justify-content: flex-end; }
.align-center { text-align: center; }
.align-center .chapter-meta { justify-content: center; }
.align-right .line, .align-center .line { margin-left: auto; }
.align-center .line { margin-right: auto; }

.chapter-meta {
  display: flex; align-items: center; gap: 16px; margin-bottom: 34px;
}
.chapter-meta .num {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--accent-soft);
}
.chapter-meta .hair { height: 1px; width: 54px; background: var(--line); }
.chapter-meta .tag {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-faint);
}

.line {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.5rem, 6.6vw, 6.2rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  max-width: 16ch;
  color: var(--ink);
  text-wrap: balance;
  /* Light halo keeps near-black text readable where it overlaps a dark card */
  text-shadow: 0 1px 18px rgba(246, 245, 241, 0.92), 0 1px 3px rgba(246, 245, 241, 0.7);
}
.line em { color: var(--accent-soft); font-style: italic; }
.align-right .line { margin-left: auto; }

/* Reveal state (only when JS is active) */
.js [data-reveal] { opacity: 0; }

/* ---------- FINAL CTA ---------- */
.chapter-final .chapter-inner { display: flex; flex-direction: column; align-items: center; }
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 44px;
  font-family: var(--sans); font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--bg); background: var(--ink);
  padding: 16px 30px; border-radius: 999px;
  box-shadow: 0 12px 34px -8px rgba(24, 24, 30, 0.35);
  transition: transform 0.18s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.cta svg { transition: transform 0.25s ease; }
.cta:hover { background: #000; box-shadow: 0 16px 42px -8px rgba(43, 70, 200, 0.42); transform: translateY(-2px); }
.cta:hover svg { transform: translateX(4px); }
.cta:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(24, 24, 30, 0.3); }
.cta-note {
  margin-top: 20px; font-family: var(--sans); font-size: 0.8rem;
  letter-spacing: 0.06em; color: var(--ink-faint);
}

/* Scroll hint */
.scroll-hint {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 60px;
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink-faint);
}
.scroll-hint i {
  width: 1px; height: 42px; background: linear-gradient(var(--ink-faint), transparent);
  position: relative; overflow: hidden;
}
.scroll-hint i::after {
  content: ""; position: absolute; top: -50%; left: 0; width: 1px; height: 50%;
  background: var(--accent-soft); animation: hintRun 2.4s cubic-bezier(0.6,0,0.2,1) infinite;
}
@keyframes hintRun { 0% { top: -50%; } 60%,100% { top: 100%; } }

/* ---------- FOOTER ---------- */
.foot {
  position: relative; z-index: 3;
  padding: 60px clamp(64px, 12vw, 200px) 70px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.foot-row { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.foot-mark { font-family: var(--sans); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: baseline; line-height: 1; }
.foot-mark .wm-dot { color: var(--accent); font-size: 1.15em; }
.foot-tag { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-dim); font-style: italic; }
.foot-fine { margin-top: 22px; max-width: 620px; font-size: 0.78rem; color: var(--ink-faint); line-height: 1.6; }

/* ---------- NAV states + intro fade ---------- */
.nav { transition: background 0.3s ease, border-color 0.3s ease; }
.nav.scrolled { background: rgba(243, 242, 238, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { transform: scaleX(1); }
/* The 3D stage + margin rails belong to the intro; fade them out after the story */
.stage, .rail { transition: opacity 0.35s linear; }

/* ---------- POST-SCROLL CONTENT ----------
   The perpetual dance performs behind ALL content at FULL vividness. Text that
   rides over the moving cards sits on SOLID editorial panels — the same warm
   off-white card family as the +$504 stat card: opaque, crisp-edged, rounded,
   softly shadowed, generously padded. The cards stay fully vivid in the open
   space AROUND the panels; text that never meets a card (the footer, the margin
   labels) needs no panel at all. Panels are desktop-only — mobile has no
   animation behind the content, so it keeps a plain solid background. */
.content { position: relative; z-index: 2; background: transparent; }
.foot    { position: relative; z-index: 2; background: transparent; }

@media (min-width: 821px) {
  /* One panel system — same DNA as .example-hero (the $504 card). */
  .content .sec-how .sec-title,
  .content .sec-method > .sec-title,
  .content .sec-faq > .sec-title,
  .content .sec-reviews > .sec-title,
  .content .sec-final-cta > .sec-title,
  .content .sec-final-cta .cta-note,
  .content .verified,
  .content .steps,
  .content .example-copy,
  .content .manifesto-list,
  .content .faq {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 26px 60px -30px rgba(24, 24, 30, 0.30);
  }

  /* Column / list panels — generous padding; hug their content so cards show
     to the sides. */
  .content .steps,
  .content .example-copy,
  .content .manifesto-list,
  .content .faq { padding: clamp(28px, 3.2vw, 44px); }
  .content .example-copy,
  .content .manifesto-list,
  .content .faq { width: fit-content; max-width: 100%; }

  /* Heading / short-line panels — hug the text. */
  .content .sec-how .sec-title,
  .content .sec-method > .sec-title,
  .content .sec-faq > .sec-title,
  .content .sec-reviews > .sec-title,
  .content .sec-final-cta > .sec-title,
  .content .sec-final-cta .cta-note,
  .content .verified {
    width: fit-content; max-width: 100%;
    padding: clamp(16px, 2.2vw, 26px) clamp(24px, 3.2vw, 40px);
  }
  .content .sec-final-cta > .sec-title,
  .content .sec-final-cta .cta-note { margin-left: auto; margin-right: auto; }
  .content .sec-title.big { max-width: none; }

  /* De-conflict the dividers/rules that were drawn for the old open layout so
     they don't collide with the padded panel edges. */
  .content .steps .step { border-top: none; padding-top: 6px; padding-bottom: 8px; }
  .content .manifesto-list { border-bottom: none; }
  .content .manifesto-list li:first-child { border-top: none; }
  .content .manifesto-list li:last-child { padding-bottom: 6px; }
  .content .faq { border-top: none; }
  .content .faq details:last-child { border-bottom: none; }
  .content .example-copy .example-spend { border-top: none; }
}

.sec { max-width: 1180px; margin: 0 auto; padding: clamp(84px, 13vh, 156px) clamp(24px, 8vw, 120px); }
.sec-head { margin-bottom: clamp(48px, 7vh, 76px); }
.sec .chapter-meta { margin-bottom: 26px; }
.sec-title { font-family: var(--head); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.028em; max-width: 20ch; }
.sec-title em { font-family: var(--head); font-style: italic; color: var(--accent-soft); }
.sec-title.big { font-size: clamp(2.4rem, 6vw, 5rem); max-width: 16ch; }

/* How-it-works steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.step { padding: 44px 40px 52px 0; border-top: 1px solid var(--line); }
.step + .step { padding-left: 40px; border-left: 1px solid var(--line); }
.step-n { display: block; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 3.2rem; line-height: 1; color: var(--ink-faint); margin-bottom: 26px; }
.step h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; margin-bottom: 14px; }
.step p { font-family: var(--sans); color: var(--ink-dim); font-size: 0.98rem; line-height: 1.65; max-width: 34ch; }

/* Worked example */
.sec-example .example-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.example-copy .sec-title { margin-bottom: 30px; }
.example-copy p { font-family: var(--sans); color: var(--ink-dim); font-size: 1.05rem; line-height: 1.72; max-width: 46ch; }
.example-copy strong { color: var(--ink); font-weight: 600; }
.example-spend { list-style: none; margin: 0 0 28px; border-top: 1px solid var(--line); }
.example-spend li { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: 0.98rem; }
.example-spend li span:first-child { color: var(--ink-dim); }
.example-spend li span:last-child { color: var(--ink); font-weight: 500; }
.example-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(40px, 6vw, 66px) 30px; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(130% 100% at 50% 0%, rgba(43, 70, 200, 0.06), transparent 62%), var(--panel); box-shadow: 0 26px 60px -30px rgba(24, 24, 30, 0.30); }
.example-hero-label { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint); }
.example-hero-figure { font-family: var(--serif); font-weight: 600; font-size: clamp(4.2rem, 12vw, 8.6rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--accent); margin: 14px 0 8px; text-shadow: 0 12px 40px -12px rgba(43, 70, 200, 0.28); }
.example-hero-unit { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--ink); }
.example-hero-foot { margin-top: 20px; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); letter-spacing: 0.03em; }

/* The method / manifesto */
.sec-method .sec-title { margin-bottom: clamp(40px, 6vh, 64px); }
.manifesto-list { list-style: none; max-width: 940px; border-bottom: 1px solid var(--line); }
.manifesto-list li { position: relative; font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 2.2vw, 1.65rem); line-height: 1.4; color: var(--ink-dim); padding: 24px 0 24px 46px; border-top: 1px solid var(--line); }
.manifesto-list li::before { content: "+"; position: absolute; left: 4px; top: 24px; color: var(--accent-soft); font-family: var(--sans); font-weight: 500; }
.verified { display: flex; align-items: center; gap: 11px; margin-top: 40px; font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ink-faint); }
.verified .dot { width: 7px; height: 7px; border-radius: 50%; background: #1f9d63; box-shadow: 0 0 8px rgba(31, 157, 99, 0.55); }

/* FAQ */
.sec-faq .sec-title { margin-bottom: clamp(36px, 5vh, 54px); }
.faq { max-width: 880px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 27px 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--ink); transition: color 0.2s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-soft); }
.faq-mark { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; background: var(--accent-soft); transition: transform 0.3s ease; }
.faq-mark::before { top: 8px; left: 0; width: 18px; height: 1.6px; }
.faq-mark::after { left: 8px; top: 0; width: 1.6px; height: 18px; }
.faq details[open] .faq-mark::after { transform: scaleY(0); }
.faq-body { padding: 0 0 27px; max-width: 62ch; font-family: var(--sans); color: var(--ink-dim); font-size: 1rem; line-height: 1.7; }

/* Reviews */
.sec-reviews .sec-title { margin-bottom: clamp(36px, 5vh, 54px); }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review { padding: 34px 30px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 18px 44px -28px rgba(24, 24, 30, 0.24); }
.review blockquote { font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; color: var(--ink); margin-bottom: 26px; }
.review figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--sans); font-size: 0.84rem; color: var(--ink-dim); }
.review .sample { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); padding: 3px 7px; border-radius: 5px; }

/* Final CTA */
.sec-final-cta { text-align: center; display: flex; flex-direction: column; align-items: center; padding-bottom: clamp(96px, 14vh, 150px); }
.sec-final-cta .sec-title { margin: 0 auto; }

/* Footer (expanded) */
.foot-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 46px; }
.foot-brand { display: flex; flex-direction: column; gap: 8px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.foot-nav a { font-family: var(--sans); font-size: 0.86rem; color: var(--ink-dim); cursor: pointer; transition: color 0.2s ease; }
.foot-nav a:hover { color: var(--ink); }
.foot-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 26px; }
.foot-bottom > span { font-family: var(--sans); font-size: 0.86rem; color: var(--ink-dim); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav { padding: 16px 20px; }
  .rail { display: none; }
  .chapter { padding: 10vh 24px; min-height: 92vh; }
  .align-right { justify-content: flex-start; }
  .align-right .chapter-inner { text-align: left; }
  .align-right .chapter-meta { justify-content: flex-start; }
  .align-right .line { margin-left: 0; }
  .line { font-size: clamp(2.1rem, 10vw, 3.4rem); max-width: 100%; }
  .stage-vignette { background: radial-gradient(92% 72% at 50% 42%, transparent 50%, rgba(232,231,227,0.6) 100%); }
  /* Mobile: no behind-content animation — plain solid background, no panels
     (those are gated to ≥821px above). */
  .content { background: var(--bg); }
  .foot { background: var(--bg-2); }
}

@media (max-width: 820px) {
  .sec { padding: 72px 24px; }
  .steps { grid-template-columns: 1fr; }
  .step { padding: 32px 0 34px; border-top: 1px solid var(--line); }
  .step + .step { padding-left: 0; border-left: none; }
  .sec-example .example-grid { grid-template-columns: 1fr; gap: 36px; }
  .example-hero { order: -1; }
  .reviews { grid-template-columns: 1fr; }
  .foot-top { flex-direction: column; gap: 26px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; }
  .scroll-hint i::after { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================================
   TECHNICAL LAYER — a heavy, EXPANDED grotesque "card-wordmark" accent
   (Archivo, expanded width via font-stretch, heavy weight) — the MASTERCARD-
   stamp feel. Numbers + small structural labels only; the editorial serif
   (headlines) and the sans (body copy) stay untouched. Labels are UPPERCASE
   with tight tracking so they read embossed/stamped.
   ========================================================================== */
.chapter-meta .num, .step-n, .example-hero-figure, .example-spend li span:last-child,
.chapter-meta .tag, .rail-label, .rail-coord, .rail .plus, .review .sample,
.example-hero-label, .scroll-hint, .nav-links a, .nav-cta {
  font-family: var(--card); font-stretch: 125%;   /* expanded width */
}

/* — numbers + stats: heavy, near-zero tracking — */
.chapter-meta .num       { font-weight: 700; letter-spacing: 0.01em; }
.step-n                  { font-weight: 800; font-style: normal; letter-spacing: -0.01em; }
.example-hero-figure     { font-weight: 800; letter-spacing: -0.015em; }
.example-spend li span:last-child { font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* — uppercase stamped labels: tight tracking — */
.chapter-meta .tag       { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.rail-label              { font-weight: 700; letter-spacing: 0.05em; }
.rail-coord, .rail .plus { font-weight: 700; letter-spacing: 0.04em; }
.review .sample          { font-weight: 700; letter-spacing: 0.04em; }
.example-hero-label      { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.scroll-hint             { font-weight: 700; letter-spacing: 0.06em; }

/* — nav links + primary button (trial) — */
.nav-links a             { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.78rem; }
.nav-cta                 { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }

/* — big scroll-narrative pitch lines in the techy-premium display sans: heavy
     weight, TIGHT negative tracking + tight leading for that dense, confident,
     modern fintech look. The accent word is an italic of the SAME family. — */
.line {
  font-family: var(--head); font-weight: 700;
  letter-spacing: -0.028em; line-height: 1.02;
}
.line em {
  font-family: var(--head); font-style: italic; font-weight: 700;
  letter-spacing: -0.028em;
}