/* ATLITOS landing styles.
   Tokens mirror packages/theme (Paper light, Espresso dark, ember accent); landing only
   band tokens are declared here first, per the tokens-only rule.
   Layout systems to know before editing:
   1. Reveal framework: [data-reveal] variants (up, side, tilt, pop, draw) hidden ONLY
      under html.js, staggered via data-reveal-delay, re-armed when leaving the viewport
      through the bottom. Zero JS renders everything.
   2. Sticky files: .step-file (tab plus panel, one viewport,
      same offset, DOM order stacks), .incl-card (sticky pricing checklist). No JS pinning
      library anywhere, so nothing can ever scroll over a stuck stage.
   3. Seams: curved SVG edges, rounded band corners, and domes carry color across section
      boundaries. The LED veil hands the film into the dark led-entry band.
   See LANDING-NOTES.md for the full build log and founder taste notes. */

:root {
  --paper: #FBF7F1;
  --surface: #FFFFFF;
  --surface-muted: #F2EBE0;
  --ink: #1C1712;
  --ink-secondary: #5B5248;
  --ink-tertiary: #8C8072;
  --ink-inverse: #FBF7F1;
  --border: #E7DECF;
  --border-strong: #D6C9B4;
  --ember: #E46136;
  --ember-pressed: #C24E27;
  --ink-on-accent: #2A0E02;
  --espresso: #14100B;
  --espresso-surface: #1E1810;
  --marigold: #E8B324;
  --marigold-tint: #F7E6B5;
  --green: #4CAF7D;
  --green-deep: #17402A;
  --ember-tint: #FCEBE4;
  --green-tint: #DCF0E5;

  --font-display: "Fraunces", "Fraunces-fallback", Georgia, serif;
  --font-body: "Inter", "Inter-fallback", sans-serif;
  --font-mono: "JetBrains Mono", "JBMono-fallback", monospace;

  --shell: 1100px;
  --radius: 12px;
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-soft: 6px 6px 0 rgba(28, 23, 18, 0.16);
  --nav-h: 72px;

  /* halftone grain, the CSS fallback texture for section backdrops */
  --grain-dark: radial-gradient(rgba(28, 23, 18, 0.055) 1px, transparent 1.5px);
  --grain-light: radial-gradient(rgba(251, 247, 241, 0.07) 1px, transparent 1.5px);
}

/* Self-hosted variable fonts (latin subsets, one file per family/style).
   Same-origin kills the two Google Fonts round-trips that were the LCP tail
   on throttled mobile (C8). Files under fonts/, fetched from Google's CDN
   once and pinned. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Fraunces-var.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: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Fraunces-var-italic.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: 100 900;
  font-display: swap;
  src: url("fonts/Inter-var.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/JetBrainsMono-var.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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* the rupee sign (U+20B9) lives in latin-ext, which every price on the page
     needs; this is the only latin-ext subset shipped */
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/JetBrainsMono-var-latinext.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;
}

/* Metric-tuned local fallbacks so the webfont swap does not reflow the page
   (CLS guard, C8). size-adjust matched by measurement against the real faces. */
@font-face {
  font-family: "Fraunces-fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter-fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 100%;
  ascent-override: 97%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JBMono-fallback";
  src: local("Courier New"), local("Menlo");
  size-adjust: 111%;
  ascent-override: 102%;
  descent-override: 26%;
  line-gap-override: 0%;
}

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

html:not(.js) { scroll-behavior: smooth; }

/* overflow-x: clip, NEVER hidden. hidden creates a scroll container on the
   ancestor, which is the root cause of the historical pin overlap bug (R1 in
   docs/MOTION-ARCHITECTURE.md). clip clips paint without creating a scroller. */
