/* ============================================================
   ShopRouteBoard homepage — ONE TAKE.

   The cinematic layer, loaded only by the homepage. Everything
   here sits on top of the shared tokens in wow-marketing.css.

   Progressive enhancement is inverted on purpose. Every element
   below is READABLE BY DEFAULT: the concept hid the drive copy,
   the dispatch result and the founder beat behind GSAP, which
   means a blocked script or a slow CDN would have shipped a page
   with invisible content. Here the resting state is the finished
   state, and the `.cine` class — set by inline script only when
   JS runs and the reader accepts motion — is what opts an element
   into starting hidden so it can be animated in.

   So: no JS, no GSAP, or reduced motion all degrade to a complete,
   legible page rather than a broken one.
   ============================================================ */

/* Scoped reset. The base sheet zeroes margins per-class rather than globally,
   so the cinematic sections need their own. :where() holds specificity at zero
   so every explicit margin below still wins. */
.ht-hero :where(h1, h2, h3, p, figure, ul, ol),
.ht-stage :where(h1, h2, h3, p, figure, ul, ol),
.ht-dispatch :where(h1, h2, h3, p, figure, ul, ol),
.ht-drive :where(h1, h2, h3, p, figure, ul, ol),
.ht-founder :where(h1, h2, h3, p, figure, ul, ol),
.ht-demo :where(h1, h2, h3, p, figure, ul, ol),
.ht-beta :where(h1, h2, h3, p, figure, ul, ol) { margin: 0; }

/* ---------- HERO: what / why / what next, above the fold ----------
   The informative first screen. It carries the headline, the value line,
   both CTAs, and a static product preview so a visitor understands the
   product before the cinematic stage below ever plays. */
.ht-hero {
  position: relative; z-index: 6; background: var(--graphite);
  padding: calc(64px + clamp(28px, 6vh, 72px)) clamp(20px, 5vw, 64px) clamp(48px, 8vh, 96px);
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.ht-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 85% 8%, rgba(245, 166, 35, .10), transparent 60%),
              radial-gradient(90% 70% at 8% 90%, rgba(78, 161, 255, .07), transparent 65%);
}
.ht-hero-in {
  position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.ht-hero-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 20px;
}
.ht-hero-h1 {
  font-family: var(--disp); font-weight: 800; letter-spacing: -0.03em; line-height: .95;
  font-size: clamp(44px, 6.6vw, 92px); color: var(--white); margin: 0;
}
.ht-hero-h1 .dim { display: block; color: var(--silver); }
.ht-hero-lead {
  font-size: clamp(16px, 1.55vw, 19.5px); line-height: 1.62; color: var(--bright);
  max-width: 52ch; margin: 26px 0 0;
}
.ht-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ht-hero-btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; padding: 15px 26px; border-radius: 8px;
  border: 1px solid var(--line2); color: var(--white); background: rgba(20, 23, 26, .5);
  min-height: var(--tap); transition: border-color .16s, color .16s, background .16s, transform .12s;
}
.ht-hero-btn svg { width: 17px; height: 17px; stroke: currentColor; }
.ht-hero-btn:hover { border-color: var(--blue); color: var(--blue); }
.ht-hero-btn:active { transform: scale(.985); }
.ht-hero-btn.primary { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.ht-hero-btn.primary:hover { filter: brightness(1.08); color: #fff; border-color: var(--accent-deep); }
.ht-hero-note {
  margin-top: 20px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--silver);
}

/* Static preview board — flat, no motion, distinct from the animated stage. */
.ht-hero-preview {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}
.ht-hp-bar {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--silver);
}
.ht-hp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(41, 196, 106, .16); }
.ht-hp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ht-hp-col {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 9px; display: flex; flex-direction: column; gap: 8px;
}
.ht-hp-h {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
  color: var(--bright); display: flex; justify-content: space-between; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.ht-hp-h em { font-style: normal; color: var(--silver); }
.ht-hp-card {
  background: var(--panel); border: 1px solid var(--line2); border-left: 3px solid #454D56;
  border-radius: 7px; padding: 8px 10px; font-family: var(--mono);
}
.ht-hp-card .pr { display: block; font-size: 8px; letter-spacing: .12em; color: var(--silver); }
.ht-hp-card b { display: block; font-size: 15px; color: var(--white); margin: 2px 0 1px; }
.ht-hp-card .v { display: block; font-size: 9.5px; color: var(--bright); }
.ht-hp-card.pr-urgent { border-left-color: var(--amber); }
.ht-hp-card.pr-urgent .pr { color: var(--amber); }
.ht-hp-card.pr-critical { border-left-color: var(--red); }
.ht-hp-card.pr-critical .pr { color: var(--red); }
.ht-hp-card.done { border-left-color: var(--green); }
.ht-hp-card.done .pr { color: var(--green); }

.ht-hero-scroll {
  position: absolute; left: 50%; bottom: clamp(16px, 3vh, 34px); transform: translateX(-50%);
  z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
  text-decoration: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  color: var(--silver); padding: 8px 12px;
}
.ht-hero-scroll:hover { color: var(--white); }
.ht-hero-scroll svg { width: 20px; height: 20px; stroke: currentColor; }
.cine .ht-hero-scroll svg { animation: ht-bob 1.8s ease-in-out infinite; }
@keyframes ht-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Cinematic REC readout, now inside the stage rather than the global header. */
.ht-stage-rec {
  position: absolute; top: 78px; left: clamp(16px, 4vw, 40px); z-index: 10;
  display: flex; gap: 16px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; color: var(--silver);
}
.ht-stage-rec .mk-rec { display: inline-flex; align-items: center; gap: 7px; color: var(--white); }
.ht-stage-rec .mk-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: mk-blink 1.4s steps(1) infinite; }
.ht-stage-rec .mk-cam { color: var(--faint); }

