/* =========================================================================
   ROVN  ·  home.css  ·  section styles for the home page
   ========================================================================= */

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(60px, 7vw, 110px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.hero-eyebrow { margin-bottom: 26px; }
.hero-net-tag {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.hero-net-tag .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); position: relative; }
.hero-net-tag .pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--teal); opacity: 0; animation: pulsering 2.6s var(--ease-expo) infinite; }
@keyframes pulsering { 0% { opacity: 0.7; transform: scale(0.6); } 70%,100% { opacity: 0; transform: scale(1.6); } }

.hero h1 { font-size: var(--t-mega); margin-bottom: 24px; }
.hero h1 .ink-soft { color: var(--ink-3); }
.hero-sub { max-width: 40ch; margin-bottom: 16px; }
.hero-truth {
  max-width: 46ch; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.55;
  padding-left: 16px; border-left: 2px solid var(--teal-line); margin-bottom: 34px;
}
.hero-truth strong { color: var(--ink-2); font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-foot { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: var(--t-xs); color: var(--ink-3); }
.hero-foot .mono { letter-spacing: 0.02em; }

/* the graph panel (dark archival) */
.graph-stage {
  position: relative;
  background:
    radial-gradient(120% 90% at 72% 18%, rgba(40,198,198,0.16), transparent 55%),
    radial-gradient(100% 80% at 20% 90%, rgba(14,138,138,0.10), transparent 60%),
    var(--night);
  border: 1px solid var(--night-line);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-night);
  overflow: hidden;
  aspect-ratio: 5 / 5.4;
  min-height: 440px;
}
.graph-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.graph-stage .grain-fade {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(140% 120% at 50% 0%, transparent 60%, rgba(0,0,0,0.45));
}
.graph-frame {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px 22px;
}
.graph-frame .gf-top, .graph-frame .gf-bot { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gf-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-night-3); }
.gf-side {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-night-2); display: inline-flex; align-items: center; gap: 0.5em;
  background: rgba(20,17,11,0.6); border: 1px solid var(--night-line); border-radius: var(--r-pill);
  padding: 0.35em 0.7em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.gf-side .sq { width: 7px; height: 7px; border-radius: 2px; }
.gf-side.workers .sq { background: var(--tier-attested); }
.gf-side.facilities .sq { background: var(--teal-bright); }
.gf-hub-note { align-self: flex-end; text-align: right; }
.gf-hub-note b { color: var(--on-night); font-weight: 600; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0; text-transform: none; display: block; }

/* floating receipt that the graph "emits" */
.graph-receipt {
  position: absolute; right: 18px; bottom: 64px; width: 210px;
  background: rgba(27,24,18,0.82); border: 1px solid var(--night-line);
  border-radius: var(--r-2); padding: 10px 12px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--mono); color: var(--on-night-2); font-size: 0.66rem; line-height: 1.5;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-expo), transform .5s var(--ease-expo);
}
.graph-receipt.show { opacity: 1; transform: none; }
.graph-receipt .gr-head { display: flex; align-items: center; justify-content: space-between; color: var(--teal-bright); margin-bottom: 6px; }
.graph-receipt .gr-head .lock { letter-spacing: 0.1em; }
.graph-receipt .gr-row { display: flex; justify-content: space-between; gap: 8px; }
.graph-receipt .gr-row span:last-child { color: var(--on-night); }

/* ============================================================
   LIVING NETWORK HERO  (graph stage + docked Worker Passport)
   ============================================================ */
.hero-stage { position: relative; align-self: center; }
.hero-stage .graph-stage { z-index: 1; }
.hero-stage .gf-bot { justify-content: flex-end; }
.graph-stage .hv-docked {
  position: absolute; left: 14px; bottom: 14px; top: auto; right: auto; z-index: 3;
  width: min(340px, 84%); padding: 13px 15px 5px;
  background: rgba(22,19,14,0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--night-line); border-radius: var(--r-3);
  box-shadow: 0 20px 50px -16px rgba(0,0,0,0.75);
}
.graph-stage .hv-docked .hv-head { padding-bottom: 10px; }
.graph-stage .hv-docked .hv-mark { width: 28px; height: 28px; }
.graph-stage .hv-docked .hv-name { font-size: 0.86rem; }
.graph-stage .hv-docked .hv-name small { white-space: nowrap; }
.graph-stage .hv-docked .hv-row { padding: 8px 0; }
.graph-stage .hv-docked .hv-c { font-size: 0.78rem; }
@keyframes stampin { 0% { transform: scale(0.55); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.hv-t.stamped { animation: stampin .5s var(--ease-spring) both; }

/* ============================================================
   HERO VISUAL  (legible verified-record card; no canvas, GPU-cheap)
   ============================================================ */
.hero-visual { position: relative; align-self: center; padding: 30px 6px 26px; }
.hv-tag {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--paper-0); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 0.45em 0.85em; box-shadow: 0 8px 22px rgba(27,23,18,0.07);
}
.hv-w { top: 0; left: -4px; }
.hv-f { bottom: 0; right: -4px; }
.hv-dot { width: 7px; height: 7px; border-radius: 50%; }
.hv-dot.w { background: var(--tier-attested); }
.hv-dot.f { background: var(--teal); }
.hv-card {
  position: relative; overflow: hidden; color: var(--on-night);
  background: radial-gradient(130% 80% at 80% 0%, rgba(40,198,198,0.14), transparent 55%), var(--night);
  border: 1px solid var(--night-line); border-radius: var(--r-4);
  box-shadow: var(--shadow-night); padding: 22px 22px 18px;
}
.hv-head { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--night-line-soft); }
.hv-mark { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(40,198,198,0.12); border: 1px solid rgba(40,198,198,0.3);
  font-family: var(--serif); font-size: 0.92rem; color: var(--teal-bright); }