html { overflow-x: clip; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Lenis smooth scroll required CSS ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Global overlays: grain, cursor, wipes ---------- */
/* film grain: static SVG turbulence, one composited layer, never animated */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90; /* under the header (100), above everything else */
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* target lock: broadcast corner brackets that snap around whatever
   interactive element the pointer is over. The native cursor stays. */
.target-lock {
  position: fixed; top: 0; left: 0;
  width: 60px; height: 40px;
  pointer-events: none;
  z-index: 95;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.target-lock.is-locked { opacity: 1; }
.tl-corner {
  position: absolute;
  width: 12px; height: 12px;
  border: 2.5px solid var(--ember);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.25));
}
.tl-0 { top: 0; left: 0; border-right: none; border-bottom: none; }
.tl-1 { top: 0; right: 0; border-left: none; border-bottom: none; }
.tl-2 { bottom: 0; left: 0; border-right: none; border-top: none; }
.tl-3 { bottom: 0; right: 0; border-left: none; border-top: none; }
/* speed line wipes (elements created by motion/systems/wipe.js) */
.wipe-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: clip; }
.wipe-bar {
  position: absolute; left: -20%;
  width: 40%; height: clamp(14px, 2vw, 26px);
  will-change: transform;
}
@media (pointer: coarse) {
  .grain { display: none; } /* blend-mode layers cost real battery on mobile */
}
/* chapter rail (elements created by motion/systems/rail.js) */
.chapter-rail {
  position: fixed; right: 18px; top: 50%;
  transform: translateY(-50%);
  z-index: 85;
  display: flex; flex-direction: column; gap: 14px;
}
.rail-dot {
  position: relative;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0;
}
.rail-dot i {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--ink-tertiary);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.rail-dot.is-active i { background: var(--marigold); border-color: var(--marigold); transform: scale(1.25); }
.rail-label {
  position: absolute; right: 26px; top: 50%;
  transform: translateY(-50%);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em;
  color: var(--ink-secondary);
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 3px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.rail-dot:hover .rail-label, .rail-dot:focus-visible .rail-label { opacity: 1; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.accent { color: var(--ember); font-style: normal; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--ink); color: var(--ink-inverse);
  padding: 8px 16px; border-radius: var(--radius);
}
.skip-link:focus { left: 8px; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ---------- Universal reveal framework ----------
   Variants: up (fade rise), side (fade slide), tilt (rotate settle), pop (scale), draw (SVG stroke).
   Initial hidden state exists ONLY under html.js, so zero JS renders everything.
   Reduced motion renders final states immediately. */
.js [data-reveal] {
  transition:
    opacity 0.55s cubic-bezier(0.22, 0.9, 0.3, 1),
    transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.js [data-reveal="up"]:not(.is-in) { opacity: 0; transform: translateY(30px); }
.js [data-reveal="side"]:not(.is-in) { opacity: 0; transform: translateX(36px); }
.js [data-reveal="tilt"]:not(.is-in) { opacity: 0; transform: translateY(26px) rotate(-3deg); }
.js [data-reveal="pop"]:not(.is-in) { opacity: 0; transform: scale(0.35) rotate(-10deg); }
.js [data-reveal="pop"] { transition-timing-function: cubic-bezier(0.34, 1.56, 0.5, 1); }
.js [data-reveal-delay="1"] { transition-delay: 0.1s; }
.js [data-reveal-delay="2"] { transition-delay: 0.2s; }
.js [data-reveal-delay="3"] { transition-delay: 0.3s; }
.js [data-reveal-delay="4"] { transition-delay: 0.4s; }
.js [data-reveal-delay="5"] { transition-delay: 0.5s; }
.js [data-reveal-delay="6"] { transition-delay: 0.6s; }
/* Rich mode (motion/) owns every data-reveal element it pre-marks is-in and
   drives with GSAP; a live CSS transition would interpolate every inline
   write GSAP makes, which froze the step rows mid rotation. One rule kills
   the whole conflict class. */
.motion-rich [data-reveal] { transition: none; }
/* draw variant: paths get dasharray from JS; is-in releases the offset */
.js [data-reveal="draw"] .a-path { transition: stroke-dashoffset 1s cubic-bezier(0.3, 0, 0.2, 1); }
.js [data-reveal="draw"][data-reveal-delay="1"] .a-path { transition-delay: 0.18s; }
.js [data-reveal="draw"][data-reveal-delay="2"] .a-path { transition-delay: 0.36s; }

/* ---------- Nav: floating card morphs into the pill, both directions ---------- */
/* The nav is a folder tab hanging from the top edge, same anatomy as the
   step files. Scroll down tucks it to wordmark and CTA, scroll up reopens. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}
.nav-card {
  pointer-events: auto;
  display: flex; align-items: center; gap: 26px;
  width: max-content; max-width: 900px;
  /* Frosted glass: near-opaque paper fallback for browsers without
     backdrop-filter, translucent + blur where supported. */
  background: rgba(251, 247, 241, 0.92);
  border: 1px solid rgba(28, 23, 18, 0.14);
  border-top: none;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 8px 24px rgba(28, 23, 18, 0.14);
  padding: 15px 30px 14px;
  transition: max-width 460ms cubic-bezier(0.65, 0, 0.35, 1), padding 460ms ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav-card {
    background: rgba(251, 247, 241, 0.55);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
  }
}
/* over the espresso hero (top of page, before .scrolled) the paper glass reads
   as a grey slab; use espresso glass until scroll leaves the hero */
html:not(.scrolled) .nav-card {
  background: rgba(20, 16, 11, 0.62);
  border-color: rgba(251, 247, 241, 0.16);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
html:not(.scrolled) .site-nav a { color: var(--ink-inverse); }
html:not(.scrolled) .nav-card .btn-nav { background: var(--paper); color: var(--ink); }
/* one transition list, one place: the size morph keeps its 460ms feel, the
   glass swap rides along at 350ms. A separate transition-property override
   here once desynced the card width from the link collapse and made the CTA
   slide over the wordmark mid tuck. */
.nav-card {
  transition:
    max-width 460ms cubic-bezier(0.65, 0, 0.35, 1),
    padding 460ms ease,
    background 350ms ease,
    border-color 350ms ease,
    box-shadow 350ms ease;
}
.site-nav a, .nav-card .btn-nav { transition: background 350ms ease, color 350ms ease; }
/* Tucked pill: the wordmark must never read as sitting at the pill's edge
   (founder note). Generous left padding pushes it inward, and the pair is
   balanced with a centred gap rather than space-between extremes. */
.compact .nav-card {
  max-width: 372px;
  padding: 11px 18px 10px 38px;
  border-radius: 0 0 999px 999px;
  justify-content: center;
  gap: 30px;
}
.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--ember);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  /* optical: Fraunces italic carries its mass below the box centre; without
     this the wordmark reads as sitting low next to the CTA pill */
  display: inline-block;
  transform: translateY(-0.05em);
}
.site-nav {
  display: flex; gap: 22px; margin-left: auto;
  overflow: hidden;
  max-width: 480px;
  transition: max-width 460ms cubic-bezier(0.65, 0, 0.35, 1), opacity 320ms ease 120ms;
}
.site-nav a {
  color: var(--ink); text-decoration: none;
  font-size: 0.9375rem; font-weight: 600; white-space: nowrap;
}
.site-nav a:hover { color: var(--ember); }
/* (a second .compact .nav-card rule lived here from the options gallery era;
   it fought the pill rule above and cramped the tucked state. Removed.) */
.compact .site-nav { max-width: 0; opacity: 0; margin-left: 0; transition: max-width 460ms cubic-bezier(0.65, 0, 0.35, 1), opacity 200ms ease; }

/* Buttons */
.btn-pill {
  display: inline-block;
  background: var(--ink);
  color: var(--ink-inverse);
  font-weight: 600; font-size: 0.9375rem; line-height: 1;
  padding: 13px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid var(--ink);
  white-space: nowrap; /* a pill label never wraps, however tight the flex */
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.btn-pill:hover { background: var(--ember); border-color: var(--ember); color: var(--ink-on-accent); }
.btn-lg { font-size: 1.0625rem; padding: 17px 30px; }
.btn-onDark { background: var(--ember); border-color: var(--ember); color: var(--ink-on-accent); }
.btn-onDark:hover { background: var(--ember-pressed); border-color: var(--ember-pressed); }
.btn-ghost {
  display: inline-block;
  color: var(--ink); font-weight: 600; font-size: 1.0625rem; line-height: 1;
  padding: 17px 26px;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 140ms ease;
}
.btn-ghost:hover { border-color: var(--ink); }
.ghost-onDark { color: var(--ink-inverse); border-color: rgba(251, 247, 241, 0.35); }
.ghost-onDark:hover { border-color: var(--ink-inverse); }

/* ---------- Hero: COLD OPEN ----------
   100svh static section, normal flow (the LCP element must not be inside a
   sticky/pinned wrapper). Hidden states live ONLY under html.js:not(.hero-ready)
   so zero JS, reduced motion, and the 1800ms fallback all see final states. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--espresso);
  background-image: var(--grain-light);
  background-size: 7px 7px;
  overflow: clip;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 24px) clamp(24px, 6vw, 96px) 72px;
}
/* speed lines */
.hero-lines { position: absolute; inset: 0; pointer-events: none; }
.hl {
  position: absolute; left: -20%;
  width: 140%; height: clamp(10px, 1.6vw, 22px);
  transform: skewY(-8deg) translateX(0);
  background: var(--ember);
}
.hl-1 { top: 16%; background: var(--ember); }
.hl-2 { top: 78%; background: var(--marigold); }
.hl-3 { top: 34%; background: var(--ember); }
.hl-4 { top: 52%; background: var(--marigold); }
.hl-5 { top: 86%; background: var(--ember); opacity: 0.85; }
/* after the sweep, only hl-2 survives, thinned via scaleY. TRANSFORMS ONLY on
   these bars, never height/top: tweening layout properties on the settle beat
   measured 0.055 CLS on its own (found via layout-shift sources on prod). */
html.js:not(.hero-ready) .hl { transform: skewY(-8deg) translateX(-140%); }
.hero-ready .hl, html:not(.js) .hl { transform: skewY(-8deg) translateX(0); opacity: 0; }
.hero-ready .hl-2, html:not(.js) .hl-2 { opacity: 1; transform: skewY(-8deg) scaleY(0.1); }
/* duotone athlete panel */
.hero-panel {
  position: absolute;
  right: clamp(-40px, -2vw, 0px); top: 8%;
  width: clamp(300px, 42vw, 640px); height: 84%;
  clip-path: polygon(18% 0, 100% 6%, 92% 100%, 0 94%);
  overflow: hidden;
  z-index: 1;
}
.hero-panel img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.82);
}
.hero-panel::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ember);
  mix-blend-mode: multiply;
  opacity: 0.55;
}
html.js:not(.hero-ready) .hero-panel { clip-path: polygon(18% 0, 18% 0, 0 94%, 0 94%); opacity: 0; }
.hero-ready .hero-panel, html:not(.js) .hero-panel { opacity: 1; }
/* headline */
.hero-headline {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 10.5vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--ink-inverse);
  max-width: 12ch;
}
/* the mask: descenders (y, g, p at 900 weight italic) need real headroom or
   they clip against line-height 0.92; 0.14em pad clawed back by the margin */
