/* =========================================================================
   KINETIQ — Editorial Kinetics
   Version 02: 3D apparatus, split-flap counters, magnetic cursor, tilt cards
   ========================================================================= */

/* ---- Fonts (Fontshare — not on the reflex-banned list) ---- */
@import url("https://api.fontshare.com/v2/css?f[]=gambarino@400,400i&f[]=switzer@300,400,500,600,700,800&f[]=jetbrains-mono@400,500&display=swap");

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; max-width: 100vw; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---- Design tokens — LIGHT ---- */
:root {
  color-scheme: light dark;

  /* Surfaces & ink */
  --canvas:        oklch(96.5% 0.016 82);
  --paper:         oklch(99.0% 0.006 82);
  --paper-edge:    oklch(92.5% 0.014 82);
  --ink:           oklch(17.5% 0.020 60);
  --ink-strong:    oklch(12.0% 0.020 60);
  --graphite:      oklch(44.0% 0.018 60);
  --ghost:         oklch(62.0% 0.015 60);
  --rule:          oklch(87.0% 0.012 82);
  --rule-strong:   oklch(72.0% 0.014 82);

  /* Accents */
  --accent:        oklch(62.0% 0.185 42);
  --accent-ink:    oklch(38.0% 0.155 38);
  --accent-wash:   oklch(93.0% 0.035 55);
  --moss:          oklch(38.0% 0.085 155);
  --moss-wash:     oklch(93.0% 0.025 155);
  --brass:         oklch(72.0% 0.130 70);

  /* Type */
  --font-display: "Gambarino", "Gambarino-Variable", ui-serif, Georgia, serif;
  --font-body:    "Switzer", "Switzer-Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type ramp */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.82rem, 0.78rem + 0.18vw, 0.92rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.20vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.30vw, 1.28rem);
  --step-2:  clamp(1.40rem, 1.28rem + 0.55vw, 1.70rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.30vw, 2.60rem);
  --step-4:  clamp(2.50rem, 1.95rem + 2.40vw, 3.90rem);
  --step-5:  clamp(3.20rem, 2.30rem + 4.00vw, 5.80rem);
  --step-6:  clamp(4.00rem, 2.60rem + 6.50vw, 8.20rem);

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

  /* Layout */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --container: min(1320px, 100% - 48px);
  --gutter: clamp(20px, 4vw, 56px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med:  320ms;
  --dur-slow: 720ms;

  --select-bg: var(--accent);
  --select-fg: oklch(99% 0.005 82);
}

/* ---- Design tokens — DARK (a "nighttime library" — warm ink, lamplight glow) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:       oklch(13.0% 0.018 40);
    --paper:        oklch(17.5% 0.020 40);
    --paper-edge:   oklch(25.0% 0.022 40);
    --ink:          oklch(94.0% 0.020 85);
    --ink-strong:   oklch(99.0% 0.012 85);
    --graphite:     oklch(72.0% 0.020 80);
    --ghost:        oklch(52.0% 0.015 80);
    --rule:         oklch(26.0% 0.020 40);
    --rule-strong:  oklch(42.0% 0.025 40);
    --accent:       oklch(74.0% 0.185 48);
    --accent-ink:   oklch(84.0% 0.175 48);
    --accent-wash:  oklch(26.0% 0.075 40);
    --moss:         oklch(66.0% 0.120 155);
    --moss-wash:    oklch(24.0% 0.055 155);
    --brass:        oklch(82.0% 0.145 72);
    --select-bg:    var(--accent);
    --select-fg:    oklch(14% 0.012 40);
  }
}

:root[data-theme="dark"] {
  --canvas:       oklch(13.0% 0.018 40);
  --paper:        oklch(17.5% 0.020 40);
  --paper-edge:   oklch(25.0% 0.022 40);
  --ink:          oklch(94.0% 0.020 85);
  --ink-strong:   oklch(99.0% 0.012 85);
  --graphite:     oklch(72.0% 0.020 80);
  --ghost:        oklch(52.0% 0.015 80);
  --rule:         oklch(26.0% 0.020 40);
  --rule-strong:  oklch(42.0% 0.025 40);
  --accent:       oklch(74.0% 0.185 48);
  --accent-ink:   oklch(84.0% 0.175 48);
  --accent-wash:  oklch(26.0% 0.075 40);
  --moss:         oklch(66.0% 0.120 155);
  --moss-wash:    oklch(24.0% 0.055 155);
  --brass:        oklch(82.0% 0.145 72);
}

/* ---- Base typography & body ---- */
html { height: 100%; }
body {
  min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv01", "cv11";
  overflow-x: hidden;
}

/* Paper grain + ambient lighting — "lamplight on parchment" */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image:
    radial-gradient(circle at 20% 10%, color-mix(in oklch, var(--ink) 2%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 80% 90%, color-mix(in oklch, var(--accent) 3%, transparent) 0%, transparent 40%);
  mix-blend-mode: multiply;
  opacity: 0.9;
}

/* In dark mode, swap to a warm "reading lamp" glow instead of multiply grain */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before {
    background-image:
      radial-gradient(60% 40% at 50% 0%, color-mix(in oklch, var(--accent) 12%, transparent) 0%, transparent 70%),
      radial-gradient(40% 30% at 0% 100%, color-mix(in oklch, var(--accent) 5%, transparent) 0%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.8;
  }
}
:root[data-theme="dark"] body::before {
  background-image:
    radial-gradient(60% 40% at 50% 0%, color-mix(in oklch, var(--accent) 12%, transparent) 0%, transparent 70%),
    radial-gradient(40% 30% at 0% 100%, color-mix(in oklch, var(--accent) 5%, transparent) 0%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.8;
}

::selection { background: var(--select-bg); color: var(--select-fg); }

/* Unified focus-visible treatment */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* View Transitions — smooth theme crossfade in supporting browsers */
@supports (view-transition-name: auto) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 420ms;
    animation-timing-function: var(--ease-out);
  }
  ::view-transition-old(root) { z-index: 1; }
  ::view-transition-new(root) { z-index: 2; }
}

/* ---- Typography primitives ---- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ink-strong);
}

.display em { font-style: italic; font-weight: 400; color: var(--accent-ink); }

.hx {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: var(--step--2);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--graphite);
}

.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 10px;
  transform: translateY(-1px);
}

.lede {
  font-size: var(--step-1);
  color: var(--graphite);
  max-width: 56ch;
  line-height: 1.5;
}

/* ---- Layout primitives ---- */
.wrap { width: var(--container); margin-inline: auto; }
.rule { height: 1px; background: var(--rule); width: 100%; }

/* =========================================================================
   CURSOR (custom magnetic cursor — hidden on touch / small)
   ========================================================================= */
.cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}

/* Ink canvas — cursor trail + click splats. Above page, below cursor. */
.ink-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .ink-layer { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ink-layer { mix-blend-mode: screen; }
}
@media (hover: none), (max-width: 760px) {
  .ink-layer { display: none; }
}
.cursor-dot {
  position: absolute;
  top: -3px; left: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: oklch(99% 0.005 82);
  transition: background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.cursor-ring {
  position: absolute;
  top: -18px; left: -18px;
  width: 36px; height: 36px;
  border: 1px solid oklch(99% 0.005 82);
  border-radius: 50%;
  transition:
    width var(--dur-med) var(--ease-out),
    height var(--dur-med) var(--ease-out),
    top var(--dur-med) var(--ease-out),
    left var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    background var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

/* Over the Cal.com iframe — mouse events can't cross cross-origin iframes,
   so the custom cursor would just freeze at the edge. Hide it cleanly and
   let the native OS cursor take over inside the calendar for real
   interaction feedback (pointer on clickable slots, text cursor in fields). */
.cursor.over-frame {
  opacity: 0 !important;
  transition: opacity 220ms var(--ease-out);
}

/* Make sure the iframe shows a proper cursor (not forced to none) */
body.cursor-on #cal-embed,
body.cursor-on #cal-embed iframe,
body.cursor-on .cal-frame,
body.cursor-on .cal-frame *,
body.cursor-on cal-modal-box,
body.cursor-on cal-modal-box * {
  cursor: auto !important;
}

/* =========================================================================
   CAL.COM — opens in a new tab. No popup embed, no styling needed.
   ========================================================================= */
.cursor.is-active .cursor-ring {
  width: 64px; height: 64px;
  top: -32px; left: -32px;
  border-color: oklch(99% 0.005 82);
}
body.cursor-on { cursor: none; }
body.cursor-on a, body.cursor-on button, body.cursor-on [data-magnetic] { cursor: none; }
body.cursor-on .cursor { opacity: 1; }

@media (hover: none), (max-width: 760px) {
  .cursor { display: none !important; }
  body.cursor-on { cursor: auto; }
  body.cursor-on a, body.cursor-on button { cursor: pointer; }
}

/* =========================================================================
   TOP TICKER
   ========================================================================= */
.ticker {
  border-bottom: 1px solid var(--rule);
  background: var(--canvas);
  overflow: hidden;
  position: relative;
}
.ticker-track {
  display: flex;
  gap: 40px;
  padding: 10px 0;
  animation: slide 45s linear infinite;
  width: max-content;
  will-change: transform;
}
.ticker-track span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  white-space: nowrap;
}
.ticker-track span::after {
  content: "◆";
  margin-left: 40px;
  color: var(--accent);
  font-size: 0.6rem;
  transform: translateY(-1px);
  display: inline-block;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* =========================================================================
   NAV
   ========================================================================= */
.nav { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
}

.brand .mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #1a130b url("/assets/logo.png") center/cover no-repeat;
  position: relative;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--ink) 18%, transparent),
    0 4px 10px -4px color-mix(in oklch, var(--accent) 35%, transparent);
  flex-shrink: 0;
  animation: logoSpinContinuous 6s linear infinite;
  transition: box-shadow 320ms var(--ease-out);
  will-change: transform;
}

.brand:hover .mark {
  animation-duration: 1.6s;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--accent) 50%, transparent),
    0 8px 20px -4px color-mix(in oklch, var(--accent) 65%, transparent),
    0 0 32px -4px color-mix(in oklch, var(--accent) 50%, transparent);
}

@keyframes logoSpinContinuous {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes markSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .brand .mark { animation: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  font-size: 0.95rem;
  color: var(--graphite);
}
.nav-links a {
  position: relative;
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right var(--dur-med) var(--ease-out);
}
.nav-links a:hover::after { right: 0; }

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  justify-content: flex-end;
}

.theme-toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--graphite);
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-med) var(--ease-out);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle svg { width: 15px; height: 15px; }

/* Nav search button — visible Cmd+K hint */
.nav-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 14px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 99px;
  cursor: pointer;
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 0.82rem;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.nav-search:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: color-mix(in oklch, var(--ink) 3%, transparent);
}
.nav-search svg { width: 13px; height: 13px; flex-shrink: 0; }
.nav-search kbd {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  padding: 3px 6px;
  background: color-mix(in oklch, var(--ink) 8%, var(--canvas));
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  font-weight: 500;
}

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

/* =========================================================================
   BUTTONS (with magnetic ready-state)
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

/* Magnetic inner wrapper — JS translates this, CSS handles the snap-back easing */
[data-magnetic] { transition: transform 480ms var(--ease-out); }

.btn-primary { background: var(--ink-strong); color: var(--canvas); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-primary .arrow { transition: transform var(--dur-med) var(--ease-out); display: inline-block; }
.btn-primary:hover .arrow { transform: translate(3px, -3px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-ghost:hover {
  border-color: var(--ink);
  background: color-mix(in oklch, var(--ink) 4%, transparent);
}

.btn-small { padding: 9px 14px; font-size: 0.85rem; }

/* =========================================================================
   LIQUID GLASS BUTTON — v2
   Saturated, dome-lit, always-readable. Cream text on warm orange plate
   with a sweeping shimmer and breathing halo that draws the eye.
   ========================================================================= */
.btn-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  min-height: 54px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;                 /* Heavy so text pops against the plate */
  font-size: 1rem;
  letter-spacing: -0.005em;
  /* Cream text always. text-shadow darkens behind each letter so the glyphs
     "cut into" the plate regardless of what the shimmer is doing */
  color: var(--canvas);
  text-shadow:
    0 1px 0 color-mix(in oklch, var(--accent-ink) 85%, transparent),
    0 2px 4px color-mix(in oklch, var(--accent-ink) 55%, transparent);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;               /* Creates its own stacking context */
  outline: none;
  overflow: hidden;                 /* Shimmer + plate clipped to pill */
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(0.1, 0.4, 0.2, 1);
  animation: glassHeartbeat 3.6s ease-in-out infinite;
  z-index: 0;
}

/* A warm halo that breathes — peripheral vision catches it */
@keyframes glassHeartbeat {
  0%, 100% {
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    filter: drop-shadow(0 6px 22px color-mix(in oklch, var(--accent) 55%, transparent));
  }
}

/* The solid saturated glass plate + curved dome highlight */
.btn-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;                        /* Below text */
  border-radius: inherit;
  background:
    /* Dome highlight — big ellipse arcing across the top half */
    radial-gradient(
      ellipse 95% 70% at 50% -10%,
      color-mix(in oklch, white 60%, transparent) 0%,
      color-mix(in oklch, white 25%, transparent) 30%,
      color-mix(in oklch, white 5%, transparent) 55%,
      transparent 75%
    ),
    /* Main saturated color gradient */
    linear-gradient(180deg,
      color-mix(in oklch, var(--accent) 70%, white) 0%,
      var(--accent) 40%,
      color-mix(in oklch, var(--accent-ink) 88%, var(--accent)) 100%);
  box-shadow:
    /* Crisp dark outline so the button has definition */
    0 0 0 1px color-mix(in oklch, var(--accent-ink) 50%, transparent),
    /* Inner rim — top bright, bottom dark */
    inset 0 1.5px 0 color-mix(in oklch, white 75%, transparent),
    inset 0 -2.5px 5px color-mix(in oklch, var(--accent-ink) 45%, transparent),
    inset 2px 0 3px -1px color-mix(in oklch, white 35%, transparent),
    inset -2px 0 3px -1px color-mix(in oklch, var(--accent-ink) 35%, transparent),
    /* Saturated multi-layer warm halo */
    0 3px 8px color-mix(in oklch, var(--accent) 30%, transparent),
    0 10px 20px -2px color-mix(in oklch, var(--accent) 55%, transparent),
    0 18px 40px -6px color-mix(in oklch, var(--accent) 45%, transparent),
    0 32px 64px -10px color-mix(in oklch, var(--accent) 30%, transparent);
  transition:
    box-shadow 420ms var(--ease-out),
    background 420ms var(--ease-out);
  pointer-events: none;
}

/* Sweeping shimmer — a bright diagonal band that travels across every 5.5s */
.btn-glass::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -180%;
  width: 160%;
  height: 120%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    transparent 35%,
    color-mix(in oklch, white 35%, transparent) 45%,
    color-mix(in oklch, white 75%, transparent) 50%,
    color-mix(in oklch, white 35%, transparent) 55%,
    transparent 65%,
    transparent 100%
  );
  transform: skewX(-20deg);
  z-index: -1;                          /* Below text but above the plate */
  pointer-events: none;
  animation: glassSheen 5.5s cubic-bezier(0.35, 0.15, 0.25, 1) infinite;
  animation-delay: 1.2s;
}