.hv-name { display: flex; flex-direction: column; line-height: 1.2; font-weight: 600; font-size: 0.92rem; }
.hv-name small { font-weight: 400; font-size: 0.68rem; color: var(--on-night-3); font-family: var(--mono); letter-spacing: 0.02em; margin-top: 3px; }
.hv-seal { margin-left: auto; display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal-bright); border: 1px solid rgba(40,198,198,0.4); border-radius: var(--r-pill); padding: 0.35em 0.7em; }
.hv-seal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-bright); animation: hvpulse 2.6s var(--ease-expo) infinite; }
.hv-rows { padding: 4px 0 0; }
.hv-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--night-line-soft); }
.hv-row:last-child { border-bottom: 0; }
.hv-c { font-size: 0.82rem; color: var(--on-night); }
.hv-s { font-family: var(--mono); font-size: 0.63rem; color: var(--on-night-3); letter-spacing: 0.02em; }
.hv-t { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.28em 0.55em; border-radius: var(--r-1); }
.hv-t.v { color: var(--teal-bright); background: rgba(40,198,198,0.12); }
.hv-t.p { color: var(--tier-processed); background: rgba(126,138,87,0.18); }
.hv-foot { margin-top: 14px; display: flex; align-items: center; gap: 0.6em; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.01em; color: var(--on-night-2); }
.hv-foot .hv-lock { color: var(--teal-bright); }
.hv-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(40,198,198,0.55), transparent); animation: hvscan 6s var(--ease-expo) infinite; opacity: 0; }
.hv-illus { position: absolute; right: 10px; bottom: -4px; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); }
@keyframes hvpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(40,198,198,0.5); } 50% { box-shadow: 0 0 0 5px rgba(40,198,198,0); } }
@keyframes hvscan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.6; } 55% { transform: translateY(330px); opacity: 0.4; } 65%,100% { opacity: 0; transform: translateY(330px); } }

@media (prefers-reduced-motion: reduce) {
  .hero-net-tag .pulse::after { animation: none; }
  .hv-seal-dot { animation: none; }
  .hv-scan { display: none; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stage { order: 2; width: 100%; margin-top: 10px; }
  .hero-stage .graph-stage { aspect-ratio: 4/4.4; min-height: 0; }
  .hero-visual { order: 2; width: 100%; max-width: 460px; margin: 6px auto 0; padding-top: 40px; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(2.35rem, 9vw, 3rem); }
  .hv-row { grid-template-columns: 1fr auto; }
  .hv-row .hv-s { display: none; }
}

/* ============================================================
   BOLD HERO  (atmosphere, kinetic accent, living card, proof ticker)
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero-atmos { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ha-glow {
  position: absolute; top: -22%; right: -10%; width: 78%; height: 110%;
  background:
    radial-gradient(52% 50% at 62% 42%, rgba(40,198,198,0.20), transparent 70%),
    radial-gradient(64% 56% at 72% 54%, rgba(168,137,91,0.13), transparent 72%);
  filter: blur(26px); animation: haBreathe 9s var(--ease-expo) infinite;
}
.ha-grain {
  position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(27,23,18,0.05) 1px, transparent 1px);
  background-size: 3px 3px;
}
.hero > .wrap { position: relative; z-index: 1; }

/* kinetic underline-draw on the accent word */
.hero h1 em { position: relative; }
.hero h1 em::after {
  content: ""; position: absolute; left: 0.02em; right: 0.02em; bottom: 0.06em; height: 0.055em;
  background: var(--teal); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  animation: drawline 0.95s var(--ease-expo) 0.75s both;
}

/* living verified-record card */
.hero-visual { position: relative; }
.hero-visual::before {
  content: ""; position: absolute; left: 14%; right: 4%; top: 24%; bottom: 4%; z-index: 0;
  background: radial-gradient(58% 58% at 62% 50%, rgba(40,198,198,0.32), transparent 70%);
  filter: blur(46px); animation: haBreathe 7.5s var(--ease-expo) infinite;
}
.hero-visual .hv-card,
.hero-visual .hv-tag { position: relative; z-index: 1; }
.hv-row { opacity: 0; transform: translateY(10px); animation: rowin .6s var(--ease-expo) both; }
.hv-row:nth-child(1) { animation-delay: .50s; }
.hv-row:nth-child(2) { animation-delay: .66s; }
.hv-row:nth-child(3) { animation-delay: .82s; }
.hv-row:nth-child(4) { animation-delay: .98s; }
.hv-seal { opacity: 0; animation: rowin .55s var(--ease-expo) 1.15s both; }

/* proof ticker: the verification rail, alive */
.proof-ticker {
  position: relative; z-index: 1; margin-top: clamp(38px, 5vw, 70px);
  border-block: 1px solid var(--line); overflow: hidden; padding: 13px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.pt-track { display: inline-flex; align-items: center; white-space: nowrap; animation: ticker 42s linear infinite; will-change: transform; }
.proof-ticker:hover .pt-track { animation-play-state: paused; }
.pt-item { display: inline-flex; align-items: center; gap: 0.55em; padding: 0 24px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--ink-3); }
.pt-item b { color: var(--ink-2); font-weight: 600; }
.pt-item .ok { color: var(--teal-ink); font-weight: 600; }
.pt-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); flex: none; }