@media (max-width: 880px) {
  .ht-hero { padding-top: calc(64px + 24px); min-height: auto; }
  .ht-hero-in { grid-template-columns: 1fr; gap: 30px; }
  .ht-hero-preview { order: 2; }
  .ht-hero-scroll { position: static; transform: none; margin: 28px auto 0; }
  .ht-stage-rec { top: 70px; font-size: 10.5px; gap: 10px; }
  .ht-stage-rec .mk-cam { display: none; }
}

/* ---------- stage: the pinned shop day ---------- */
.ht-stage {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 96px 24px 132px;
}
.ht-world { position: absolute; inset: 0; perspective: 1300px; perspective-origin: 50% 42%; }
.ht-camera { position: absolute; inset: 0; transform-style: preserve-3d; }
.cine .ht-camera { will-change: transform; }

.ht-boardscene {
  position: absolute; left: 50%; top: 50%;
  width: min(1240px, 94vw); height: min(560px, 62vh);
  transform: translate(-50%, -46%); transform-style: preserve-3d;
}
.ht-cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; height: 100%; }
.ht-col {
  background: rgba(20, 23, 26, .88); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 8px 8px; display: flex; flex-direction: column; gap: 6px;
  transform: translateZ(var(--z, 0));
  /* A busy column holds more than fits, exactly as it does in the product.
     Clip at the border so the overflow reads as a full column rather than
     cards escaping the box. */
  overflow: hidden;
}
.cine .ht-col { will-change: transform; }
/* A div, not a heading: twelve board columns must not enter the document
   outline and bury the page's real heading structure. */
.ht-colhead {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .18em;
  color: var(--bright); display: flex; justify-content: space-between;
  padding: 0 4px 7px; margin: 0; border-bottom: 1px solid var(--line);
}
.ht-colhead em { font-style: normal; color: var(--silver); }