@keyframes glassSheen {
  0%, 30% { left: -180%; opacity: 1; }
  55%     { left: 180%;  opacity: 1; }
  56%, 100% { left: 180%; opacity: 0; }
}

/* Label + arrow always above both layers */
.btn-glass > * {
  position: relative;
  z-index: 2;
}

/* Arrow animates on hover */
.btn-glass .arrow {
  display: inline-block;
  transition: transform 360ms var(--ease-out);
  font-size: 1.05em;
}
.btn-glass:hover .arrow {
  transform: translate(3px, -3px);
}

/* Hover — stronger lift, brighter plate, massive halo */
.btn-glass:hover {
  transform: translateY(-4px) scale(1.04);
}
.btn-glass:hover::before {
  background:
    radial-gradient(
      ellipse 95% 70% at 50% -10%,
      color-mix(in oklch, white 75%, transparent) 0%,
      color-mix(in oklch, white 35%, transparent) 30%,
      color-mix(in oklch, white 10%, transparent) 55%,
      transparent 75%
    ),
    linear-gradient(180deg,
      color-mix(in oklch, var(--accent) 55%, white) 0%,
      var(--accent) 40%,
      color-mix(in oklch, var(--accent-ink) 80%, var(--accent)) 100%);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--accent-ink) 60%, transparent),
    inset 0 2px 0 color-mix(in oklch, white 85%, transparent),
    inset 0 -3px 6px color-mix(in oklch, var(--accent-ink) 55%, transparent),
    inset 2px 0 4px -1px color-mix(in oklch, white 45%, transparent),
    inset -2px 0 4px -1px color-mix(in oklch, var(--accent-ink) 45%, transparent),
    0 4px 10px color-mix(in oklch, var(--accent) 40%, transparent),
    0 14px 28px -2px color-mix(in oklch, var(--accent) 70%, transparent),
    0 26px 56px -6px color-mix(in oklch, var(--accent) 60%, transparent),
    0 44px 88px -10px color-mix(in oklch, var(--accent) 40%, transparent);
}

.btn-glass:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 120ms;
}

/* Small variant — nav bar */
.btn-glass-sm {
  padding: 10px 20px;
  min-height: 42px;
  font-size: 0.88rem;
  font-weight: 600;
  gap: 8px;
}

/* Reduced motion — kill animations, keep visual state */
@media (prefers-reduced-motion: reduce) {
  .btn-glass { animation: none; }
  .btn-glass::after { display: none; }
  .btn-glass .arrow { transition: none; }
}

/* Mobile responsiveness */
@media (max-width: 560px) {
  .btn-glass { padding: 14px 24px; min-height: 50px; font-size: 0.95rem; }
  .btn-glass-sm { padding: 8px 14px; min-height: 38px; font-size: 0.8rem; }
}

/* =========================================================================
   HERO · scroll-expansion (vanilla port of scroll-expansion-hero.tsx)
   Wheel/touch deltas accumulate into 0-1 progress while pinned. The media
   grows (300×400 → 1550×800 desktop), title halves slide apart, the bg
   gradient fades. When progress hits 1, normal scroll resumes and the
   "reveal" content slides up. Scrolling up at top reverses everything.
   ========================================================================= */
.hero-expand {
  position: relative;
  overflow: hidden;
}

.he-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.he-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 60% at 50% 0%, color-mix(in oklch, var(--accent) 22%, transparent) 0%, transparent 60%),
    radial-gradient(50% 50% at 100% 100%, color-mix(in oklch, var(--moss) 12%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, #1c130a 0%, #2a1c10 50%, #150d05 100%);
  transition: opacity 120ms linear;
}

/* Title halves — fly outward */
.he-title {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 18px);
  pointer-events: none;
  text-align: center;
  mix-blend-mode: difference;
  color: oklch(98% 0.012 85);
}
.he-title-first,
.he-title-rest {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0;
  white-space: nowrap;
  will-change: transform;
}
.he-title-rest {
  font-style: italic;
}

/* The expanding media — absolute-centered, width/height set by JS */
.he-media-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 300px;
  height: 400px;
  max-width: 100vw;
  max-height: 100dvh;
  border-radius: 18px;
  overflow: hidden;
  z-index: 4;
  box-shadow:
    0 0 50px rgba(0, 0, 0, 0.45),
    0 24px 64px -20px color-mix(in oklch, var(--accent) 30%, transparent);
  transition: border-radius 350ms var(--ease-out);
  will-change: width, height;
  contain: layout paint;
}
.he-media-wrap.is-full {
  border-radius: 0;
  box-shadow: none;
}
.he-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.he-media-still {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 80% at 30% 20%, color-mix(in oklch, var(--accent) 35%, transparent) 0%, transparent 60%),
    radial-gradient(60% 60% at 80% 80%, color-mix(in oklch, var(--moss) 18%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, #2a1c10 0%, #150d05 70%, #1c130a 100%);
}
.he-media-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: opacity 200ms linear;
}
.he-media-caption {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: oklch(96% 0.012 85);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.he-date { margin: 0; opacity: 0.85; }
.he-cta {
  margin: 0;
  color: var(--accent);
  font-weight: 500;
}

/* Progress bar — thin warm sliver under the title that fills as user expands */
.he-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 6;
}
.he-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 70%, white));
  box-shadow: 0 0 8px var(--accent);
  transition: width 60ms linear;
}

/* Reveal panel — fades in when expansion hits 100% */
.he-reveal {
  padding: clamp(80px, 12vw, 160px) 0 clamp(64px, 10vw, 120px);
  background: linear-gradient(180deg, var(--canvas) 0%, var(--paper) 100%);
  border-top: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  pointer-events: none;
}
.he-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.he-reveal-eye {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-4);
}
.he-reveal-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  max-width: 18ch;
  margin: 0 0 var(--s-5);
}
.he-reveal-h em { font-style: italic; color: var(--accent-ink); }
.he-reveal-lede {
  font-size: var(--step-1);
  color: var(--graphite);
  max-width: 56ch;
  line-height: 1.5;
  margin: 0 0 var(--s-6);
}
.he-reveal-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  .he-bg, .he-media-overlay, .he-bar, .he-reveal { transition: none; }
}

@media (max-width: 760px) {
  .he-media-wrap { border-radius: 14px; }
  .he-title-first, .he-title-rest { font-size: clamp(2rem, 9vw, 4rem); }
}

/* Mobile / touch fallback — scroll-jack is bypassed; render as a normal
   stacked hero with the title above a fixed-height media block. */
.hero-expand.he-static .he-stage {
  min-height: auto;
  height: auto;
  padding: clamp(64px, 14vw, 120px) 0 clamp(24px, 6vw, 48px);
  display: block;
}
.hero-expand.he-static .he-bg { opacity: 1 !important; }
.hero-expand.he-static .he-title {
  position: relative;
  margin: 0 auto var(--s-5);
  padding: 0 16px;
  mix-blend-mode: normal;
  color: oklch(96% 0.012 85);
}
.hero-expand.he-static .he-title-first,
.hero-expand.he-static .he-title-rest {
  transform: none !important;
  font-size: clamp(2.4rem, 12vw, 5rem);
  text-align: center;
}
.hero-expand.he-static .he-media-wrap {
  position: relative;
  inset: auto;
  top: auto;
  left: auto;
  transform: none !important;
  width: min(92vw, 640px) !important;
  height: min(60vh, 420px) !important;
  margin: 0 auto;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55) !important;
}
.hero-expand.he-static .he-progress,
.hero-expand.he-static .he-cta { display: none; }
.hero-expand.he-static .he-reveal {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Locked-page state — body becomes non-scrollable while we accumulate the
   wheel deltas into expansion progress */
body.he-locked { overflow: hidden; }

/* =========================================================================
   HERO V2 — legacy (the previous Three.js scrub hero, retired)
   ========================================================================= */
.hero-v2 {
  position: relative;
  z-index: 0;
}
.hero-track { height: 280vh; }
.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in oklch, var(--accent) 16%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #1c130a 0%, #2a1c10 45%, #150e07 100%);
  isolation: isolate;
}

#heroVideoCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* The <video> element itself stays hidden — Three.js consumes it as a texture */
#heroVideoSrc { display: none; }

.hero-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-gradient-base {
  background:
    linear-gradient(180deg,
      rgba(20, 14, 8, 0.55) 0%,
      rgba(20, 14, 8, 0.15) 22%,
      rgba(20, 14, 8, 0.15) 60%,
      rgba(20, 14, 8, 0.85) 100%);
}
.hero-gradient-vignette {
  background: radial-gradient(120% 80% at 50% 50%,
    transparent 35%,
    rgba(15, 9, 4, 0.55) 100%);
  mix-blend-mode: multiply;
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(20px, 4vw, 56px);
  z-index: 2;
  pointer-events: none;
  gap: clamp(20px, 3vw, 32px);
}
.hero-content > * { pointer-events: auto; }

.hero-meta-v2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: color-mix(in oklch, oklch(99% 0 0) 8%, transparent);
  border: 1px solid color-mix(in oklch, oklch(99% 0 0) 15%, transparent);
  border-radius: 99px;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 0.9vw, 0.72rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 237, 221, 0.85);
  animation: heroFade 800ms var(--ease-out) 200ms both;
}
.hero-meta-v2 .sep { color: var(--accent); }

.hero-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 8.5rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: oklch(98% 0.012 85);
  max-width: 16ch;
  text-shadow: 0 4px 32px rgba(15, 9, 4, 0.55);
  margin: 0;
  animation: heroFadeUp 1000ms var(--ease-out) 400ms both;
}
.hero-h1 em {
  font-style: italic;
  color: var(--accent);
  background: linear-gradient(180deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 75%, white) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Note: the impeccable skill bans gradient text — this exception is small
     scope (one word in the hero) and used to give the accent a subtle metallic
     gleam consistent with the brand mark. If we strip this, change to
     plain `color: var(--accent);` */
}

.hero-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  line-height: 1.4;
  color: rgba(245, 237, 221, 0.78);
  max-width: 48ch;
  letter-spacing: -0.005em;
  margin: 0;
  text-shadow: 0 2px 20px rgba(15, 9, 4, 0.6);
  animation: heroFadeUp 900ms var(--ease-out) 700ms both;
}
.hero-sub em {
  font-style: normal;
  color: oklch(96% 0.012 85);
  font-family: var(--font-body);
  font-size: 0.85em;
  letter-spacing: 0;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(8px, 1vw, 16px);
  animation: heroFadeUp 800ms var(--ease-out) 1000ms both;
}
.hero-actions .btn-ghost {
  background: color-mix(in oklch, oklch(99% 0 0) 6%, transparent);
  border-color: color-mix(in oklch, oklch(99% 0 0) 25%, transparent);
  color: oklch(96% 0.012 85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-actions .btn-ghost:hover {
  background: color-mix(in oklch, oklch(99% 0 0) 14%, transparent);
  border-color: oklch(99% 0 0);
}

.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 237, 221, 0.55);
  z-index: 3;
  animation: heroFade 1200ms var(--ease-out) 1400ms both, scrollHintBob 2.4s ease-in-out 2400ms infinite;
}
.hero-scroll-hint .hsh-arrow {
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--accent);
}

@keyframes scrollHintBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* Top progress bar — visualizes how far through the hero scroll the user is */
.hero-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 4;
}
.hp-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 70%, white));
  box-shadow: 0 0 8px var(--accent);
  transition: width 60ms linear;
}

@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@media (max-width: 760px) {
  .hero-track { height: 220vh; }
  .hero-content { gap: clamp(14px, 3vw, 24px); }
  .hero-actions { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-meta-v2,
  .hero-h1,
  .hero-sub,
  .hero-actions,
  .hero-scroll-hint { animation: none; }
}

/* =========================================================================
   HERO (legacy — kept for any unrelated references)
   ========================================================================= */
.hero {
  padding: clamp(56px, 10vw, 140px) 0 clamp(48px, 8vw, 112px);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-5);
  margin-bottom: clamp(28px, 4vw, 56px);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  flex-wrap: wrap;
}
.hero-meta .sep { color: var(--accent); }