.hh-line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hh-inner { display: inline-block; }
.hh-accent { color: var(--ember); font-style: italic; }
html.js:not(.hero-ready) .hh-inner { transform: translateY(110%); }
.hero-ready .hh-inner, html:not(.js) .hh-inner { transform: none; }
/* kit tiles */
.hero-tiles {
  position: relative; z-index: 2;
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(28px, 4vh, 52px);
  perspective: 600px;
}
.kit-tile {
  display: inline-block;
  background: var(--espresso-surface);
  border: 1.5px solid rgba(251, 247, 241, 0.28);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--ink-inverse);
  transform-style: preserve-3d;
  will-change: transform;
}
html.js:not(.hero-ready) .kit-tile { opacity: 0; transform: translateY(-60px) rotateX(-50deg); }
.hero-ready .kit-tile, html:not(.js) .kit-tile { opacity: 1; transform: none; }
/* scroll rail */
.hero-rail {
  position: absolute; left: clamp(24px, 6vw, 96px); bottom: 30px;
  display: flex; align-items: center; gap: 12px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em;
  color: rgba(251, 247, 241, 0.7);
}
.rail-line { display: inline-block; width: 56px; height: 1px; background: var(--marigold); transform-origin: left center; animation: railgrow 1.6s ease-in-out infinite; }
@keyframes railgrow { 0%, 100% { transform: scaleX(0.3); } 50% { transform: scaleX(1); } }
html.js:not(.hero-ready) .hero-rail { opacity: 0; }
.hero-ready .hero-rail, html:not(.js) .hero-rail { opacity: 1; transition: opacity 0.5s ease; }
@keyframes bob { 50% { transform: translateY(6px); } }
.caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* nav unfolds as the last beat of the hero load choreography; hero-ready is
   guaranteed within 1800ms by the main.js hard fallback so it can never stay
   hidden */
.js:not(.hero-ready) .site-header { opacity: 0; transform: translateY(-10px); }
.site-header { transition: opacity 0.7s ease, transform 0.7s ease; }
.hero-ready .site-header, html:not(.js) .site-header { opacity: 1; transform: none; }