@keyframes haBreathe { 0%,100% { opacity: 0.65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes drawline { to { transform: scaleX(1); } }
@keyframes rowin { to { opacity: 1; transform: none; } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ha-glow, .hero-visual::before { animation: none; }
  .hv-row, .hv-seal { animation: none; opacity: 1; transform: none; }
  .hero h1 em::after { animation: none; transform: scaleX(1); }
  .pt-track { animation: none; transform: none; }
}

/* ============================================================
   CARRY (signature)  verify once, carry it everywhere
   ============================================================ */
.carry { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); border-block: 1px solid var(--night-line); padding-block: clamp(64px, 8vw, 120px); }
.carry-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 60% at 20% 28%, rgba(40,198,198,0.16), transparent 60%),
              radial-gradient(60% 70% at 92% 82%, rgba(40,198,198,0.10), transparent 65%); }
.carry > .wrap { position: relative; z-index: 1; }
.carry-head { max-width: 60ch; }
.carry .kicker { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 14px; }
.carry-title { font-family: var(--serif); font-weight: 300; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 16px; text-wrap: balance; }
.carry-title em { font-style: italic; color: var(--teal-bright); }
.carry-lead { font-size: var(--t-lead); color: var(--on-night-2); line-height: 1.5; max-width: 56ch; }
.carry-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1.05fr); align-items: center; gap: clamp(16px, 3vw, 40px); margin-top: clamp(40px, 5vw, 70px); }
.cf-record { background: var(--night-1); border: 1px solid var(--night-line); border-radius: var(--r-4); padding: 20px; box-shadow: var(--shadow-night); position: relative; }
.cf-rh { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--night-line-soft); }
.cf-mark { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: rgba(40,198,198,0.12); border: 1px solid rgba(40,198,198,0.3); font-family: var(--serif); color: var(--teal-bright); font-size: 0.9rem; }
.cf-who { display: flex; flex-direction: column; font-weight: 600; font-size: 0.9rem; line-height: 1.2; }
.cf-who small { font-weight: 400; font-size: 0.66rem; color: var(--on-night-3); font-family: var(--mono); margin-top: 2px; }
.cf-seal { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-bright); border: 1px solid rgba(40,198,198,0.4); border-radius: var(--r-pill); padding: 0.3em 0.6em; }
.cf-seal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-bright); animation: hvpulse 2.6s var(--ease-expo) infinite; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.cf-chip { font-family: var(--mono); font-size: 0.66rem; color: var(--on-night-2); background: rgba(40,198,198,0.08); border: 1px solid var(--night-line); border-radius: var(--r-pill); padding: 0.35em 0.7em; display: inline-flex; align-items: center; gap: 0.4em; }
.cf-chip i { color: var(--teal-bright); }
.cf-wire { position: relative; height: 2px; min-width: 56px; background: linear-gradient(90deg, rgba(40,198,198,0.5), rgba(40,198,198,0.15)); border-radius: 2px; }
.cf-pulse { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 12px 2px rgba(40,198,198,0.7); animation: cfpulse 2.4s var(--ease-expo) infinite; }
.cf-pulse.d2 { animation-delay: 0.8s; } .cf-pulse.d3 { animation-delay: 1.6s; }
.cf-faces { display: flex; flex-direction: column; gap: 12px; }
.cf-face { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--night-1); border: 1px solid var(--night-line); border-left: 2px solid var(--teal); border-radius: var(--r-3); padding: 14px 16px; opacity: 0; transform: translateX(12px); }
.carry-flow.in .cf-face { animation: cfaccept .7s var(--ease-expo) var(--d, 0s) both; }
.cf-fn { font-size: 0.86rem; font-weight: 500; }
.cf-fs { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--teal-bright); white-space: nowrap; }
.carry-foot { margin-top: clamp(28px, 4vw, 48px); font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--on-night-3); max-width: 72ch; }
@keyframes cfpulse { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateX(var(--cfw, 320px)); opacity: 0; } }
@keyframes cfaccept { to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .carry-flow { grid-template-columns: 1fr; gap: 16px; }
  .cf-wire { justify-self: start; width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-pulse, .cf-seal-dot { animation: none; }
  .cf-face { animation: none; opacity: 1; transform: none; }
}

/* worker signature: career rail (the record compounds) */
.career-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
.cr-line { position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: linear-gradient(90deg, transparent, rgba(40,198,198,0.5) 10%, rgba(40,198,198,0.5) 90%, transparent); }
.cr-step { position: relative; padding-top: 34px; opacity: 0; transform: translateY(10px); }
.career-rail.in .cr-step { animation: cfaccept .7s var(--ease-expo) var(--d, 0s) both; }
.cr-dot { position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--night-1); border: 2px solid var(--teal-bright); box-shadow: 0 0 10px rgba(40,198,198,0.5); }
.cr-step.now .cr-dot { background: var(--teal-bright); }
.cr-when { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 6px; }
.cr-what { font-size: 0.95rem; font-weight: 500; color: var(--on-night); line-height: 1.25; margin-bottom: 5px; }
.cr-note { font-family: var(--mono); font-size: 0.66rem; color: var(--on-night-3); }
@media (max-width: 760px) {
  .career-rail { grid-template-columns: 1fr; gap: 0; }
  .cr-line { left: 6px; right: auto; top: 4px; bottom: 18px; width: 2px; height: auto; background: linear-gradient(180deg, transparent, rgba(40,198,198,0.5) 6%, rgba(40,198,198,0.5) 94%, transparent); }
  .cr-step { padding-top: 0; padding-left: 30px; padding-bottom: 26px; }
  .cr-dot { top: 2px; }
}