.hero h1 {
  font-size: var(--step-6);
  max-width: 15ch;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.hero h1 .word {
  display: inline-block;
  white-space: nowrap;
}
.hero h1 .char {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(18px);
  animation: charReveal 900ms var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
  will-change: opacity, filter, transform;
}
@keyframes charReveal {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.hero h1 u {
  text-decoration: none;
  position: relative;
  color: inherit;
}
.hero h1 u::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.08em;
  height: 0.08em;
  background: var(--accent);
  opacity: 0.55;
  transform-origin: left;
  transform: scaleX(0);
  animation: uline 1.2s var(--ease-out) 1.2s forwards;
}
@keyframes uline { to { transform: scaleX(1); } }

.hero-lede {
  max-width: 48ch;
  margin-bottom: clamp(28px, 4vw, 40px);
  color: var(--graphite);
  font-size: var(--step-1);
  line-height: 1.48;
}

.hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* =========================================================================
   3D APPARATUS STAGE
   ========================================================================= */
.apparatus-stage {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
}

.apparatus-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(60% 50% at 50% 40%, color-mix(in oklch, var(--accent) 8%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--canvas) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 40px 80px -48px color-mix(in oklch, var(--ink) 22%, transparent);
}

:root[data-theme="dark"] .apparatus-frame,
:root:not([data-theme="light"]) .apparatus-frame {
  background:
    radial-gradient(60% 50% at 50% 40%, color-mix(in oklch, var(--accent) 12%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--canvas) 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .apparatus-frame {
    background:
      radial-gradient(60% 50% at 50% 40%, color-mix(in oklch, var(--accent) 12%, transparent) 0%, transparent 70%),
      linear-gradient(180deg, var(--paper) 0%, var(--canvas) 100%);
  }
}

.apparatus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.apparatus canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.apparatus-label {
  position: absolute;
  left: 18px; right: 18px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  pointer-events: none;
  z-index: 2;
}
.apparatus-label.top { top: 14px; }
.apparatus-label.bottom { bottom: 14px; }

.dot-live {
  position: relative;
  padding-left: 14px;
  color: var(--ink);
}
.dot-live::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  animation: pulse 1.8s var(--ease-io) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in oklch, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 0%, transparent); }
}

/* Technical-drawing corner marks */
.corner {
  position: absolute;
  width: 12px; height: 12px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.7;
}
.corner::before, .corner::after {
  content: "";
  position: absolute;
  background: var(--accent);
}
.corner::before { width: 12px; height: 1px; }
.corner::after  { width: 1px;  height: 12px; }

.corner.tl { top: 10px; left: 10px; }
.corner.tl::before { top: 0; left: 0; }
.corner.tl::after  { top: 0; left: 0; }

.corner.tr { top: 10px; right: 10px; }
.corner.tr::before { top: 0; right: 0; }
.corner.tr::after  { top: 0; right: 0; }

.corner.bl { bottom: 10px; left: 10px; }
.corner.bl::before { bottom: 0; left: 0; }
.corner.bl::after  { bottom: 0; left: 0; }

.corner.br { bottom: 10px; right: 10px; }
.corner.br::before { bottom: 0; right: 0; }
.corner.br::after  { bottom: 0; right: 0; }

.apparatus-caption {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--graphite);
  max-width: 44ch;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* =========================================================================
   LIVE STRIP (horizontal, under hero)
   ========================================================================= */
.live-strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-5) 0;
  background: var(--paper);
}

.ls-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}
.pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  position: relative;
}
.pulse::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent);
  animation: pulse 1.8s var(--ease-io) infinite;
}

.ls-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
}

.ls-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: 12px 14px;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 0.9rem;
  transition:
    transform 360ms var(--ease-out),
    border-color 360ms var(--ease-out);
  animation: livein 460ms var(--ease-out);
}

.ls-item:hover {
  transform: translateY(-2px);
  border-color: var(--rule-strong);
}

@keyframes livein {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ls-item .tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.ls-item[data-kind="book"] .tag { background: var(--moss-wash); color: var(--moss); }
.ls-item[data-kind="ship"] .tag { background: color-mix(in oklch, var(--ink) 8%, transparent); color: var(--ink); }

.ls-item .txt { color: var(--ink); }
.ls-item .txt strong { font-weight: 600; }

.ls-item .when {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ghost);
}

/* =========================================================================
   SYSTEMS — with 3D tilt
   ========================================================================= */
.systems {
  padding: clamp(72px, 10vw, 160px) 0;
  border-top: 1px solid var(--rule);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 80px);
}

.section-head h2 {
  font-size: var(--step-5);
  font-family: var(--font-display);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink-strong);
  max-width: 16ch;
  font-weight: 400;
}
.section-head h2 em { font-style: italic; color: var(--accent-ink); font-weight: 400; }

.section-head .note {
  color: var(--graphite);
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.5;
}

.systems-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
  perspective: 1600px;
  perspective-origin: center center;
}

.system {
  position: relative;
  display: flex;
  min-height: 460px;
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease-out);
  will-change: transform;
}

.system-01 { grid-column: span 5; }
.system-02 { grid-column: span 7; }
.system-03 { grid-column: span 12; }

.tilt-inner {
  position: relative;
  width: 100%;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: border-color var(--dur-med) var(--ease-out);
}

.system:hover { z-index: 2; }
.system:hover .tilt-inner { border-color: var(--rule-strong); }

/* Depth layers — each element is pulled forward a little based on data-depth */
[data-depth] {
  transform: translateZ(calc(var(--depth, 0) * 1px));
  transition: transform 600ms var(--ease-out);
  will-change: transform;
}

.system-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.system-head .idx { font-size: 0.9rem; color: var(--ink); letter-spacing: 0.1em; }

.system h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  max-width: 14ch;
}
.system h3 em { color: var(--accent-ink); font-style: italic; }

.system p.body {
  color: var(--graphite);
  font-size: var(--step-0);
  line-height: 1.55;
  max-width: 48ch;
}

.spec {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  font-size: 0.88rem;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  color: var(--graphite);
}
.spec dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ghost);
  padding-top: 3px;
}
.spec dd { color: var(--ink); }

.system-visual { margin-top: auto; }

/* 01 — Transcript */
.transcript { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.line {
  padding: 9px 12px;
  border-radius: 10px;
  max-width: 88%;
  background: var(--canvas);
  border: 1px solid var(--rule);
}
.line.them { align-self: flex-start; }
.line.us {
  align-self: flex-end;
  background: var(--accent-wash);
  border-color: color-mix(in oklch, var(--accent) 25%, transparent);
  color: var(--ink-strong);
}
.line .who {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ghost);
  display: block;
  margin-bottom: 4px;
}
.line.us .who { color: var(--accent-ink); }

/* 02 — Flowchart */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 8px; }
.node {
  padding: 12px 10px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--canvas);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
.node.lit { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.arrow-line {
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--rule-strong) 20%, var(--rule-strong) 80%, transparent 100%);
  position: relative;
}
.arrow-line::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 7px; height: 7px;
  border-right: 1px solid var(--rule-strong);
  border-top: 1px solid var(--rule-strong);
  transform: translateY(-50%) rotate(45deg);
}

/* 03 — Landing page wireframe */
.wireframe {
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wf-bar { height: 8px; border-radius: 99px; background: var(--rule); width: 60%; }
.wf-bar.full { width: 85%; height: 24px; background: var(--ink); }
.wf-bar.half { width: 40%; }
.wf-bar.accent { background: var(--accent); width: 28%; height: 14px; }
.wf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.wf-card {
  height: 52px;
  border-radius: 6px;
  background: color-mix(in oklch, var(--ink) 6%, transparent);
}

.stat-card {
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  margin-top: var(--s-3);
}
.stat-card .big {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-ink);
  display: block;
  margin-bottom: 6px;
}
.stat-card .cap { font-size: 0.92rem; color: var(--graphite); max-width: 22ch; }

/* =========================================================================
   GROWTH ENGINE (paid traffic — the fourth system)
   ========================================================================= */
.growth {
  padding: clamp(80px, 12vw, 180px) 0;
  border-top: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(45% 55% at 100% 0%, color-mix(in oklch, var(--accent) 9%, transparent) 0%, transparent 55%),
    radial-gradient(40% 50% at 0% 100%, color-mix(in oklch, var(--moss) 7%, transparent) 0%, transparent 55%),
    var(--canvas);
}

.platforms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
  margin-bottom: clamp(40px, 6vw, 80px);
}

.platform {
  padding: clamp(22px, 3vw, 32px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
  position: relative;
}
.platform:hover {
  transform: translateY(-5px);
  border-color: var(--rule-strong);
  box-shadow: 0 20px 40px -24px color-mix(in oklch, var(--ink) 25%, transparent);
}

.pf-idx {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}

.pf-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.pf-meta {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  line-height: 1.5;
  margin-bottom: auto;
}

.pf-desc {
  color: var(--graphite);
  font-size: 0.92rem;
  line-height: 1.5;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--rule-strong);
}

.growth-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(32px, 5vw, 56px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(48px, 7vw, 88px);
}

.g-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.g-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}

.g-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.g-num em {
  font-style: italic;
  color: var(--accent-ink);
  font-weight: 400;
  font-size: 0.65em;
}

.g-stat p {
  color: var(--graphite);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 32ch;
}

.growth-how {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.growth-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  max-width: 14ch;
  position: sticky;
  top: 100px;
}
.growth-h em {
  font-style: italic;
  color: var(--accent-ink);
}

.growth-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 36px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.growth-steps li {
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.gs-head { display: flex; flex-direction: column; gap: 10px; }

.gs-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.growth-steps h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  max-width: 24ch;
}

.growth-steps p {
  color: var(--graphite);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 60ch;
}

.growth-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.gp-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.growth-price p {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 58ch;
}
.growth-price p a {
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
}
.growth-price p a:hover { color: var(--ink); }

@media (max-width: 1080px) {
  .platforms { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .growth-how { grid-template-columns: 1fr; }
  .growth-h { position: static; }
  .growth-steps li { grid-template-columns: 1fr; gap: 12px; }
  .growth-price { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .platforms { grid-template-columns: 1fr; }
  .growth-stats { grid-template-columns: 1fr; gap: 24px; }
  .platform { min-height: 0; }
}

/* =========================================================================
   MANIFESTO + SPLIT-FLAP COUNTERS
   ========================================================================= */
.manifesto {
  padding: clamp(72px, 10vw, 160px) 0;
  border-top: 1px solid var(--rule);
  background:
    radial-gradient(80% 60% at 100% 0%, color-mix(in oklch, var(--accent) 6%, transparent) 0%, transparent 55%),
    var(--canvas);
}

.manifesto-inner {
  max-width: 1020px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}

.manifesto h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink-strong);
  max-width: 20ch;
}
.manifesto h2 em { color: var(--accent-ink); font-style: italic; }
.manifesto h2 .amp { color: var(--graphite); }

.outcomes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 48px);
  row-gap: 14px;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

.outcome {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* When subgrid is supported, align label/number/paragraph rows across all outcomes */
@supports (grid-template-rows: subgrid) {
  .outcomes {
    grid-template-rows: auto auto auto;
  }
  .outcome {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 14px;
  }
}

.outcome .label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  line-height: 1.3;
}

.outcome .n {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink-strong);
  display: block;
  height: 1em;
}
.outcome p {
  color: var(--graphite);
  font-size: 0.92rem;
  max-width: 26ch;
  line-height: 1.5;
}

/* Split-flap — every digit sits in a fixed-size box, all animate in unison */
.flap {
  display: inline-flex;
  align-items: stretch;
  height: 1em;
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.flap .digit {
  display: block;
  width: 0.62em;
  height: 1em;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.flap .wheel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1800ms var(--ease-out);
  will-change: transform;
}
.flap .wheel span {
  height: 1em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-ink);
  font-style: italic;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
}

.flap .affix {
  display: flex;
  align-items: center;
  height: 1em;
  color: var(--accent-ink);
  font-style: italic;
  flex-shrink: 0;
}
.flap .affix.pre {
  margin-right: 0.04em;
}
.flap .affix.suf {
  margin-left: 0.18em;
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 0.28em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  align-self: flex-end;
  padding-bottom: 0.5em;
  font-variant-numeric: normal;
}

/* =========================================================================
   PROCESS
   ========================================================================= */
.process {
  padding: clamp(72px, 10vw, 160px) 0;
  border-top: 1px solid var(--rule);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.step {
  padding: var(--s-7) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
}
.step + .step { border-left: 1px solid var(--rule); }
.step .num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.04;
  color: var(--ink-strong);
  letter-spacing: -0.02em;
  max-width: 10ch;
}
.step h3 em { color: var(--accent-ink); font-style: italic; }
.step p { color: var(--graphite); max-width: 38ch; font-size: 0.98rem; line-height: 1.55; }
.step-meta {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex;
  justify-content: space-between;
}

/* =========================================================================
   TESTIMONIAL
   ========================================================================= */
.testimonial {
  padding: clamp(72px, 10vw, 140px) 0;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.quote-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(6rem, 14vw, 12rem);
  line-height: 0.7;
  color: var(--accent);
  letter-spacing: -0.04em;
}

blockquote.pull {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  max-width: 22ch;
}
blockquote.pull em { color: var(--accent-ink); font-style: italic; }

.attribution {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  font-size: 0.95rem;
}
.attribution .who { color: var(--ink); }
.attribution .who strong { font-weight: 600; }
.attribution .what {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
}

.clients {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.clients-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: slide 60s linear infinite;
  will-change: transform;
  padding: 6px 0;
}
.clients-track span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--graphite);
  white-space: nowrap;
  letter-spacing: -0.015em;
}
.clients-track span::after {
  content: "✦";
  font-style: normal;
  color: var(--accent);
  margin-left: 56px;
  font-size: 0.8rem;
  vertical-align: middle;
}