/* ---------- Inside the board: section 2 emerges from the LED darkness ---------- */
.led-entry {
  position: relative;
  background-color: #0B0906;
  background-image: radial-gradient(rgba(232, 179, 36, 0.1) 1.5px, transparent 2.1px);
  background-size: 14px 14px;
  color: var(--ink-inverse);
  padding: 140px 0 170px;
}
.led-entry-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.led-entry-title { color: var(--ink-inverse); }
.meet-accent { color: var(--marigold); font-style: italic; }
.led-entry-sub {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  color: rgba(251, 247, 241, 0.88);
  max-width: 34ch;
  text-wrap: balance;
}
.led-entry .cta-row { margin-top: 32px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-center { justify-content: center; }

/* ---------- Stickers and notes ---------- */
.sticker-stack {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.625rem);
  line-height: 1.15;
}
.sticker {
  display: inline-block;
  background: var(--surface);
  color: var(--ink);
  padding: 6px 18px;
  box-shadow: var(--shadow-soft);
}
.sticker-stack .sticker:nth-child(odd) { rotate: -1.4deg; }
.sticker-stack .sticker:nth-child(even) { rotate: 1deg; margin-left: 22px; }
.note {
  border: 2px dashed var(--border-strong);
  background: var(--paper);
  border-radius: 10px;
  padding: 22px 24px;
  font-size: 1.0625rem;
  color: var(--ink);
  max-width: 46ch;
}
.note p + p { margin-top: 12px; }
.chip {
  background: var(--ember-tint);
  border: 1.5px dashed var(--ember);
  border-radius: 6px;
  padding: 1px 8px;
  color: var(--ink);
  white-space: normal;
}

/* ---------- Seams: curved edges that carry color across boundaries ---------- */
.seam { position: relative; line-height: 0; }
.seam svg { display: block; width: 100%; height: clamp(56px, 8vw, 120px); }
.seam-top-ember { margin-top: -1px; }
.seam-top-ember svg { transform: translateY(1px); }
.seam-top-ember path { fill: var(--ember); }
.seam-bottom-ember path { fill: var(--ember); }
.seam-bottom-ember { background: var(--paper); }
.seam-bottom-ember svg { transform: translateY(-1px); }
.seam-ball {
  position: absolute;
  left: 12%; bottom: 42%;
  width: clamp(60px, 7vw, 104px);
  height: auto;
  line-height: 0;
}

/* ---------- Problem: full bleed ember band with halftone grain ---------- */
.problem { background: none; padding: 0; margin-top: -110px; position: relative; z-index: 3; }
.problem .problem-grid, .problem .marquee { background: var(--ember); }
.problem-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
  padding: 90px max(24px, calc((100vw - var(--shell)) / 2)) 30px;
}
.problem .note { background: var(--paper); border-color: var(--border-strong); }
.problem .sticker { box-shadow: 5px 5px 0 rgba(42, 14, 2, 0.4); }
.problem .marquee {
  padding: 84px 0 60px;
  background-image: var(--grain-light);
  background-size: 7px 7px;
}
.marquee { overflow: hidden; }
.marquee-track {
  display: flex; align-items: center; gap: 34px;
  width: max-content;
  animation: drift 26s linear infinite;
  padding: 6px 0;
}
.marquee-reverse { animation-direction: reverse; animation-duration: 32s; margin-top: 18px; }
@keyframes drift { to { transform: translateX(-50%); } }
.m-tile {
  flex: none;
  width: 76px; height: 76px;
  background: var(--ink);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
}
.m-tile svg { width: 36px; height: 36px; stroke: var(--paper); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-word {
  flex: none;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--paper);
  border: 1.5px solid rgba(251, 247, 241, 0.55);
  border-radius: 999px;
  padding: 8px 16px;
}

/* ---------- Interlude ---------- */
.interlude { padding: 40px 0 40px; }
.interlude-inner { display: flex; flex-direction: column; align-items: center; }
.serif-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 4.4vw, 3.25rem);
  text-align: center;
  line-height: 1.15;
}
.arrows { display: flex; gap: clamp(20px, 6vw, 84px); margin-top: 44px; }
.arrow { width: clamp(70px, 10vw, 120px); height: auto; }
.a-path { stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.a-marigold { stroke: var(--marigold); }
.a-ember { stroke: var(--ember); }
.a-green { stroke: var(--green); }

/* ---------- Steps: each step is its own FILE, sized to the reference.
   Tab 1 flush left, tab 2 at a third, tab 3 flush right. Panels carry no
   box of their own, just the full width dashed rule under the tab row,
   so files blend with the paper page exactly like the reference. ---------- */
.steps-wrap { position: relative; }
.step-file {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column;
  background: transparent;
}
.step-tab {
  display: flex; align-items: center; justify-content: center;
  width: 33.4vw;
  border: 3px solid var(--ink);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-hard);
  padding: 30px 20px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  line-height: 1.1;
  white-space: nowrap;
  position: relative; z-index: 2;
  margin-bottom: -3px;
}
.tab-1 { background: var(--marigold); margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tab-2 { background: var(--ember); color: var(--ink-on-accent); margin-left: 33.3vw; }
.tab-3 { background: var(--green); margin-left: 66.6vw; border-top-right-radius: 0; }
.step-panel {
  flex: 1;
  background: var(--surface);
  display: flex; align-items: center;
  padding: 70px 0 50px;
  /* the reference rule: one long dashed line, full width, under the tab row */
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 26px);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 0;
}
.step-grid {
  display: grid; grid-template-columns: 0.72fr 1.3fr; gap: clamp(48px, 7vw, 110px);
  align-items: center;
  width: 100%;
}
.step-lede { font-weight: 600; font-size: 1.0625rem; margin-bottom: 24px; color: var(--ink); }
.stack-list { font-size: 1.0625rem; font-weight: 500; line-height: 1.85; color: var(--ink); }
.stack-list + .stack-list { margin-top: 26px; }
.step-demo {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(300px, 48vh, 480px);
}
.step-demo .demo-card { width: 100%; margin-top: 0; }

.demo-card { margin-top: auto; width: min(430px, 100%); }