/* ============================================================
   STAT BAND  (honest counters, monospace)
   ============================================================ */
.statband { border-block: 1px solid var(--line); background: transparent; }
.statband .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: clamp(26px, 3vw, 40px) clamp(14px, 2vw, 28px); border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat .num { font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); letter-spacing: -0.03em; color: var(--ink); line-height: 1; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.stat .lab { margin-top: 10px; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.35; }
.stat .num .unit { color: var(--teal-ink); }
@media (max-width: 720px) {
  .statband .wrap { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ============================================================
   SECTION HEADER kit
   ============================================================ */
.sec-head { max-width: 64ch; }
.sec-head .kicker { margin-bottom: 22px; }
.sec-head h2 { margin-bottom: 20px; }
.sec-head .lead { max-width: 56ch; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .kicker { justify-content: center; }

/* ============================================================
   THE PAIN
   ============================================================ */
.pain { background: var(--paper-2); border-block: 1px solid var(--line); }
.pain-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: end; }
.pain-statement { font-family: var(--serif); font-weight: 400; font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.016em; color: var(--ink); text-wrap: balance; }
.pain-statement em { font-style: italic; color: var(--teal-ink); }
.pain-points { display: flex; flex-direction: column; gap: 0; }
.pain-point { padding: 22px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; }
.pain-point:last-child { border-bottom: 1px solid var(--line); }
.pain-point .pp-num { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; letter-spacing: -0.02em; color: var(--ink); line-height: 1; min-width: 0; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.pain-point .pp-num .u { font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0.02em; }
.pain-point .pp-text { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.pain-point .pp-src { color: var(--ink-4); font-family: var(--mono); font-size: 0.7rem; }

/* ============================================================
   CATEGORY TRUTH  (LinkedIn / Indeed / Rovn)
   ============================================================ */
.ownership { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.own-card { padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--paper-0); }
.own-card.is-rovn { background: var(--night); border-color: var(--night-line); color: var(--on-night); position: relative; overflow: hidden; }
.own-card.is-rovn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 100% 0%, rgba(40,198,198,0.14), transparent 60%); pointer-events: none; }
.own-card .own-name { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.01em; margin-bottom: 6px; }
.own-card .own-owns { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; }
.own-card.is-rovn .own-owns { color: var(--teal-bright); }
.own-card .own-desc { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.own-card.is-rovn .own-desc { color: var(--on-night-2); }
@media (max-width: 760px) { .ownership { grid-template-columns: 1fr; } }

/* ============================================================
   TWO-SIDED  (workers / facilities)
   ============================================================ */
.sided { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.side-card { border: 1px solid var(--line); border-radius: var(--r-4); background: var(--paper-0); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.side-card .side-tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); display: flex; align-items: center; gap: 0.6em; margin-bottom: 20px; }
.side-card .side-tag .sq { width: 8px; height: 8px; border-radius: 2px; }
.side-card.workers .side-tag .sq { background: var(--tier-attested); }
.side-card.facilities .side-tag .sq { background: var(--teal); }
.side-card .side-title { font-family: var(--serif); font-size: var(--t-h3); letter-spacing: -0.015em; line-height: 1.04; margin-bottom: 12px; }
.side-card .side-title em { font-style: italic; color: var(--teal-ink); }
.side-card .side-desc { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; margin-bottom: 24px; max-width: 42ch; }
.side-card .side-foot { margin-top: auto; padding-top: 22px; }

/* worker passport mock */
.passport { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--paper); overflow: hidden; margin-bottom: 24px; }
.passport-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.passport-top .pp-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--paper-3), var(--tier-attested)); flex: none; }
.passport-top .pp-id .n { font-weight: 600; font-size: var(--t-sm); }
.passport-top .pp-id .r { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-4); }
.passport-top .pp-owned { margin-left: auto; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-ink); border: 1px solid var(--teal-line); border-radius: var(--r-pill); padding: 0.3em 0.6em; }
.passport-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.passport-row:last-child { border-bottom: 0; }
.passport-row .pr-name { color: var(--ink-2); }
.passport-row .pr-meta { margin-left: auto; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-4); }

