/* ===========================================================================
   OmniSnap AI Studio — marketing site
   Brand: Midnight / Cloud / Snap Yellow triad. Semantic green stays for
   success checks only; cyan/coral stay product-overlay tokens, not chrome.
   Website leads; mirror tokens into the extension after look is signed off.

   No third-party stylesheet, font or script is loaded anywhere on this site.
   A product whose entire claim is "nothing leaves your machine" should not
   open a connection to someone else's server to render its own homepage.
   =========================================================================== */

:root {
  /* Snap Amber brand kit — graphite studio chrome with one bright act signal.
     Accent ink is required: amber fills fail AA with white label text. */
  /* Aligned to the locked brand triad: Midnight / Cloud / Snap Yellow. */
  --accent: #ffc900;
  --accent-soft: #ffe56a;
  --accent-deep: #e6b400;
  --accent-ink: #08090b;
  --emerald: #10b981;
  --emerald-soft: #34d399;
  /* Warning amber stays distinct from brand Snap Amber so CTAs never read as alerts. */
  --amber: #f59e0b;
  --rose: #f43f5e;
  /* The 400-step partner to --rose, matching how --accent-soft and
     --emerald-soft pair with their 500s. Needed because --rose on a raised
     surface falls under 4.5:1 at small sizes. */
  --rose-soft: #fb7185;
  /* Redline / measure cyan — overlays and designer-role signal, not brand identity. */
  --redline: #38bdf8;
  /* Defect markers stay high-visibility against arbitrary page captures. */
  --defect: #ff6845;
  /* Buy Me a Coffee's own brand colours, taken from their live button rather
     than guessed: #ffdd00 on #0d0c22. Not an arbitrary pick; using the
     platform's palette is what makes the button recognisable as that button. */
  --coffee: #ffdd00;
  --coffee-ink: #0d0c22;

  /* Near-neutral graphite — depth from steps and hairlines, not navy tint. */
  --obsidian: #08090b;
  --surface: #1c1d20;
  --surface-2: #24262b;
  --surface-3: #2e3138;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --text: #f5f3ef;
  --text-dim: #b0aea8;
  --text-faint: #85827c;

  --glass: rgba(14, 15, 18, 0.72);
  --glass-strong: rgba(10, 11, 13, 0.88);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.36);
  --shadow-3: 0 22px 56px rgba(0, 0, 0, 0.52);

  /* Body stays system UI for density and speed. Syne is self-hosted for
     display — the premium gap the PDF names is type direction, not a CDN. */
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --display: 'Syne', var(--font);
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* One rhythm for page gutters and section spacing, so every breakpoint
     stays in step without per-section media queries. */
  --gutter: clamp(18px, 4.5vw, 40px);
  --section: clamp(40px, 6vw, 88px);
  --measure: 1120px;

  color-scheme: dark;
}

/* Syne — display face. SIL OFL; see assets/fonts/syne-OFL.txt. Declared early
   so the browser discovers it before the hero paints. */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/syne-latin-600-normal.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: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/syne-latin-700-normal.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;
}