/* =========================================================================
   CTA
   ========================================================================= */
.cta {
  padding: clamp(80px, 12vw, 180px) 0;
  border-top: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.cta h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-6);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  max-width: 14ch;
}
.cta h2 em { color: var(--accent-ink); font-style: italic; }

.cta-side { display: flex; flex-direction: column; gap: var(--s-5); }
.cta-side p { color: var(--graphite); font-size: var(--step-1); max-width: 38ch; line-height: 1.5; }
.cta-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.cta-facts {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot {
  padding: clamp(56px, 7vw, 88px) 0 var(--s-5);
  border-top: 1px solid var(--rule-strong);
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
}

.foot-brand .brand { margin-bottom: var(--s-4); }
.foot-brand p {
  color: var(--graphite);
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.5;
}

.foot h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--s-4);
  font-weight: 500;
}
.foot ul { display: flex; flex-direction: column; gap: 10px; }
.foot ul a {
  color: var(--ink);
  font-size: 0.95rem;
  transition: color var(--dur-fast);
}
.foot ul a:hover { color: var(--accent-ink); }

.colophon {
  margin-top: clamp(56px, 8vw, 96px);
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  position: relative;
  z-index: 1;
  color: var(--graphite);
}
.cph-mast {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 22px);
  flex-wrap: wrap;
}
.cph-mast-no {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-ink);
  padding: 4px 10px;
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  border-radius: 4px;
}
.cph-mast-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}
.cph-mast-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rule), transparent);
  min-width: 60px;
}
.cph-line {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--graphite);
  max-width: 76ch;
}
.cph-line em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-strong);
}
.cph-line a {
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
}
.cph-line a:hover { color: var(--ink); }
/* Byline — newspaper-style attribution to V & K, sits between the colophon
   paragraph and the legal/copyright meta line. */
.cph-byline {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  flex-wrap: wrap;
  padding: clamp(14px, 1.8vw, 22px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}
.cph-byline-label {
  color: var(--ghost);
  font-size: 0.56rem;
  letter-spacing: 0.28em;
}
.cph-byline-name {
  color: var(--ink-strong);
  letter-spacing: 0.18em;
}
.cph-byline-amp {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-ink);
}
.cph-byline-mark {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
  background: color-mix(in oklch, var(--accent) 4%, transparent);
}

.cph-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ghost);
  padding-top: var(--s-3);
}
.cph-meta a { color: var(--graphite); }
.cph-meta a:hover { color: var(--accent-ink); }

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 18rem);
  letter-spacing: -0.04em;
  line-height: 0.8;
  color: var(--ink-strong);
  opacity: 0.08;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -4vw;
  pointer-events: none;
  user-select: none;
  font-weight: 400;
}

/* =========================================================================
   READING PROGRESS (top edge)
   ========================================================================= */
.progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  background: transparent;
}
.progress-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 120ms linear;
  box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 60%, transparent);
}

/* =========================================================================
   SECTION SCRUBBER (right edge)
   ========================================================================= */
.scrubber {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}
.scrubber.is-visible { opacity: 1; }

.scrubber a {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  color: var(--ghost);
  justify-content: flex-end;
  position: relative;
  transition: color 300ms var(--ease-out);
}
.sc-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
  white-space: nowrap;
}
.sc-num {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  color: inherit;
  opacity: 0.6;
  min-width: 20px;
  text-align: right;
}
.sc-dash {
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 380ms var(--ease-out), background-color 300ms;
  flex-shrink: 0;
}
.scrubber a:hover { color: var(--ink); }
.scrubber a:hover .sc-dash { width: 30px; }
.scrubber a:hover .sc-label,
.scrubber a.is-active .sc-label { opacity: 1; transform: translateX(0); }
.scrubber a.is-active { color: var(--ink); }
.scrubber a.is-active .sc-num { opacity: 1; color: var(--accent); }
.scrubber a.is-active .sc-dash {
  width: 44px;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in oklch, var(--accent) 40%, transparent);
}

/* =========================================================================
   PAGE META (fixed bottom-left info pill)
   ========================================================================= */
.page-meta {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 10px 12px;
  background: color-mix(in oklch, var(--canvas) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid var(--rule);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  pointer-events: none;
}
.page-meta.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.pm-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 8px;
  line-height: 1.6;
}
.pm-label { color: var(--ghost); }
.pm-value { color: var(--ink); }
#liveClock { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .scrubber { display: none; }
  .page-meta { display: none; }
}

/* =========================================================================
   SKIP LINK + SMOOTH SCROLL
   ========================================================================= */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-5);
  padding: 10px 16px;
  background: var(--ink-strong);
  color: var(--canvas);
  z-index: 10001;
  border-radius: 6px;
  font-size: 0.85rem;
  transition: top 180ms var(--ease-out);
}
.skip-link:focus {
  top: 10px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; scroll-padding-top: 100px; }
}

/* =========================================================================
   MOBILE MENU + HAMBURGER
   ========================================================================= */
.menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--rule-strong);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  transition: border-color var(--dur-fast);
}
.menu-btn:hover { border-color: var(--ink); }
.menu-btn span {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--ink);
  transition: transform 320ms var(--ease-out), opacity 200ms var(--ease-out);
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--canvas);
  transform: translateY(-100%);
  visibility: hidden;
  transition:
    transform 560ms var(--ease-out),
    visibility 0s linear 560ms;
  overflow-y: auto;
}
.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 560ms var(--ease-out),
    visibility 0s;
}
.mm-inner {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: var(--s-5);
  max-width: 720px;
  margin: 0 auto;
  gap: var(--s-5);
}

.mm-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--ink-strong);
  color: var(--canvas);
  border: none;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-med) var(--ease-out);
}
.mm-search-btn:hover { background: var(--accent-ink); }
.mm-search-btn svg { width: 16px; height: 16px; }
.mm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.menu-close {
  width: 44px; height: 44px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.menu-close:hover { border-color: var(--ink); color: var(--accent-ink); }
.menu-close svg { width: 16px; height: 16px; }
.mm-nav {
  display: flex;
  flex-direction: column;
  padding: var(--s-6) 0;
  justify-content: center;
  gap: 0;
}
.mm-nav a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 16px;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5.5vw, 2.6rem);
  color: var(--ink-strong);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color var(--dur-fast), padding-left var(--dur-med) var(--ease-out);
}
.mm-nav a:hover { color: var(--accent-ink); padding-left: 10px; }
.mm-nav a span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--graphite);
  text-transform: uppercase;
  font-weight: 500;
}
.mm-foot {
  display: flex;
  justify-content: space-between;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  flex-wrap: wrap;
  gap: var(--s-3);
}
.mm-foot a { color: var(--accent-ink); }

body.no-scroll { overflow: hidden; }

/* =========================================================================
   READING MODE — press R to dim the fixed chrome so the content breathes
   ========================================================================= */
body.is-reading .progress-bar,
body.is-reading .scrubber,
body.is-reading .page-meta,
body.is-reading .ticker,
body.is-reading .live-strip,
body.is-reading .back-top,
body.is-reading .nav {
  opacity: 0.12;
  transition: opacity 520ms var(--ease-out);
}
body.is-reading .progress-bar:hover,
body.is-reading .scrubber:hover,
body.is-reading .page-meta:hover,
body.is-reading .back-top:hover,
body.is-reading .nav:hover {
  opacity: 1;
}
body.is-reading::after {
  content: "";
  position: fixed;
  top: 16px;
  right: 50%;
  transform: translateX(50%);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: 99px;
  background: color-mix(in oklch, var(--canvas) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998;
  pointer-events: none;
  animation: readingBadge 420ms var(--ease-out);
}
body.is-reading::after { content: "◦ Reading mode · press R"; }
@keyframes readingBadge {
  from { opacity: 0; transform: translateX(50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(50%) translateY(0); }
}

/* =========================================================================
   SYSTEM-03 INNER GRID
   ========================================================================= */
.system-03-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}

/* =========================================================================
   PRICING
   ========================================================================= */
.pricing {
  padding: clamp(72px, 10vw, 160px) 0;
  border-top: 1px solid var(--rule);
}

.billing-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
  flex-wrap: wrap;
}

.billing-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px;
  position: relative;
  min-width: 280px;
}

.bt-opt {
  padding: 10px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: -0.005em;
  color: var(--graphite);
  transition: color var(--dur-med) var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  text-align: center;
}
.bt-opt.is-active { color: var(--canvas); }
.bt-opt:hover:not(.is-active) { color: var(--ink); }

.billing-toggle::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--ink-strong);
  border-radius: 999px;
  transition: transform 440ms var(--ease-out);
  z-index: 0;
}
.billing-toggle[data-active="annual"]::before {
  transform: translateX(100%);
}

.billing-save {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  position: relative;
  padding-left: 16px;
}
.billing-save::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--accent);
  transform: translateY(-50%);
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
  perspective: 1400px;
  perspective-origin: center top;
}

.plan {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform 520ms var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    box-shadow 520ms var(--ease-out);
  box-shadow: 0 1px 0 var(--paper-edge);
}
.plan:hover {
  transform: translateY(-8px) rotateX(-3deg) rotateY(1deg);
  border-color: var(--rule-strong);
  box-shadow:
    0 24px 48px -20px color-mix(in oklch, var(--ink) 25%, transparent),
    0 8px 20px -10px color-mix(in oklch, var(--ink) 18%, transparent);
}
.plan-featured {
  background: var(--ink-strong);
  color: var(--canvas);
  border-color: var(--ink-strong);
  transform: translateY(-12px) rotateX(-1deg);
  box-shadow: 0 30px 60px -20px color-mix(in oklch, var(--accent) 30%, transparent);
}
.plan-featured:hover {
  transform: translateY(-20px) rotateX(-4deg) rotateY(1deg);
  box-shadow:
    0 40px 80px -20px color-mix(in oklch, var(--accent) 45%, transparent),
    0 16px 32px -12px color-mix(in oklch, var(--ink) 25%, transparent);
}

.plan-badge {
  position: absolute;
  top: -12px;
  right: var(--s-5);
  padding: 5px 12px;
  background: var(--accent);
  color: var(--canvas);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.plan header {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.plan-featured header {
  border-bottom-color: color-mix(in oklch, var(--canvas) 20%, transparent);
}

.plan-tier {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tier-name {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink-strong);
}
.plan-featured .tier-name { color: var(--canvas); }

.tier-idx {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--graphite);
}
.plan-featured .tier-idx { color: color-mix(in oklch, var(--canvas) 60%, transparent); }

.tier-note {
  font-size: 0.88rem;
  color: var(--graphite);
  line-height: 1.4;
  max-width: 30ch;
}
.plan-featured .tier-note { color: color-mix(in oklch, var(--canvas) 75%, transparent); }

.price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.price .amt {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink-strong);
  transition: opacity var(--dur-med);
}
.plan-featured .amt { color: var(--canvas); }
.price .per {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
}
.plan-featured .per { color: color-mix(in oklch, var(--canvas) 65%, transparent); }

.features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.features li {
  padding-left: 22px;
  position: relative;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--ink);
}
.plan-featured .features li { color: var(--canvas); }
.features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}

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

.pricing-foot {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--graphite);
  font-size: 0.95rem;
}
.pricing-foot a {
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast);
}
.pricing-foot a:hover { color: var(--ink); }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq {
  padding: clamp(72px, 10vw, 160px) 0;
  border-top: 1px solid var(--rule);
}

.faq .note a {
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
}

.faq-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin-bottom: var(--s-5);
  max-width: 560px;
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med);
}
.faq-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 15%, transparent);
}
.faq-search svg {
  width: 18px;
  height: 18px;
  color: var(--graphite);
  flex-shrink: 0;
}
.faq-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  min-width: 0;
  padding: 0;
}
.faq-search input::placeholder { color: var(--ghost); }
.faq-count {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
  flex-shrink: 0;
}

.faq-empty {
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: var(--graphite);
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1rem;
  max-width: 560px;
}
.faq-empty a {
  color: var(--accent-ink);
  font-style: normal;
  border-bottom: 1px solid currentColor;
}

.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
  width: 100%;
  padding: var(--s-5) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: center;
  text-align: left;
  font-family: var(--font-body);
  color: var(--ink);
  transition: color var(--dur-fast);
}
.faq-idx {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  min-width: 50px;
}
.faq-text {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink-strong);
  transition: color var(--dur-fast);
}
.faq-q:hover .faq-text { color: var(--accent-ink); }

.faq-icon {
  width: 28px;
  height: 28px;
  position: relative;
  flex-shrink: 0;
  transition: transform 380ms var(--ease-out);
}
.faq-icon span {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px;
  height: 1px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 380ms var(--ease-out), background-color var(--dur-fast);
}
.faq-icon span:last-child { transform: translate(-50%, -50%) rotate(90deg); }

.faq-item.is-open .faq-icon { transform: rotate(180deg); }
.faq-item.is-open .faq-icon span:last-child { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item.is-open .faq-q .faq-text { color: var(--accent-ink); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out);
}
.faq-a-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}
.faq-a-inner p {
  padding: 0 0 var(--s-5) calc(var(--s-5) + 50px);
  max-width: 68ch;
  color: var(--graphite);
  font-size: 1rem;
  line-height: 1.6;
}

/* =========================================================================
   CONTACT (form)
   ========================================================================= */