/* Priority colour is the product's own signal, not decoration. */
.ht-card {
  background: var(--panel2); border: 1px solid var(--line2);
  border-left: 3px solid #454D56; border-radius: 6px; padding: 7px 10px;
  font-family: var(--mono); position: relative; flex: 0 0 auto;
}
.cine .ht-card { will-change: transform, opacity; }
.ht-card .t {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 8.5px; letter-spacing: .14em; color: var(--silver);
}
.ht-card .st { border: 1px solid #333A41; border-radius: 99px; padding: 1px 7px; color: var(--bright); letter-spacing: .08em; }
.ht-card .ro { font-size: 16px; font-weight: 600; color: var(--white); margin-top: 1px; }
.ht-card .veh { font-size: 10px; letter-spacing: .06em; color: var(--bright); }
.ht-card .meta { font-size: 9.5px; color: var(--silver); margin-top: 2px; }
.ht-card.pr-urgent { border-left-color: var(--amber); }
.ht-card.pr-urgent .t { color: var(--amber); }
.ht-card.pr-critical { border-left-color: var(--red); }
.ht-card.pr-critical .t .pr { color: var(--red); }
.ht-card.done { border-left-color: var(--green); }
.ht-card.hero-card { z-index: 6; }
.ht-card .glow { position: absolute; inset: -1px; border-radius: 6px; opacity: 0; pointer-events: none; border: 1px solid transparent; }
.ht-card.pr-critical .glow { border-color: rgba(232, 67, 58, .7); box-shadow: 0 0 0 1px rgba(232, 67, 58, .25); }
.ht-card.lit-green .glow { border-color: rgba(41, 196, 106, .75); box-shadow: 0 0 0 1px rgba(41, 196, 106, .3); }

#htConduit { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
#htConduit path { fill: none; stroke-width: 1.5; opacity: 0; }

/* Hero title. Visible by default; only the cinematic path stages it. */
.ht-herotitle {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  text-align: center; z-index: 8; pointer-events: none; width: min(1100px, 94vw);
}
.ht-herotitle .row {
  display: block; font-family: var(--disp); font-weight: 800;
  font-size: clamp(46px, 8vw, 122px); line-height: .96; letter-spacing: -0.03em;
  color: var(--white); margin: 0;
}
.ht-herotitle .row .dim { color: var(--silver); }
.ht-herotitle .sub {
  display: inline-block; margin-top: 24px; font-family: var(--sans);
  font-size: clamp(14px, 1.4vw, 17px); color: var(--bright); max-width: 56ch;
  background: rgba(6, 8, 10, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 12px 20px; border-radius: 6px;
}
.ht-herotitle .sub b { color: var(--white); font-weight: 600; }
.cine .ht-herotitle .row, .cine .ht-herotitle .sub {
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.cine .ht-herotitle .sub { transform: none; transition-delay: .35s; }
.cine .ht-herotitle.on .row, .cine .ht-herotitle.on .sub { opacity: 1; transform: none; }
.cine .ht-herotitle.on .row:nth-child(2) { transition-delay: .1s; }

/* Overhead + management views are cinematic-only overlays. */
.ht-overhead, .ht-mgmt { display: none; }
.cine .ht-overhead {
  display: block; position: absolute; left: 50%; top: 50%;
  width: min(1000px, 92vw); transform: translate(-50%, -50%);
  visibility: hidden; opacity: 0;
}
.ht-overhead .oh-head {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; color: var(--bright);
  margin-bottom: 18px; display: flex; justify-content: space-between;
}
.ht-lane {
  display: grid; grid-template-columns: 88px 1fr 60px; gap: 16px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line); font-family: var(--mono);
}
.ht-lane .tech { font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.ht-lane .track { height: 10px; border-radius: 2px; background: rgba(154, 160, 166, .12); overflow: hidden; }
.ht-lane .fill {
  display: block; width: 100%; height: 100%; background: var(--silver);
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  transform-origin: left center;
}
.ht-lane.hot .fill { background-color: var(--amber); }
.ht-lane.crit .fill { background-color: var(--red); }
.ht-lane.open .fill { background-color: var(--green); }
.ht-lane .pct { font-size: 12px; color: var(--silver); text-align: right; }
#htOhChip {
  position: absolute; right: 70px; top: 64px; background: var(--panel2);
  border: 1px solid var(--amber); border-radius: 5px; padding: 7px 12px;
  font-family: var(--mono); font-size: 12px; color: var(--white);
}
#htOhChip small { color: var(--amber); letter-spacing: .1em; }

.ht-msg {
  position: absolute; z-index: 9; background: #10161d; border: 1px solid rgba(78,161,255,.55);
  border-radius: 7px; padding: 8px 12px; font-family: var(--mono); font-size: 11px;
  color: var(--white); opacity: 0; max-width: 230px;
}
.ht-msg b { color: var(--blue); letter-spacing: .08em; }
#htMsg1 { left: 14%; top: 18%; }
#htMsg2 { left: 14%; top: 30%; }

.cine .ht-mgmt {
  display: flex; position: absolute; left: 50%; top: 13%; transform: translateX(-50%);
  gap: clamp(24px, 5vw, 64px); visibility: hidden; opacity: 0;
  font-family: var(--mono); text-align: center;
}
.ht-mgmt div b {
  display: block; font-family: var(--disp); font-weight: 800;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1; color: var(--white);
  font-variant-numeric: tabular-nums;
}
.ht-mgmt div span { font-size: 10px; letter-spacing: .2em; color: var(--faint); }
.ht-mgmt .crit b { color: var(--red); }
.ht-mgmt .wait b { color: var(--amber); }

/* Stage furniture: phase readout, sample-data disclosure, scroll hint. */
.ht-phase {
  position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%);
  text-align: center; z-index: 10; transition: opacity .3s;
}
.ht-phase b {
  display: block; font-family: var(--disp); font-weight: 700;
  font-size: clamp(15px, 1.5vw, 20px); letter-spacing: .3em; color: var(--white);
}
.ht-phase span { font-size: 11px; letter-spacing: .16em; color: var(--silver); font-family: var(--mono); }
.ht-hint {
  position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); z-index: 10;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--silver);
  white-space: nowrap; transition: opacity .4s;
}
.ht-sample {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 10;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--faint);
}
.ht-vignette {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0,0,0,.5) 100%);
}