/* ───────────────────────── reset ───────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* Anchored sections must not land under the sticky header. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
  /* Keep a single document scroller — never nest overflow-y on body. */
  overflow-x: clip;
  overflow-y: scroll;
}

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`: overflow-x: hidden silently promotes overflow-y to
     auto, which turns body into a second scroll container (double scrollbar). */
  overflow-x: clip;
  overflow-y: visible;
}

/* Entrance snap — one yellow flash, then gone. Never blocks interaction. */
html.snap-ready body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%, rgba(255, 201, 0, 0.2), transparent 52%);
  opacity: 1;
  transition: opacity 0.7s var(--ease-out);
}

html.snap-ready.snap-in body::before {
  opacity: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent-soft);
  text-decoration-color: rgba(255, 201, 40, 0.42);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--text);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 650;
  text-wrap: balance;
  color: var(--text);
}

h1,
h2,
.brand span {
  font-family: var(--display);
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
}

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

::selection {
  background: rgba(255, 201, 40, 0.38);
  color: var(--accent-ink);
}

/* Fixed, not absolute. An absolutely-positioned skip link resolves `top`
   against the document, so focusing it part-way down a long page parked it
   thousands of pixels above the viewport — invisible exactly when a keyboard
   user needs it. Fixed resolves against the viewport, which is the point. */
.skip {
  position: fixed;
  left: 12px;
  top: -64px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease-spring);
}

.skip:focus {
  top: 12px;
}

.mono {
  font-family: var(--mono);
  font-size: 0.86em;
  letter-spacing: -0.01em;
}

.dim {
  color: var(--text-dim);
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ───────────────────────── atmosphere ───────────────────────── */

/* The same aurora the Studio uses, pinned behind everything. It is
   decorative, so it is hidden from assistive tech and stilled for anyone who
   asks for less motion. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  animation: drift 24s var(--ease-in-out, ease-in-out) infinite alternate;
}

/* Triad-only atmosphere: warm Snap Yellow at three depths — no cyan/green brand leak. */
.aurora i:nth-child(1) {
  width: 48vw;
  height: 48vw;
  min-width: 320px;
  min-height: 320px;
  top: -16vw;
  left: -10vw;
  opacity: 0.34;
  background: radial-gradient(circle, rgba(255, 201, 0, 0.55), transparent 70%);
}

.aurora i:nth-child(2) {
  width: 36vw;
  height: 36vw;
  min-width: 260px;
  min-height: 260px;
  top: 28vh;
  right: -10vw;
  opacity: 0.22;
  background: radial-gradient(circle, rgba(255, 229, 106, 0.4), transparent 72%);
  animation-delay: -8s;
}

.aurora i:nth-child(3) {
  width: 42vw;
  height: 42vw;
  min-width: 280px;
  min-height: 280px;
  bottom: -18vw;
  left: 30vw;
  opacity: 0.16;
  background: radial-gradient(circle, rgba(255, 201, 0, 0.28), transparent 74%);
  animation-delay: -15s;
}

@keyframes drift {
  to {
    transform: translate3d(5vw, 4vh, 0) scale(1.12);
  }
}

/* A faint grain breaks up the large flat gradients, which otherwise band on
   wide displays. Built from an inline SVG so it costs no request. */
.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  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.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.038'/%3E%3C/svg%3E");
}

/* ───────────────────────── header ───────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(10, 11, 13, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.header[data-stuck='true'] {
  border-bottom-color: var(--line);
  background: rgba(10, 11, 13, 0.9);
}

.header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
}

/* Floating capsule chrome — brand first, hairline triad bar. */
.header--capsule {
  top: 12px;
  padding: 0 16px;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header--capsule[data-stuck='true'] {
  background: transparent;
  border-bottom-color: transparent;
}

.header--capsule .header-capsule {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1120px;
  margin-inline: auto;
  min-height: 58px;
  padding: 6px 10px 6px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(12, 13, 16, 0.88);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.header--capsule[data-stuck='true'] .header-capsule {
  border-color: rgba(255, 201, 0, 0.28);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 201, 0, 0.08);
}

.header--capsule .brand {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: -0.03em;
}

.header--capsule .nav-primary {
  gap: 0;
}

.header--capsule .nav-primary a {
  font-size: 13.5px;
  padding: 8px 12px;
}

@media (max-width: 720px) {
  .header--capsule {
    top: 8px;
    padding: 0 10px;
  }

  .header--capsule .header-capsule {
    min-height: 52px;
    padding: 4px 8px 4px 12px;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex: none;
}

@media (pointer: coarse) {
  .brand {
    padding-block: 8px;
  }
}

.brand span {
  font-size: 15.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Slim primary rail — three links max. Everything else lives in Index. */
.nav-primary {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav-primary a {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.nav-primary a:hover,
.nav-primary a[aria-current='page'] {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-cta {
  padding-inline: 16px;
}

/* Text “Menu” + two-line mark — not a boxed hamburger. */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.menu-btn-marks {
  position: relative;
  width: 22px;
  height: 14px;
}

.menu-btn-marks i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.35s var(--ease-spring), top 0.35s var(--ease-out), opacity 0.2s linear;
}

.menu-btn-marks i:first-child {
  top: 3px;
}

.menu-btn-marks i:last-child {
  top: 9px;
  width: 70%;
}

.menu-btn.is-open .menu-btn-marks i:first-child {
  top: 6px;
  transform: rotate(45deg);
}

.menu-btn.is-open .menu-btn-marks i:last-child {
  top: 6px;
  width: 100%;
  transform: rotate(-45deg);
}

@media (max-width: 720px) {
  .nav-primary {
    display: none;
  }

  /* Homepage keeps Menu + CTA; secondary pages keep CTA only. */
  .header:has(#navToggle) .header-cta {
    display: none;
  }

  .brand .dim {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }
}

/* Full-bleed index overlay — editorial, not a dropdown. */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  padding-top: 88px;
  background: rgba(8, 9, 11, 0.94);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease-out), visibility 0.32s linear;
}

.site-menu.is-open {
  opacity: 1;
  visibility: visible;
}

html.menu-open {
  overflow: hidden;
}

.site-menu-panel {
  max-width: 920px;
  padding-block: clamp(24px, 6vh, 56px) 48px;
}

.site-menu-kicker {
  margin: 0 0 28px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-menu-nav {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.site-menu-nav a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 18px 24px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur) var(--ease-spring);
}

.site-menu-nav a::before {
  content: attr(data-idx);
  color: var(--accent);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.site-menu-nav a span {
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.site-menu-nav a em {
  justify-self: end;
  color: var(--text-faint);
  font-size: 13.5px;
  font-style: normal;
  font-weight: 500;
}

.site-menu-nav a:hover {
  color: var(--accent);
  padding-left: 10px;
}

.site-menu-cta {
  margin-top: 32px;
}

@media (max-width: 640px) {
  .site-menu-nav a {
    grid-template-columns: auto 1fr;
  }

  .site-menu-nav a em {
    display: none;
  }
}

/* ───────────────────────── buttons ───────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-spring),
    background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.btn:hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 6px 22px rgba(255, 201, 0, 0.28);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #fff0a8, var(--accent-soft));
  color: var(--accent-ink);
  box-shadow: 0 10px 30px rgba(255, 201, 0, 0.4);
}

/* Snap press — short spring, the brand’s one tactile beat. */
.btn-primary:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 3px 12px rgba(255, 201, 0, 0.22);
}

.btn-lg {
  padding: 15px 26px;
  font-size: 16px;
}

/* Pointer-coarse rather than a width query: a small tablet and a large phone
   both need a thumb-sized target, and neither is reliably identified by its
   viewport width. 44px is the documented minimum for a touch target. */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }

  .btn-lg {
    min-height: 50px;
  }
}

/* ───────────────────────── sections ───────────────────────── */

section {
  position: relative;
  padding-block: var(--section);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 201, 40, 0.1);
  color: var(--accent-soft);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(32px, 4.8vw, 56px);
}

.section-head h2 {
  font-size: clamp(26px, 4.2vw, 42px);
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.032em;
}

.section-head p {
  font-size: clamp(15.5px, 1.9vw, 18px);
  line-height: 1.6;
  color: var(--text-dim);
}

.center {
  margin-inline: auto;
  text-align: center;
}

/* ───────────────────────── hero ───────────────────────── */

.hero {
  position: relative;
  z-index: 0;
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(40px, 6vw, 80px);
  text-align: center;
}

/* Bleed hero: product-first spectacle with minimal copy. */
.hero--bleed,
.hero--stage {
  text-align: left;
  padding-top: clamp(40px, 7vw, 88px);
  padding-bottom: 0;
  overflow: clip;
}

.hero-bleed,
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-bottom: clamp(36px, 6vw, 64px);
}

.hero-copy .eyebrow {
  margin-bottom: 18px;
}

.hero--showroom .hero-visual .shot--hero {
  width: 100%;
  max-width: none;
}

.hero--bleed h1,
.hero--stage h1 {
  max-width: 11.5em;
  margin-inline: 0;
  font-size: clamp(36px, 5.4vw, 62px);
}

.hero--bleed .lede,
.hero--stage .lede {
  margin-inline: 0;
  max-width: 38ch;
}

.hero--bleed .hero-cta,
.hero--bleed .hero-trust,
.hero--stage .hero-cta,
.hero--stage .hero-trust {
  justify-content: flex-start;
}

.hero-ticker {
  border-block: 1px solid var(--line);
  background: rgba(255, 201, 0, 0.06);
  overflow: hidden;
}

.hero-ticker-track {
  display: flex;
  gap: 48px;
  width: max-content;
  padding: 14px 0;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  animation: tickerX 28s linear infinite;
}

@keyframes tickerX {
  to {
    transform: translateX(-50%);
  }
}

.hero-visual {
  position: relative;
  isolation: isolate;
}

.hero-ring {
  position: absolute;
  inset: -8% -6%;
  z-index: 0;
  pointer-events: none;
}

.hero-ring i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  animation: ringPulse 10s var(--ease-in-out, ease-in-out) infinite alternate;
}

.hero-ring i:nth-child(2) {
  inset: 7%;
  border-color: rgba(255, 201, 0, 0.07);
  animation-delay: -2.5s;
}

.hero-ring i:nth-child(3) {
  inset: 16%;
  border-color: rgba(255, 255, 255, 0.04);
  animation-delay: -5s;
}

@keyframes ringPulse {
  from {
    transform: scale(0.98);
    opacity: 0.7;
  }
  to {
    transform: scale(1.03);
    opacity: 1;
  }
}

.shot--hero {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  transform: perspective(1600px) rotateY(-6deg) rotateX(2deg);
  transform-origin: 60% 50%;
}

@media (hover: hover) and (min-width: 981px) {
  .shot--hero:hover {
    transform: perspective(1600px) rotateY(-3deg) rotateX(1deg) translateY(-4px);
  }
}

.hero h1 {
  max-width: 12em;
  margin-inline: auto;
  font-size: clamp(34px, 7vw, 68px);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.08;
}

/* Clip per line so SplitText can rise without eating the punch word. */
.hero h1 .hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

/* Never leave SplitText children invisible if a tween/CSP stalls. */
.hero h1 .char,
.hero h1 .word {
  display: inline-block;
  opacity: 1 !important;
  visibility: visible !important;
  will-change: transform;
}

.story-kicker,
.section-head h2,
.split-copy h2,
#coffee h2,
#install h2 {
  overflow: hidden;
}

.story-kicker .word,
.section-head h2 .word,
.split-copy h2 .word,
#coffee h2 .word,
#install h2 .word {
  display: inline-block;
  will-change: transform, opacity;
}

.band-story {
  position: relative;
}

/* Solid Snap Yellow — gradient + SplitText child spans = invisible text. */
.hero h1 .grad,
.hero h1 .grad-char {
  font-style: normal;
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: var(--accent);
}

.hero .lede {
  max-width: 54ch;
  margin: clamp(16px, 2.4vw, 22px) auto 0;
  font-size: clamp(15.5px, 2.1vw, 18.5px);
  line-height: 1.62;
  color: var(--text-dim);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-top: clamp(26px, 4vw, 34px);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: clamp(20px, 3vw, 26px);
  font-size: clamp(12.5px, 1.5vw, 13.5px);
  color: var(--text-faint);
}

.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-trust svg {
  color: var(--emerald);
  flex: none;
}

@media (max-width: 960px) {
  .hero-bleed,
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero--bleed,
  .hero--stage {
    text-align: center;
  }

  .hero--bleed h1,
  .hero--stage h1 {
    max-width: 14em;
    margin-inline: auto;
  }

  .hero--bleed .lede,
  .hero--stage .lede {
    margin-inline: auto;
  }

  .hero--bleed .hero-cta,
  .hero--bleed .hero-trust,
  .hero--stage .hero-cta,
  .hero--stage .hero-trust {
    justify-content: center;
  }

  .shot--hero {
    transform: none;
  }

  .hero-ring {
    inset: -4% -2%;
  }
}

/* Phone: CTAs full-width so thumbs hit clean targets; trust row stays compact. */
@media (max-width: 480px) {
  .hero {
    padding-top: 40px;
  }

  .hero h1,
  .hero--stage h1 {
    max-width: 11em;
    font-size: clamp(30px, 9.2vw, 38px);
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-trust {
    gap: 8px 14px;
    max-width: 280px;
    margin-inline: auto;
  }
}

/* ── the product shot, drawn rather than photographed ──
   A screenshot would go stale the moment the Studio changes, and this has to
   look right at 360px as well as 1440. Cinematic lighting stays triad-only. */

.shot {
  position: relative;
  isolation: isolate;
  max-width: 1020px;
  margin: clamp(44px, 7vw, 76px) auto 0;
  border: 1px solid rgba(255, 201, 0, 0.18);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(255, 201, 0, 0.14), transparent 55%),
    linear-gradient(180deg, #1f2024 0%, var(--obsidian) 100%);
  box-shadow:
    var(--shadow-3),
    0 0 0 1px rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

/* Yellow rim filament along the top edge — the “snap” light source. */
.shot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  z-index: 3;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 229, 106, 0.85) 30%,
    rgba(255, 201, 0, 0.95) 50%,
    rgba(255, 229, 106, 0.85) 70%,
    transparent
  );
  pointer-events: none;
}

.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(8, 9, 11, 0.45), transparent 72%),
    linear-gradient(180deg, transparent 68%, rgba(8, 9, 11, 0.55));
}

.shot-bar,
.shot-body {
  position: relative;
  z-index: 1;
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 11, 13, 0.6);
}

.shot-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-3);
}

.shot-bar i:nth-child(1) {
  background: #ff5f57;
}
.shot-bar i:nth-child(2) {
  background: #febc2e;
}
.shot-bar i:nth-child(3) {
  background: #28c840;
}

.shot-url {
  flex: 1;
  margin-left: 10px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shot-body {
  display: grid;
  grid-template-columns: 52px 1fr 232px;
  min-height: 390px;
}

.shot-rail {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 14px 0;
  border-right: 1px solid var(--line);
  justify-items: center;
}

.shot-rail b {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.shot-rail b.on {
  background: var(--accent);
  box-shadow:
    0 0 0 1px rgba(255, 201, 0, 0.55),
    0 0 18px rgba(255, 201, 0, 0.35);
}

.shot-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 26px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(255, 201, 0, 0.12), transparent 62%),
    radial-gradient(ellipse at 50% 100%, rgba(8, 9, 11, 0.5), transparent 55%);
  overflow: hidden;
}

/* Soft key light drifting across the capture — one intentional motion beat. */
.shot-stage::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 243, 200, 0.09) 48%,
    transparent 62%
  );
  animation: stageWash 7.5s var(--ease-in-out, ease-in-out) infinite alternate;
  pointer-events: none;
}

@keyframes stageWash {
  from {
    transform: translate3d(-6%, 0, 0);
  }
  to {
    transform: translate3d(6%, 0, 0);
  }
}

.shot-plate {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 243, 200, 0.28);
  overflow: hidden;
  /* Brand triad only: Snap Yellow → warm ivory → graphite. */
  background:
    radial-gradient(120% 80% at 18% 12%, rgba(255, 229, 106, 0.95), transparent 42%),
    linear-gradient(155deg, #ffe56a 0%, #ffc900 28%, #f5f3ef 58%, #2e3138 100%);
  box-shadow:
    var(--shadow-3),
    0 0 48px rgba(255, 201, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: perspective(1400px) rotateX(6deg) rotateY(-11deg) rotateZ(1deg);
}

.shot-panel {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 16px 14px;
  border-left: 1px solid var(--line);
  background: rgba(8, 9, 11, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.shot-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.shot-tabs em {
  padding: 4px 9px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
}

.shot-tabs em.on {
  background: var(--accent);
  color: var(--accent-ink);
}

.shot-card {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(36, 38, 43, 0.9);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.shot-card strong {
  font-size: 12px;
  line-height: 1.35;
}

.shot-card span {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}

.shot-card span:nth-of-type(2) {
  width: 78%;
}

.shot-card span:nth-of-type(3) {
  width: 56%;
}

.shot-sev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--defect);
  font-family: var(--mono);
  font-size: 10.5px;
}

.shot-sev i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* Tablet: keep the three-pane studio readable without crushing the panel. */
@media (max-width: 960px) and (min-width: 761px) {
  .shot-body {
    grid-template-columns: 48px minmax(0, 1fr) minmax(180px, 210px);
    min-height: 340px;
  }

  .shot-stage {
    padding: 20px;
  }

  .shot-plate {
    max-width: 260px;
  }

  .shot-panel {
    padding: 14px 12px;
  }
}

@media (max-width: 760px) {
  .shot {
    border-radius: var(--r-lg);
  }

  .shot-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .shot-rail {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .shot-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .shot-stage {
    padding: 22px 18px;
    min-height: 220px;
  }

  .shot-plate {
    transform: none;
    max-width: min(220px, 58vw);
  }

  .shot-url {
    font-size: 10.5px;
  }
}

@media (max-width: 420px) {
  .shot-bar {
    padding: 10px 12px;
  }

  .shot-bar i:nth-child(n + 2) {
    display: none;
  }

  .shot-url {
    margin-left: 6px;
  }
}

/* ───────────────────────── scroll story ─────────────────────────
   One product object (Studio) + chapters on scroll. Without JS every
   chapter stacks and reads; with JS the sticky stage follows the chapter. */

.story {
  padding-block: clamp(40px, 6vw, 80px);
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 42%);
}

.story-kicker {
  font-size: clamp(40px, 7vw, 76px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  max-width: 10em;
  margin-inline: auto;
}

.story-kicker .hero-line {
  display: block;
  overflow: hidden;
}

.story-kicker .grad {
  font-style: normal;
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: var(--accent);
}

.story-intro p {
  max-width: 36ch;
  margin-inline: auto;
}

.story-pin {
  position: relative;
  z-index: 2;
}

.story-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.story-stage {
  display: grid;
  gap: 16px;
  justify-items: stretch;
  /* Sticky Studio — stays while chapters scrub past (no fragile GSAP pin). */
  position: sticky;
  top: 96px;
  z-index: 2;
}

.header--capsule ~ main .story-stage {
  top: 88px;
}

.snap-inlabel {
  margin: 0;
  color: var(--accent);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.shot--hero,
.shot--story,
.hero-visual,
.story-stage {
  opacity: 1 !important;
  visibility: visible !important;
}

.shot--story {
  width: 100%;
  max-width: none;
  margin: 0;
}

.shot--story .shot-body {
  min-height: 360px;
}

.shot-view {
  display: none;
  gap: 11px;
}

/* Default readable state without JS: show capture. */
.shot--story .shot-view[data-view='capture'],
.shot--story[data-chapter='capture'] .shot-view[data-view='capture'],
.shot--story[data-chapter='redline'] .shot-view[data-view='redline'],
.shot--story[data-chapter='brand'] .shot-view[data-view='brand'],
.shot--story[data-chapter='figma'] .shot-view[data-view='figma'],
.shot--story[data-chapter='ready'] .shot-view[data-view='ready'] {
  display: grid;
}

.shot--story[data-chapter='redline'] .shot-view[data-view='capture'],
.shot--story[data-chapter='brand'] .shot-view[data-view='capture'],
.shot--story[data-chapter='figma'] .shot-view[data-view='capture'],
.shot--story[data-chapter='ready'] .shot-view[data-view='capture'] {
  display: none;
}

.shot-swatches {
  grid-template-columns: repeat(4, 14px) 1fr;
  align-items: center;
  gap: 8px;
}

.shot-swatches i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.shot-swatches strong {
  grid-column: 1 / -1;
}

.shot-plate .plate-guides,
.shot-plate .plate-tokens,
.shot-plate .plate-layers {
  position: absolute;
  inset: 12%;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}

.shot-plate .plate-guides {
  background:
    linear-gradient(#38bdf8, #38bdf8) 20% 30% / 40% 1px no-repeat,
    linear-gradient(#38bdf8, #38bdf8) 20% 30% / 1px 28% no-repeat,
    linear-gradient(#38bdf8, #38bdf8) 60% 55% / 28% 1px no-repeat;
}

.shot-plate .plate-tokens {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px;
}

.shot-plate .plate-tokens::before,
.shot-plate .plate-tokens::after {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #ffc900;
  box-shadow: 28px 0 0 #f5f3ef, 56px 0 0 #1c1d20;
}

.shot-plate .plate-layers {
  border: 1.5px dashed rgba(8, 9, 11, 0.35);
  border-radius: 8px;
  box-shadow: 8px 10px 0 rgba(8, 9, 11, 0.12);
}

.shot--story[data-chapter='redline'] .plate-guides,
.shot--story[data-chapter='brand'] .plate-tokens,
.shot--story[data-chapter='figma'] .plate-layers {
  opacity: 1;
}

.shot--story .shot-rail b {
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-spring);
}

/* Editorial stage index: named labels, not dots. */
.story-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 2px;
  margin: 22px 0 0;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-index span {
  min-width: 64px;
  padding: 10px 8px;
  color: var(--text-faint);
  text-align: center;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.story-index span.on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.story-label,
.story-ritual {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story-backdrop {
  position: absolute;
  inset: auto 0 8%;
  z-index: 0;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(72px, 18vw, 220px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
  user-select: none;
}

.story-chapters {
  display: grid;
  gap: 14px;
  padding-block: 0;
}

/* Open typography — GSAP.com energy: no boxed SaaS cards on desktop. */
.story-chapter {
  position: relative;
  isolation: isolate;
  padding: clamp(8px, 1.5vw, 12px) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-spring);
}

.story-chapter.is-active {
  border: 0;
  box-shadow: none;
}

.story-step {
  display: block;
  margin-bottom: 18px;
  color: var(--accent);
  font-family: var(--display);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  opacity: 0.95;
}

.story-chapter h3 {
  margin-bottom: 16px;
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.story-chapter p {
  max-width: 34ch;
  color: var(--text-dim);
  font-size: clamp(16px, 1.9vw, 18.5px);
  line-height: 1.55;
}

.story-chapter .word {
  display: inline-block;
  will-change: transform, opacity;
}

@media (min-width: 901px) {
  .story-chapters {
    display: grid;
    gap: clamp(48px, 8vh, 88px);
    padding-block: 12px 48px;
  }

  .story-chapter {
    min-height: 42vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.28;
    transition: opacity 0.35s var(--ease-out);
  }

  .story-chapter.is-active {
    opacity: 1;
  }

  .shot--story {
    position: relative;
    z-index: 2;
    box-shadow:
      var(--shadow-3),
      0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}


/* Mobile keeps light frame so stacked chapters stay scannable. */
@media (max-width: 900px) {
  .story-chapter {
    padding: 22px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--glass);
  }

  .story-chapter.is-active {
    border-color: rgba(255, 201, 0, 0.3);
  }

  .story-step {
    font-size: 42px;
    margin-bottom: 10px;
  }
}

@media (max-width: 900px) {
  .story-board {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .story-stage {
    position: relative;
    top: auto;
    order: -1;
  }

  .shot--story .shot-body {
    min-height: 0;
  }

  .story-chapters {
    gap: 12px;
  }

  .story-chapter {
    min-height: 0;
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .shot--story .shot-rail {
    display: none;
  }

  .shot--story .shot-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .shot--story .shot-body {
    grid-template-columns: 1fr;
  }
}

/* ───────────────────────── audience split ───────────────────────── */

.roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
}

.role {
  position: relative;
  padding: clamp(22px, 3vw, 30px) clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.role::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  /* One brand accent at stepped opacities — not three competing hues. */
  background: var(--accent);
  opacity: var(--role-a, 1);
}

.role h3 {
  margin-bottom: 10px;
  font-size: clamp(17.5px, 2vw, 19.5px);
  letter-spacing: -0.02em;
}

.role p {
  color: var(--text-dim);
  font-size: clamp(14.2px, 1.6vw, 15.2px);
  line-height: 1.55;
}

.role ul {
  margin-top: 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: clamp(13.6px, 1.5vw, 14.5px);
  color: var(--text-dim);
}

.role li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.role li svg {
  flex: none;
  margin-top: 4px;
  color: var(--accent);
  opacity: calc(0.55 + (var(--role-a, 1) * 0.45));
}

@media (max-width: 900px) {
  .roles {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ───────────────────────── feature grid ───────────────────────── */

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 16px);
}

@media (max-width: 900px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .features {
    grid-template-columns: 1fr;
  }
}

.feature {
  padding: clamp(20px, 2.6vw, 26px) clamp(16px, 2.2vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--dur) var(--ease-spring), border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

.feature:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  background: rgba(36, 38, 43, 0.72);
}

.feature:active,
.role:active {
  transform: translateY(1px) scale(0.992);
}

.feature-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  background: rgba(255, 201, 40, 0.12);
  color: var(--accent-soft);
}

.feature h3 {
  margin-bottom: 9px;
  font-size: 17.5px;
}

.feature p {
  color: var(--text-dim);
  font-size: 14.8px;
}

/* ───────────────────────── split feature ───────────────────────── */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 800px) {
  .split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.split-copy h2 {
  font-size: clamp(24px, 3.8vw, 38px);
  margin-bottom: 14px;
  letter-spacing: -0.03em;
}

.split-copy p {
  color: var(--text-dim);
  font-size: clamp(15px, 1.8vw, 16.5px);
  line-height: 1.62;
}

.split-copy ul {
  margin-top: 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.split-copy li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: var(--text-dim);
  font-size: 15.3px;
}

.split-copy li svg {
  flex: none;
  margin-top: 4px;
  color: var(--emerald);
}

.split-copy li b {
  color: var(--text);
  font-weight: 600;
}

/* A framed code/output sample that sits beside the copy. */
.sample {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.sample header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(36, 38, 43, 0.6);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.sample header .tag {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(16, 185, 129, 0.14);
  color: var(--emerald-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
}

.sample pre {
  margin: 0;
  padding: 16px 15px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.4px;
  line-height: 1.72;
  color: var(--text-dim);
  -webkit-overflow-scrolling: touch;
}

.sample pre b {
  color: var(--text);
  font-weight: 600;
}

.sample pre i {
  color: var(--accent-soft);
  font-style: normal;
}

.sample pre u {
  color: var(--emerald-soft);
  text-decoration: none;
}

.sample pre s {
  color: var(--text-faint);
  text-decoration: none;
}

/* A code sample scrolls inside its own box rather than stretching the page,
   but on a phone that means scrolling nearly every line. A smaller step fits
   most of them outright. */
@media (max-width: 560px) {
  .sample pre {
    padding: 14px 13px;
    font-size: 11px;
    line-height: 1.68;
  }
}

/* ───────────────────────── support the build ───────────────────────── */

/* Cookie is the script face Buy Me a Coffee sets their own button in. It is
   served from this origin, not from Google Fonts: the site promises in
   writing that it loads nothing from third parties, and an exception for one
   button would make that claim false. Licensed under the SIL OFL, which the
   accompanying assets/fonts/cookie-OFL.txt satisfies.

   `swap` so the label is readable in the site face from the first paint; a
   14 KB font must never be the thing standing between a reader and a call to
   action. */
@font-face {
  font-family: 'Cookie';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cookie-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.coffee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(255, 221, 0, 0.1), rgba(255, 201, 40, 0.06) 62%);
  box-shadow: var(--shadow-2);
}

.coffee-copy {
  min-width: 0;
}

.coffee-copy h2 {
  margin-bottom: 14px;
  font-size: clamp(25px, 3.6vw, 36px);
}

.coffee-copy p {
  max-width: 62ch;
  color: var(--text-dim);
  font-size: 16.2px;
}

.coffee-copy p + p {
  margin-top: 13px;
}

.coffee-copy .btn {
  margin-top: 24px;
}

.coffee-note {
  margin-top: 14px;
  font-size: 13.2px;
  color: var(--text-faint);
}

/* Built to match the official button: flat #ffdd00, ink-dark mark and label,
   the cup on the left, and the wordmark set in Cookie. Flat rather than the
   gradient used elsewhere on this site, because theirs is flat and the point
   is that it reads as their button. */
.btn-coffee {
  gap: 11px;
  padding: 11px 22px 11px 18px;
  background: var(--coffee);
  border-color: transparent;
  color: var(--coffee-ink);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(255, 221, 0, 0.22);
}

.btn-coffee:hover {
  background: #ffe53d;
  color: var(--coffee-ink);
  box-shadow: 0 10px 28px rgba(255, 221, 0, 0.32);
}

.btn-coffee .bmc-cup {
  flex: none;
  color: var(--coffee-ink);
}

.bmc-label {
  font-family: 'Cookie', 'Brush Script MT', cursive;
  font-size: 1.62em;
  font-weight: 400;
  /* Cookie sits high in its box and has a long descender, so it needs
     nudging back onto the button's optical centre. */
  line-height: 1;
  padding-top: 0.14em;
  letter-spacing: 0.01em;
}

.btn-coffee-ghost {
  gap: 10px;
  border-color: rgba(255, 221, 0, 0.45);
  color: var(--coffee);
}

.btn-coffee-ghost:hover {
  background: rgba(255, 221, 0, 0.1);
  border-color: var(--coffee);
  color: var(--coffee);
}

/* Quiet brand seal — premium restraint beats a cartoon cup. */
.coffee-aside {
  display: grid;
  place-items: center;
  width: min(200px, 32vw);
  flex: none;
}

.coffee-seal {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
  padding: 28px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgba(8, 9, 11, 0.45);
  text-align: center;
}

.coffee-seal-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.coffee-seal-kicker {
  margin: 0;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.coffee-seal-facts {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  width: 100%;
}

.coffee-seal-facts li {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.coffee-seal-facts strong {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}

.coffee-seal-facts span {
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .coffee {
    grid-template-columns: 1fr;
  }

  .coffee-aside {
    width: 100%;
  }

  .coffee-seal-facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 12px;
  }

  .coffee-seal-facts li {
    border-top: 0;
    padding-top: 0;
  }
}

/* ───────────────────────── back to top ───────────────────────── */

.totop {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring),
    background var(--dur-fast) var(--ease-out);
}

.totop[data-show='true'] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.totop:hover {
  background: var(--surface-3);
}

/* ───────────────────────── cursor spotlight ───────────────────────── */

/* A soft light follows the pointer across a card. The position arrives as
   two custom properties, so the browser repaints a gradient and never
   recalculates layout. */
.feature,
.role {
  position: relative;
  isolation: isolate;
}

.feature::after,
.role::after,
.story-chapter::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 201, 0, 0.14),
    transparent 72%
  );
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .feature:hover::after,
  .role:hover::after,
  .story-chapter:hover::after {
    opacity: 1;
  }
}

/* ───────────────────────── privacy band ───────────────────────── */

.band {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 201, 0, 0.05), transparent 60%);
}

.pledge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.pledge div {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(10, 11, 13, 0.5);
}

.pledge h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  font-size: 16px;
}

.pledge h3 svg {
  color: var(--emerald);
  flex: none;
}

.pledge p {
  font-size: 14.5px;
  color: var(--text-dim);
}

/* ───────────────────────── tables ───────────────────────── */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.6px;
}

caption {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 13.5px;
  text-align: left;
}

th,
td {
  padding: 13px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

tbody th {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-soft);
  white-space: nowrap;
}

td {
  color: var(--text-dim);
}

.yes,
.no {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  white-space: nowrap;
}

.no {
  color: var(--emerald-soft);
}

.yes {
  color: var(--amber);
}

/* ───────────────────────── FAQ ───────────────────────── */

.faq {
  display: grid;
  gap: 10px;
  max-width: 820px;
}

details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out);
}

details[open] {
  border-color: var(--line-strong);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease-spring);
}

details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

details p {
  padding: 0 20px 18px;
  color: var(--text-dim);
  font-size: 15.2px;
}

/* ───────────────────────── CTA ───────────────────────── */

.cta {
  text-align: center;
}

.cta-box {
  padding: clamp(40px, 7vw, 72px) var(--gutter);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, rgba(255, 201, 0, 0.14), rgba(255, 201, 0, 0.03) 70%);
  box-shadow: var(--shadow-2);
}

.cta-box .hero-cta {
  position: relative;
  z-index: 1;
  margin-top: 28px;
}

.cta-box .hero-cta .btn {
  position: relative;
}

.cta-box h2 {
  font-size: clamp(27px, 4.4vw, 42px);
  margin-bottom: 16px;
}

.cta-box p {
  max-width: 56ch;
  margin-inline: auto;
  color: var(--text-dim);
  font-size: clamp(15.5px, 2vw, 17px);
}

@media (max-width: 560px) {
  .cta-box {
    padding: 36px 18px;
    border-radius: var(--r-lg);
  }

  .cta-box .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-box .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ───────────────────────── legal pages ───────────────────────── */

.doc {
  max-width: 820px;
  padding-top: clamp(44px, 7vw, 76px);
}

.doc-head {
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.doc-head h1 {
  font-size: clamp(30px, 5vw, 46px);
  margin-bottom: 14px;
}

.doc-head p {
  color: var(--text-dim);
  font-size: 16.5px;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
}

.doc h2 {
  margin-top: 46px;
  margin-bottom: 14px;
  font-size: clamp(21px, 3vw, 27px);
  scroll-margin-top: 92px;
}

.doc h3 {
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 17.5px;
}

.doc p,
.doc li {
  color: var(--text-dim);
  font-size: 16px;
}

.doc p + p {
  margin-top: 15px;
}

.doc ul,
.doc ol {
  margin-top: 14px;
  padding-left: 22px;
  display: grid;
  gap: 10px;
}

.doc strong {
  color: var(--text);
  font-weight: 600;
}

.doc code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--accent-soft);
  font-family: var(--mono);
  font-size: 0.88em;
}

.doc .table-scroll,
.doc .callout {
  margin-top: 22px;
}

.callout {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--emerald);
  border-radius: var(--r-md);
  background: rgba(16, 185, 129, 0.06);
}

.callout.warn {
  border-left-color: var(--amber);
  background: rgba(245, 158, 11, 0.06);
}

.callout p {
  font-size: 15.3px;
}

.toc {
  padding: 20px 22px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
}

.toc h2 {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.toc ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 15px;
}

/* ───────────────────────── footer ───────────────────────── */

.footer {
  padding-block: clamp(44px, 6vw, 68px) 32px;
  border-top: 1px solid var(--line);
  background: rgba(10, 11, 13, 0.6);
}

.footer-grid {
  display: grid;
  /* Fixed four tracks on desktop so brand never collides with Product. */
  grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 0.7fr));
  gap: 40px 40px;
  align-items: start;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 0.85fr));
    gap: 32px 28px;
  }
}

@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }

  /* The blurb reads badly in a half-width column; the link lists do not. */
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 359px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer-brand p {
  margin-top: 14px;
  max-width: 34ch;
  color: var(--text-faint);
  font-size: 14.2px;
}

/* h3, not h4: these follow an h2 in the page above, and jumping a level
   breaks heading navigation for screen-reader users. */
.footer h3 {
  margin-bottom: 14px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer ul {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.footer ul a {
  display: inline-block;
  color: var(--text-dim);
  font-size: 14.6px;
  text-decoration: none;
}

@media (pointer: coarse) {
  .footer ul {
    gap: 2px;
  }

  /* Block rather than inline-block, so a short label like "FAQ" still gives
     a target the width of the column instead of the width of three letters. */
  .footer ul a {
    display: block;
    padding-block: 11px;
  }
}

.footer ul a:hover {
  color: var(--text);
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 13.4px;
}

/* ───────────────────────── motion ───────────────────────── */

/* Everything below animates transform and opacity only. Those are the two
   properties a browser can composite without re-running layout or paint, so
   the page still scrolls at full rate on a laptop doing something else. */

/* ── hero entrance ──
   The hero uses the same .reveal mechanism as everything else rather than a
   keyframe animation of its own. A keyframe with `fill: both` holds its
   `from` state until the animation clock advances, so anything that stops it
   advancing — a backgrounded tab, a throttled renderer — leaves the headline
   at opacity 0. Above-the-fold copy must never depend on an animation
   running in order to be readable. The reveal path is JS-gated and carries a
   timeout that forces everything visible, so the worst case is no animation
   rather than no page. */

/* The aurora drifts with the scroll as well as on its own timer, which stops
   the background feeling painted-on while the content moves over it. The
   offset is written by script to a custom property, so the browser only ever
   sees a transform. */
.aurora {
  transform: translate3d(0, calc(var(--drift, 0) * 1px), 0);
  will-change: transform;
}

/* The product shot lifts very slightly as it settles. */
.shot {
  transition: transform var(--dur-slow) var(--ease-spring),
    box-shadow var(--dur-slow) var(--ease-out);
}

@media (hover: hover) and (min-width: 981px) {
  .shot:hover {
    transform: translateY(-5px);
    box-shadow:
      var(--shadow-3),
      0 0 0 1px rgba(255, 201, 0, 0.28),
      0 0 90px rgba(255, 201, 0, 0.12);
  }
}

/* Feature icons answer the card's hover rather than sitting inert. */
.feature-ico {
  transition: transform var(--dur) var(--ease-spring), background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.feature:hover .feature-ico {
  transform: scale(1.08) rotate(-4deg);
  background: rgba(255, 201, 40, 0.22);
  color: var(--accent-ink);
}

.role {
  transition: transform var(--dur) var(--ease-spring), border-color var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .role:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
  }
}

/* The accent rule across the top of a role card draws itself in. */
.role::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.reveal-ready .role.in::before,
html:not(.reveal-ready) .role::before {
  transform: scaleX(1);
}

/* FAQ rows answer the pointer. */
summary {
  transition: background var(--dur-fast) var(--ease-out);
}

summary:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ───────────────────────── reveal ───────────────────────── */

/* Progressive: without JS, or with reduced motion, everything is simply
   visible. The class is only added by script once it is safe to animate. */
.reveal-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.993);
  transition: opacity 0.62s var(--ease-out), transform 0.62s var(--ease-spring);
}

.reveal-ready .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .aurora i {
    animation: none;
  }

  /* Nothing moves: no entrance, no sweep, no parallax, no hover travel. */
  .aurora {
    transform: none !important;
  }

  .shot:hover,
  .role:hover,
  .feature:hover {
    transform: none;
  }

  .feature:hover .feature-ico {
    transform: none;
  }

  .role::before {
    transform: scaleX(1);
  }

  .shot-stage::before {
    animation: none !important;
    opacity: 0.5;
    transform: none;
  }

  html.snap-ready body::before {
    display: none;
  }

  .story-chapter.is-active {
    transform: none;
  }

  .hero-ring i {
    animation: none;
  }

  .shot--hero {
    transform: none !important;
  }

  .totop {
    transition: opacity var(--dur) linear;
    transform: none;
  }

  .feature::after,
  .role::after {
    display: none;
  }

  .reveal-ready .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .aurora,
  .grain::after,
  .header,
  .footer,
  .cta,
  .boot {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .doc p,
  .doc li,
  td {
    color: #222;
  }
}

/* ───────────────────────── cinematic boot ───────────────────────── */

.boot {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--obsidian);
  transition: opacity 0.55s var(--ease-out), visibility 0.55s linear;
}

body:not(.is-booting) .boot {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-mark img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  filter: drop-shadow(0 0 24px rgba(255, 201, 0, 0.35));
}

.boot-word {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text);
}

.boot-bar {
  width: min(220px, 56vw);
  height: 2px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.boot-bar i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  transition: width 0.2s linear;
}

.boot-pct {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}

body.is-booting {
  overflow: hidden;
}

/* ───────────────────────── storm wipe ───────────────────────── */

.storm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: clamp(28px, 4vw, 48px) var(--gutter);
  border-block: 1px solid var(--line);
  overflow: clip;
}

.storm-line {
  flex: 1;
  max-width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 201, 0, 0.55), transparent);
}

.storm-word {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  white-space: nowrap;
}

/* ───────────────────────── the wall (Five Stages) ───────────────────────── */

.wall {
  padding-block: var(--section);
}

.wall-shell {
  margin-top: clamp(28px, 4vw, 40px);
  display: grid;
  gap: 18px;
}

.wall-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.wall-bay {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 148px;
  padding: 26px 20px 22px;
  border: 1px solid var(--line);
  border-radius: 28px 28px 18px 18px;
  background:
    linear-gradient(180deg, rgba(255, 201, 0, 0.05), transparent 42%),
    var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring),
    background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.wall-bay:hover,
.wall-bay.is-on {
  border-color: rgba(255, 201, 0, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 201, 0, 0.1), transparent 48%),
    var(--surface-2);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 201, 0, 0.12);
}

.wall-bay.is-on {
  outline: none;
}

.wall-num {
  color: var(--accent);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.wall-bay strong {
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.wall-bay em {
  color: var(--text-faint);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.wall-stage {
  position: relative;
  min-height: 200px;
  padding: clamp(26px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 80% at 10% 0%, rgba(255, 201, 0, 0.08), transparent 55%),
    var(--surface);
}

.wall-panel {
  display: none;
}

.wall-panel.is-on {
  display: block;
}

.wall-panel[hidden] {
  display: none !important;
}

.wall-panel h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.wall-panel p {
  margin: 0;
  max-width: 52ch;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.55;
}

.wall-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.wall-points li {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .wall-rail {
    grid-template-columns: 1fr 1fr;
  }

  .wall-bay {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .wall-rail {
    grid-template-columns: 1fr;
  }
}

/* ───────────────────────── three desks ───────────────────────── */

.desks {
  padding-block: var(--section);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%);
}

.desk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: clamp(22px, 3vw, 32px);
}

/* Never allow key content to paint invisible from a stuck animation.
   Keep transform free on interactive bays so hover/active lift still works. */
.desk,
.feature,
.sample,
.pledge > *,
.coffee,
.cta-box,
.faq details {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none;
}

.wall-bay,
.rail-bay {
  opacity: 1 !important;
  visibility: visible !important;
}

.desk {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  transition: transform var(--dur) var(--ease-spring), border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.desk::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: var(--desk-a, 1);
}

.desk:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 201, 0, 0.28);
  box-shadow: var(--shadow-2);
}

.desk-tag {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.desk h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.desk p {
  margin: 0 0 18px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.55;
}

.desk ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.desk li {
  position: relative;
  padding-left: 18px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.45;
}

.desk li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 201, 0, 0.12);
}

@media (max-width: 900px) {
  .desk-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ticker-track {
    animation: none;
  }

  .boot {
    display: none;
  }

  body.is-booting {
    overflow: auto;
  }
}

/* ───────────────────────── Workbench (tool proof rack) ───────────────────────── */

.rail-room {
  padding-block: var(--section);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 38%);
}

.rail-shell {
  margin-top: clamp(28px, 4vw, 40px);
  display: grid;
  gap: 18px;
}

.rail-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 9, 11, 0.55);
  overflow-x: auto;
  scrollbar-width: thin;
}

.rail-bay {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 14px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring);
}

.rail-bay:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.rail-bay.is-on {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(255, 201, 0, 0.22);
}

.rail-num {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.7;
}

.rail-bay.is-on .rail-num {
  opacity: 1;
}

.rail-bay strong {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rail-stage {
  position: relative;
  min-height: 280px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 80% at 90% 10%, rgba(255, 201, 0, 0.07), transparent 50%),
    var(--surface);
}

.rail-panel {
  display: none;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(22px, 4vw, 40px);
  align-items: center;
}

.rail-panel.is-on {
  display: grid;
}

.rail-panel[hidden] {
  display: none !important;
}

.rail-copy h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.rail-copy p {
  margin: 0;
  max-width: 40ch;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.55;
}

.rail-sample {
  margin: 0;
}

.rail-proof {
  min-height: 200px;
}

.rail-shot {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--obsidian);
  box-shadow: var(--shadow-2, 0 20px 50px rgba(0, 0, 0, 0.4));
}

.rail-shot-bar {
  height: 36px;
  background: linear-gradient(90deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--line);
}

.rail-shot-bar::before {
  content: '';
  display: block;
  width: 46px;
  height: 8px;
  margin: 14px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 18px 0 0 rgba(255, 255, 255, 0.08), 36px 0 0 rgba(255, 255, 255, 0.06);
}

.rail-shot-plate {
  position: relative;
  min-height: 220px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 47px,
      rgba(255, 255, 255, 0.03) 48px
    ),
    var(--surface-2);
}

.rail-shot-plate--capture::after {
  content: '';
  position: absolute;
  inset: 18% 12%;
  border: 1px dashed rgba(255, 201, 0, 0.45);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 201, 0, 0.12);
}

.rail-shot-plate--redline::before,
.rail-shot-plate--redline::after {
  content: '';
  position: absolute;
  background: var(--redline);
  opacity: 0.85;
}

.rail-shot-plate--redline::before {
  top: 28%;
  left: 14%;
  right: 14%;
  height: 1px;
}

.rail-shot-plate--redline::after {
  top: 28%;
  bottom: 22%;
  left: 38%;
  width: 1px;
}

.rail-pledges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail-pledges li {
  display: grid;
  gap: 6px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 14px;
}

.rail-pledges strong {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}

.rail-bay,
.rail-panel,
.rail-sample {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 900px) {
  .rail-track {
    grid-template-columns: repeat(6, minmax(112px, 1fr));
    border-radius: 22px;
    justify-content: start;
  }

  .rail-panel.is-on {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .rail-bay strong {
    font-size: 13px;
  }

  .rail-pledges {
    grid-template-columns: 1fr;
  }
}