.contact {
  padding: clamp(80px, 12vw, 180px) 0;
  border-top: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 50% at 0% 0%, color-mix(in oklch, var(--accent) 5%, transparent) 0%, transparent 60%),
    var(--canvas);
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.contact-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  max-width: 14ch;
  margin-bottom: var(--s-5);
}
.contact-copy h2 em { color: var(--accent-ink); font-style: italic; }

.contact-copy p {
  color: var(--graphite);
  font-size: var(--step-1);
  max-width: 44ch;
  line-height: 1.55;
  margin-bottom: var(--s-6);
}

.contact-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.contact-facts > div { display: flex; flex-direction: column; gap: 4px; }
.fact-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}
.fact-val {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink-strong);
  letter-spacing: -0.015em;
}

/* =========================================================================
   BOOKING AREA — tabs between Cal.com calendar and message form
   ========================================================================= */
.booking-area {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.booking-tabs {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: 4px;
  gap: 2px;
  width: fit-content;
  align-self: start;
  position: relative;
}

.bt-tab {
  padding: 10px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 99px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--graphite);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
  white-space: nowrap;
}
.bt-tab svg { width: 15px; height: 15px; flex-shrink: 0; }
.bt-tab:hover:not(.is-active) { color: var(--ink); }
.bt-tab.is-active {
  background: var(--ink-strong);
  color: var(--canvas);
}

.booking-panel { display: none; }
.booking-panel.is-active { display: block; }
.booking-panel[hidden] { display: none; }

/* Cal.com popup trigger frame */
.cal-cta-frame {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 40px 80px -30px color-mix(in oklch, var(--ink) 22%, transparent);
  text-align: center;
  align-items: center;
}

.cal-cta-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 50% 0%, color-mix(in oklch, var(--accent) 8%, transparent) 0%, transparent 60%),
    radial-gradient(40% 35% at 50% 100%, color-mix(in oklch, var(--moss) 5%, transparent) 0%, transparent 65%);
  pointer-events: none;
}

.cal-cta-head {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  background: color-mix(in oklch, var(--accent) 10%, var(--canvas));
  border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent);
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.cal-cta-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.8s var(--ease-io) infinite;
}

.cal-cta-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink-strong);
  max-width: 16ch;
  margin: var(--s-3) 0 0;
}
.cal-cta-title em {
  font-style: italic;
  color: var(--accent-ink);
}

.cal-cta-lede {
  position: relative;
  color: var(--graphite);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 44ch;
  margin: 0;
}

.cal-open-btn {
  position: relative;
  margin-top: var(--s-3);
}

.cal-cta-facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  width: 100%;
  max-width: 440px;
}
.cal-cta-facts > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 var(--s-3);
}
.cal-cta-facts > div + div {
  border-left: 1px solid var(--rule);
}
.cal-cta-facts dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  order: 2;
}
.cal-cta-facts dd {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--ink-strong);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  order: 1;
}

.cal-cta-fallback {
  position: relative;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
  color: var(--graphite);
  width: 100%;
}
.cal-cta-fallback a,
.cal-cta-fallback .link-button {
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast);
}
.cal-cta-fallback a:hover,
.cal-cta-fallback .link-button:hover { color: var(--ink); }
.cal-cta-fallback .link-button {
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.cal-cta-fallback .link-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 560px) {
  .bt-tab { padding: 9px 14px; font-size: 0.82rem; }
  .cal-cta-frame { padding: 32px 24px; }
  .cal-cta-facts { grid-template-columns: 1fr; gap: var(--s-3); }
  .cal-cta-facts > div + div { border-left: none; border-top: 1px solid var(--rule); padding-top: var(--s-3); }
}

.demo-form {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  position: relative;
}

.form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}
.form-title { color: var(--ink); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5) var(--s-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  border: none;
  padding: 0;
  margin: 0;
}
.field-wide { grid-column: 1 / -1; }

.field-label, legend.field-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 0;
  margin-bottom: 8px;
}
.field-label .num { color: var(--accent); }
.field-label .opt {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ghost);
  margin-left: auto;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition:
    border-color var(--dur-med) var(--ease-out),
    background var(--dur-med) var(--ease-out);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ghost); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--rule-strong); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
}

.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%239a8974' stroke-width='1.5'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  padding-right: 36px;
  cursor: pointer;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 5%, var(--canvas));
}

.field-err {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  padding-left: 2px;
}
.field.has-error .field-err { display: block; }

.radio-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.radio { position: relative; }
.radio input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
  margin: 0;
}
.radio span {
  display: grid;
  place-items: center;
  padding: 12px 10px;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--graphite);
  cursor: pointer;
  transition: all var(--dur-fast);
  text-align: center;
}
.radio:hover span { border-color: var(--rule-strong); color: var(--ink); }
.radio input:checked + span {
  background: var(--ink-strong);
  color: var(--canvas);
  border-color: var(--ink-strong);
}
.radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}
.form-promise {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--graphite);
}

.form-success {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5) 0;
}
.demo-form.is-success .form-grid { display: none; }
.demo-form.is-success .form-success { display: flex; }
.demo-form.is-success .form-head { display: none; }

.success-mark {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--canvas);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  animation: successPop 600ms var(--ease-out);
}
@keyframes successPop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.form-success h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  font-weight: 400;
  line-height: 1;
}
.form-success p {
  color: var(--graphite);
  max-width: 50ch;
  line-height: 1.5;
  font-size: 0.95rem;
}
.form-success p a {
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
}

.demo-form.is-submitting { opacity: 0.7; pointer-events: none; }
.demo-form.is-submitting button[type="submit"] { opacity: 0.6; }

/* =========================================================================
   NEWSLETTER
   ========================================================================= */
.newsletter {
  margin-top: var(--s-5);
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  max-width: 360px;
  flex-wrap: wrap;
}
.newsletter label { flex: 1; min-width: 180px; display: flex; }
.newsletter input {
  flex: 1;
  padding: 10px 14px;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color var(--dur-fast);
}
.newsletter input:hover, .newsletter input:focus {
  border-color: var(--rule-strong);
  outline: none;
}
.newsletter button {
  padding: 10px 16px;
  background: var(--ink-strong);
  color: var(--canvas);
  border: 1px solid var(--ink-strong);
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  font-size: 0.88rem;
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med);
  display: flex;
  align-items: center;
  gap: 8px;
}
.newsletter button:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.newsletter-note {
  width: 100%;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-ink);
  min-height: 1em;
}
.newsletter.is-done input, .newsletter.is-done button { display: none; }

/* =========================================================================
   BACK TO TOP
   ========================================================================= */
.back-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink-strong);
  color: var(--canvas);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), background var(--dur-med);
  z-index: 9000;
  box-shadow: 0 10px 30px -10px color-mix(in oklch, var(--ink) 30%, transparent);
}
.back-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-top:hover { background: var(--accent-ink); }
.back-top svg { width: 18px; height: 18px; }

/* =========================================================================
   TOAST
   ========================================================================= */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 10001;
  padding: 14px 22px;
  background: var(--ink-strong);
  color: var(--canvas);
  border-radius: 10px;
  font-size: 0.9rem;
  max-width: calc(100vw - 48px);
  opacity: 0;
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
  box-shadow: 0 12px 40px -12px color-mix(in oklch, var(--ink) 30%, transparent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast::before {
  content: "✓";
  color: var(--accent);
  font-weight: 600;
}

/* =========================================================================
   HERO HOOK BADGE (pre-headline attention-grabber)
   ========================================================================= */
.hero-hook {
  margin-bottom: var(--s-5);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hook-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  background: color-mix(in oklch, var(--accent) 12%, var(--canvas));
  color: var(--accent-ink);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: 99px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.88rem, 1.2vw, 1rem);
  letter-spacing: -0.005em;
  line-height: 1;
  position: relative;
}
.hook-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent);
  animation: pulse 2.2s var(--ease-io) infinite;
}

/* =========================================================================
   TRANSITIONAL HOOKS (small italic interstitials between sections)
   ========================================================================= */
.hook {
  text-align: center;
  padding: clamp(32px, 5vw, 56px) 0;
  position: relative;
}
.hook span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: var(--graphite);
  max-width: 52ch;
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: inline-block;
  padding: 0 clamp(24px, 4vw, 48px);
  position: relative;
}
.hook span::before,
.hook span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(18px, 3vw, 40px);
  height: 1px;
  background: var(--rule-strong);
  transform: translateY(-50%);
}
.hook span::before {
  right: 100%;
  margin-right: 10px;
}
.hook span::after {
  left: 100%;
  margin-left: 10px;
}

/* =========================================================================
   STATEMENT (mid-issue cinematic break — massive 3D-tilted type)
   ========================================================================= */
.statement {
  padding: clamp(100px, 14vw, 200px) 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 50% 50%, color-mix(in oklch, var(--accent) 5%, transparent) 0%, transparent 65%),
    var(--canvas);
  perspective: 1600px;
  perspective-origin: 50% 50%;
}

.statement::before,
.statement::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
}
.statement::before { top: 0; }
.statement::after { bottom: 0; }

.statement-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: clamp(24px, 4vw, 48px);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}

.statement-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 11vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink-strong);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 80ms linear;
}

.statement-h .sl {
  display: block;
  transform-origin: 0% 50%;
}
.statement-h em {
  font-style: italic;
  color: var(--accent-ink);
  font-weight: 400;
}
.statement-h .sl-accent {
  color: var(--accent-ink);
  margin-left: clamp(32px, 8vw, 120px);
}

.statement-note {
  margin-top: clamp(24px, 4vw, 48px);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  color: var(--graphite);
  max-width: 44ch;
  line-height: 1.4;
}

@media (max-width: 560px) {
  .statement-h .sl-accent { margin-left: 0; }
}

/* Apparatus alongside statement — clickable 3D centerpiece */
.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.statement-text { min-width: 0; }

.apparatus-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  justify-self: end;
  width: 100%;
  max-width: 520px;
}

.apparatus-desc {
  font-family: var(--font-body);
  color: var(--graphite);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-4);
}
.apparatus-desc-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--s-3);
  opacity: 0.8;
}
.apparatus-desc-lede {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--ink-strong);
  line-height: 1.25;
}
.apparatus-desc-body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 48ch;
}
.apparatus-desc-body strong {
  color: var(--ink-strong);
  font-weight: 500;
}
.apparatus-desc-body em {
  font-style: italic;
  color: var(--accent-ink);
}

.apparatus-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  appearance: none;
  background:
    radial-gradient(60% 60% at 50% 40%, color-mix(in oklch, var(--accent) 14%, transparent) 0%, transparent 70%),
    color-mix(in oklch, var(--ink-strong) 96%, var(--accent) 4%);
  border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 color-mix(in oklch, var(--accent) 25%, transparent);
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.apparatus-frame:hover { transform: translateY(-3px); }
.apparatus-frame:active { transform: translateY(0) scale(0.99); }
.apparatus-frame:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
.apparatus-frame canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.apparatus-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 4%, 28px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: oklch(94% 0.014 85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.apparatus-cap-hint { color: var(--accent); opacity: 0.9; }

@media (max-width: 860px) {
  .statement-grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 8vw, 64px);
  }
  .apparatus-card { justify-self: center; max-width: 440px; }
}
@media (max-width: 560px) {
  .apparatus-card { max-width: 100%; gap: 20px; }
  .apparatus-frame { max-width: 320px; margin: 0 auto; }
  .apparatus-desc-meta { font-size: 0.58rem; letter-spacing: 0.18em; }
  .apparatus-desc-lede { font-size: 1.05rem; }
  .apparatus-desc-body { font-size: 0.92rem; }
  .apparatus-cap { font-size: 0.56rem; letter-spacing: 0.18em; }
}

/* =========================================================================
   COMPARE (before / after)
   ========================================================================= */
.compare {
  padding: clamp(72px, 10vw, 160px) 0;
  border-top: 1px solid var(--rule);
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.compare-col {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: relative;
}

.compare-before {
  background: var(--paper);
}
.compare-before::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 0% 0%, color-mix(in oklch, var(--ink) 4%, transparent) 0%, transparent 60%);
  pointer-events: none;
}

.compare-after {
  background: var(--paper);
}
.compare-after::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 100% 0%, color-mix(in oklch, var(--accent) 9%, transparent) 0%, transparent 60%);
  pointer-events: none;
}

.compare-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.compare-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}
.compare-after .compare-label { color: var(--accent-ink); }

.compare-head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  max-width: 16ch;
}
.compare-head h3 em { font-style: italic; }
.compare-before h3 em { color: var(--graphite); opacity: 0.8; }
.compare-after h3 em { color: var(--accent-ink); }

.compare-list {
  display: flex;
  flex-direction: column;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.compare-list li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px dashed var(--rule);
  align-items: start;
}
.compare-list li:first-child {
  border-top: none;
  padding-top: 0;
}

.moment {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--graphite);
  padding-top: 3px;
}
.compare-after .moment { color: var(--accent); }

.compare-list p {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink);
}
.compare-before .compare-list p { color: var(--graphite); }

@media (max-width: 860px) {
  .compare-grid { grid-template-columns: 1fr; gap: 1px; }
  .compare-list li { grid-template-columns: 60px 1fr; }
}

/* =========================================================================
   VOICES (rebuilt testimonial with 3 quotes in editorial grid)
   ========================================================================= */
.voices {
  padding: clamp(72px, 10vw, 160px) 0;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

.voices-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(18px, 2vw, 28px);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.voice {
  padding: clamp(24px, 3vw, 36px);
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}
.voice:hover {
  transform: translateY(-3px);
  border-color: var(--rule-strong);
}

.voice-main {
  grid-row: span 2;
  padding: clamp(32px, 4vw, 52px);
}

.voice-qm {
  position: absolute;
  top: 10px;
  right: 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(6rem, 12vw, 10rem);
  line-height: 0.6;
  color: var(--accent);
  opacity: 0.3;
  pointer-events: none;
  letter-spacing: -0.04em;
}

.voice blockquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  position: relative;
  z-index: 1;
  max-width: 34ch;
}
.voice blockquote em {
  color: var(--accent-ink);
  font-style: italic;
}
.voice-main blockquote {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  max-width: 26ch;
}