/* the six readiness questions */
.readiness { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; margin-bottom: 24px; }
.r-q { background: var(--paper); padding: 14px 16px; }
.r-q .rq-n { font-family: var(--mono); font-size: 0.64rem; color: var(--teal-ink); letter-spacing: 0.06em; }
.r-q .rq-t { font-size: var(--t-sm); color: var(--ink); font-weight: 500; margin-top: 4px; line-height: 1.25; }
@media (max-width: 880px) { .sided { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .readiness { grid-template-columns: 1fr; } }

/* ============================================================
   THE OPERATOR ENGINE
   ============================================================ */
.engine { background: var(--night); color: var(--on-night); border-block: 1px solid var(--night-line); position: relative; overflow: hidden; }
.engine::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; }
.engine .kicker { color: var(--on-night-3); }
.engine .kicker::before { background: var(--on-night-3); }
.engine h2 { color: var(--on-night); }
.engine .lead { color: var(--on-night-2); }

/* spine */
.spine { margin-top: 48px; }
.spine-track { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.spine-node { flex: 1 0 auto; min-width: 116px; position: relative; padding: 0 4px; }
.spine-node .sn-dot { position: relative; height: 28px; display: flex; align-items: center; }
.spine-node .sn-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--night-line); }
.spine-node:first-child .sn-dot::before { left: 50%; }
.spine-node:last-child .sn-dot::before { right: 50%; }
.spine-node .sn-dot i { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--night-2); border: 1px solid var(--on-night-3); margin: 0 auto; z-index: 1; transition: background .4s, border-color .4s, box-shadow .4s; }
.spine-node.lit .sn-dot i { background: var(--teal-bright); border-color: var(--teal-bright); box-shadow: 0 0 0 4px rgba(40,198,198,0.16), 0 0 16px rgba(40,198,198,0.5); }
.spine-node .sn-label { text-align: center; margin-top: 12px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-night-3); transition: color .4s; }
.spine-node.lit .sn-label { color: var(--on-night); }

/* AI workers */
.workers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 56px; }
.worker-card { border: 1px solid var(--night-line); border-radius: var(--r-3); background: rgba(244,238,225,0.02); padding: 20px 18px; transition: border-color .35s, background .35s, transform .35s var(--ease-quint); }
.worker-card:hover { border-color: var(--teal-line); background: rgba(40,198,198,0.05); transform: translateY(-3px); }
.worker-card .wc-idx { font-family: var(--mono); font-size: 0.64rem; color: var(--on-night-3); letter-spacing: 0.08em; }
.worker-card .wc-name { font-family: var(--serif); font-size: 1.18rem; letter-spacing: -0.01em; margin: 8px 0 7px; color: var(--on-night); }
.worker-card .wc-name .b { color: var(--teal-bright); }
.worker-card .wc-desc { font-size: var(--t-xs); color: var(--on-night-2); line-height: 1.5; }
@media (max-width: 940px) { .workers-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .workers-grid { grid-template-columns: 1fr; } }

.doctrine { margin-top: 56px; padding: 28px clamp(24px, 3vw, 40px); border: 1px solid var(--night-line); border-radius: var(--r-3); background: rgba(40,198,198,0.04); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.doctrine .dl { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-bright); white-space: nowrap; }
.doctrine .dt { font-family: var(--serif); font-size: var(--t-h4); line-height: 1.25; color: var(--on-night); letter-spacing: -0.01em; flex: 1; min-width: 280px; }
.doctrine .dt em { font-style: italic; color: var(--teal-bright); }

/* ============================================================
   TRUTH LADDER  (living ledger)
   ============================================================ */