.demo-card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
}
.d-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 14px 18px;
  font-size: 0.9375rem; font-weight: 500;
  border-bottom: 1px dashed var(--border-strong);
}
.d-row .mono { font-size: 0.875rem; font-weight: 600; }
.d-search { background: var(--surface-muted); font-weight: 600; }
.d-cta { background: var(--ink); color: var(--ink-inverse); border-bottom: none; }
.d-cta { animation: ctapulse 1.9s ease-in-out infinite; }
@keyframes ctapulse { 50% { opacity: 0.82; } }
.d-xp {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px dashed var(--border-strong);
  font-size: 0.875rem; font-weight: 600;
}
.xp-bar { flex: 1; height: 8px; background: var(--surface-muted); border-radius: 999px; overflow: hidden; }
.xp-bar i { display: block; height: 100%; width: 64%; background: var(--ember); border-radius: 999px; }
/* ---------- Features: marigold band arches over the steps ---------- */
.features {
  background: var(--marigold);
  background-image: var(--grain-dark);
  background-size: 7px 7px;
  padding: 96px 0 110px;
  overflow: visible;
  position: relative;
  border-radius: clamp(28px, 6vw, 72px) clamp(28px, 6vw, 72px) 0 0;
  margin-top: -80px;
  z-index: 22;
  border-top: 3px solid var(--ink);
}
.features-ball {
  position: absolute;
  top: 0; left: 14%;
  transform: translateY(-52%) rotate(12deg);
  width: clamp(64px, 7.4vw, 110px);
}
.features-inner { display: flex; flex-direction: column; align-items: center; }
.features .serif-line { max-width: 24ch; }
.feat-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center;
  margin-top: 64px;
  width: 100%;
}
.feat-lede {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  margin-bottom: 20px;
}
.feat-copy .stack-list { color: var(--ink); }
.feat-stickers { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mini-sticker {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 7px 14px;
  font-weight: 700; font-size: 0.875rem;
}
.mini-sticker:nth-child(odd) { rotate: -2deg; }
.mini-sticker:nth-child(even) { rotate: 2deg; }
.feat-screen {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow-hard);
  padding: 22px 26px 26px;
}
.fs-topline {
  display: flex; justify-content: space-between;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--ink-tertiary);
  padding-bottom: 14px;
}
.notif-col { display: flex; flex-direction: column; gap: 16px; }
.notif {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 14px 88px 14px 16px;
  text-align: left;
}
.notif-title { font-weight: 700; font-size: 0.9375rem; }
.notif-sub { font-size: 0.8125rem; color: var(--ink-secondary); margin-top: 3px; }
.notif-val {
  position: absolute; top: 14px; right: 14px;
  font-size: 0.8125rem; font-weight: 700;
  background: var(--surface-muted);
  border-radius: 6px;
  padding: 3px 8px;
}

/* ---------- Old way band: espresso, court diagram, toggle ---------- */
.oldway {
  background: var(--espresso);
  background-image: var(--grain-light);
  background-size: 7px 7px;
  color: var(--ink-inverse);
  padding: 110px 0 0;
  position: relative;
  z-index: 21;
}
.oldway-inner { display: flex; flex-direction: column; align-items: center; padding-bottom: 40px; }
.oldway .serif-line { color: var(--ink-inverse); max-width: 22ch; }
.way-toggle {
  display: flex;
  margin-top: 36px;
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  padding: 4px;
  gap: 4px;
}
.way-btn {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none; border-radius: 8px;
  padding: 10px 22px;
  cursor: pointer;
}
.way-btn.is-active { background: var(--ink); color: var(--ink-inverse); }
.court-wrap { position: relative; width: min(880px, 92vw); margin-top: 54px; }
.court { width: 100%; height: auto; display: block; }
.court-line { stroke: rgba(251, 247, 241, 0.34); stroke-width: 2.5; fill: none; }
.way-path { stroke-width: 7; stroke-linecap: round; fill: none; opacity: 0; transition: opacity 0.4s ease; }
.way-path.is-shown { opacity: 1; }
.way-old { stroke: var(--ember); stroke-dasharray: 2 16; }
.way-new { stroke: var(--green); }
.way-goal { fill: var(--marigold); stroke: var(--ink); stroke-width: 3; }
.way-labels { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.way-labels.is-shown { opacity: 1; }
.way-tag {
  position: absolute;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  padding: 5px 12px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink);
  white-space: nowrap;
}
.way-labels-old .way-tag:nth-child(1) { left: 12%; top: 34%; rotate: -4deg; }
.way-labels-old .way-tag:nth-child(2) { left: 32%; top: 66%; rotate: 3deg; }
.way-labels-old .way-tag:nth-child(3) { left: 55%; top: 38%; rotate: -2deg; }
.way-labels-old .way-tag:nth-child(4) { left: 72%; top: 62%; rotate: 4deg; }
.way-tag-new { background: var(--green-tint); }
.way-labels-new .way-tag:nth-child(1) { left: 14%; top: 68%; rotate: -3deg; }
.way-labels-new .way-tag:nth-child(2) { left: 46%; top: 44%; rotate: 2deg; }
.way-labels-new .way-tag:nth-child(3) { left: 78%; top: 16%; rotate: -2deg; }
.way-line { margin-top: 34px; color: rgba(251, 247, 241, 0.75); max-width: 52ch; text-align: center; }

/* Domes: a half circle of the NEXT section's color rising over this one */
.dome { line-height: 0; height: clamp(90px, 16vw, 220px); overflow: hidden; position: relative; }
.dome::after {
  content: "";
  position: absolute;
  left: 50%; top: 18%;
  transform: translateX(-50%);
  width: min(1900px, 175vw); height: min(900px, 92vw);
  border-radius: 50% 50% 0 0;
}
.dome-paper::after { background: var(--paper); }
.dome-espresso::after { background: var(--espresso); }

/* ---------- Strip: marigold marquee band ---------- */
.strip {
  position: relative;
  z-index: 24;
  background: var(--marigold);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
  padding: 16px 0;
}
.strip-track {
  display: flex; align-items: center; gap: 44px;
  width: max-content;
  animation: drift 22s linear infinite;
}
.strip-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  white-space: nowrap;
}
.strip-star { font-size: 1.5rem; }