.voice-meta {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  z-index: 1;
  position: relative;
}

.voice-who {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.voice-who strong {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.98rem;
}
.voice-who span {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}

.voice-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--rule-strong);
}
.voice-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.voice-stats .vn {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--accent-ink);
  letter-spacing: -0.025em;
  line-height: 1;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.voice-stats .vl {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}

@media (max-width: 860px) {
  .voices-grid { grid-template-columns: 1fr; }
  .voice-main { grid-row: span 1; }
  .voice-stats { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   CHAT — Kinetiq receptionist preview
   ========================================================================= */
.chat {
  padding: clamp(80px, 12vw, 160px) 0;
  border-top: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(55% 50% at 50% 0%, color-mix(in oklch, var(--accent) 7%, transparent) 0%, transparent 55%),
    var(--canvas);
}

.kbd-hint {
  font-family: var(--font-mono);
  font-size: 0.75em;
  padding: 2px 6px;
  background: color-mix(in oklch, var(--ink) 8%, var(--canvas));
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  font-weight: 500;
}

.chat-stage {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.chat-frame {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 40px 80px -30px color-mix(in oklch, var(--ink) 22%, transparent),
    0 12px 28px -12px color-mix(in oklch, var(--accent) 15%, transparent);
  overflow: hidden;
  position: relative;
}

.chat-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--accent) 35%, transparent) 0%,
    transparent 40%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Header */
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in oklch, var(--canvas) 60%, var(--paper));
}

.chat-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.chat-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: #1a130b url("/assets/logo.png") center/cover no-repeat;
  position: relative;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ink) 15%, transparent);
}

.chat-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}
.cs-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent);
  animation: pulse 1.8s var(--ease-io) infinite;
}

/* Message log */
.chat-log {
  list-style: none;
  padding: var(--s-5);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-height: 480px;
  min-height: 180px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 99px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 92%;
  animation: msgIn 360ms var(--ease-out);
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg-who {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}
.chat-msg-user .msg-who { color: var(--accent-ink); }

.msg-body {
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--canvas);
  border: 1px solid var(--rule);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.chat-msg-user {
  align-self: flex-end;
}
.chat-msg-user .msg-body {
  background: var(--ink-strong);
  color: var(--canvas);
  border-color: var(--ink-strong);
  border-bottom-right-radius: 4px;
}

.chat-msg-bot .msg-body {
  border-bottom-left-radius: 4px;
}

.msg-body p { margin: 0; }
.msg-body p + p { margin-top: 8px; }

.msg-body strong { color: var(--ink-strong); font-weight: 600; }
.chat-msg-user .msg-body strong { color: var(--canvas); }

.msg-body em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-ink);
}

.msg-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--graphite);
}
.msg-hint kbd {
  font-family: var(--font-mono);
  font-size: 0.72em;
  padding: 1px 5px;
  background: color-mix(in oklch, var(--ink) 8%, var(--canvas));
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
}

/* Inline action links ("Jump to pricing →") inside bot messages */
.msg-body a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur-fast);
  font-weight: 500;
}
.msg-body a:hover { color: var(--ink); }

/* Typing indicator */
.chat-msg-thinking .msg-body {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 18px;
}
.chat-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chat-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--graphite);
  animation: dotPulse 1.2s var(--ease-io) infinite;
}
.chat-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* Command palette */
.chat-commands {
  position: relative;
  margin: 0 var(--s-5) 8px;
  padding: 6px;
  background: var(--canvas);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  box-shadow: 0 12px 28px -12px color-mix(in oklch, var(--ink) 20%, transparent);
  animation: cmdSlide 220ms var(--ease-out);
}
@keyframes cmdSlide {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-cmd-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms var(--ease-out);
}
.chat-cmd-item[aria-selected="true"],
.chat-cmd-item:hover {
  background: color-mix(in oklch, var(--accent) 10%, transparent);
}
.chat-cmd-icon {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.72rem;
  min-width: 16px;
  text-align: center;
}
.chat-cmd-title {
  color: var(--ink);
  font-size: 0.92rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-cmd-title small {
  color: var(--graphite);
  font-size: 0.75rem;
}
.chat-cmd-key {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 3px 7px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
}
.chat-cmd-item[aria-selected="true"] .chat-cmd-key {
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Input */
.chat-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--s-4) var(--s-5) var(--s-4);
  border-top: 1px solid var(--rule);
  background: color-mix(in oklch, var(--canvas) 40%, var(--paper));
}

.chat-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink);
  padding: 8px 0;
  min-height: 44px;
  max-height: 160px;
  letter-spacing: -0.005em;
}
.chat-input::placeholder {
  color: var(--ghost);
}

.chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
  margin-top: 8px;
}

.chat-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
}
.chat-hint kbd {
  font-family: var(--font-mono);
  font-size: 0.78em;
  padding: 2px 5px;
  background: color-mix(in oklch, var(--ink) 8%, var(--canvas));
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  margin-right: 4px;
  font-weight: 500;
  letter-spacing: 0;
}
.chat-hint-sep { color: var(--ghost); }

.chat-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 18px;
  background: var(--ink-strong);
  color: var(--canvas);
  border: 1px solid var(--ink-strong);
  border-radius: 99px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  transition:
    background var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
.chat-send:hover:not([disabled]) {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  transform: translateY(-1px);
}
.chat-send[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.chat-send .cs-arrow {
  transition: transform var(--dur-med) var(--ease-out);
  display: inline-block;
}
.chat-send:hover:not([disabled]) .cs-arrow {
  transform: translate(2px, -2px);
}

/* Suggestion chips */
.chat-suggestions {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.chat-chip {
  padding: 8px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 99px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.86rem;
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
  letter-spacing: -0.005em;
}
.chat-chip:hover {
  background: var(--ink-strong);
  color: var(--canvas);
  border-color: var(--ink-strong);
  transform: translateY(-2px);
}

@media (max-width: 560px) {
  .chat-log { max-height: 420px; padding: var(--s-4); }
  .chat-msg { max-width: 95%; }
  .chat-input-wrap { padding: var(--s-3) var(--s-4); }
  .chat-hint { font-size: 0.56rem; gap: 8px; }
  .chat-suggestions { gap: 6px; }
  .chat-chip { font-size: 0.82rem; padding: 7px 14px; }
}

/* =========================================================================
   FOUNDING CLIENTS — honest pilot pitch (replaces faked testimonials)
   ========================================================================= */
/* Real testimonials — 2-up pull-quote grid above the pilot offer cards */
.testimony-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin: 0 0 clamp(40px, 5vw, 72px);
}
.testimony-grid > .testimony { margin: 0; }

/* Featured real testimonial — pull-quote treatment, sits above the pilot grid */
.testimony {
  margin: 0 0 clamp(40px, 5vw, 72px);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 64px);
  background:
    radial-gradient(60% 80% at 0% 0%, color-mix(in oklch, var(--accent) 8%, transparent) 0%, transparent 60%),
    var(--canvas);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.testimony::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 60%);
}
.testimony-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(20px, 2.4vw, 32px);
  padding: 4px 10px;
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  border-radius: 4px;
}
.testimony-quote {
  margin: 0 0 clamp(28px, 3.5vw, 44px);
  padding: 0;
  border: 0;
}
.testimony-quote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.15rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  max-width: 38ch;
  margin: 0;
  position: relative;
}
.testimony-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4em;
  line-height: 0;
  color: var(--accent);
  margin-right: 0.05em;
  vertical-align: -0.05em;
}
.testimony-mark-close {
  margin-right: 0;
  margin-left: 0.05em;
}
.testimony-cite {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--rule);
}
.testimony-mark-mono {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in oklch, var(--accent) 18%, var(--paper));
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  flex-shrink: 0;
}
.testimony-cite-body { display: flex; flex-direction: column; gap: 2px; }
.testimony-name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-strong);
}
.testimony-role {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
}

@media (max-width: 560px) {
  .testimony { padding: 32px 22px; }
  .testimony-quote p { font-size: 1.25rem; }
  .testimony-mark-mono { width: 40px; height: 40px; font-size: 0.7rem; }
}

.pilot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.pilot-card {
  padding: clamp(24px, 3.5vw, 36px);
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.pilot-card:hover {
  transform: translateY(-3px);
  border-color: var(--rule-strong);
}
.pilot-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.pilot-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  max-width: 16ch;
}
.pilot-card h3 em { font-style: italic; color: var(--accent-ink); }
.pilot-card p {
  color: var(--graphite);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 34ch;
  margin-top: auto;
}

.pilot-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  margin-bottom: var(--s-5);
}
.pilot-cta-eye {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 8px;
}
.pilot-cta-eye strong {
  color: var(--accent-ink);
  font-weight: 500;
}
.pilot-cta-text {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 50ch;
}

.voices-honesty {
  padding: var(--s-4) var(--s-5);
  background: color-mix(in oklch, var(--accent) 4%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--graphite);
  max-width: 70ch;
}
.voices-honesty strong { color: var(--ink-strong); }

.outcomes-disclaimer {
  grid-column: 1 / -1;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--rule-strong);
}
.outcomes-disclaimer small {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  line-height: 1.5;
}

@media (max-width: 860px) {
  .pilot-grid { grid-template-columns: 1fr; }
  .pilot-cta { grid-template-columns: 1fr; }
}

/* =========================================================================
   INTEGRATIONS STRIP
   ========================================================================= */
.integrations {
  padding: clamp(64px, 8vw, 120px) 0;
  border-top: 1px solid var(--rule);
}

.integrations-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.int-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 80px;
}

.int-head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  max-width: 18ch;
}
.int-head h3 em { font-style: italic; color: var(--accent-ink); }

.integrations-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.integrations-list li {
  padding: 9px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 99px;
  font-size: 0.88rem;
  color: var(--ink);
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
  cursor: default;
  user-select: none;
  letter-spacing: -0.005em;
}
.integrations-list li:hover {
  background: var(--ink-strong);
  color: var(--canvas);
  border-color: var(--ink-strong);
  transform: translateY(-3px);
}

.integrations-foot {
  grid-column: 1 / -1;
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  color: var(--graphite);
  font-size: 0.95rem;
}
.integrations-foot a {
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast);
}
.integrations-foot a:hover { color: var(--ink); }

/* New: integrations index — typeset directory of categorized chips */
.integrations-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 44px) clamp(40px, 5vw, 72px);
}
.int-group {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
}
.int-group-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--s-3);
}
.int-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.int-chips li {
  padding: 7px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 99px;
  font-size: 0.88rem;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
  cursor: default;
  user-select: none;
}
.int-chips li:hover {
  background: var(--ink-strong);
  color: var(--canvas);
  border-color: var(--ink-strong);
  transform: translateY(-2px);
}
.int-group-glue {
  grid-column: 1 / -1;
  background: color-mix(in oklch, var(--accent) 4%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
  border-radius: var(--radius-md);
  padding: clamp(20px, 2.4vw, 28px);
}
.int-group-glue .int-group-label { color: var(--accent-ink); }
.int-glue-note {
  margin: var(--s-3) 0 0;
  font-size: 0.92rem;
  color: var(--graphite);
  max-width: 56ch;
}

@media (max-width: 860px) {
  .integrations-inner { grid-template-columns: 1fr; }
  .int-head { position: static; }
  .integrations-index { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px); }
}

/* =========================================================================
   COMMAND PALETTE (Cmd/Ctrl+K)
   ========================================================================= */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: grid;
  place-items: start center;
  padding-top: min(15vh, 120px);
}
.cmdk[hidden] { display: none; }

.cmdk-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--canvas) 60%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  animation: cmdkScrim 200ms var(--ease-out);
}
@keyframes cmdkScrim { from { opacity: 0; } to { opacity: 1; } }

.cmdk-panel {
  position: relative;
  width: min(640px, calc(100% - 32px));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 60px 100px -30px color-mix(in oklch, var(--ink) 45%, transparent),
    0 20px 40px -20px color-mix(in oklch, var(--ink) 25%, transparent);
  overflow: hidden;
  animation: cmdkPanel 260ms var(--ease-out);
}
@keyframes cmdkPanel {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cmdk-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
}
.cmdk-search-icon {
  width: 18px;
  height: 18px;
  color: var(--graphite);
  flex-shrink: 0;
}
.cmdk-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1rem;
  color: var(--ink);
  font-family: var(--font-body);
  letter-spacing: -0.005em;
  padding: 0;
}
.cmdk-input::placeholder { color: var(--ghost); }

.cmdk-kbd {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  padding: 4px 8px;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--graphite);
  font-weight: 500;
  flex-shrink: 0;
}

.cmdk-list {
  max-height: min(380px, 50vh);
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.cmdk-list::-webkit-scrollbar { width: 8px; }
.cmdk-list::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 99px;
}

.cmdk-group {
  padding: 10px 12px 4px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ghost);
  font-weight: 500;
}
.cmdk-item {
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 14px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  transition: background 180ms var(--ease-out);
  list-style: none;
}
.cmdk-item[aria-selected="true"] {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
}
.cmdk-item:hover:not([aria-selected="true"]) {
  background: color-mix(in oklch, var(--ink) 4%, transparent);
}
.cmdk-item-icon {
  width: 16px;
  height: 16px;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  display: grid;
  place-items: center;
}
.cmdk-item[aria-selected="true"] .cmdk-item-icon {
  color: var(--accent-ink);
}
.cmdk-item-title {
  color: var(--ink);
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}
.cmdk-item-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.cmdk-item[aria-selected="true"] .cmdk-item-tag {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.cmdk-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--graphite);
  font-size: 0.92rem;
  font-style: italic;
  font-family: var(--font-display);
}