.ladder-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.ladder-steps { display: flex; flex-direction: column; }
.ladder-step { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); position: relative; }
.ladder-step:first-child { padding-top: 0; }
.ladder-step:last-child { border-bottom: 0; }
.ladder-step .ls-rail { display: flex; flex-direction: column; align-items: center; }
.ladder-step .ls-mark { width: 16px; height: 16px; border-radius: 4px; margin-top: 3px; flex: none; }
.ladder-step[data-tier="attested"]  .ls-mark { background: var(--tier-attested); }
.ladder-step[data-tier="processed"] .ls-mark { background: var(--tier-processed); }
.ladder-step[data-tier="verified"]  .ls-mark { background: var(--tier-verified); box-shadow: 0 0 0 4px var(--teal-wash); }
.ladder-step[data-tier="approved"]  .ls-mark { background: var(--tier-approved); }
.ladder-step .ls-head { display: flex; align-items: baseline; gap: 10px; }
.ladder-step .ls-name { font-family: var(--serif); font-size: 1.32rem; letter-spacing: -0.01em; }
.ladder-step .ls-who { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-4); letter-spacing: 0.04em; }
.ladder-step .ls-desc { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; margin-top: 6px; max-width: 40ch; }
.ladder-step .ls-lock { font-family: var(--mono); font-size: 0.66rem; color: var(--teal-ink); margin-top: 8px; display: inline-flex; align-items: center; gap: 0.5em; }

/* receipt card */
.receipt-card { position: sticky; top: calc(var(--header-h) + 24px); background: var(--night); border: 1px solid var(--night-line); border-radius: var(--r-4); color: var(--on-night); box-shadow: var(--shadow-night); overflow: hidden; }
.receipt-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--night-line); }
.receipt-head .rh-title { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-night-3); }
.receipt-head .rh-lock { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--mono); font-size: 0.7rem; color: var(--teal-bright); }
.receipt-head .rh-lock .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 10px var(--teal-bright); }
.receipt-body { padding: 8px 20px 18px; font-family: var(--mono); }
.receipt-line { display: grid; grid-template-columns: 116px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--night-line-soft); font-size: 0.72rem; }
.receipt-line:last-child { border-bottom: 0; }
.receipt-line .rl-k { color: var(--on-night-3); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.62rem; padding-top: 2px; }
.receipt-line .rl-v { color: var(--on-night); word-break: break-all; line-height: 1.5; }
.receipt-line .rl-v .teal { color: var(--teal-bright); }
.receipt-chainline { padding: 14px 20px; border-top: 1px solid var(--night-line); background: rgba(40,198,198,0.05); display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.66rem; color: var(--on-night-2); }
.receipt-chainline .ch { color: var(--teal-bright); }
@media (max-width: 880px) { .ladder-grid { grid-template-columns: 1fr; } .receipt-card { position: relative; top: 0; } }

/* ============================================================
   SOURCES RAIL + COVERAGE
   ============================================================ */
.sources-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; }
.source-rail { margin-top: 44px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.source-track { display: flex; gap: 12px; width: max-content; animation: railscroll 42s linear infinite; }
.source-rail:hover .source-track { animation-play-state: paused; }
@keyframes railscroll { to { transform: translateX(-50%); } }
.source-pill { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.6em 0.95em; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper-0); white-space: nowrap; font-size: var(--t-sm); color: var(--ink-2); }
.source-pill .sp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none; }
.source-pill.roadmap { color: var(--ink-4); border-style: dashed; }
.source-pill.roadmap .sp-dot { background: var(--ink-4); }
.source-pill .sp-tag { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); border-left: 1px solid var(--line); padding-left: 0.6em; }

.coverage { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 60px; }
.coverage-figures { display: flex; flex-direction: column; gap: 26px; }
.cov-fig .cf-num { font-family: var(--mono); font-weight: 500; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem); letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cov-fig .cf-num .z { color: var(--teal-ink); }
.cov-fig .cf-lab { margin-top: 8px; font-size: var(--t-sm); color: var(--ink-3); max-width: 40ch; }

/* coverage matrix mini grid */
.cov-matrix { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--paper-0); padding: 22px; }
.cov-matrix .cm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.cov-matrix .cm-grid { display: grid; grid-template-columns: repeat(var(--cols, 24), 1fr); gap: 3px; }
.cov-cell { aspect-ratio: 1; border-radius: 2px; background: var(--teal); opacity: 0.16; transition: opacity .5s var(--ease-expo), transform .5s var(--ease-expo); }
.cov-cell.on { opacity: 1; }
.cov-matrix .cm-foot { display: flex; gap: 18px; margin-top: 16px; font-size: var(--t-xs); color: var(--ink-3); flex-wrap: wrap; }
.cov-matrix .cm-foot .lg { display: inline-flex; align-items: center; gap: 0.5em; }
.cov-matrix .cm-foot .lg i { width: 10px; height: 10px; border-radius: 2px; background: var(--teal); }
.cov-matrix .cm-foot .lg.faint i { opacity: 0.16; }
@media (max-width: 820px) { .coverage { grid-template-columns: 1fr; } }