/* ---------- Pricing: deep green band ---------- */
.pricing {
  background: var(--green-deep);
  background-image: var(--grain-light);
  background-size: 7px 7px;
  color: var(--ink-inverse);
  padding: 110px 0 0;
  position: relative;
  z-index: 24;
}
.pricing-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; flex-wrap: wrap;
}
.pricing-note { max-width: 34ch; color: rgba(251, 247, 241, 0.8); }
.pricing .sticker { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.pricing-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  margin-top: 64px;
  align-items: start;
}
.incl-card {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  background: var(--surface);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-hard);
  padding: 34px 36px;
}
.incl-card h3, .plan h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.incl-card ul { list-style: none; margin-top: 22px; }
.incl-card li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 0;
  font-size: 0.9375rem; font-weight: 500;
}
.incl-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px dashed var(--border-strong);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--ink-tertiary);
}
.check {
  flex: none;
  width: 18px; height: 18px; margin-top: 3px;
  stroke: var(--green); stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.d-check { width: 16px; height: 16px; margin-top: 0; }
.plan-col { display: flex; flex-direction: column; gap: 22px; }
.plan {
  background: var(--surface);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-hard);
  padding: 28px 30px;
  position: relative;
}
.plan-pro { border-color: var(--marigold); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.plan-elite { border-color: var(--ember); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.plan-flag {
  position: absolute; top: -14px; right: 22px;
  background: var(--marigold);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
}
.price {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 8px;
}
.price .mono { font-size: 2rem; font-weight: 700; }
.price .per { font-size: 0.9375rem; color: var(--ink-tertiary); }
.plan-line {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px dashed var(--border-strong);
  font-weight: 600;
  font-size: 0.9375rem;
}
.plan-feats { list-style: none; margin-top: 12px; }
.plan-feats li {
  padding: 7px 0;
  font-size: 0.9375rem;
  color: var(--ink-secondary);
  border-bottom: 1px dashed var(--border);
}
.plan-feats li:last-child { border-bottom: none; }
.plan-cta {
  display: block;
  text-align: center;
  margin-top: 18px;
  padding: 15px 22px;
  border-radius: 10px;
  border: 2px solid var(--ink);
  font-weight: 700; font-size: 1rem;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.plan-cta:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.cta-ink { background: var(--ink); color: var(--ink-inverse); }
.cta-marigold { background: var(--marigold); color: var(--ink); }
.cta-ember { background: var(--ember); color: var(--ink-on-accent); }
.cta-paper { background: var(--paper); color: var(--ink); }
.plan-enterprise {
  border: 2px dashed rgba(251, 247, 241, 0.5);
  border-radius: 16px;
  padding: 26px 30px;
  text-align: center;
}
.ent-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
}
.ent-line { margin-top: 8px; font-size: 0.9375rem; color: rgba(251, 247, 241, 0.8); }
.plan-enterprise .plan-cta { display: inline-block; margin-top: 16px; }
/* rounded hand off into the personas band */
.pricing-round {
  margin-top: 110px;
  height: clamp(40px, 6vw, 80px);
  background: var(--paper);
  border-radius: clamp(28px, 6vw, 72px) clamp(28px, 6vw, 72px) 0 0;
}

/* ---------- Personas ---------- */
.personas { background: var(--paper); padding: 40px 0 0; position: relative; z-index: 24; }
.personas-title { max-width: 20ch; margin: 0 auto; }
.persona-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  margin-top: 56px;
}
.persona {
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-hard);
  padding: 26px 24px;
}
.persona:nth-child(odd) { rotate: -0.8deg; }
.persona:nth-child(even) { rotate: 0.8deg; }
.p-icon { width: 34px; height: 34px; stroke: var(--ember); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.persona h3 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.25rem;
  margin-top: 14px;
}
.persona p { font-size: 0.9375rem; color: var(--ink-secondary); margin-top: 8px; }
.persona .p-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--ink);
  background: var(--surface-muted);
  border-radius: 6px;
  padding: 4px 10px;
}
.personas .dome { margin-top: 90px; }

/* ---------- Empower closing ---------- */
.empower {
  position: relative;
  background-color: var(--espresso);
  background-image:
    var(--grain-light),
    linear-gradient(180deg, rgba(20, 16, 11, 0.9), rgba(20, 16, 11, 0.82) 50%, rgba(20, 16, 11, 0.94)),
    url("img/night-match.jpg");
  background-size: 7px 7px, auto, cover;
  background-position: 0 0, 0 0, center;
  color: var(--ink-inverse);
  padding: 30px 0 100px;
}
.empower-inner { position: relative; z-index: 1; }
/* the pin recipe, R1: own stacking context above the negative-margin band
   (24), footer above the released pin (31). pinSpacing true always. */
.emp-pin-wrap { position: relative; isolation: isolate; z-index: 30; }
.emp-outro { position: relative; z-index: 1; padding-bottom: 20px; }
/* Desktop pinned stage: everything composes into ONE viewport. The ball sits
   behind the story in the centre; cards and stats layer over it. Mobile keeps
   the natural stacked flow (no pin there). */
@media (min-width: 901px) {
  .emp-stage {
    height: 100svh;
    display: flex; flex-direction: column; justify-content: space-between;
    padding-top: 12px; padding-bottom: 26px;
    overflow: clip;
  }
  .emp-stage .empower-head { padding-top: 6px; gap: 32px; }
  .emp-stage .empower-head .sticker-stack .sticker { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
  .emp-stage .empower-note p { font-size: 0.9375rem; }
  .emp-stage .empower-note p + p { margin-top: 6px; }
  .emp-stage .emp-flow { position: relative; z-index: 2; margin-top: 24px; }
  .emp-stage .emp-stats { position: relative; z-index: 2; margin-top: 26px; }
  .emp-stage .roundup-line { position: relative; z-index: 2; margin-top: 20px; }
}
.empower-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
  padding-top: 30px;
}
.empower .sticker { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55); }
.empower-note { border-color: rgba(251, 247, 241, 0.35); color: var(--ink-inverse); background: transparent; }