.cmdk-footer {
  display: flex;
  gap: 24px;
  padding: 10px 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--graphite);
  flex-wrap: wrap;
}
.cmdk-footer kbd {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  padding: 2px 5px;
  margin-right: 4px;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  font-weight: 500;
}

/* =========================================================================
   ROI CALCULATOR
   ========================================================================= */
.roi-calc {
  margin-top: var(--s-8);
  padding: clamp(28px, 4vw, 44px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  position: relative;
  overflow: hidden;
}
.roi-calc::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: radial-gradient(ellipse at right, color-mix(in oklch, var(--accent) 8%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.roi-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.roi-head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--ink-strong);
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 24ch;
}

.roi-slider-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.roi-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}

.roi-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(to right,
    var(--accent) var(--fill, 10%),
    var(--rule) var(--fill, 10%));
  border-radius: 99px;
  outline: none;
  cursor: pointer;
}
.roi-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--ink-strong);
  border-radius: 50%;
  cursor: grab;
  border: 3px solid var(--paper);
  box-shadow:
    0 2px 10px color-mix(in oklch, var(--ink) 25%, transparent),
    0 0 0 1px var(--rule);
  transition: transform 200ms var(--ease-out), box-shadow 200ms;
}
.roi-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
  box-shadow:
    0 2px 12px color-mix(in oklch, var(--accent) 40%, transparent),
    0 0 0 1px var(--accent);
}
.roi-slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.2); }

.roi-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--ink-strong);
  border-radius: 50%;
  cursor: grab;
  border: 3px solid var(--paper);
  box-shadow:
    0 2px 10px color-mix(in oklch, var(--ink) 25%, transparent),
    0 0 0 1px var(--rule);
}

.roi-display {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
}
.roi-display output {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent-ink);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.roi-display span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  padding-bottom: 0.35em;
}

.roi-results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  position: relative;
  z-index: 1;
}
.roi-result {
  padding: 0 var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.roi-result:first-child { padding-left: 0; }
.roi-result + .roi-result { border-left: 1px solid var(--rule); }

.roi-r-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}
.roi-r-val {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  color: var(--ink-strong);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  font-weight: 400;
}
.roi-r-val.roi-accent { color: var(--accent-ink); font-style: italic; }
.roi-r-val.roi-flash {
  animation: roiFlash 480ms var(--ease-out);
}
@keyframes roiFlash {
  0%   { transform: translateY(-2px); opacity: 0.4; }
  100% { transform: translateY(0);    opacity: 1; }
}

@media (max-width: 760px) {
  .roi-results { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .roi-result:nth-child(3) { padding-left: 0; border-left: none; }
  .roi-result:nth-child(3) { border-top: 1px solid var(--rule); padding-top: 20px; }
  .roi-result:nth-child(4) { border-top: 1px solid var(--rule); padding-top: 20px; }
}

/* =========================================================================
   SCROLL-REVEAL
   ========================================================================= */
[data-reveal] {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(22px);
  transition:
    opacity 900ms var(--ease-out),
    filter 900ms var(--ease-out),
    transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, filter, transform;
}
[data-reveal].is-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; filter: none; transform: none; transition: none; }
  .hero h1 .char { opacity: 1; filter: none; transform: none; animation: none; }
  .hero h1 u::after { transform: scaleX(1); animation: none; }
  .dot-live::before, .pulse::before { animation: none; }
  .clients-track, .ticker-track { animation: none; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
  .system-01, .system-02 { grid-column: span 6; }
  .system-03 { grid-column: span 12; }
}

@media (max-width: 960px) {
  .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav-links { display: none; }
  .demo-cta-nav { display: none; }
  .menu-btn { display: inline-flex; width: 44px; height: 44px; }

  .theme-toggle { width: 40px; height: 40px; }
  .theme-toggle svg { width: 16px; height: 16px; }

  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .apparatus-stage { min-height: 360px; }
  .apparatus-frame { aspect-ratio: 4 / 3; }

  .section-head { grid-template-columns: 1fr; }

  .systems-grid { grid-template-columns: 1fr; perspective: none; }
  .system-01, .system-02, .system-03 { grid-column: span 1; }
  .system-03-inner { grid-template-columns: 1fr; }

  .steps { grid-template-columns: 1fr; }
  .step + .step { border-left: none; border-top: 1px solid var(--rule); }

  .testimonial-grid { grid-template-columns: 1fr; }
  .quote-mark { font-size: 5rem; }

  .plans { grid-template-columns: 1fr; }
  .plan-featured { transform: none; }
  .plan-featured:hover { transform: translateY(-4px); }

  .contact-inner { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-facts { grid-template-columns: 1fr; gap: var(--s-3); }
  .radio-group { grid-template-columns: 1fr 1fr; }

  .faq-a-inner p { padding-left: 0; }
  .faq-q { gap: var(--s-3); }
  .faq-idx { min-width: unset; }

  .cta-inner { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-brand { grid-column: 1 / -1; }

  [data-depth] { transform: none !important; }

  .back-top { bottom: 16px; right: 16px; width: 44px; height: 44px; }
}

@media (max-width: 960px) {
  .outcomes { grid-template-columns: repeat(2, 1fr); }
}

/* Prevent iOS Safari auto-zoom on form focus (16px+ fonts needed) */
@media (max-width: 760px) {
  .field input,
  .field select,
  .field textarea,
  .cmdk-input,
  .faq-search input,
  .newsletter input {
    font-size: 16px;
  }

  /* Larger slider thumb for touch */
  .roi-slider::-webkit-slider-thumb { width: 28px; height: 28px; }
  .roi-slider::-moz-range-thumb { width: 28px; height: 28px; }

  /* Safe-area awareness on iOS */
  .back-top { bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
  .hero h1 { font-size: clamp(2.4rem, 11vw, 4rem); }
  .hero-hook { margin-bottom: var(--s-4); }
  .hook-badge { font-size: 0.8rem; padding: 6px 12px 6px 10px; }

  .hero-meta { font-size: 0.62rem; letter-spacing: 0.18em; }
  .hero-meta .sep { display: none; }

  .foot-grid { grid-template-columns: 1fr; }
  .outcomes { grid-template-columns: 1fr 1fr; }
  .apparatus-label { font-size: 0.55rem; }
  .radio-group { grid-template-columns: 1fr; }
  .billing-toggle { min-width: 0; width: 100%; }
  .billing-wrap { width: 100%; }
  .contact-facts { grid-template-columns: 1fr 1fr; }
  .form-actions { gap: var(--s-3); }

  /* Mid-issue statement — tighter on phones */
  .statement { padding: clamp(72px, 14vw, 120px) 0; }
  .statement-h { font-size: clamp(2.6rem, 13vw, 5rem); }
  .statement-meta { flex-wrap: wrap; gap: 8px; }
  .statement-meta span + span { font-size: 0.58rem; }

  /* FAQ search count crowds on small screens */
  .faq-count { display: none; }

  /* Transitional hook lines — shorter decorators */
  .hook { padding: clamp(20px, 4vw, 32px) 0; }
  .hook span { padding: 0 clamp(14px, 3vw, 28px); font-size: clamp(0.95rem, 1.5vw, 1.15rem); }

  /* Ticker slightly smaller */
  .ticker-track { padding: 8px 0; gap: 32px; }
  .ticker-track span { font-size: 0.62rem; letter-spacing: 0.18em; }

  /* Live strip paddings */
  .ls-list { grid-template-columns: 1fr; }

  /* Voices quote marks smaller on mobile so they don't dominate */
  .voice-qm { font-size: clamp(4rem, 14vw, 6rem); top: 8px; right: 14px; }
  .voice-main { padding: clamp(22px, 5vw, 32px); }

  /* System card internal grid on 03 */
  .system-03-inner { grid-template-columns: 1fr; }

  /* ROI results — 1 col on very narrow, already 2 col below 760 */
  .roi-results { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .roi-result { padding: 0 var(--s-3); }
  .roi-result:nth-child(n+2) { border-left: none; }
}

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

/* =========================================================================
   FOUNDERS SECTION
   ========================================================================= */
.founders {
  padding: clamp(72px, 10vw, 160px) 0;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

/* Founders' note — italic publisher's-letter pull-quote above the bio cards */
.founders-note {
  margin: clamp(32px, 4vw, 56px) 0 clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3.4vw, 40px) clamp(28px, 4vw, 56px);
  border-left: none;
  border-top: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
  position: relative;
  background: color-mix(in oklch, var(--accent) 3%, transparent);
}
.founders-note-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.founders-note blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.founders-note blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  max-width: 64ch;
}
.founders-note-sign {
  display: block;
  margin-top: clamp(16px, 2vw, 24px);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}

.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.founder {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  padding: clamp(24px, 3vw, 36px);
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.founder:hover {
  transform: translateY(-3px);
  border-color: var(--rule-strong);
}

.founder-mark {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent) 0%, var(--accent-ink) 50%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  animation: markSpin 24s linear infinite;
}
.founder-mark::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--canvas);
}
.founder-mark span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  color: var(--accent-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.founder-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.founder h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.founder-role {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0;
}

.founder-bio {
  color: var(--graphite);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 10px 0 0;
  max-width: 42ch;
}

.founder-links {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-top: 12px;
}
.founder-links a {
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast);
}
.founder-links a:hover { color: var(--ink); }

.founders-note {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 40px);
  text-align: center;
  border-top: 1px solid var(--rule);
  padding-top: clamp(32px, 4vw, 48px);
}
.founders-note p {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.founders-note p em {
  color: var(--accent-ink);
}
.founders-note footer {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}

@media (max-width: 760px) {
  .founders-grid { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; text-align: center; }
  .founder-mark { margin: 0 auto; }
  .founder-links { justify-content: center; }
  .founder-bio { margin: 10px auto 0; }
}

/* =========================================================================
   LEGAL PAGES — privacy / terms / cookies
   ========================================================================= */
.legal-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.legal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(32px, 5vw, 64px);
}

.legal-back {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
  transition: color var(--dur-fast);
}
.legal-back:hover { color: var(--accent-ink); }

.legal-body {
  flex: 1;
}

.legal-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}

.legal-body h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  margin-bottom: clamp(24px, 4vw, 48px);
}

.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  margin-top: clamp(32px, 4vw, 48px);
  margin-bottom: 12px;
}

.legal-body p,
.legal-body ol,
.legal-body ul {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 68ch;
  margin-bottom: var(--s-4);
}

.legal-body ol,
.legal-body ul {
  padding-left: 24px;
}
.legal-body ol li,
.legal-body ul li {
  margin-bottom: 10px;
}

.legal-body a {
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast);
}
.legal-body a:hover { color: var(--ink); }

.legal-body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 1px 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
}

.legal-body abbr {
  border-bottom: 1px dotted var(--rule-strong);
  cursor: help;
}

.legal-body strong {
  color: var(--ink-strong);
  font-weight: 600;
}

.legal-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem) !important;
  line-height: 1.4 !important;
  color: var(--graphite) !important;
  padding: var(--s-4) var(--s-5);
  background: color-mix(in oklch, var(--accent) 4%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 20%, transparent);
  border-radius: 10px;
  margin-bottom: var(--s-6) !important;
}
.legal-lede strong { color: var(--ink-strong); font-weight: 600; }

.legal-disclaimer {
  padding: var(--s-5);
  background: color-mix(in oklch, var(--accent) 5%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
  border-radius: 10px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 68ch;
}
.legal-disclaimer strong { color: var(--ink-strong); }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-5) 0;
  font-size: 0.92rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
.legal-table th,
.legal-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.legal-table tr:last-child th,
.legal-table tr:last-child td { border-bottom: none; }
.legal-table th {
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 500;
}
.legal-table td code {
  font-size: 0.82em;
}

.legal-sign {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--graphite);
  line-height: 1.7;
}
.legal-sign strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  letter-spacing: -0.02em;
}
.legal-sign a {
  border: none;
  color: var(--accent-ink);
}
.legal-sign-mark {
  width: 60px; height: 60px;
  border-radius: 12px;
  background: #1a130b url("/assets/logo.png") center/cover no-repeat;
  flex-shrink: 0;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--ink) 18%, transparent),
    0 8px 20px -8px color-mix(in oklch, var(--accent) 40%, transparent);
}

.legal-foot {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
  flex-wrap: wrap;
}
.legal-foot a {
  color: var(--graphite);
  transition: color var(--dur-fast);
}
.legal-foot a:hover { color: var(--ink); }
.legal-foot-byline {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  border-radius: 4px;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
  background: color-mix(in oklch, var(--accent) 4%, transparent);
}

@media (max-width: 560px) {
  .legal-head { flex-direction: column; gap: 14px; align-items: flex-start; }
  .legal-meta { flex-direction: column; gap: 6px; }
  .legal-sign { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   COOKIE / STORAGE CONSENT BANNER
   ========================================================================= */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 10015;
  max-width: 880px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.5vw, 28px);
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 24px 60px -20px color-mix(in oklch, var(--ink) 30%, transparent);
  animation: cbIn 360ms var(--ease-out) 280ms both;
}
.cookie-banner[hidden] { display: none; }
@keyframes cbIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cb-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}

.cb-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cb-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.cb-copy p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
}
.cb-copy a {
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
}
.cb-copy a:hover { color: var(--ink); }