/* ============================================================
   WHY NOW  (tailwinds)
   ============================================================ */
.tailwinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.tw-card { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--paper-0); padding: 28px 26px; display: flex; flex-direction: column; }
.tw-card .tw-date { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 0.5em; }
.tw-card .tw-date .d { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.tw-card .tw-name { font-family: var(--serif); font-size: 1.4rem; letter-spacing: -0.01em; line-height: 1.08; margin-bottom: 10px; }
.tw-card .tw-desc { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.55; margin-top: auto; }
@media (max-width: 820px) { .tailwinds { grid-template-columns: 1fr; } }

/* ============================================================
   THE MOAT
   ============================================================ */
.moat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.moat-now { border: 1px solid var(--line); border-radius: var(--r-4); background: var(--paper-0); padding: clamp(26px, 3vw, 40px); }
.moat-now .mn-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 18px; }
.moat-layers { display: flex; flex-direction: column; gap: 10px; }
.moat-layer { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: var(--r-2); background: var(--paper); border: 1px solid var(--line); font-size: var(--t-sm); }
.moat-layer .ml-i { font-family: var(--mono); font-size: 0.64rem; color: var(--teal-ink); width: 24px; }
.moat-layer .ml-t { color: var(--ink-2); }
.moat-layer.top { background: var(--night); color: var(--on-night); border-color: var(--night-line); }
.moat-layer.top .ml-i { color: var(--teal-bright); }
.moat-layer.top .ml-t { color: var(--on-night); font-weight: 500; }
@media (max-width: 820px) { .moat-grid { grid-template-columns: 1fr; } }

/* ============================================================
   END STATE + CTA
   ============================================================ */
.endstate { text-align: center; }
.endstate .es-big { font-family: var(--serif); font-weight: 400; font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.02em; max-width: 20ch; margin: 0 auto 22px; text-wrap: balance; }
.endstate .es-big em { font-style: italic; color: var(--teal-ink); }
.endstate .es-sub { max-width: 50ch; margin: 0 auto; color: var(--ink-3); }

.cta-band { position: relative; z-index: 1; background: var(--night); color: var(--on-night); border-top: 1px solid var(--night-line); overflow: hidden; }
.cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 120% at 50% 0%, rgba(40,198,198,0.16), transparent 60%); }
.cta-inner { position: relative; z-index: 1; text-align: center; }
.cta-inner h2 { color: var(--on-night); margin-bottom: 18px; }
.cta-inner h2 em { font-style: italic; color: var(--teal-bright); }
.cta-inner .cta-sub { color: var(--on-night-2); max-width: 52ch; margin: 0 auto 32px; }
.cta-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin: 0 auto; }
.cta-door { border: 1px solid var(--night-line); border-radius: var(--r-4); padding: 30px 28px; text-align: left; background: rgba(244,238,225,0.02); transition: border-color .35s, background .35s, transform .35s var(--ease-quint); display: flex; flex-direction: column; }
.cta-door:hover { border-color: var(--teal-line); background: rgba(40,198,198,0.06); transform: translateY(-3px); }
.cta-door .cd-tag { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-night-3); margin-bottom: 14px; display: flex; align-items: center; gap: 0.6em; }
.cta-door .cd-tag .sq { width: 8px; height: 8px; border-radius: 2px; }
.cta-door.workers .cd-tag .sq { background: var(--tier-attested); }
.cta-door.facilities .cd-tag .sq { background: var(--teal-bright); }
.cta-door .cd-title { font-family: var(--serif); font-size: var(--t-h4); margin-bottom: 8px; color: var(--on-night); }
.cta-door .cd-desc { font-size: var(--t-sm); color: var(--on-night-2); margin-bottom: 20px; line-height: 1.5; }
.cta-door .cd-go { margin-top: auto; font-weight: 600; font-size: var(--t-sm); color: var(--teal-bright); display: inline-flex; align-items: center; gap: 0.5em; }
.cta-dpp { margin-top: 30px; font-size: var(--t-sm); color: var(--on-night-3); }
.cta-dpp .b { color: var(--on-night); font-weight: 600; }
@media (max-width: 620px) { .cta-split { grid-template-columns: 1fr; } }