/* ---------- opening ---------- */
#htIntro {
  position: fixed; inset: 0; z-index: 100; background: #050607;
  display: grid; place-items: center; transition: opacity .5s ease; cursor: pointer;
}
#htIntro.done { opacity: 0; pointer-events: none; }
#htIntro .l { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; display: block; text-align: center; }
#htIntro .l.on { opacity: 1; transform: none; }
#htIntro .l1 {
  font-family: var(--disp); font-weight: 700; font-size: clamp(22px, 3vw, 34px);
  letter-spacing: .42em; color: var(--white); padding-left: .42em;
}
#htIntro .l2 { margin-top: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .34em; color: var(--amber); }
#htIntro .skip {
  position: absolute; bottom: 26px; right: 28px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; color: var(--silver); border: 1px solid var(--line2);
  padding: 10px 16px; border-radius: 3px; background: none; cursor: pointer; min-height: var(--tap);
}
#htIntro .skip:hover { color: var(--white); border-color: var(--bright); }

/* ---------- dispatch: WHO GETS IT? ---------- */
.ht-dispatch {
  position: relative; z-index: 6; background: var(--graphite);
  padding: clamp(72px, 14vh, 150px) 24px; display: flex; flex-direction: column; align-items: center;
}
.ht-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .3em; color: var(--amber); margin: 0 0 14px; }
.ht-dispatch h2 {
  font-family: var(--disp); font-weight: 800; font-size: clamp(42px, 6.5vw, 100px);
  line-height: .95; letter-spacing: -0.03em; text-align: center; margin: 0;
}
.ht-dispatch .sub { color: var(--silver); font-size: 16px; margin: 18px 0 54px; text-align: center; max-width: 46ch; }
.ht-yt { display: grid; grid-template-columns: 280px 90px 1fr; align-items: center; width: min(940px, 94vw); }
.ht-yt-ro .ht-card { padding: 14px 16px; border-radius: 8px; }
.ht-yt-ro .ht-card .ro { font-size: 24px; }
.ht-yt-ro .ht-card .veh { font-size: 12px; }
.ht-yt-ro .ht-card .t { font-size: 10px; }
.ht-yt-ro .ht-card .meta { font-size: 11px; }
.ht-yt-arrow { display: flex; justify-content: center; color: var(--faint); }
.ht-yt-arrow svg { width: 44px; height: 44px; stroke: currentColor; }
.ht-techs { display: flex; flex-direction: column; gap: 12px; }
.ht-tech {
  display: grid; grid-template-columns: 86px 1fr 92px; gap: 16px; align-items: center;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 8px;
  padding: 16px 18px; font-family: var(--mono); cursor: pointer; text-align: left;
  color: var(--white); width: 100%; min-height: var(--tap);
  transition: border-color .18s, background .18s, transform .12s;
}
.ht-tech:hover:not(:disabled), .ht-tech:focus-visible { border-color: var(--blue); background: #171C22; }
.ht-tech:active:not(:disabled) { transform: scale(.99); }
.ht-tech:disabled { cursor: default; opacity: .55; }
.ht-tech.chosen { border-color: var(--green); opacity: 1; }
.ht-tech .tid { font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.ht-tech .bar { height: 9px; border-radius: 2px; background: rgba(154,160,166,.12); overflow: hidden; }
.ht-tech .bar i {
  display: block; width: 100%; height: 100%; background: var(--silver); font-style: normal;
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  transform-origin: left center; transition: transform .7s ease;
}
.ht-tech.hot .bar i { background-color: var(--red); }
.ht-tech.mid .bar i { background-color: var(--amber); }
.ht-tech.open .bar i { background-color: var(--green); }
.ht-tech .nums { text-align: right; font-size: 11px; color: var(--silver); line-height: 1.5; }
.ht-tech .nums b { display: block; font-size: 14px; color: var(--white); font-variant-numeric: tabular-nums; }
.ht-yt-result { margin-top: 44px; text-align: center; min-height: 150px; }
.ht-confirm { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: var(--green); margin: 0; min-height: 1.2em; }
.ht-tagline {
  font-family: var(--disp); font-weight: 800; font-size: clamp(28px, 3.6vw, 52px);
  letter-spacing: -0.03em; margin: 14px 0 20px;
}
.ht-next {
  display: inline-block; font-family: var(--mono); font-size: 13.5px; letter-spacing: .14em;
  color: var(--blue); border-bottom: 1px solid rgba(78,161,255,.4); padding-bottom: 3px;
  text-decoration: none; min-height: var(--tap);
}
.ht-next:hover { border-color: var(--blue); }
/* Only the cinematic path stages the result; without it the outcome is simply present. */
.cine .ht-confirm, .cine .ht-tagline, .cine .ht-next { opacity: 0; transform: translateY(10px); }

/* ---------- physical → digital ---------- */
.ht-drive { position: relative; min-height: 100svh; overflow: hidden; z-index: 6; }
.ht-drive .photo {
  position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%;
  filter: saturate(.88) brightness(.94);
}
.cine .ht-drive .photo { transform: scale(1.06); will-change: transform; }
.ht-drive .shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6,8,10,.82) 0%, rgba(6,8,10,.42) 46%, rgba(6,8,10,.12) 100%);
}
.cine .ht-drive .shade { opacity: 0; }
.ht-drive .copy {
  position: absolute; left: clamp(24px, 6vw, 90px); top: 50%; transform: translateY(-50%);
  z-index: 3; max-width: 520px;
}
.cine .ht-drive .copy { opacity: 0; }
.ht-drive .copy h2 {
  font-family: var(--disp); font-weight: 800; font-size: clamp(32px, 4.4vw, 62px);
  line-height: 1.02; letter-spacing: -0.03em; margin: 0;
}
.ht-drive .copy p { margin-top: 18px; color: var(--bright); font-size: clamp(15px, 1.4vw, 17.5px); max-width: 40ch; }
.ht-drive .copy p b { color: var(--white); }
.ht-drive .sum {
  margin-top: 22px; display: inline-flex; gap: 18px; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .14em; color: var(--bright);
  border: 1px solid rgba(154,160,166,.35); border-radius: 6px; padding: 9px 14px;
  background: rgba(9,11,13,.6);
}
.ht-drive .sum b { color: var(--white); }
.ht-drive .sum .dim { color: var(--faint); }
.ht-chip {
  position: absolute; z-index: 2; font-family: var(--mono);
  background: rgba(12,15,18,.82); border: 1px solid var(--line2); border-radius: 6px;
  padding: 8px 12px; font-size: 11.5px; color: var(--white);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.cine .ht-chip { opacity: 0; transform: translateY(10px); }
.ht-chip small { display: block; font-size: 9px; letter-spacing: .16em; color: var(--silver); margin-bottom: 2px; }
.ht-chip.c1 { right: 13%; top: 24%; border-left: 3px solid var(--amber); }
.ht-chip.c2 { right: 36%; top: 60%; border-left: 3px solid var(--blue); }
.ht-chip.c3 { left: 47%; top: 56%; border-left: 3px solid var(--silver); }
.ht-chip.c4 { right: 3%; top: 52%; border-left: 3px solid var(--green); }
.ht-drive .sim-note {
  position: absolute; right: 18px; bottom: 14px; z-index: 3; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .12em; color: rgba(154,160,166,.75);
}
.ht-wipe { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--ivory); z-index: 4; }