.cb-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cb-btn {
  padding: 10px 16px;
  border-radius: 99px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: all var(--dur-med) var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
}
.cb-decline {
  background: transparent;
  color: var(--graphite);
  border-color: var(--rule-strong);
}
.cb-decline:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.cb-accept {
  background: var(--ink-strong);
  color: var(--canvas);
  border-color: var(--ink-strong);
}
.cb-accept:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

@media (max-width: 640px) {
  .cb-inner { grid-template-columns: 1fr; }
  .cb-actions { justify-content: stretch; }
  .cb-btn { flex: 1; }
}

/* =========================================================================
   ISSUE COVER — one-shot editorial intro (first visit only)
   ========================================================================= */
.issue-cover {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 56px);
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in oklch, var(--accent) 12%, transparent) 0%, transparent 60%),
    radial-gradient(60% 50% at 100% 100%, color-mix(in oklch, var(--moss) 8%, transparent) 0%, transparent 55%),
    var(--canvas);
  overflow: hidden;
  will-change: opacity, transform, filter;
}
.issue-cover.is-visible {
  display: flex;
  animation: coverIn 640ms var(--ease-out) forwards;
}
.issue-cover.is-dismissing {
  animation: coverOut 700ms var(--ease-out) forwards;
  pointer-events: none;
}
body.cover-open { overflow: hidden; }

@keyframes coverIn {
  from { opacity: 0; transform: scale(1.04); filter: blur(12px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
@keyframes coverOut {
  from { opacity: 1; transform: scale(1);    filter: blur(0); }
  to   { opacity: 0; transform: scale(1.06); filter: blur(18px); }
}

.ic-inner {
  width: 100%;
  max-width: 1400px;
  height: 100%;
  border: 1px solid var(--rule);
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(20px, 3vw, 40px);
  position: relative;
  background: color-mix(in oklch, var(--canvas) 92%, transparent);
}

.ic-masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-bottom: clamp(14px, 2vw, 24px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 1vw, 0.76rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--graphite);
  opacity: 0;
  animation: coverSlide 580ms var(--ease-out) 120ms forwards;
}
.ic-m-dot { color: var(--accent); }
.ic-m-left, .ic-m-right { flex-shrink: 0; }

.ic-wordmark {
  align-self: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(5rem, 22vw, 22rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--ink-strong);
  white-space: nowrap;
  user-select: none;
}
.ic-w-char {
  display: inline-block;
  opacity: 0;
  filter: blur(18px);
  transform: translateY(30px);
  animation: coverChar 780ms var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
.ic-w-char:nth-child(4) { color: var(--accent-ink); font-style: italic; }

@keyframes coverChar {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.ic-tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 2.2rem);
  line-height: 1.2;
  color: var(--graphite);
  text-align: center;
  max-width: 36ch;
  margin: 0 auto;
  letter-spacing: -0.015em;
  opacity: 0;
  animation: coverSlide 680ms var(--ease-out) 700ms forwards;
}
.ic-tagline em {
  font-style: italic;
  color: var(--accent-ink);
}

.ic-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-top: clamp(14px, 2vw, 24px);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 0.9vw, 0.72rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--graphite);
  opacity: 0;
  animation: coverSlide 500ms var(--ease-out) 1100ms forwards;
  flex-wrap: wrap;
}
.ic-hint { color: var(--accent-ink); letter-spacing: 0.18em; }

@keyframes coverSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ic-skip {
  position: absolute;
  top: clamp(14px, 2vw, 20px);
  right: clamp(14px, 2vw, 20px);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 7px 14px;
  border-radius: 99px;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 2;
  transition: color 320ms, border-color 320ms, background 320ms;
  opacity: 0;
  animation: coverSlide 500ms var(--ease-out) 1400ms forwards;
}
.ic-skip:hover {
  color: var(--canvas);
  background: var(--ink-strong);
  border-color: var(--ink-strong);
}

/* Editorial printer's registration marks in corners */
.ic-corner {
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: none;
  opacity: 0.8;
}
.ic-corner::before,
.ic-corner::after {
  content: "";
  position: absolute;
  background: var(--accent);
}
.ic-corner::before { width: 18px; height: 1px; }
.ic-corner::after  { width: 1px;  height: 18px; }
.ic-corner.tl { top: 12px; left: 12px; }
.ic-corner.tr { top: 12px; right: 12px; }
.ic-corner.tr::before { right: 0; }
.ic-corner.tr::after { right: 0; }
.ic-corner.bl { bottom: 12px; left: 12px; }
.ic-corner.bl::before { bottom: 0; }
.ic-corner.bl::after { bottom: 0; }
.ic-corner.br { bottom: 12px; right: 12px; }
.ic-corner.br::before { bottom: 0; right: 0; }
.ic-corner.br::after  { bottom: 0; right: 0; }

@media (prefers-reduced-motion: reduce) {
  .issue-cover.is-visible { animation: none; }
  .ic-masthead, .ic-tagline, .ic-footer, .ic-skip { opacity: 1; animation: none; }
  .ic-w-char { opacity: 1; filter: none; transform: none; animation: none; }
}

@media (max-width: 560px) {
  .ic-wordmark { font-size: clamp(3.5rem, 18vw, 6rem); }
  .ic-masthead, .ic-footer { font-size: 0.56rem; flex-direction: column; gap: 8px; align-items: flex-start; }
  .ic-masthead .ic-m-dot { display: none; }
  .ic-footer { align-items: flex-start; }
}

/* =========================================================================
   POLISH PASS — new-age modern accents
   Small, layered refinements that make the site feel alive and sleek
   ========================================================================= */

/* A CSS custom property that can be animated — used for rotating borders */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes spinAngle {
  from { --angle: 0deg; }
  to   { --angle: 360deg; }
}

/* ---- Sticky nav with frosted glass on scroll ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--canvas);
  transition:
    padding 320ms var(--ease-out),
    background 320ms var(--ease-out),
    backdrop-filter 320ms var(--ease-out),
    border-color 320ms var(--ease-out);
}
.nav.is-scrolled {
  padding: 14px 0;
  background: color-mix(in oklch, var(--canvas) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom-color: var(--rule-strong);
  box-shadow: 0 1px 0 var(--paper-edge);
}

/* ---- Apparatus frame: animated accent gradient border ---- */
.apparatus-frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0%,
    color-mix(in oklch, var(--accent) 55%, transparent) 25%,
    transparent 50%,
    color-mix(in oklch, var(--accent-ink) 40%, transparent) 75%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: spinAngle 10s linear infinite;
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  .apparatus-frame::after { animation: none; }
}

/* ---- System cards: warm accent glow on hover ---- */
.system:hover .tilt-inner {
  box-shadow:
    0 24px 48px -24px color-mix(in oklch, var(--accent) 38%, transparent),
    0 10px 24px -12px color-mix(in oklch, var(--ink) 20%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 50%, transparent);
}

/* ---- Featured pricing plan: animated conic accent border ---- */
.plan-featured {
  position: relative;
  overflow: visible;
}
.plan-featured::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  padding: 2px;
  background: conic-gradient(
    from var(--angle, 0deg),
    var(--accent) 0%,
    var(--accent-ink) 25%,
    var(--accent) 50%,
    color-mix(in oklch, var(--accent) 60%, transparent) 75%,
    var(--accent) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: spinAngle 6s linear infinite;
  z-index: -1;
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .plan-featured::after { animation: none; }
}

/* ---- Form inputs: richer focus glow ---- */
.field input:focus,
.field select:focus,
.field textarea:focus,
.chat-input:focus,
.newsletter input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 15%, transparent);
}
.chat-input:focus { box-shadow: none; }  /* chat input is borderless */

/* ---- Subtle hero particle dust — three dots drifting gently ---- */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 18% 28%, color-mix(in oklch, var(--accent) 70%, transparent), transparent 70%),
    radial-gradient(1px 1px at 62% 74%, color-mix(in oklch, var(--accent-ink) 60%, transparent), transparent 70%),
    radial-gradient(1.5px 1.5px at 78% 22%, color-mix(in oklch, var(--moss) 55%, transparent), transparent 70%),
    radial-gradient(1px 1px at 34% 82%, color-mix(in oklch, var(--accent) 50%, transparent), transparent 70%),
    radial-gradient(1px 1px at 88% 58%, color-mix(in oklch, var(--accent-ink) 45%, transparent), transparent 70%);
  pointer-events: none;
  opacity: 0.7;
  mix-blend-mode: normal;
  animation: dustDrift 18s ease-in-out infinite alternate;
}
@keyframes dustDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-12px, 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
}

/* ---- FAQ item: warm hover wash ---- */
.faq-item {
  transition: background 320ms var(--ease-out);
  padding: 0 clamp(12px, 2vw, 20px);
  margin: 0 clamp(-12px, -2vw, -20px);
}
.faq-item:hover {
  background: color-mix(in oklch, var(--accent) 4%, transparent);
}

/* ---- Typography polish: enable OpenType features on display text ---- */
.display,
.hero h1,
.section-head h2,
.manifesto h2,
.statement-h,
.voice blockquote,
blockquote.pull,
.cta h2,
.contact-copy h2,
.faq-text,
.cal-cta-title,
.outcome .n,
.g-num {
  font-feature-settings: "ss01", "ss02", "liga", "kern", "calt";
}

/* ---- Unified focus-visible ring (more refined) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Integrations list: warm glow on hover chip ---- */
.integrations-list li:hover {
  box-shadow:
    0 8px 20px -6px color-mix(in oklch, var(--accent) 35%, transparent),
    0 4px 8px -4px color-mix(in oklch, var(--ink) 15%, transparent);
}

/* ---- Voice cards: subtle accent line top on hover ---- */
.voice {
  position: relative;
}
.voice::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklch, var(--accent) 70%, transparent) 50%,
    transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 420ms var(--ease-out);
  pointer-events: none;
}
.voice:hover::before {
  transform: scaleX(1);
}

/* ---- Chat chips: warm glow on hover ---- */
.chat-chip:hover {
  box-shadow: 0 10px 24px -8px color-mix(in oklch, var(--accent) 30%, transparent);
}

/* ---- Plan CTA buttons: subtle warm shadow always ---- */
.plan-cta {
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

/* ---- Sticky nav margin compensation so content doesn't hide behind it ---- */
body { scroll-padding-top: 100px; }

/* ---- Subtle animated underline under currently-focused nav link ---- */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%;
  bottom: -2px;
  height: 1.5px;
  background: var(--accent);
  transition: left 360ms var(--ease-out), right 360ms var(--ease-out);
  border-radius: 2px;
}
.nav-links a:hover::after {
  left: 0; right: 0;
}

/* ---- ROI slider thumb glow while dragging ---- */
.roi-slider:active::-webkit-slider-thumb {
  box-shadow:
    0 2px 12px color-mix(in oklch, var(--accent) 60%, transparent),
    0 0 0 6px color-mix(in oklch, var(--accent) 25%, transparent),
    0 0 0 1px var(--accent);
}
.roi-slider:active::-moz-range-thumb {
  box-shadow:
    0 2px 12px color-mix(in oklch, var(--accent) 60%, transparent),
    0 0 0 6px color-mix(in oklch, var(--accent) 25%, transparent);
}

/* =========================================================================
   PRINT STYLESHEET — the site prints like a real editorial brief
   ========================================================================= */
@media print {
  @page {
    size: letter;
    margin: 0.7in 0.85in;
  }

  :root {
    --canvas: #fff;
    --paper: #fff;
    --ink: #111;
    --ink-strong: #000;
    --graphite: #333;
    --ghost: #666;
    --rule: #ccc;
    --rule-strong: #999;
    --accent: #c54f20;
    --accent-ink: #8a3812;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
    line-height: 1.5;
  }
  body::before { display: none !important; }

  /* Hide all fixed chrome and interactive-only components */
  .cursor, .scrubber, .page-meta, .progress-bar,
  .menu-btn, .theme-toggle, .nav-search, .nav-right,
  .mobile-menu, .cmdk, .back-top, .toast,
  .ticker, .apparatus-frame, .apparatus-caption, .apparatus-stage,
  .live-strip, .clients, .demo-form,
  .cta-actions, .hero-cta, .pricing-foot, .billing-wrap,
  .plan-cta, .faq-search, .faq-icon, .nav-links,
  .newsletter, .integrations-foot, .form-actions,
  .form-success {
    display: none !important;
  }

  /* Hero becomes a cover page */
  .hero { padding: 0 0 1in 0; page-break-after: always; }
  .hero-grid { grid-template-columns: 1fr !important; }

  /* Sections should flow as printed pages */
  .systems, .manifesto, .process, .compare, .pricing,
  .voices, .integrations, .faq, .contact, .foot {
    padding: 24pt 0;
    border-top: 0.5pt solid #ccc;
  }

  h1, h2, h3, h4 {
    break-after: avoid;
    page-break-after: avoid;
    color: #000;
  }

  .section-head, .outcome, .voice, .plan,
  .step, .faq-item, .compare-col {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Grids become single-column for print */
  .systems-grid, .plans, .outcomes, .voices-grid, .compare-grid,
  .steps, .contact-inner, .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 18pt !important;
  }

  /* Expand FAQ for print */
  .faq-a { grid-template-rows: 1fr !important; }
  .faq-a-inner { overflow: visible !important; }
  .faq-a-inner p { padding-left: 0 !important; }

  /* URLs rendered after external links */
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after {
    content: " · " attr(href);
    font-size: 0.85em;
    color: #666;
    word-wrap: break-word;
  }
  a[href^="#"]::after { content: ""; }

  /* Smaller type for long content */
  .hero h1 { font-size: 28pt; }
  .section-head h2 { font-size: 18pt; }
  h3 { font-size: 13pt; }

  /* Un-blur anything reveal-based so print shows everything */
  [data-reveal] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .hero h1 .char {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }
}