/* mobile nav sheet (only exists at/below the mobile breakpoint) */
.mobile-sheet { display: none; position: fixed; inset: 0; z-index: 200; background: var(--paper); transform: translateY(-100%); transition: transform .5s var(--ease-expo); flex-direction: column; padding: 20px var(--gutter); overflow-y: auto; }
@media (max-width: 940px) { .mobile-sheet { display: flex; } }
.mobile-sheet.open { transform: none; }
.mobile-sheet .ms-top { display: flex; align-items: center; height: var(--header-h); }
.mobile-sheet .ms-close { margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--r-2); display: inline-flex; align-items: center; justify-content: center; }
.mobile-sheet nav { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.mobile-sheet nav a { font-family: var(--serif); font-size: 2rem; letter-spacing: -0.02em; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.mobile-sheet .ms-cta { display: flex; gap: 12px; margin-top: 30px; }

/* ============================================================
   SPINE SCROLL-FILL  ·  work moves down the spine as you read
   (pure enhancement: scroll-driven, compositor-only, no JS)
   ============================================================ */
@supports (animation-timeline: view()) {
  .spine-track { position: relative; }
  .spine-track::after {
    content: ""; position: absolute; left: 0; right: 0; top: 13.5px; height: 1px;
    background: linear-gradient(90deg, var(--teal-bright), rgba(40,198,198,0.35));
    box-shadow: 0 0 12px rgba(40,198,198,0.45);
    transform-origin: left; transform: scaleX(0);
    animation: spinefill linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 75%;
    pointer-events: none;
  }
  @keyframes spinefill { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) {
  .spine-track::after { animation: none !important; transform: scaleX(1) !important; }
}

/* ============================================================
   LIVE PRODUCT DEMO  ·  click-gated readiness embed
   ============================================================ */
.demo-frame {
  position: relative; margin-top: 44px; aspect-ratio: 16 / 10;
  border: 1px solid var(--night-line); border-radius: var(--r-4);
  overflow: hidden; background: var(--night); box-shadow: var(--shadow-night);
}
.demo-poster { display: block; width: 100%; height: 100%; padding: 0; position: relative; cursor: pointer; }
.demo-poster img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .6s var(--ease-quint), opacity .4s; }
.demo-poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 110%, rgba(6,46,46,0.25), transparent 60%); transition: opacity .4s; }
.demo-poster:hover img { transform: scale(1.012); }
.dp-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); color: #fff;
  background: var(--teal); border-radius: var(--r-pill); padding: 0.8em 1.3em;
  box-shadow: 0 14px 40px -10px rgba(14,138,138,0.65);
  transition: transform .35s var(--ease-quint), background .25s;
}
.demo-poster:hover .dp-play { transform: translate(-50%, -50%) scale(1.04); background: var(--teal-deep); }
.demo-poster:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.dp-tag {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-night-2); background: rgba(20,17,11,0.72); border: 1px solid var(--night-line);
  border-radius: var(--r-pill); padding: 0.4em 0.8em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.demo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo-foot { margin-top: 16px; font-size: var(--t-sm); }
@media (max-width: 700px) { .demo-frame { aspect-ratio: 4 / 5; } .demo-poster img { object-position: left top; } }


/* demo states: connecting + iframe fade-in + poster-failure skeleton */
.demo-poster.loading img { opacity: 0.25; }
.dp-conn-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: inline-block; animation: hvpulse 1.4s var(--ease-expo) infinite; }
.demo-frame iframe.demo-live { opacity: 0; transition: opacity .45s var(--ease-expo); z-index: 1; }
.demo-frame iframe.demo-live.ready { opacity: 1; }
.demo-poster { z-index: 2; transition: opacity .4s var(--ease-expo); }
.demo-poster.loading { pointer-events: none; }
.demo-frame:has(iframe.ready) .demo-poster { opacity: 0; }
.demo-poster.img-failed { background: var(--paper-2); }
.demo-poster.img-failed img { display: none; }
.demo-poster.img-failed::before { content: ""; position: absolute; inset: 14%; border-radius: var(--r-2);
  background: repeating-linear-gradient(180deg, var(--paper-0) 0 44px, var(--line-soft) 44px 45px); border: 1px solid var(--line); }

/* founder band */
.founder-band { background: var(--night); color: var(--on-night); border-block: 1px solid var(--night-line); }
.fb-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.fb-quote { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.012em; color: var(--on-night); margin: 22px 0 26px; max-width: 30ch; }
.fb-sig { display: flex; flex-direction: column; gap: 4px; }
.fb-name { font-family: var(--serif); font-size: 1.15rem; color: var(--on-night); }
.fb-role { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-night-3); }
.fb-people { display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--night-line); padding-left: clamp(20px, 2.5vw, 36px); }
.fb-p { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--night-line-soft); }
.fb-p:last-of-type { border-bottom: 0; }
.fb-pn { font-weight: 600; font-size: var(--t-sm); color: var(--on-night); }
.fb-pr { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-night-3); }
.fb-more { margin-top: 14px; font-size: var(--t-sm); font-weight: 600; }
@media (max-width: 880px) { .fb-grid { grid-template-columns: 1fr; } .fb-people { border-left: 0; padding-left: 0; border-top: 1px solid var(--night-line); padding-top: 16px; } }

/* why-now citations */
.tw-src { display: inline-block; margin-top: 14px; font-size: 0.62rem; letter-spacing: 0.06em; color: var(--teal-ink); }
.tw-src:hover { text-decoration: underline; text-underline-offset: 3px; }

/* who-you-talk-to strip */
.who-strip { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 26px; font-size: var(--t-sm); color: var(--ink-3); }
.who-strip b { color: var(--ink); }
.who-strip a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 2px; }