/* ---------- light editorial: why this exists ---------- */
.ht-founder {
  position: relative; z-index: 6; background: var(--ivory); color: var(--ink);
  padding: clamp(72px, 15vh, 160px) clamp(24px, 6vw, 90px) clamp(64px, 13vh, 140px);
}
.ht-founder .rule { height: 1px; background: var(--ivory-line); border: none; margin-bottom: 60px; }
.ht-founder .kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: .3em; color: #A46A08; display: block; margin-bottom: 26px; }
.ht-founder h2 {
  font-family: var(--disp); font-weight: 800; font-size: clamp(40px, 6vw, 100px);
  line-height: .98; letter-spacing: -0.03em; max-width: 14ch; margin: 0;
}
.ht-founder h2 em { font-style: normal; color: #A46A08; }
.ht-founder .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 90px); margin-top: 64px; align-items: start; }
.ht-founder .body { font-size: clamp(16.5px, 1.6vw, 20px); line-height: 1.7; color: var(--ink-soft); max-width: 54ch; }
.ht-founder .body b { color: var(--ink); font-weight: 600; }
.ht-founder .body p + p { margin-top: 22px; }
.ht-founder .sig { margin-top: 34px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; color: #6F6A61; text-transform: uppercase; }
.ht-founder figure { position: relative; margin: 0; max-width: 440px; justify-self: end; }
.ht-founder figure::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%;
  background: linear-gradient(transparent, var(--ivory)); border-radius: 0 0 4px 4px; pointer-events: none;
}
.ht-founder figure img {
  width: 100%; height: auto; display: block; border-radius: 4px;
  filter: saturate(.94) brightness(1.03); aspect-ratio: 4/5; object-fit: cover; object-position: 78% 20%;
}
.ht-founder figcaption { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: #6F6A61; text-transform: uppercase; max-width: 44ch; }
.ht-beta-lead { margin-top: 96px; border-top: 1px solid var(--ivory-line); padding-top: 56px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.ht-beta-lead h3 { font-family: var(--disp); font-weight: 700; font-size: clamp(23px, 2.6vw, 36px); letter-spacing: -0.02em; max-width: 22ch; margin: 0; }
.ht-beta-lead p { color: var(--ink-soft); font-size: 16px; max-width: 52ch; margin-top: 10px; }
.mk-btn-ink {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 600;
  font-size: 13px; letter-spacing: .14em; padding: 16px 28px; background: var(--ink); color: var(--ivory);
  border: 1px solid var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap;
  min-height: var(--tap); transition: background .18s, color .18s;
}
.mk-btn-ink:hover { background: transparent; color: var(--ink); }

/* ---------- return to dark: run it yourself ---------- */
.ht-demo {
  position: relative; z-index: 6; background: var(--graphite); min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(72px, 15vh, 150px) 24px clamp(64px, 12vh, 120px); text-align: center; overflow: hidden;
}
.ht-demo::before {
  content: ""; position: absolute; inset: -20% 0 auto; height: 50%;
  background: radial-gradient(60% 80% at 50% 0%, rgba(78,161,255,.07), transparent 70%);
}
.ht-mini {
  width: min(760px, 92vw); border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); padding: 12px; margin-bottom: 56px; position: relative;
}
.ht-mini .ht-cols { grid-template-columns: repeat(3, 1fr); height: auto; }
.ht-mini .ht-col { background: var(--panel2); }
.ht-cursor {
  position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--blue);
  left: 30%; top: 44%; animation: ht-probe 3.2s ease-in-out infinite; pointer-events: none;
}
@keyframes ht-probe {
  0%, 100% { transform: translate(0, 0); opacity: .9; }
  40% { transform: translate(240px, 40px); opacity: .9; }
  55% { transform: translate(240px, 40px) scale(.7); opacity: 1; }
  70% { transform: translate(240px, 40px); opacity: .9; }
}
.ht-demo h2 {
  font-family: var(--disp); font-weight: 800; font-size: clamp(32px, 5.2vw, 76px);
  line-height: .98; letter-spacing: -0.03em; margin: 0;
}
.ht-demo h2 .quiet { display: block; font-size: .42em; color: var(--faint); letter-spacing: .04em; margin-bottom: 10px; }
.ht-nosignup { margin-top: 26px; font-family: var(--mono); font-size: clamp(13px, 1.3vw, 16px); font-weight: 600; letter-spacing: .26em; color: var(--green); }
.ht-console {
  margin-top: 40px; display: flex; flex-direction: column; align-items: center;
  border: 1px solid var(--line2); border-radius: 10px;
  background: linear-gradient(180deg, #14181C, #101418); padding: 26px 34px;
  min-width: min(430px, 90vw); text-decoration: none;
}
.ht-console .statusrow {
  display: flex; align-items: center; gap: 22px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; color: var(--silver); padding-bottom: 18px;
  border-bottom: 1px solid var(--line); width: 100%; justify-content: center;
}
.ht-console .statusrow .on { color: var(--green); display: inline-flex; align-items: center; gap: 7px; }
.ht-console .statusrow .on i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: mk-blink 2s steps(1) infinite; font-style: normal; }
.ht-start {
  margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: .2em;
  padding: 20px 44px; width: 100%; background: var(--white); color: #0C0E10;
  border: 1px solid rgba(41,196,106,.55); box-shadow: 0 0 0 1px rgba(41,196,106,.18);
  border-radius: 6px; transition: box-shadow .2s, background .18s, transform .12s;
}
.ht-console:hover .ht-start { box-shadow: 0 0 0 2px rgba(41,196,106,.35); background: #fff; }
.ht-console:active .ht-start { transform: scale(.985); }
.ht-start svg { width: 18px; height: 18px; stroke: #0C0E10; flex: 0 0 auto; }
.ht-facts { margin-top: 24px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; color: var(--silver); }
.ht-alt { margin-top: 14px; font-size: 13.5px; color: var(--silver); }
.ht-alt a { color: var(--blue); }

/* ---------- final beta invitation ---------- */
.ht-beta {
  position: relative; z-index: 6; background: #0A0C0E; border-top: 1px solid var(--line);
  padding: clamp(72px, 15vh, 150px) 24px; text-align: center;
}
.ht-beta h2 {
  font-family: var(--disp); font-weight: 800; font-size: clamp(29px, 4.4vw, 64px);
  line-height: 1; letter-spacing: -0.03em; max-width: 18ch; margin: 0 auto;
}
.ht-beta h2 .quiet { color: var(--faint); }
.ht-beta p { color: var(--silver); font-size: 16.5px; max-width: 52ch; margin: 26px auto 38px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  /* Mobile is a deliberate vertical story, not the desktop scene squeezed
     onto a phone. The stage stops being an absolutely-positioned cinematic
     frame and becomes ordinary flow: the board cannot then overflow its own
     height or collide with the readout underneath it. */
  .ht-stage { display: block; min-height: 0; overflow: visible; padding: 96px 20px 64px; }
  .ht-world { position: static; perspective: none; }
  /* In flow, DOM order would put the board above the headline. The board is
     absolutely positioned first for the desktop scene, so reorder here
     rather than reshuffling markup the desktop timeline depends on. */
  .ht-camera {
    position: static; transform: none; transform-style: flat;
    display: flex; flex-direction: column;
  }
  .ht-herotitle { order: 1; }
  .ht-boardscene { order: 2; }
  .ht-vignette, #htConduit, .ht-msg { display: none; }

  .ht-herotitle {
    position: static; transform: none; width: auto; text-align: left; pointer-events: auto;
  }
  .ht-herotitle .row { font-size: clamp(38px, 12vw, 62px); }
  .ht-herotitle .sub {
    font-size: 14px; margin-top: 18px; max-width: none; background: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0;
  }

  .ht-boardscene {
    position: static; transform: none; transform-style: flat;
    width: auto; height: auto; margin-top: 36px;
  }
  .ht-cols { grid-template-columns: repeat(2, 1fr); height: auto; }
  .ht-col { transform: none; }
  .ht-col:nth-child(n+3) { display: none; }
  /* Show three cards per column. The header is the column's first child, so
     the cards are children 2..n — nth-of-type would count it as a div and
     drop one card too many. */
  .ht-col > :nth-child(n+5) { display: none; }

  .ht-phase, .ht-hint { display: none; }
  .ht-sample {
    position: static; transform: none; display: block;
    margin-top: 20px; text-align: center;
  }

  .ht-yt { grid-template-columns: 1fr; gap: 22px; width: 94vw; }
  .ht-yt-arrow { transform: rotate(90deg); }
  .ht-dispatch { padding: 72px 20px; }
  .ht-drive .photo { object-position: 62% center; }
  .ht-drive .shade { background: linear-gradient(0deg, rgba(6,8,10,.9) 22%, rgba(6,8,10,.45) 62%, rgba(6,8,10,.2) 100%); }
  .ht-drive .copy { left: 20px; right: 20px; max-width: none; top: auto; bottom: 12%; transform: none; }
  .ht-chip.c1 { right: 6%; top: 20%; }
  .ht-chip.c2 { left: 8%; top: 34%; right: auto; }
  .ht-chip.c3, .ht-chip.c4 { display: none; }
  .ht-founder { padding: 72px 22px; }
  .ht-founder .split, .ht-beta-lead { grid-template-columns: 1fr; }
  .ht-founder figure { justify-self: start; }
  .ht-mini .ht-cols { grid-template-columns: repeat(2, 1fr); }
  .ht-mini .ht-col:nth-child(3) { display: none; }
  .ht-console { padding: 22px 20px; }
  .ht-start { padding: 18px 20px; font-size: 13px; letter-spacing: .14em; }
}

@media (prefers-reduced-motion: reduce) {
  #htIntro { display: none; }
  .ht-cursor { display: none; }
  .ht-hint { display: none; }
  /* Reduced motion never runs the cinematic path, so nothing may start hidden. */
  .cine .ht-herotitle .row, .cine .ht-herotitle .sub,
  .cine .ht-confirm, .cine .ht-tagline, .cine .ht-next,
  .cine .ht-chip, .cine .ht-drive .copy, .cine .ht-drive .shade { opacity: 1; transform: none; }
  .cine .ht-drive .photo { transform: none; }
}