.roundup-line {
  text-align: center;
  margin-top: 28px;
  font-weight: 600; font-size: 1.0625rem;
  color: var(--ink-tertiary);
}
.roundup-line .ru { color: var(--ink-inverse); }
.empower .cta-row { margin-top: 34px; }
.cta-note { text-align: center; margin-top: 16px; font-size: 0.9375rem; color: var(--ink-tertiary); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: #0B0906;
  color: var(--ink-inverse);
  padding: 84px 0 0;
  overflow: hidden;
  z-index: 31; /* paints over the released Empower pin, R1 recipe */
}
.footer-top { display: flex; flex-wrap: wrap; gap: 64px; justify-content: space-between; }
.newsletter { max-width: 420px; }
.tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
}
.news-line { margin-top: 18px; color: var(--ink-tertiary); font-size: 0.9375rem; }
.newsletter .btn-pill { margin-top: 14px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 64px; }
.footer-cols nav { display: flex; flex-direction: column; gap: 10px; }
.f-head { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-tertiary); margin-bottom: 4px; }
.footer-cols a { color: var(--ink-inverse); text-decoration: none; font-size: 0.9375rem; opacity: 0.85; }
.footer-cols a:hover { opacity: 1; color: var(--ember); }
.copyright {
  margin-top: 56px;
  padding: 18px 0;
  border-top: 1px solid rgba(251, 247, 241, 0.14);
  font-size: 0.875rem;
  color: var(--ink-tertiary);
}
.giant-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(9rem, 30vw, 26rem);
  line-height: 0.72;
  text-align: center;
  color: var(--ember);
  -webkit-text-stroke: clamp(4px, 0.9vw, 10px) var(--paper);
  paint-order: stroke fill;
  margin-top: 30px;
  margin-bottom: -0.16em;
  user-select: none;
  white-space: nowrap;
  will-change: transform;
}

/* ---------- Section intent eyebrows ---------- */
.sec-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--ink-tertiary);
  margin-bottom: 22px;
}
.sec-eyebrow::before {
  content: "";
  width: 34px; height: 3px;
  background: var(--ember);
  border-radius: 2px;
}
.eyebrow-onDark { color: rgba(251, 247, 241, 0.7); }
.eyebrow-onDark::before { background: var(--marigold); }
.eyebrow-onAccent { color: rgba(251, 247, 241, 0.9); }
.eyebrow-onAccent::before { background: var(--paper); }
.eyebrow-center { justify-content: center; }

/* ---------- Problem word rotator ---------- */
#rotChip { display: inline-block; transition: opacity 0.35s ease; }
#rotChip.is-out { opacity: 0; }

/* ---------- Checkered demo frames (the old features card treatment) ---------- */
.demo-frame {
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-hard);
  padding: clamp(16px, 2.4vw, 30px);
  background-image: repeating-conic-gradient(rgba(28, 23, 18, 0.05) 0% 25%, transparent 0% 50%);
  background-size: 44px 44px;
}
.frame-marigold { background-color: var(--marigold-tint); }
.frame-ember { background-color: var(--ember-tint); }
.frame-green { background-color: var(--green-tint); }
.frame-paper { background-color: var(--paper); }
.feat-screen.demo-frame { border-radius: 26px; border-width: 3px; padding: 20px 22px 24px; }

/* ---------- Old way draw on ---------- */
.way-path { transition: opacity 0.4s ease, stroke-dashoffset 1.4s cubic-bezier(0.3, 0, 0.2, 1); }

/* ---------- Tags: generic chips with idle float ---------- */
.tag {
  display: inline-block;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  box-shadow: 2.5px 2.5px 0 var(--ink);
  padding: 5px 12px;
  font-size: 0.8125rem; font-weight: 600;
  white-space: nowrap;
  animation: idlefloat 2.6s ease-in-out infinite;
}
@keyframes idlefloat { 50% { translate: 0 -5px; } }
.tag:nth-child(2), .mini-sticker:nth-child(2) { animation-delay: 0.4s; }
.tag:nth-child(3), .mini-sticker:nth-child(3) { animation-delay: 0.8s; }
.tag:nth-child(4) { animation-delay: 1.2s; }
.mini-sticker { animation: idlefloat 3s ease-in-out infinite; }
.p-icon { animation: idlefloat 2.8s ease-in-out infinite; }

/* ---------- Different: three intent rows ---------- */
.different { padding: 110px 0 120px; background: var(--paper); }
.diff-rows { margin-top: 56px; display: flex; flex-direction: column; gap: 26px; }
.diff-row {
  display: grid; grid-template-columns: auto 1.2fr 1fr; gap: clamp(20px, 3.4vw, 48px);
  align-items: center;
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--shadow-hard);
  padding: clamp(24px, 3.4vw, 44px);
}
.diff-flip { grid-template-columns: auto 1fr 1.2fr; }
.diff-flip .diff-copy { order: 3; }
.diff-flip .diff-media { order: 2; }
.diff-marigold { background: var(--marigold-tint); }
.diff-ember { background: var(--ember-tint); }
.diff-green { background: var(--green-tint); }
.diff-num {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--ink);
  opacity: 0.35;
  align-self: flex-start;
}
.diff-copy h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.1;
}
.diff-copy p { margin-top: 12px; color: var(--ink-secondary); max-width: 44ch; }
.diff-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.diff-media img {
  width: 100%; height: 100%;
  min-height: 220px; max-height: 280px;
  object-fit: cover;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-hard);
  filter: saturate(0.85);
}
.diff-receipt { width: 100%; }
.diff-empower-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: var(--green-deep);
  color: var(--ink-inverse);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-hard);
  padding: 26px 28px;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.diff-empower-link:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); }
.del-head { font-family: var(--font-display); font-weight: 900; font-size: 1.75rem; }
.del-line { font-size: 0.9375rem; color: rgba(251, 247, 241, 0.8); }
.del-arrow { font-size: 1.5rem; animation: bob 1.4s ease-in-out infinite; }

/* ---------- Voices wall ---------- */
.voices { padding: 40px 0 110px; background: var(--paper); overflow: hidden; }
.voices-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.voices-note { margin-top: 14px; color: var(--ink-tertiary); max-width: 52ch; }
.vwall { margin-top: 48px; display: flex; flex-direction: column; gap: 20px; }
.vwall .marquee-track { animation-duration: 48s; }
.vwall .marquee-reverse { animation-duration: 56s; margin-top: 0; }
.vwall .marquee-track:hover { animation-play-state: paused; }
.vcard {
  position: relative;
  flex: none;
  width: 340px;
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-hard);
  padding: 22px 24px 18px;
  text-align: left;
  white-space: normal;
}
.v-quote { font-size: 0.9375rem; font-weight: 500; color: var(--ink-secondary); font-style: italic; }
.v-name { margin-top: 14px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-tertiary); }
.v-tag {
  position: absolute; top: -10px; right: 16px;
  background: var(--marigold);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--ink);
}

/* ---------- Empower flow, stats, 3D ---------- */
.emp-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 64px;
}
.emp-card {
  position: relative;
  background: var(--espresso-surface);
  border: 2px solid rgba(251, 247, 241, 0.25);
  border-radius: 16px;
  padding: 24px 26px;
  min-height: 200px;
  display: flex; flex-direction: column;
}
.emp-num { font-size: 0.8125rem; font-weight: 700; color: var(--marigold); letter-spacing: 0.14em; }
.emp-title { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; margin-top: 8px; }
.emp-line { font-size: 0.9375rem; color: rgba(251, 247, 241, 0.7); margin-top: 6px; }
.emp-val { margin-top: auto; padding-top: 14px; font-size: 1.75rem; font-weight: 700; }
.emp-val-green { color: var(--green); }
.emp-arrow { width: clamp(60px, 7vw, 110px); }
.emp-arrow .a-path { stroke-width: 5; }
.photo-slot {
  margin-top: auto;
  min-height: 180px;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: url("img/empower-story.jpg") center / cover;
}
.emp-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 26px;
}
.emp-stat {
  position: relative;
  text-align: center;
  border: 2px dashed rgba(251, 247, 241, 0.3);
  border-radius: 14px;
  padding: 22px 16px 18px;
}
.emp-stat-val { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; }
.emp-stat-label { margin-top: 4px; font-size: 0.875rem; color: rgba(251, 247, 241, 0.7); }
.emp-stat .v-tag { top: -10px; right: 14px; }
/* ---------- The coin journey (elements created by motion/sections/empower.js)
   A dashed route threads the three flow cards; a rupee coin travels it as the
   pin scrubs, the trail inking in behind it. Same hand-drawn language as the
   emp arrows, no WebGL. ---------- */
.emp-journey {
  position: absolute; inset: -40px 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.emp-journey .journey-track {
  fill: none;
  stroke: rgba(251, 247, 241, 0.18);
  stroke-width: 2;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
}
.emp-journey .journey-trail {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.emp-coin {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--marigold);
  border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(28, 23, 18, 0.18);
  font-weight: 700; font-size: 1.125rem;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
}
.emp-coin.is-live { opacity: 1; }

/* ---------- Reduced motion: final states, no pins, pre typed text ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret, .hint-arrow { animation: none; }
  .marquee-track, .strip-track { animation: none; }
  .tag, .d-cta, .mini-sticker, .p-icon, .del-arrow { animation: none; }
  .rail-line { animation: none; transform: scaleX(1); }
  /* hero: every element at its final state on first paint, no choreography */
  .js:not(.hero-ready) .site-header,
  .js:not(.hero-ready) .hh-inner,
  .js:not(.hero-ready) .hero-panel,
  .js:not(.hero-ready) .kit-tile,
  .js:not(.hero-ready) .hero-rail { opacity: 1; transform: none; clip-path: none; transition: none; }
  html.js:not(.hero-ready) .hl { transform: skewY(-8deg); opacity: 0; }
  html.js:not(.hero-ready) .hl-2 { opacity: 1; transform: skewY(-8deg) scaleY(0.1); }
  .way-path { transition: opacity 0.4s ease; }
  .emp-journey, .emp-coin { display: none; }
  .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .js [data-reveal] { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* hero mobile: two tiles, two speed lines, smaller type, panel tucked low */
  .hero-headline { font-size: clamp(2.5rem, 12vw, 4rem); max-width: none; }
  .hero-panel { width: 74vw; height: 46%; top: auto; bottom: 0; right: -10vw; opacity: 0.55; }
  .kit-tile:nth-child(n+3) { display: none; }
  /* two bars on mobile: hl-1 plus the hl-2 survivor */
  .hl-3, .hl-4, .hl-5 { display: none; }
  .problem-grid, .empower-head, .pricing-grid, .feat-grid { grid-template-columns: 1fr; gap: 36px; }
  .problem-grid h2 { justify-self: start; }
  .step-grid { grid-template-columns: 1fr; gap: 28px; }
  .step-file { height: auto; position: relative; top: 0; }
  .step-tab {
    width: max-content; max-width: 88vw; margin-left: 0 !important;
    padding: 14px 22px; font-size: 1.125rem;
  }
  .step-panel { padding: 34px 0 44px; }
  .persona-grid { grid-template-columns: 1fr 1fr; }
  .diff-row, .diff-flip { grid-template-columns: 1fr; }
  .diff-flip .diff-copy { order: 0; }
  .diff-flip .diff-media { order: 1; }
  .emp-flow { grid-template-columns: 1fr; }
  .emp-arrow { justify-self: center; rotate: 90deg; }
  .emp-stats { grid-template-columns: 1fr; }
  .incl-card { position: static; }
  .seam-ball { left: 6%; }
}
@media (max-width: 620px) {
  .site-nav { display: none; }
  .nav-card { max-width: 380px; }
  .footer-cols { gap: 36px; }
  .persona-grid { grid-template-columns: 1fr; }
  .way-toggle { flex-direction: row; }
  .way-btn { font-size: 0.875rem; padding: 9px 14px; }
  .way-tag { font-size: 0.625rem; padding: 4px 8px; }
  .features { margin-top: -60px; }
  .problem { margin-top: -80px; }
}