/* ============================================================
   Netra — The Intelligence Loop (standalone)
   Full-screen isometric loop map + floating tech-cards on the map
   ============================================================ */
* {
  box-sizing: border-box;
}
/* Stara — getnetra.ai heading typeface (self-hosted to match brand).
   Only the two weights actually used are declared; medium/extrabold/black were dead requests. */
@font-face {
  font-family: Stara;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/stara-semibold.woff2") format("woff2");
}
@font-face {
  font-family: Stara;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/stara-bold.woff2") format("woff2");
}
:root {
  --footer-lift: 0px;
  color-scheme: dark;
  /* palette matched to getnetra.ai */
  --bg: #070708;
  --ink: #f5f5f5;
  --dim: #a3a3a3;
  /* --faint was #6b7280 = 4.11:1 on --bg, below the 4.5:1 AA floor. #949494 = 6.6:1, and neutral
     grey rather than blue-grey — the old --dim/--faint pair gave all secondary text a cool cast. */
  --faint: #949494;
  --line: rgba(255, 255, 255, 0.1);
  --line2: rgba(255, 255, 255, 0.16);
  /* --blue/--blue-mid/--blue-deep, --steel and the --irid shimmer gradient were all declared and
     never referenced — the art set went amber-only. Dropped rather than left as decoy tokens. */
  --amber: #e89d25;
  /* the "map" amber, previously hardcoded as #FFB946 in html, css and js */
  --gold: #ffb946;
  /* THE TWO PHASES. Amber belongs to the ROUTE — the connectors, the comet, the lit trail, the stage
     accents: the things the reader is walking. The phase enclosures are a different kind of object (where
     you are, not where you are going), and painting them amber too made the floor one undifferentiated
     colour in which the lanes competed with the path for the same meaning.
     Cool against the warm route, and split so the two halves of the lifecycle are told apart at a glance:
     PRE-PRODUCTION is a blueprint blue — drafting, rehearsal, nothing real at stake yet;
     PRODUCTION is a live green — it is happening to real users, which is what the section's own closing
     sentence says. Both measured against the page ground (#070708): 7.96:1 and 8.80:1, so they carry the
     34px floor labels and the 12px mono chips at AA either way.
     Colour is never the only channel — the lanes are labelled on the floor, the chips are worded, and the
     rehearsal/live pair also differs by outline-vs-fill — so none of this depends on hue discrimination. */
  --phase-pre: #7fa6d9;
  --phase-prod: #4fc08d;
  /* ---- SECTION RHYTHM ----
     One heading size and one body size for every SECTION-level block, so the page reads as one document
     rather than a run of separately-designed screens. The premise section and the closing summary now
     share the stage card's .tc-heading / .tc-title / .tc-desc scale so those three copy moments match.
     The hero keeps its own display size deliberately. It is the title card and is meant to be the largest
     thing on the page; --fs-h2 remains available for any remaining display peers.
     Both are clamps on the same vw basis, so the step between display and section holds at every width
     instead of only at 1440. */
  --fs-h2: clamp(28px, 3.2vw, 44px);
  --fs-lead: clamp(16px, 1.25vw, 19px);
  /* THE SWEEP. One legibility wash, used in the two places copy sits beside the map: V2's stage column and
     the closing summary. Declared here because both must be the same object — two hand-written ramps drift,
     and the reader crosses from one to the other in a single scroll.
     THREE ALPHA POINTS: opaque, .5, 0. The previous version hand-wrote a thirteen-stop ease-out, and the
     ease is what read as artificial. An eased ramp spends most of its length near-opaque and then dumps the
     last third of its alpha in the last quarter of its width — so the wash holds flat, collapses, and stops.
     That fast tail is a slope change of its own, in the one place the eye is already looking for the scrim's
     edge, and no amount of extra stops removes it: they only make the curve it traces smoother, not straighter.
     A straight alpha ramp has ONE slope from end to end. The .5 stop sits at the exact midpoint of the fade,
     which is where linear interpolation would put it anyway — it is written out so the intent is legible and
     so the midpoint cannot drift if the width changes. Every stop is the same colour, so this is a pure
     alpha ramp and the interpolation space is irrelevant. */
  /* 90deg, straight left-to-right: it agrees with the layout — copy left, map right — where the previous
     104deg cut a boundary across an isometric scene whose own lines sit near 30°, giving the eye a third
     angle to find.
     The stops span the FULL element. `10% - 200px` is negative below ~2000px of viewport, so on ordinary
     screens it clamps to 0 and the ramp simply begins at the left edge; past that width a solid shoulder
     grows. `50% - 100px` puts the half-alpha point near the middle of the screen, so the ramp tracks the
     viewport instead of a fixed box.
     This is a long, shallow ramp by design: it never presents a corner to notice, and that is bought by
     extending across the artwork at low alpha rather than clearing it. Measured at 1440×813 the copy runs
     x 86–666 and the plinths x 344–1097, so the fade's tail does cross them — a deliberate trade of a
     slightly veiled map for a fade with no visible edge anywhere. */
  /* FADE THE MAP, DO NOT PLATE OVER IT.
     This was a near-black gradient (rgba(7,7,8,α)) laid over the artwork, and it banded — visibly, at full
     brightness. The cause is 8-bit PREMULTIPLIED ALPHA: rgba(7,7,8,.5) premultiplies to 3.5, stores as 3,
     and unpremultiplies back to ~6 — so a scrim whose colour is supposed to MATCH the page background
     (#070708 = 7,7,8) instead drifts a level below it, by an amount that changes with alpha. Measured on a
     flat background column: bare page a constant 7.000, with the plate 7.000 / 7.249 / 6.500 — three
     quantisation levels and eight bands wider than 25px across the frame. No stop list can fix that; the
     error is in how the compositor stores the colour, not in the ramp.
     Masking the map has no such failure mode. Where the map is empty the mask acts on nothing, so the
     background stays exactly the page colour; where the map is drawn, its own pixels fade toward that
     colour. Same visual intent, one code path, and measured flat: ONE level across the whole width, one
     band. It also cannot lift the artwork's blacks, which the plate did.
     Expressed as the inverse of the old sweep — transparent where the scrim used to be opaque — so the
     geometry of the fade is unchanged. */
  --map-fade: linear-gradient(
    90deg,
    transparent 0,
    transparent calc(10% - 200px),
    rgba(0, 0, 0, 0.5) calc(50% - 100px),
    #000 100%
  );
  /* NO DITHER LAYER. One was added here (feTurbulence at 3.5%, mix-blend-mode:overlay) on the theory that a
     near-black alpha ramp needs noise to break 8-bit banding. Measured against a no-scrim baseline, it was
     the artifact rather than the cure: `overlay` is asymmetric on a near-black base, so instead of
     dithering symmetrically it LIFTED 11.3% of the frame by a level — a large-area, low-amplitude veil,
     invisible at normal brightness and obvious at full. Removing it took the lifted area to 0.0% with the
     frame's strongest luminance gradient unchanged (2.550/px, which belongs to the artwork, not the scrim).
     The banding it was meant to fix does not occur: --sweep's colour IS the page background, so over flat
     background the ramp composites to no change at all — there is no long visible ramp to band. */
  --sg: "Stara", "Plus Jakarta Sans", system-ui, sans-serif;
  --mono: "Fira Mono", ui-monospace, monospace;
  --sans: "Plus Jakarta Sans", system-ui, sans-serif;
  /* type floor: 11px decorative HUD, 12px functional label, 14px small body, 16px body */
  --fs-hud: 11px;
  --fs-label: 12px;
  --fs-small: 14px;
  --fs-body: 16px;
  /* THE PAGE GUTTER. One value, because more than one thing has to sit on this column: the nav's brand
     mark defines where the page's left edge is, and V2's copy has to start on the same line (it was on
     its own clamp() and landed ~100px left of the logo at 1440). Anything else that wants to align with
     the logo reads this instead of guessing. env() insets are added at the point of use — this is the
     design gutter, not the safe area. */
  --page-gutter: clamp(16px, 10.4vw, 150px);
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}
body {
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* first-paint fade (guarded so no-JS still shows content; also timed out in the head script) */
body {
  transition: opacity 0.6s ease;
}
.preload body {
  opacity: 0;
}

/* screen-reader-only content */
.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;
}

/* Server-rendered stage copy for crawlers / no-JS. Hidden from the interactive layout so it does not
   fight the scroll-driven card, but kept in the initial HTML with real H2s. */
.seo-stages {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.seo-stages article {
  margin: 0 0 40px;
}
.seo-stages h2 {
  font-family: var(--sg);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink);
}
.seo-stages__sub {
  font-family: var(--sg);
  font-weight: 600;
  font-size: 18px;
  color: var(--gold);
  margin: 0 0 12px;
}
.seo-stages p {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: #d4d4d4;
  margin: 0 0 12px;
}
html:not(.no-js) .seo-stages {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* keyboard skip link — first tab stop */
.skip-link {
  position: fixed;
  left: 14px;
  top: -60px;
  z-index: 1100;
  font-family: var(--mono);
  font-size: var(--fs-label);
  color: #080808;
  background: var(--gold);
  padding: 11px 16px;
  border-radius: 6px;
  transition: top 0.18s ease;
}
.skip-link:focus-visible {
  top: 14px;
}

/* film grain — sells "shot on hardware", kills the flat-vibe look.
   No mix-blend-mode: a blended full-viewport layer forces the whole page to recomposite on every
   camera frame, which is the single most expensive thing on this page on low-end hardware. */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: calc(0px - var(--footer-lift));
  height: 100vh;
  height: 100dvh;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- blueprint HUD frame ---------- */
.hud-frame {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(0px - var(--footer-lift));
  height: 100vh;
  height: 100dvh;
  z-index: 3;
  pointer-events: none;
}
.hud-frame .corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line2);
}
.hud-frame .tl {
  top: 14px;
  left: 14px;
  border-right: 0;
  border-bottom: 0;
}
.hud-frame .tr {
  top: 14px;
  right: 14px;
  border-left: 0;
  border-bottom: 0;
}
/* .bl/.br and .frame-tag rules removed with the bottom HUD row (see loop.html). */

@keyframes flowdash {
  to {
    stroke-dashoffset: -600;
  }
}

/* ---------- site nav ---------- */
/* The page's own HUD (title, immersive/standard switch, cube/art switch) is gone; this is the
   product's navigation, so it behaves like a site header: opaque, fixed, full width. */
/* 78px tall, translucent over the page with a backdrop blur — the bar reads as glass over the artwork
   rather than as an opaque strip. The 150px design gutter is expressed as a clamp so it collapses on the
   way down to phone widths, and env() adds a notch inset on top of it (see viewport-fit=cover in
   loop.html); calc() with env() degrades to the plain clamp() anywhere env() is unsupported. */
/* height, not min-height: 78px flat, border included (box-sizing:border-box is global). The CTA is the
   tallest child at 48px, so this is 15 + 48 + 15 with the 1px rule inside the box. */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  height: 78px;
  gap: clamp(16px, 2.4vw, 40px);
  padding: 15px calc(var(--page-gutter) + env(safe-area-inset-right)) 15px
    calc(var(--page-gutter) + env(safe-area-inset-left));
  background: rgba(7, 7, 8, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
}
/* No backdrop-filter support → the bar must not become a transparent smear over the map, so the
   translucent fill is replaced with a near-solid one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav {
    background: rgba(7, 7, 8, 0.94);
  }
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 3.2px;
  flex: none;
}
.nav-brand img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}
/* Gold wordmark, top-to-bottom per the design (#E89D25 → #996F2A). -webkit-background-clip is the widely
   supported spelling; the colour underneath is the fallback for anything that ignores it, so the brand is
   never invisible. Stara stands in for Volte, which is not one of the two faces this page self-hosts. */
.nav-word {
  font-family: var(--sg);
  font-weight: 600;
  font-size: 27px;
  letter-spacing: 0.05em;
  color: var(--amber);
  background: linear-gradient(180deg, #e89d25 0%, #996f2a 147%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-main {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
  margin-left: clamp(12px, 2.8vw, 40px);
}
/* min-height 40, not 44: the bar is 78px (15 + 48 + 15) and the 48px CTA is what sets that height, so a
   44px link would add 3px of its own. The links still clear the 24px touch target minimum by sitting inside
   a 78px bar with 15px of padding either side. */
.nav-main a,
.nav-right a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  font-size: 16px;
  line-height: 1.5;
  color: #dfdfdf;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.nav-main a:hover,
.nav-right a:hover {
  color: #fff;
}
/* .nav-chev is gone with the chevrons themselves — they promised a submenu that did not exist and then
   navigated away to the site root. See the note in loop.html. */

/* ---- collapsed navigation (below 1180px) ----
   The burger is hidden on wide screens, where the links are in the bar. */
.nav-burger {
  display: none;
  appearance: none;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background-color var(--t-fast) ease,
    border-color var(--t-fast) ease;
}
.nav-burger:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
}
.nb-bars {
  display: block;
  width: 18px;
  height: 12px;
  position: relative;
}
.nb-bars i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: #ededed;
  transition:
    transform var(--t-mid) var(--e-out),
    opacity var(--t-fast) ease;
}
.nb-bars i:nth-child(1) {
  top: 0;
}
.nb-bars i:nth-child(2) {
  top: 5.25px;
}
.nb-bars i:nth-child(3) {
  top: 10.5px;
}
/* open → an X, so the button reports its own state visually as well as through aria-expanded */
.nav-burger[aria-expanded="true"] .nb-bars i:nth-child(1) {
  transform: translateY(5.25px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] .nb-bars i:nth-child(2) {
  opacity: 0;
}
.nav-burger[aria-expanded="true"] .nb-bars i:nth-child(3) {
  transform: translateY(-5.25px) rotate(-45deg);
}

/* The panel itself. Fixed under the bar, full width, and above everything the page draws (.vtoggle is 42,
   .card-layer 8) so nothing can paint through the open menu. */
.nav-panel {
  position: fixed;
  top: 78px;
  left: 0;
  right: 0;
  z-index: 44;
  padding: 10px calc(var(--page-gutter) + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom)) calc(var(--page-gutter) + env(safe-area-inset-left));
  background: rgba(9, 9, 10, 0.97);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  max-height: calc(100dvh - 78px);
  overflow-y: auto;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-panel {
    background: #090a0a;
  }
}
/* [hidden] needs restating: `display:flex` on the element would otherwise beat the UA's [hidden] rule and
   the panel would ship open. */
.nav-panel[hidden] {
  display: none;
}
.nav-panel nav {
  display: flex;
  flex-direction: column;
}
.nav-panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 2px 2px;
  font-size: 17px;
  color: #dfdfdf;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color var(--t-fast) ease;
}
.nav-panel a:hover {
  color: #fff;
}
.nav-panel a[aria-current="page"] {
  color: #fff;
}
.nav-panel a[aria-current="page"]::after {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  margin-left: 10px;
}
.np-account {
  display: flex;
  gap: 22px;
  padding-top: 14px;
}
.np-account a {
  border-bottom: 0;
  min-height: 44px;
  font-size: 15px;
  color: var(--faint);
}
.np-account a:hover {
  color: #fff;
}
/* current tab. This page IS the "Why" tab, so it marks itself rather than looking clickable-away */
.nav-main a.on {
  color: #fff;
  position: relative;
}
.nav-main a.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
  margin-left: auto;
}
.nav-contact {
  color: #fefefe !important;
}
/* Book a Demo — the one filled control in the bar */
.nav-demo {
  height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  color: #fff !important;
  font-size: 16px;
  background: radial-gradient(
    340% 620% at 2% -59%,
    rgba(0, 0, 0, 0) 0%,
    #e79e27 88%,
    rgba(140, 104, 47, 0.4) 100%
  );
  border: 1px solid rgba(255, 185, 70, 0.28);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition:
    filter 0.22s ease,
    transform 0.22s ease;
}
.nav-demo:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
/* Below ~1180 the six section links plus three account items cannot share a 1440-wide bar. The section
   links are the ones with duplicates elsewhere on the site, so they collapse first and the page keeps its
   own tab plus the CTA — the same reasoning as the old max-width:1000px rule, applied at the width the
   full set actually stops fitting rather than at a guess. */
/* 1179.98, not 1180: the stage card turns its feature list to two columns at `min-width:1180px`, so an
   inclusive bound here fired both on the same pixel — the nav collapsing exactly as the card widened its
   list, which is one pixel earlier than this rule's own "below ~1180" intent. */
@media (max-width: 1179.98px) {
  .nav-main a:not(.on) {
    display: none;
  }
  .nav-right .nav-contact,
  .nav-right a:not(.nav-demo):not(.nav-contact) {
    display: none;
  }
  /* …and the burger takes over for all of them. Everything hidden above is in #navPanel. */
  .nav-burger {
    display: inline-flex;
  }
}
/* Above the breakpoint the panel can never be open — but a reader who opens it at 900px and then widens the
   window would otherwise be left with a panel hanging under a bar that already shows every link. loop.js
   also closes it on the crossing; this makes the CSS side impossible to strand. */
@media (min-width: 1180px) {
  .nav-panel {
    display: none;
  }
}
/* The old `@media (max-width:1000px){ .nav-main{ display:none } }` existed because five section
   links plus a CTA did not fit. One short tab does, at every width — and hiding it would have hidden
   the page's only nav item, so the rule is gone. */
@media (max-width: 600px) {
  .nav-word {
    font-size: 22px;
  }
  .nav-demo {
    padding: 10px 16px;
  }
}
/* …but it does NOT fit at 320. Measured, the bar's scrollWidth was 351 against a 320 client width, so
   ~31px of "Book a Demo" was cut off — and unreachable, because body{overflow-x:hidden} propagates to the
   viewport. That is a real 320px device and, more commonly, 400% zoom on a 1280px display (WCAG 1.4.10).
   Shrinking the CTA below 380px closes it without hiding the page's one nav item or wrapping the bar. */
@media (max-width: 380px) {
  :root {
    --page-gutter: 12px;
  }
  .site-nav {
    gap: 12px;
  }
  .nav-word {
    font-size: 19px;
  }
  .nav-brand img {
    width: 26px;
    height: 26px;
  }
  .nav-main a,
  .nav-right a {
    font-size: 14px;
  }
  .nav-demo {
    padding: 9px 12px;
  }
}

/* ---------- sticky stage ---------- */
.loop-wrap {
  position: relative;
}
.stage-fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(0px - var(--footer-lift));
  height: 100vh;
  height: 100dvh;
  z-index: 1;
}

/* THE MAP FADES ITSELF where copy sits over it — see --map-fade for why this is a mask rather than a plate.
   Applied at exactly the two moments copy shares the frame with the loop: a V2 stage column, and the closing
   summary. Both are mutually exclusive (no stage is active at the outro), so they never compound.
   On .stage-fixed, which is NOT the 3D root — .camera below it establishes its own 3D rendering context, so
   the grouping this mask forces does not flatten the scene. Verified: with the mask applied, the map beyond
   the fade renders within one level of the unmasked frame.
   No transition: mask-image is not interpolable. Both callers reveal their copy with a ~0.5s fade of their
   own and the outro additionally pans the camera, so the mask's switch lands inside motion that is already
   happening. If it ever reads as a pop, the fix is to slide mask-position rather than to animate the image. */
html.outro-up .stage-fixed,
html[data-v="2"]:has(.tcard.show) .stage-fixed {
  -webkit-mask-image: var(--map-fade);
  mask-image: var(--map-fade);
}
/* Below 1023 V2 is a bottom band, so the fade has to come from below rather than from the left. */
@media (max-width: 1023px) {
  html[data-v="2"]:has(.tcard.show) .stage-fixed {
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0,
      #000 30%,
      rgba(0, 0, 0, 0.5) 58%,
      transparent 88%
    );
    mask-image: linear-gradient(180deg, #000 0, #000 30%, rgba(0, 0, 0, 0.5) 58%, transparent 88%);
  }
}
/* …and below 1120 the closing copy uses its own boxed scrim (further down), so the map keeps its full frame. */
@media (max-width: 1120px) {
  html.outro-up .stage-fixed {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* overflow:clip (not hidden) so focusing an off-screen gem button can never scroll the stage box */
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow: clip;
  background-color: var(--bg);
}
/* Same banner mesh as home / pricing / get-offer. Lives on ::before so its opacity can fade on
   scroll without touching the solid stage fill. --mesh-op is written by loop.js. */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/img/banner-mesh.svg") no-repeat center top / 1440px 100%;
  opacity: var(--mesh-op, 1);
}
/* width/height come from loop.js (FRAME_W × FRAME_H, derived from the node layout). The old
   hardcoded 1400×1150 was sized for a ring that no longer exists and was 130px shorter than the
   real composition. The fallbacks here only matter for the instant before loop.js runs. */
.camera {
  position: absolute;
  left: 0;
  top: 0;
  width: 1108px;
  height: 1280px;
  transform-origin: 0 0;
  will-change: transform;
}
.gem-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.world {
  position: absolute;
  left: 700px;
  top: 560px;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(45deg);
}
/* 2688 = 96 × 28, and NOT a round 2800. The element is centred on the world origin by
   translate(-50%,-50%), so its background tiles from -width/2 — at 2800 that put the lattice on
   world -1400 + 96k, i.e. 40 units off every multiple of the cell. Half of 2688 is 1344 = 96 × 14,
   so the lines land exactly on world multiples of 96 and the route (authored in whole cells in
   loop.js) sits ON them instead of running through the middle of each cell. */
/* ---------- the floor, EXTENDED TO THE HORIZON ----------
   5376 = 96 × 56, half of it 2688 = 96 × 28. Same arithmetic the old 2688 existed for (see above): the box
   is centred on the world origin by translate(-50%,-50%), so a half-width that is a whole multiple of the
   cell is what lands the lines on world multiples of 96 and keeps the route sitting ON them.
   WHY IT GREW. This plane used to stop, masked out, at 2150 world units — a disc just big enough to be the
   stage the walkthrough is composed against. Everything above it (the hero, the premise copy) therefore
   stood on nothing, and a flat CSS lattice was painted behind those sections to stand in for a floor. That
   stand-in could not work: it did not pan, zoom or shear with the camera, so the reader met a static grid
   in the opener and a moving one under the map, and no amount of angle-matching joins two objects that
   behave differently. Doubling the plane makes the real floor reach the top of the page, so there is one
   ground the whole way down and it is the same one.
   ONE ELEMENT, not a second "far" plane beside it. A sibling would have to be masked into an annulus to
   avoid drawing the same lines twice over the centre disc (a visibly brighter core with a hard edge), and
   to have room for that annulus it would need to be ~8064px — 65M pixels of raster, 9× this one. The mask
   below does the same job with none of that: one gradient, so the falloff is continuous by construction.
   THE MASK IS THE DISTANCE. Radius is given in px, not %, so it is anchored to world units rather than to
   the element's size — the bright core still ends at exactly 1183 units (44% of 2688) where it always did,
   and everything the enlargement added is the long, fainter tail out to the horizon. The stage reads as
   the brightest patch of floor and the rest falls away from it, which is what makes it a horizon rather
   than a bigger disc. */
.grid {
  position: absolute;
  left: 0;
  top: 0;
  width: 5376px;
  height: 5376px;
  transform: translate(-50%, -50%);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(
    2688px 2688px at 50% 50%,
    #000 44%,
    rgba(0, 0, 0, 0.5) 72%,
    transparent 100%
  );
  mask-image: radial-gradient(
    2688px 2688px at 50% 50%,
    #000 44%,
    rgba(0, 0, 0, 0.5) 72%,
    transparent 100%
  );
}
/* NO translateZ. It used to be lifted 33px — half the height of the cube markers, so the edges met
   those cubes at their side-face centre instead of at the floor. Those cubes were replaced by the
   plinth artwork, which stands ON the plane, and the lift became pure error: raising the route out of
   the floor plane slides its whole projection along the isometric up-vector, so the connection ran
   parallel to the grid lines a few pixels off instead of crossing them. At 0 the route is in the same
   plane as .grid and the two intersect exactly.
   width/height/viewBox are set from the geometry in loop.js — the path is authored in world
   coordinates, so its extent is not a constant the stylesheet can know. */
.route {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  overflow: visible;
}
/* Path segments. Unlit is a faint dashed guide: the route ahead is visible, so the reader can see
   there is more to come, but only the part already walked carries light.
   .lit = reached by scrolling (persistent). .hot = hover/focus flare (transient). */
/* Dash period 20 (5 on, 15 off), up from 9 (2 on, 7 off). A step is 4 cells = 384 world units, so the old
   pattern drew ~43 marks per connector and six connectors put ~260 of them on the floor — dense enough to
   read as texture rather than as a route, and competing with the lane outlines for the same visual job.
   ~19 per connector now. 20 also divides flowdash's -600 dashoffset exactly (30 periods), so the lit
   connector's travel no longer jumps at the animation's loop point; at 9 it was 66.67 periods. */
.route .seg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.4;
  stroke-dasharray: 5 15;
  transition:
    stroke 0.5s ease,
    stroke-width 0.5s ease,
    filter 0.5s ease;
}
/* GREY, not amber — the comet is what carries colour now (red→green, see cometColOf in loop.js), and an
   amber path underneath it read as loud enough to bury the comet's own hue. Walked/lit and hovered/hot
   stay two brightnesses of the same neutral so the path reads as infrastructure, not a second signal. */
.route .seg.lit {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.8;
  stroke-opacity: 0.9;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
  animation: flowdash 26s linear infinite;
}
.route .seg.hot {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2;
  stroke-opacity: 1;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}
/* scroll-driven comet on the current edge — gradient tail + glowing head, colour set inline (morphs src→dst) */
.route .trail {
  fill: none;
  stroke-width: 3.4;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.route .trail-head {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.route.scrolling .trail:not(.extra),
.route.scrolling .trail-head:not(.extra) {
  opacity: 1;
}
/* loop circulates without a scroll — 1 comet in overview, extras added at the outro */
.route.looping .trail:not(.extra),
.route.looping .trail-head:not(.extra) {
  opacity: 1;
}
.route.multi .trail.extra,
.route.multi .trail-head.extra {
  opacity: 1;
}
/* outro only: the whole walked path reads brighter, since it is the summary of the journey */
.route.multi .seg.lit {
  stroke-width: 2.1;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
}
/* ---- the two phase lanes, their floor labels, and the loop that closes ----
   Geometry is in loop.js (laneRect / buildRoute). Each lane is a world-space RECTANGLE around one phase's
   nodes, so the isometric transform turns it into a parallelogram whose edges run along the floor grid —
   the enclosure lies on the ground rather than boxing the map in screen space. The gutter between the two
   lanes is the boundary; there is no separate divider line, and the straight one that used to be here is
   gone (it read as a seventh connector that had failed to light).
   THE SAME 5/15 DASH AS .seg, deliberately. This used to be a long 30/24 stroke on the argument that a
   lane must not be mistakable for a route something travels — but at the lanes' scale (a ~3456-unit
   perimeter each) long strokes read as a heavy ruled border and became the loudest thing on the floor,
   which is the opposite of what an enclosure should do. Matching the connectors' fine dash makes the two
   one drawing language; what separates them now is weight and colour, not rhythm: the lane is 1.1px at
   .13 alpha white, a connector 1.4px, and only a connector ever lights amber and carries the comet. */
/* --phase-c is set per lane below and is what every colour in this block reads, so a lane and its floor
   label cannot drift apart. Dormant the lane is its own hue at low alpha rather than plain white: the
   enclosure carries its phase identity from the moment it appears, and becoming "now" brightens the same
   colour instead of introducing one. */
.route .lane {
  fill: none;
  stroke: color-mix(in srgb, var(--phase-c) 22%, transparent);
  stroke-width: 1.1;
  stroke-dasharray: 5 15;
  stroke-linecap: butt;
  opacity: 0;
  transition:
    opacity 0.7s ease,
    stroke 0.6s ease,
    stroke-width 0.6s ease;
}
.route .lane.pre,
.route .lane-t.pre {
  --phase-c: var(--phase-pre);
}
.route .lane.prod,
.route .lane-t.prod {
  --phase-c: var(--phase-prod);
}
/* present once the phase's first plinth stands; full phase colour and heavier while its stages are read */
.route .lane.on {
  opacity: 1;
}
.route .lane.on.now {
  stroke: color-mix(in srgb, var(--phase-c) 70%, transparent);
  stroke-width: 1.5;
}

/* The labels are SVG <text> inside the same world-space SVG, so they are sheared onto the floor plane and
   read as markings on the ground. Sized in world units — the whole SVG is scaled by the camera, so this is
   ~0.8 × the camera scale on screen (the projection foreshortens both axes to 0.8), i.e. ~19px at the
   overview and ~24px zoomed into a stage. */
.route .lane-t {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 34px;
  letter-spacing: 5px;
  fill: rgba(255, 255, 255, 0.3);
  opacity: 0;
  paint-order: stroke;
  stroke: rgba(6, 6, 7, 0.85);
  stroke-width: 5px;
  stroke-linejoin: round;
  transition:
    opacity 0.7s ease,
    fill 0.6s ease;
}
.route .lane-t.on {
  opacity: 1;
}
.route .lane-t.on.now {
  fill: color-mix(in srgb, var(--phase-c) 92%, transparent);
}
/* ---- the return leg: Agent Insights → the agent (.lb) ----
   Geometry is in loop.js (LOOP_CELLS / buildRoute): a lattice-aligned staircase around the LEFT flank of
   the composition, half a cell outside both lane enclosures.
   IT IS NOT DRAWN UNTIL .route.looped, which loop.js sets once the last stage stands. Before that there
   are no insights to feed back, and an arrow pointing at a stage the reader has not met yet explains
   nothing — it would just be the longest stroke on an unfinished floor, which is exactly what got the
   previous version of this connection removed. It appears as the reward for finishing the walk.
   Same 5/15 dash and the same flowdash travel as .seg, deliberately: the return leg is a connector like
   the other six and belongs to their drawing language, not to a third one. What separates it is only that
   it does not light per-segment — it arrives whole.
   It DOES carry the comet. This block used to say it never did, which stopped being true the moment the
   circuit was re-expressed as one arc-length rail: RAIL is the six connectors, this leg and the agent's
   feed, so a comet runs the whole closed loop at one speed.
   There is no arrowhead — see buildRoute for why one cannot be seen at this terminus. Direction is
   carried by the dash travel: the path is authored node 6 → node 0 and flowdash counts the offset DOWN,
   so the dashes run toward Prompt Management. */
/* GREY too, same reason as .seg above — the return leg carries the comet same as any connector, and an
   amber leg fought the red→green comet exactly where the loop closing is the whole point of the frame. */
.route .lb {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.4;
  stroke-dasharray: 5 15;
  stroke-opacity: 0;
  transition:
    stroke-opacity 0.8s ease,
    stroke-width 0.5s ease,
    filter 0.5s ease;
}
.route .feed {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-dasharray: 5 15;
  stroke-opacity: 0.8;
}
.route.looped .lb {
  stroke-opacity: 0.72;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
  animation: flowdash 26s linear infinite;
}
/* outro only: the summary frame, where the loop closing is the point being made */
.route.multi .lb {
  stroke-opacity: 0.95;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}
.scatter {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

/* gems — real <button>s so the map markers are keyboard-operable, not mouse-only */
.gem {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 5;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  appearance: none;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
/* While a node's opacity is being SCRUBBED from the scroll (the approaching plinth brightening with its
   own build — see applyNodeVis), the transition above has to stand down: a per-frame write restarts the
   600ms ease every frame, so the rendered value chases the target and never reaches it. Measured with
   it live, the whole assembly played at under 12% opacity and then faded in after scrolling stopped.
   The 0.6s ease still owns the discrete 1 ↔ 0.14 ↔ 0 steps it was written for. */
.gem.ramping {
  transition: none;
}
/* the hit area: .gem itself is a 0×0 anchor, so the tappable box is a centred pseudo-element
   sitting over the artwork. Needed because every visual child is pointer-events:none.
   +91px, not +34: the art is now anchored by its BASE PLATE rather than by its bottom edge (see
   --art-dy below), which put the plinth ~57px lower on the screen. The hit box moved with it — at
   +34 the bottom half of the box was bare floor and the base plate stuck out below it. */
.gem::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 91px);
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
}
.gem:focus-visible {
  outline: none;
}
/* Counter-scaled, because everything in here lives inside .camera, which loop.js scales to fit: at 390px
   the camera runs at 0.431, so a flat 2px ring rendered at 0.86px — under WCAG 2.4.13's 2px minimum. The
   render loop publishes its scale as --cam-scale (see tick), and the fallback of 1 keeps this sane for the
   frames before the first write. */
.gem:focus-visible::before {
  outline: calc(2px / var(--cam-scale, 1)) solid var(--gold);
  outline-offset: calc(2px / var(--cam-scale, 1));
}
/* ---- per-stage label: step badge + name, BELOW the plinth it names ----
   The drop from the gem anchor to the label. The art is anchored by the CENTRE of its base plate,
   which sits on the node's ground point (GEM_DY = 103.8px below this anchor); the base plate's own
   bottom corner reaches ~65px past that, so 200px clears the plinth by ~30px. The base plate is the
   same 198.6 user units tall in all seven scenes, so this one offset holds for all of them — which
   is exactly what anchoring on the base buys and what anchoring on the bottom EDGE did not (the
   scenes differ in how much empty canvas sits below their art: 050 carries ~34 units more than 043).
   No pill any more: the panel behind the old label competed with the plinths for attention, and under
   the plinth the label sits on bare floor, so a text-shadow is enough to hold it off the grid lines. */
.gem .glabel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  transform: translate(-50%, 200px);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
/* the step number, in a filled amber chip */
.gem .gl-n {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 16px;
  margin-top: 0;
  border-radius: 3px;
  background: var(--gold);
  color: #0a0a0c;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* The name, one word per line. loop.js emits a <br> between words instead of relying on a max-width,
   so no wrap width is set here — see the comment there for why a width cannot do this job. */
.gem .gl-t {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f0f0f0;
  text-align: left;
  line-height: 1.3;
  text-shadow:
    0 1px 5px rgba(0, 0, 0, 0.95),
    0 0 12px rgba(0, 0, 0, 0.8);
}
/* focus: hide every label except the focused stage's */
.focusing .gem .glabel {
  opacity: 0;
}
.focusing .gem.on .glabel {
  opacity: 1;
}
/* outro: the copy is the subject. Drop the seven node labels (they collided with the headline) and
   let the loop read as a single object rather than an annotated diagram. */
.stage.outro .gem .glabel {
  opacity: 0;
}
/* unreached stages: not yet revealed by scrolling. loop.js zeroes the opacity and disables the
   button; this kills the hover/contact-shadow decoration that would otherwise still paint. */
.gem.unreached {
  pointer-events: none;
}
.gem.unreached::before,
.gem.unreached::after {
  opacity: 0;
}

/* ---- the plinth billboard: one SVG per stage, inlined and assembled by loop.js ---- */
/* ANCHORED ON THE BASE PLATE, not on the host's bottom edge.
   Every scene draws an isometric base plate (#g-base, a consistent 198.6 × 120.8 user units in all
   seven files) and that plate IS the object's footprint on the floor. The node it belongs to is a
   grid intersection, so the plate's CENTRE has to land exactly there — then the plate covers the
   2 × 2 block of cells around the intersection (271.6 × 143.9 camera px, against the plate's
   213.4 × 129.9) and the six connectors, which stop 76 world units short of each node, meet its rim.
   Anchoring by the host's bottom edge instead — the old `-100% + --gimg-dy` — put the plate's centre
   50–93px ABOVE the intersection, differently per scene, because the offset then depended on how much
   empty canvas each export happens to carry below its art. The plinths floated off their own nodes
   and the connectors ran out into bare floor short of them.
   --art-dx / --art-dy / --art-ox are written per marker by anchorArt() in loop.js, measured from the
   file's own #g-base box, so nothing here has to know any scene's dimensions:
     --art-dx  host's left edge relative to the gem anchor  = -(base centre x)
     --art-dy  host's top  edge relative to the gem anchor  = GEM_DY - (base centre y)
     --art-ox  transform-origin x, ON the base centre, so the mirror below flips the art about the
               plate rather than about the host box (they differ by ~2px in 048)
   The fallbacks are the ORIGINAL bottom-edge anchor, which is what the static <img> in the markup
   still needs: it is the fallback for a failed fetch, and there is no svg to measure in it. */
/* --gimg-dy is written onto .stage by loop.js as GEM_DY + the art's baked shadow padding, and now
   feeds the fallback path only. It is deliberately NOT re-declared here: a local declaration would
   shadow the inherited value. */
/* --gimg-lift is the hover/focus rise, folded into this same transform (see the micro-interaction
   layer near the end of the file) — a second transform rule there would have replaced this one and
   dropped the art off its ground anchor. */
/* .gem-img is the <img> the marker ships with AND the <div class="gem-scene"> shadow host that
   replaces it once the animated scene is inlined, so one rule sizes and places both. It has to be
   the host: outer CSS cannot reach past a shadow boundary to the svg inside. */
/* will-change + a 3D term in the transform keep this on its own composited layer for the whole session.
   Without it, a large scroll jump could leave an icon with the correct computed state (opacity 1, right
   position) and no actual paint — invisible until some later scroll nudged the compositor into redrawing
   it. Promoting the layer up front removes the class of bug rather than chasing repaints after the fact;
   the JS side also flushes on each state change (see applyNodeVis). */
/* ---- the agent ----
   Mirrors .gem's BOX — a 0×0 anchor on the node, with the art hung off it by --art-dx/--art-dy — and
   none of its behaviour. Not a button, no hit area, no focus ring, no label, no opacity transition: the
   opacity is scroll-driven every frame by syncAgent(), and a 0.6s ease on a per-frame write is the bug
   .gem.ramping exists to work around (see there). Starts at 0 because the beat has not run yet.
   z-index 4, under the stations' 5: where the two art boxes come close, the line's own stations win. */
.agent {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
/* ---- the rover ----
   Both cuts live in the host and one of them is shown, so a direction change costs a class toggle and
   never a decode. They stack on the same anchor rather than laying out, exactly as .gem-img already
   does — the host is a 0x0 point and both children are absolutely positioned off it. */
/* ---- separation from the floor ----
   The rover is a dark grey machine at ~84 rendered px on a near-black floor, and unlike every plinth it
   carries no lit panel of its own — the stations all have an amber glyph standing over them and it has a
   pair of eyes. At a stage's camera scale it was reading as a smudge on the lattice.
   A drop-shadow at zero offset is a silhouette glow, so this traces the machine's own outline rather than
   lighting one side of it: warm, because every other light on this floor is, and at .17 because the job is
   to make the edge findable, not to make the rover glow. On the ART, not the host — the host owns the warp
   animation's filter, and two filters on one element means the animation's `filter:none` frames would
   switch this off mid-flight. */
.17 at 7px was the first try and it read as a SELECTION RING: a continuous amber outline all the way
   round the silhouette, which is the language of "this object is selected", not of light. .07 at 4px keeps
   the edge findable at the outro's small scale and disappears as a ring at the stage scale, where the art
   is large enough to separate on its own. */
   .07 at 4px, not the .17 at 7px this started as — that read as a SELECTION RING, a continuous amber
   outline all the way round the silhouette, which is the language of "this object is selected" rather than
   of light. */
.rover .gem-img{ filter:drop-shadow(0 0 4px rgba(255,186,74,.07)); }
/* Both cuts live in the DOM and one of them is shown, so a heading change costs a class toggle and never
   a decode — swapping a single element's src would decode mid-turn, a blank frame at exactly the moment
   the reader is watching the rover change direction. The two mirrored headings are .art-flip on top of
   these, not files of their own. */
.rover .rover-back {
  display: none;
}
.rover.show-back .rover-front {
  display: none;
}
.rover.show-back .rover-back {
  display: block;
}
/* ---- and a THIRD cut where the mirrored heading cannot be a transform ----
   Only the agent-plinth version has one: its nameplate reads "AI", and .art-flip would render it "IA",
   so its mirrored FRONT heading is a pre-mirrored file with the lettering held readable (see
   ROVER_ART_FRONT_FLIP in loop.js and tools/make-mirror-cut.js). The rover has no lettering and no third
   <img>, so every rule here is inert for it.
   `.show-front-flip` never coincides with `.show-back` — the flip file is a FRONT cut — but the back rule
   is written anyway so that the two states cannot both paint if a future heading table gets that wrong. */
.rover .rover-front-flip {
  display: none;
}
.rover.show-front-flip .rover-front {
  display: none;
}
.rover.show-front-flip:not(.show-back) .rover-front-flip {
  display: block;
}
.rover.show-back .rover-front-flip {
  display: none;
}

/* The agent→rover cut, mounted inline and scrubbed by the scroll (see the morph note in loop.js).
   It is the SAME drawing as the rover cut at the same scale, so it needs no anchor of its own — the
   file simply carries 12px of margin on every side, so the host is that much wider and sits that much
   further up and left, which puts its content exactly where the img's is. Both numbers are the export's,
   not tuning: 603 is the rover art's width and 12 is the padding tools/svg-animate/morph.py adds. */
/* `.agent .gem-img` sets the width too and sits further down this file, so this needs the extra
   class to win on specificity rather than on order — matched on order it silently lost, and the
   morph rendered 3.8% small against the cut it hands off to. */
.agent .gem-img.rover-morph {
  width: calc(var(--art-w, 130px) * 627 / 603);
  margin-left: calc(var(--art-w, 130px) * -12 / 603);
  margin-top: calc(var(--art-w, 130px) * -12 / 603);
}
.rover.morphing .rover-front,
.rover.morphing .rover-back,
.rover.morphing .rover-front-flip {
  display: none;
}
.rover:not(.morphing) .rover-morph {
  display: none;
}
/* THE IDLE BOB IS GONE. It was 3px over 2.4s on the docked rover, and on a floor where nothing else moves
   it read as the rover hovering rather than as it being alive — the opposite of the intent. A machine parked
   on its wheels is still.

   ---- ground contact ----
   And this is what actually anchors it. Every other object on this floor has a contact shadow: .gem::after
   puts a 250x70 ellipse under each plinth's base. The rover had none, so it was the one thing on the map
   with nothing between it and the floor, which is most of why it read as floating.
   Sized from its own footprint rather than copied from the plinths': --sh-w and --sh-h are written by
   loop.js from the art's measured wheelbase and the rendered art width, so the shadow stays under the
   wheels if either changes. Positioned exactly as the plinths' is — GEM_DY below the host's top, which is
   the ground point the art is anchored to. */
/* ---- and it has to be a shadow you can SEE ----
   The first version of this was one 50%-black ellipse, and on a floor that is already #070708 a black
   ellipse is invisible: there is no darker to go. It only ever registered where it happened to cross a
   lattice line, which is why the rover still read as floating with a shadow already under it.

   SO THE SHADOW IS NOT ONLY DARK. A shadow is read from the CONTRAST at its edge, and on this floor the
   dark half of that contrast has nowhere to go, so the light half has to supply it:
     · The POOL is a faint warm-grey wash the size of the footprint and a half — light, not dark, at about
       5% white. It is the floor catching the ambient the machine is standing in, and it is the thing that
       actually registers: a barely-lit patch of ground with a dark centre reads as contact where a black
       ellipse on black reads as nothing at all.
     · The CORE is small and nearly opaque, sat under the wheels. Its job is to OCCLUDE rather than to
       darken — at .92 it wipes out both the lattice lines and the inner edge of the pool, and a hole in the
       grid is a shadow the eye accepts even where the tone barely moves.
   The order matters: pool first, core painted over it, so the dark sits INSIDE the light rather than
   beside it. A 1px blur loses the seam where the two meet at every camera scale.

   Wider and flatter than the footprint (1.5x / 1.15x) because a contact shadow is not the object's outline:
   the wheels touch at four points and what is under them is one soft mass, spread by the ambient.

   The plinths need none of this — their art carries a base slab drawn in contact with the floor. The rover
   is the one object on the map that has to be planted by the page. */
AND 12px BELOW GEM_DY,
which is where the plinths put theirs. GEM_DY is the ground point the ART is anchored to,
and
  the
  rover's anchor was measured off the contact shadow baked into its own export — so
   the anchor sits a little above where the wheels actually meet the floor. Centred on GEM_DY the whole
   ellipse hid behind the chassis; 12px down puts its lower half on open floor, which is the half a reader
   can see. */
.rover::after{ content:""; position:absolute; left:50%; top:calc(50% + 115.8px);
  width:calc(var(--sh-w,112px) * 1.5); height:calc(var(--sh-h,38px) * 1.15);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse 30% 38% at 50% 50%, rgba(0,0,0,.95) 0, rgba(0,0,0,.62) 58%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(216,208,198,.085) 0, rgba(216,208,198,.042) 48%, transparent 78%);
  filter:blur(1px);
  pointer-events:none; z-index:3; }

/* ---- the teleport ----
   When the reader flings the page, walking is the wrong answer and the rover jumps instead (see the note on
   TELEPORT_CELLS in loop.js). This is what the jump looks like.

   ON THE HOST, so the contact shadow goes with it. Both the art and the ::after shadow are children, so one
   transform and one opacity take the whole object — a rover that faded while its shadow stayed put would
   read as the shadow being a hole in the floor.

   OUT IS QUICK AND DOWN, IN IS SLOWER AND SETTLES. 190ms of shrinking slightly and lifting reads as the
   object being cancelled; 300ms of arriving from slightly too large, on a decelerating curve, reads as it
   landing. Equal times in both directions read as a crossfade, which is a slideshow transition rather than a
   thing moving.
   The amber drop-shadow is the only colour in it, and it peaks in the middle of each half rather than at the
   ends: it should look like the machine's
  own
  light
  flaring,
not
  like
  a
  glow
  being
  switched
  on
  and
  off.
  Scale
  is
  small
  on
  purpose
  —
  0.86
  out
  and
  1.10
  in.
  This
  fires
  when
  the
  reader
  has
  just
  thrown
  the
  page
  around,
so
  it
  needs
  to
  register
  in
  peripheral
  vision
  without
  becoming
  the
  second
  thing
  they
  have
  to
  process.
  */
  @keyframes
  rover-warp-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
  55% {
    opacity: 0.42;
    transform: translateY(-5px) scale(0.94);
    filter: drop-shadow(0 0 9px rgba(255, 186, 74, 0.5)) brightness(1.15);
  }
  100% {
    opacity: 0;
    transform: translateY(-9px) scale(0.86);
    filter: drop-shadow(0 0 4px rgba(255, 186, 74, 0.25));
  }
}
@keyframes rover-warp-in {
  0% {
    opacity: 0;
    transform: translateY(-7px) scale(1.1);
    filter: drop-shadow(0 0 10px rgba(255, 186, 74, 0.45)) brightness(1.12);
  }
  45% {
    opacity: 1;
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 0 6px rgba(255, 186, 74, 0.28));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}
/* `forwards` on the way out so the rover HOLDS at opacity 0 until the class swaps. Without it the animation
   fill reverts on its final frame and the rover snaps back to full opacity at its old cell for one frame,
   which is a flicker exactly where the effect is meant to hide the change. */
.rover.warp-out {
  animation: rover-warp-out 190ms ease-in forwards;
}
.rover.warp-in {
  animation: rover-warp-in 300ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
/* The animations override syncAgent's per-frame inline opacity for their duration, which is what makes the
   fade possible at all — a CSS animation outranks an inline style. When they end, the inline value is back
   in charge and the rover is already at its docked opacity. */
@media (prefers-reduced-motion: reduce) {
  .rover.warp-out,
  .rover.warp-in {
    animation: none;
  }
}
.gem .gem-img,
.agent .gem-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--art-w, 215px);
  height: auto;
  transform: translate(
      var(--art-dx, -50%),
      calc(var(--art-dy, -100% + var(--gimg-dy, 112px)) - var(--gimg-lift, 0px))
    )
    translateZ(0);
  transform-origin: var(--art-ox, 50%) 50%;
  pointer-events: none;
  z-index: 4;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* ---- plinth build-in ----
   Nothing to declare here any more. The assembly used to be this page's own: loop.js reconstructed
   groups from the flat export, tagged each with a --bo build order, and the .building/.built classes
   below ran them in on a stagger. The art is now the *.animated.svg cut, which carries its own 9s
   master loop, and art-anim.js hands that loop to the scroll position — build on the way down,
   strike on the way back up. The timing lives in the SVG; see tools/svg-animate/README.md. */
/* Nodes right of the path's centre line are mirrored so their screens face back in toward the
   middle of the page instead of off the edge of the map. scaleX is applied AFTER the translate and
   about --art-ox (the base plate's centre), so it mirrors the art about its own footprint and the
   plate does not move off the node.
   Which nodes get this is set in loop.js (MIRROR_ART). */
/* The rover shares this rule, which needed no new maths — only the selector widening to match .agent.
   transform-origin is already --art-ox, the footprint centre, so scaleX(-1) mirrors the rover about its
   own contact point and it pivots in place instead of hopping sideways off the lattice. */
.gem.art-flip .gem-img,
.agent.art-flip .gem-img {
  transform: translate(
      var(--art-dx, -50%),
      calc(var(--art-dy, -100% + var(--gimg-dy, 112px)) - var(--gimg-lift, 0px))
    )
    scaleX(-1);
}
/* ground contact-shadow, centred on the node's ground point — i.e. under the base plate's centre,
   spilling a little past its rim, which is where a contact shadow belongs now that the plate sits ON
   the intersection rather than 57px above it. */
.gem::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 103.8px);
  width: 250px;
  height: 70px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 74%);
  pointer-events: none;
  z-index: 3;
}

/* ---------- floating tech-card ---------- */
/* FIXED, not absolute. The layer now lives inside <main> (see loop.html for why — heading and focus
   order), and <main> is the ~9-screen scroll driver, so `position:absolute; inset:0` would have stretched
   it over the whole document and put .card-dock's top:50% at the middle of the PAGE instead of the
   viewport. Fixed restores exactly the box it had inside .stage-fixed, independent of its parent. */
.card-layer {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(0px - var(--footer-lift));
  height: 100vh;
  height: 100dvh;
  z-index: 8;
  pointer-events: none;
}
/* Stable dock — the card lives here at a fixed spot and the camera brings the active node to it.
   loop.js used to overwrite left/top every frame, which moved the card to 7 different positions
   ~470px apart and slid it ~500px on each stage change. It no longer touches these.
   The +16px offsets the fixed header so the panel is optically centred in the visible canvas. */
.card-dock {
  position: absolute;
  right: clamp(40px, 6vw, 132px);
  top: 50%;
  transform: translateY(calc(-50% + 16px));
  /* 780px, up from 420 → 560: the card carries the Netra Overview copy verbatim (six to ten
     full-sentence bullets per stage), and the goal is to read it without scrolling inside the card.
     Width alone does not get there — measured at 560/640/700/760/820 the tallest stage (Evaluation,
     ten bullets) only came down 1221px → 1027px, against ~772px of usable height on a 1440×900 window.
     What actually pays for it is the two-column feature list below plus the viewport-scaled
     illustration well; the extra width is what makes two columns readable. Capped rather than fluid
     because every pixel here is taken from the map. dockBandX() in loop.js mirrors this number when it
     works out where the focused node should sit beside the card. */
  width: min(780px, 88vw);
  pointer-events: none;
  z-index: 8;
}
.tcard {
  position: relative;
  width: 100%;
  pointer-events: auto;
  /* no backdrop-filter: the dock's left/top are rewritten every frame while a node is focused,
     which would force a full backdrop readback per frame for ~1px of visible blur at .97 alpha */
  background: rgba(14, 14, 14, 0.97);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 0 0 20px;
  overflow: hidden;
  box-shadow:
    0 40px 90px -34px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  /* Asymmetric on purpose, and the split is what makes it asymmetric: the base rule is the state the
     card transitions TO when .show is removed, so its duration is the EXIT one, and .show carries the
     entry. The exit used to inherit the entry's .5s, and at the end of the walkthrough the outro copy
     starts arriving on the same left column in the same frame the card is told to leave — so half a
     second of stage copy was still painted over the closing headline. 160ms clears the column before
     the copy is legible. */
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition:
    opacity 0.16s ease-in,
    transform 0.16s ease-in;
}
.tcard.show {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The card can be taller than a short window; scroll inside rather than clipping the CTA off.
   NO overscroll-behavior here, deliberately. This page's ONLY navigation is the page scroll, and on
   a ~700px-tall window the card (~600px) exceeds max-height and becomes scrollable — so `contain`
   trapped the wheel over the largest target on screen and froze the walkthrough at the card's last
   line. Default `auto` chains to the page instead. The mobile sheet still sets `contain` (see the
   ≤820px block): there the sheet is an overlay, not the page's navigation. */
.tcard {
  max-height: calc(100vh - 128px);
  max-height: calc(100dvh - 128px);
  overflow-y: auto;
}
/* illustration = prominent hero preview; stage tint pools at the BOTTOM of the well, under the art */
/* 236px: the earlier 180px well cropped the interface art down to a size where its node labels
   ("Prompt Injection", "Agent Secure") were unreadable, which is the whole point of the preview.
   The card's own max-height cap still governs, so on a short window this scrolls rather than
   pushing the CTA off-screen. */
/* 24px side padding: at max-width:100% the art ran edge to edge against the well's border, so the
   screenshot's own rounded corners collided with the card's. */
/* Height is now viewport-relative: the well was a flat 236px, i.e. 30% of the usable card height on a
   900px-tall window, spent on a preview while the copy underneath it was forced into a scroller. 20vh
   keeps it generous on a tall screen and gets out of the way on a short one, and the clamp stops it
   collapsing to a sliver or dominating a 1440-tall display. */
.tc-illus {
  position: relative;
  height: clamp(132px, 20vh, 236px);
  padding: 16px 24px 24px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 0%,
    color-mix(in srgb, color-mix(in srgb, var(--cc) 67%, #000) 20%, transparent) 100%
  );
  border-bottom: 1px solid var(--line);
}
/* max-width 100%: at 68% the art was letterboxed inside an already-short well and lost ~a third of
   its available width for no reason — contain + max-height keeps the aspect ratio either way. */
.tc-illus img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* the spec stacks five drop-shadows; each is a separate blur pass over the image, so they are
     collapsed to the two that actually read at this size */
  filter: drop-shadow(6px 5px 14px rgba(0, 0, 0, 0.34))
    drop-shadow(30px 24px 30px rgba(0, 0, 0, 0.18));
}
.tc-body {
  padding: 0 22px;
}
.tc-top {
  display: none;
}
.tc-num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  color: var(--cc);
}
.tc-tag {
  color: var(--ink);
}
/* Which half of the lifecycle this stage belongs to. Pushed to the far end of the counter row (auto
   margin) so it reads as a status on the card rather than as a third item in the "01 / 07 — TAG"
   sequence, and set at 10px against the row's 12px because it is the least important thing on it.
   PRE-PRODUCTION is an outline chip — a rehearsal; PRODUCTION is filled — it is live. The outline/fill
   distinction is kept even though the two phases now have their own colours (see --phase-pre/--phase-prod),
   because it is the channel that survives when hue does not: greyscale printing, a colour-blind reader, or
   the chip at 10px against the card's own tint. Colour and weight say the same thing twice. */
.tc-phase {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 4px 7px;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--phase-pre) 45%, transparent);
  color: var(--phase-pre);
  background: transparent;
}
.tc-phase.prod {
  border-color: transparent;
  background: var(--phase-prod);
  color: #07120d;
}
.tc-heading {
  font-family: var(--sg);
  font-weight: 600;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.2;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.tc-title {
  font-family: var(--sg);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  color: var(--gold);
}
.tc-desc {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: #d4d4d4;
  margin: 0 0 12px;
  text-align: justify;
}
.tc-desc:last-of-type {
  margin-bottom: 16px;
}
.tc-feat {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.tc-feat li {
  position: relative;
  padding: 10px 0 10px 18px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: #d9d9d9;
  border-bottom: 1px solid var(--line);
  /* exit timing is declared once, on the .tc-feat li rule in the micro-interaction block below (it is
     later in the file, so it owns this shorthand) */
  opacity: 0;
  transform: translateX(-6px);
}
/* stagger driven by --fi, written per-<li> by fillCard. Was four hardcoded :nth-child rules, so a
   fifth feature on any stage would have popped in with no delay at all. Duration and delay both live
   on .show, so they apply to the ENTRY only — the rows leave together on the base rule's 140ms rather
   than replaying the stagger backwards over ~0.9s on top of the next section. */
.tcard.show .tc-feat li {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    color var(--t-fast) ease;
  transition-delay: calc(0.12s + var(--fi, 0) * 0.07s);
}
/* ONE OWNER PER PROPERTY. When GSAP drives the card in (loop.js adds .gsap-in), it tweens opacity and
   transform on these same rows with its own stagger — so both systems were writing the same two properties
   on the same elements at once, from different start times, on every stage change. GSAP wins whichever frame
   it writes, which is what made the entry read as rows snapping rather than staggering, and left the copy
   in inconsistent states mid-transition. The CSS entry is the FALLBACK (no GSAP, or reduced motion); with
   GSAP present it stands down and only the hover colour transition remains.
   Same reason .gsap-in suppresses the illusFloat idle animation below: that is a transform loop on the
   illustration, and GSAP tweens the illustration's transform on entry. */
.tcard.gsap-in .tc-feat li,
.tcard.gsap-in.show .tc-feat li {
  transition: color var(--t-fast) ease;
  transition-delay: 0s;
}
/* The lead-in term of each bullet, wrapped by fillCard (the stored copy is plain verbatim text). Full
   sentences with no weight change were unscannable once the bullets went from four words to forty. */
.tc-feat li b {
  font-weight: 600;
  color: var(--ink);
}
.tc-feat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 6px;
  height: 1px;
  background: var(--cc);
}
/* TWO COLUMNS, above the width where the dock actually resolves to its full 780px (min(780px,88vw) hits
   780 at 887px of viewport; 1180 is where there is still map left beside it). This is the change that
   removes the card's internal scrollbar — the list is 6–10 full sentences and was always the tallest
   thing on the card, so halving its row count is worth more than any amount of extra width. Grid rows
   align, so the per-row rules still line up straight across both columns. */
@media (min-width: 1180px) {
  /* A side-by-side hero (illustration in a 274px left column beside the heading) was tried here and
     reverted: it bought ~120px of height but read as a broken split panel. The illustration stays a
     full-width band above the copy — the structure the card has always had. */
  .tc-feat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 26px;
  }
  .tc-feat li {
    padding: 8px 0 8px 16px;
  }
  .tc-feat li::before {
    top: 14px;
  }
  /* ODD-LENGTH LISTS. The per-item border-bottom is a row rule when the list is a single column, but in two
     columns an odd bullet count leaves the final row half-populated — and the rule then stops dead at the
     column gutter, reading as a broken table edge. Online Evaluation has 3 bullets, so it hit this. The
     last item in each column loses its rule: :last-child covers the odd tail, and :nth-last-child(2) the
     left cell of a full final row. */
  .tc-feat li:last-child,
  .tc-feat li:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
  /* Density pass on the rows below the list. Worth ~35px, which is the difference between the longest
     stage fitting and not on a laptop; the title drops 26 → 24px, which at 780px wide still sets on one
     line for every stage. */
  .tcard {
    padding-bottom: 14px;
  }
  .tc-heading {
    font-size: 26px;
  }
  .tc-title {
    font-size: 18px;
  }
  .lc-inner h1,
  .lc-inner h2,
  .lc-head h1,
  .lc-head h2,
  .outro-step .hero-card h2 {
    font-size: 26px;
  }
  .lc-inner .lc-standfirst {
    font-size: 18px;
  }
  .tc-foot {
    margin-top: 12px;
  }
  .tc-btn {
    margin-top: 14px;
  }
}
/* stat sits on its own line above the flow string, not inline beside it */
.tc-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--faint);
}
.tc-stat {
  color: var(--ink);
  border: 1px solid var(--line2);
  padding: 5px 9px;
  letter-spacing: 0.06em;
}
.tc-flow {
  color: var(--faint);
  line-height: 1.5;
}
/* CTA — a "Read more →" text link on the stage accent, not the full-width white slab it was. The slab
   was the heaviest object on a card whose job is now reading: it out-weighted the title, and the card
   is one of seven, so the same white bar repeated at every stop. Left-aligned on the copy's own axis,
   so it reads as the end of the text rather than a separate control strip. The 44px min-height is the
   touch target, held by padding rather than a box, and the underline is drawn as a ::after so it can
   grow from the left on hover instead of snapping on. */
.tc-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  margin-top: 14px;
  position: relative;
  font-family: var(--sg);
  font-weight: 600;
  font-size: 15px;
  color: var(--cc);
  background: none;
  padding: 11px 0;
  border-radius: 0;
  pointer-events: auto;
  cursor: pointer;
  min-height: 44px;
  transition: color 0.25s ease;
}
.tc-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 9px;
  height: 1px;
  width: 0;
  background: currentColor;
  opacity: 0.5;
  transition: width 0.3s var(--e-out);
}
.tc-btn .a {
  transition: transform 0.25s ease;
}
.tc-btn:hover {
  color: #fff;
}
.tc-btn:hover::after {
  width: 100%;
}
.tc-btn:hover .a {
  transform: translateX(4px);
}
.tc-btn:active .a {
  transform: translateX(2px);
}
/* dismiss — only rendered/needed when the card is a bottom sheet over the map */
.tc-close {
  display: none;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.86);
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
/* `.tcard.dismissed{display:none}` used to live here, in the base sheet, while the only two ways to undo a
   dismissal (the close button and Escape) exist ONLY at sheet widths — so widening the window after a
   dismissal hid the desktop card permanently. It now lives in the ≤820px block with them. */

/* ============================================================================
   LAYOUT V2 — the panel dissolves, the content stays on the side
   Selected with the V1/V2 switch (see .vtoggle below and the version block in loop.js, which puts
   data-v on <html>). Same side of the screen as V1, but the card stops being an OBJECT there:
     1. No card edges. No border, no radius, no shadow, no card-coloured box — a gradient running in
        from the right edge is the only thing separating copy from map, so the map is never boxed out
        and the two read as one composition rather than a panel parked over artwork.
     2. Full column height. Freed from the card's box the copy uses the whole viewport height, which is
        what pays for the longest stage without an internal scrollbar.
     3. No illustration. The map is the picture in this version.
   Every rule is scoped to html[data-v="2"], so V1 is untouched — including the ≤820px sheet rules,
   which these deliberately outrank (attribute + class beats class, regardless of source order).
   ============================================================================ */
html[data-v="2"] .card-dock {
  position: fixed;
  left: 0;
  right: auto;
  top: calc(0px - var(--footer-lift));
  bottom: var(--footer-lift);
  /* 62vw/920, up from 52vw/780. The copy now starts on the page gutter (150px at 1440, the brand mark's
     own column) instead of its own ~49px inset, and that ~100px came straight out of the measure: at
     58vw the text measured 627px against the old 642px and the ten-bullet stage went 57px into a
     scrollbar. Measured back to 699px here, which is what makes it fit again. The extra width buys
     nothing new — it hands back what the alignment took. */
  width: min(62vw, 920px);
  transform: none;
  display: flex;
  align-items: center;
}
/* NO SCRIM ELEMENT HERE ANY MORE. V2's legibility wash was a full-frame gradient plate on .card-layer::before;
   it is now a mask on the map itself (see --map-fade and the .stage-fixed rules), gated by the same
   :has(.tcard.show) condition. The plate banded — a near-black colour at varying alpha cannot survive 8-bit
   premultiplied compositing — and it also lifted the artwork's true blacks, which a mask cannot do. */
html[data-v="2"] .tcard {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  background: none;
  max-height: 100vh;
  max-height: 100dvh;
  /* 78px = the fixed site nav, which the column runs under. The right padding is the fade's room; the
     left one is --page-gutter, i.e. the same column the nav's brand mark stands on, so the stage counter
     and the logo share a left edge. env() on the bottom too: on an iPad in landscape this column is the
     layout and its last row would otherwise land in the home-indicator strip. */
  padding: 84px clamp(28px, 3vw, 52px) calc(20px + env(safe-area-inset-bottom))
    calc(var(--page-gutter) + env(safe-area-inset-left));
  /* The column has no card edges, so a classic (non-overlay) scrollbar had nothing to belong to — measured
     as a bare 15px light track floating over the artwork wherever the copy overflows. Thin and dim enough
     to read as part of the frame; overlay-scrollbar platforms are unaffected either way. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  transform: none;
}
html[data-v="2"] .tcard::-webkit-scrollbar {
  width: 8px;
}
html[data-v="2"] .tcard::-webkit-scrollbar-track {
  background: transparent;
}
html[data-v="2"] .tcard::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
}
html[data-v="2"] .tc-illus {
  display: none;
}
/* The column IS the layout, not an overlay over it — there is nothing to dismiss back to. */
html[data-v="2"] .tc-close {
  display: none;
}
html[data-v="2"] .tcard.dismissed {
  display: block;
}
html[data-v="2"] .tc-body {
  padding: 0;
}
html[data-v="2"] .tc-heading {
  font-size: clamp(24px, 2.3vw, 32px);
  margin-bottom: 8px;
}
html[data-v="2"] .tc-title {
  font-size: clamp(17px, 1.65vw, 20px);
  margin-bottom: 10px;
}
html[data-v="2"] .tc-feat {
  border-top: 0;
  margin-top: 14px;
}
html[data-v="2"] .tc-foot {
  margin-top: 14px;
}
/* Rows one notch tighter than V1's ≥1180 pass. Aligning to the logo cost ~100px of measure, and this is
   where the last of it comes back: 6px rows over five list rows is ~20px, which is the difference between
   the ten-bullet stage fitting a 900px-tall window and not. */
@media (min-width: 1180px) {
  html[data-v="2"] .tc-feat li {
    padding: 6px 0 6px 16px;
  }
  html[data-v="2"] .tc-feat li::before {
    top: 12px;
  }
}
/* The two-column list from V1 still applies here (min-width:1180px), and it is what keeps the ten-bullet
   stage inside one screen. Below that the column is too narrow to split. */
@media (max-width: 1179px) and (min-width: 1024px) {
  /* single-column list here, and the gutter is smaller too (10.4vw), so less width is needed to hold the
     same measure */
  html[data-v="2"] .card-dock {
    width: min(62vw, 700px);
  }
}
/* Narrow: no room for a side column beside the map, so the content returns to the bottom of the screen —
   still panel-less, and the frame's sweep turns through 90° to rise out of the page bottom instead of
   crossing it diagonally. Same element, same state hook — only the angle changes. */
@media (max-width: 1023px) {
  html[data-v="2"] .card-layer::before {
    /* three alpha points and a straight ramp, same as --sweep — the .5 sits at the midpoint of 24–76% */
    background: linear-gradient(180deg, rgba(7, 7, 8, 0) 24%, rgba(7, 7, 8, 0.5) 50%, #070708 76%);
  }
  html[data-v="2"] .card-dock {
    left: 0;
    right: 0;
    top: auto;
    bottom: var(--footer-lift);
    width: auto;
    display: block;
  }
  html[data-v="2"] .tcard {
    max-height: 64vh;
    max-height: 64dvh;
    /* same gutter as the nav, so the bottom-band fallback lines up with the brand mark too */
    padding: 46px calc(var(--page-gutter) + env(safe-area-inset-right))
      calc(20px + env(safe-area-inset-bottom)) calc(var(--page-gutter) + env(safe-area-inset-left));
  }
  html[data-v="2"] .tc-feat {
    border-top: 1px solid var(--line);
  }
}
/* UNSCOPED, deliberately. Two separate rules make the CTA sticky and back it with the V1 CARD's colour —
   the ≤1023px sheet block and the ≤520px-tall block — and the second of those is a bare class rule that
   applies at ANY width. Scoped to max-width:820px, this correction missed it: measured at 1400×500 in V2,
   the CTA rendered as a 665×44 #121212 slab floating in a layout that has no card (html[data-v="2"] .tcard
   is background:none; border:0), and because that fill is only 97% opaque the feature rows scrolled
   visibly THROUGH it. It read as a rendering fault. V2's own ground colour, at every width and height. */
html[data-v="2"] .tc-btn {
  background: #070707;
}
/* STICKY IN V2 AT EVERY WIDTH. The sticky treatment was scoped to the ≤1023px sheet and to short windows,
   which left V2's side column between 1024 and 1179 with a `position:relative` CTA at the end of content
   taller than the column: measured at 1030×800, 892px of copy in a 713px scrollport with "Read more" at
   y=836 — 167px below the fold, reachable only by finding a scrollbar on a frameless column. The column is
   `overflow-y:auto` at `max-height:100dvh` by design, so its one action has to be pinned to the scrollport
   rather than to the end of the text.
   display:flex + width:100% because the backing has to span the measure — otherwise feature rows scroll
   past beside the link instead of under it. */
html[data-v="2"] .tc-btn {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  width: 100%;
  padding: 13px 0 11px;
}
/* …and with a full-width box the ::after underline would draw a rule across the whole column on hover
   instead of under the words. V2 drops it: the amber-on-near-black colour shift and the arrow slide are the
   hover, which is all a link this isolated needs. */
html[data-v="2"] .tc-btn::after {
  display: none;
}

/* ---------- layout version switch ----------
   Sits under the nav on the left, clear of the map's centre and of the bottom band in V2. Mono caps at
   11px to read as instrumentation rather than a site control — it is an experiment switch, not part of
   the page's own UI. */
/* HIDDEN BY DEFAULT — it is a dev control, not part of the page (see the DEBUG note in loop.js). `?debug=1`
   puts data-debug on <html> and the rule below reveals it. Kept as display:none rather than removed from the
   markup so the comparison tool still exists for whoever is iterating on the two layouts. `?v=2` selects a
   layout on its own and does NOT require this. */
.vtoggle {
  position: fixed;
  left: clamp(14px, 2.4vw, 28px);
  top: calc(78px + 20px - var(--footer-lift));
  z-index: 42;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    opacity var(--t-mid) ease,
    visibility var(--t-mid) ease;
}
/* OFF while the premise section is being read. The pill is fixed at the top-left, and .lc-inner starts on
   the same page gutter, so it sat ON the prose — measured 117px of the paragraph column at 1180px, 127px
   at 900px — and because it is opaque with a blur backdrop, elementFromPoint returned the pill: the text
   underneath could not even be selected. Worse as motion: each line disappeared behind it and reappeared
   while scrolling, on the page's one long-form section. loop.js sets .vt-hide off the same lcCovering()
   the camera uses, so it clears exactly when the map comes back.
   visibility, not just opacity, so it cannot be clicked or tabbed to while faded out. The same class is
   applied over the closing summary, which is the other place fixed chrome lands on running text. */
html[data-debug] .vtoggle {
  display: flex;
}
.vtoggle.vt-hide {
  opacity: 0;
  visibility: hidden;
}
.vt-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-right: 4px;
}
/* 44px tall/wide: WCAG 2.5.5, and they were the smallest interactive targets on the page at 40×36 */
.vtoggle button {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 8px 13px;
  min-height: 44px;
  min-width: 44px;
  color: var(--dim);
  transition:
    color var(--t-fast) ease,
    background-color var(--t-fast) ease;
}
.vtoggle button:hover {
  color: var(--ink);
}
.vtoggle button.on {
  background: var(--gold);
  color: #0a0a0a;
}
/* V2's copy column owns the left edge, so the switch crosses to the free side rather than sitting on top
   of the stage counter. Only where that column exists — below 1024 V2 is a bottom band and the top-left
   corner is empty again. */
@media (min-width: 1024px) {
  html[data-v="2"] .vtoggle {
    left: auto;
    right: clamp(14px, 2.4vw, 28px);
  }
}
/* Stays TOP-left on phones. Docking it to the bottom corner put it straight over the content — the
   sheet in V1 and the band in V2 both own the bottom of a phone screen, and measured at 500×844 it
   covered the "Read more" link it sits nearest to. */
@media (max-width: 820px) {
  /* 78px, not 60: the ≤820 nav block steps down the gap, the wordmark, the logo and the link sizes but
     NEVER the bar's height, which stays 78px from .site-nav. Written as 60 the pill's top edge landed at
     72px against a nav bottom of 78 — and at z-index:42 over the nav's 40 it painted across the bar's own
     1px bottom rule at every width from 320 to 820 (measured). */
  .vtoggle {
    top: calc(78px + 12px);
    left: 12px;
    padding: 3px 5px 3px 9px;
  }
  .vt-label {
    display: none;
  }
  /* 44px: these were the smallest targets on a page whose every other control already clears it */
  .vtoggle button {
    padding: 7px 12px;
    min-height: 44px;
    min-width: 44px;
  }
}

/* ---------- lifecycle phase framing (overview only) ---------- */

/* The right-hand progress stepper (.pnav / .pdot) was removed: the top scroll bar (.sprog) already
   reports position through the walkthrough, the card states "02 / 07 OBSERVABILITY", and the seven
   map markers are themselves keyboard-operable jump targets — so the rail was a third, redundant
   read of the same state sitting on top of the art. */

/* ---------- Lenis smooth scroll ----------
   Only applies once loop.js has actually constructed a Lenis instance (it adds .lenis to <html>), so
   a blocked CDN leaves native scrolling completely untouched. */
html.lenis,
html.lenis body {
  height: auto;
}
/* Lenis animates the scroll position itself, so the browser's own smooth-scrolling must stand down —
   two smoothing systems on one axis fight and stutter. */
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
/* Lenis's docs also suggest `[data-lenis-prevent]{ overscroll-behavior:contain }` here. NOT used, on
   purpose: this page's only navigation IS the page scroll, and `contain` stops an inner scroller from
   chaining to it. On a short window the stage card overflows, so that rule would trap the wheel over
   the largest target on screen once the card hit its own end — the exact scroll-trap removed from the
   base .tcard earlier. data-lenis-prevent alone already stops Lenis hijacking the card's overflow;
   native chaining past the end is what we want. The ≤820px sheet keeps its own `contain`, where the
   card is an overlay rather than the page's navigation. */

/* ---------- scroll progress ---------- */
/* ---------- the stage rail ----------
   Seven stages down the right edge, vertically centred: the one column nothing else claims. The nav owns
   the top, .vtoggle the top-left, the v2 stage copy the left 62%, .totop the bottom-right corner.
   POSITION IS READ FROM LENGTH, NOT FROM A NUMBER. Each stage is a short right-aligned bar; the stage being
   read is longer and gold. That makes the rail legible at a glance as "where am I in seven" without asking
   anyone to read a numeral at 11px, and it is why the buttons carry no visible text — their accessible name
   already says "<stage> — stage N of 7", so a digit would be the same information twice.
   Right-aligned on purpose: the bars grow leftward, so the active one extends into empty space instead of
   pushing the stack around, and the rail's right edge stays a straight line against the viewport edge.
   The name appears on hover or focus, absolutely positioned, so the rail never widens or reflows. */
.srail {
  position: fixed;
  z-index: 42;
  right: clamp(14px, 2.4vw, 28px);
  top: calc(50% - var(--footer-lift));
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) ease;
}
.srail.on {
  opacity: 1;
  pointer-events: auto;
}
/* 44x18 is the hit area — 18px of height each with the 3px gap gives a 21px pitch, and the row is wide
   enough that the active bar's extra length stays inside it. The bar is the ::after; the button itself is
   transparent and exists to be clicked. */
.sr-dot {
  position: relative;
  display: block;
  width: 44px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.sr-dot::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -1.5px;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--ink);
  opacity: 0.22;
  transition:
    width var(--t-fast) var(--e-out),
    opacity var(--t-fast) ease,
    background-color var(--t-fast) ease;
}
.sr-dot.done::after {
  opacity: 0.42;
}
.sr-dot:disabled {
  cursor: default;
}
.sr-dot:disabled::after {
  opacity: 0.14;
}
.sr-dot:hover:not(:disabled)::after {
  width: 30px;
  opacity: 0.7;
}
/* the stage being read: longer and gold, which is the only colour on the rail */
.sr-dot.now::after {
  width: 36px;
  background: var(--gold);
  opacity: 1;
}
.sr-t {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  padding: 3px 8px;
  border: 1px solid var(--line2);
  border-radius: 4px;
  background: rgba(12, 12, 12, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--t-fast) ease,
    transform var(--t-fast) var(--e-out);
}
.sr-dot:hover:not(:disabled) .sr-t,
.sr-dot:focus-visible .sr-t {
  opacity: 1;
  transform: translateY(-50%);
}
/* GONE below the sheet breakpoint, not merely hidden. The v2 card becomes a full-width bottom sheet there
   and the rail is both cramped and covered; display:none also keeps it out of the tab order, which
   opacity:0 would not (the same trap .totop had). The map markers still jump, and .totop still gets the
   reader home. */
@media (max-width: 1023px) {
  .srail {
    display: none;
  }
}

/* ---------- back to top ----------
   Bottom-right, which is the one corner nothing else on this page claims: the nav owns the top, .vtoggle
   the top-left, the outro's CTA and the v2 stage copy the left column, and .hero-scrollcue the bottom
   CENTRE of the opening screen only.
   z-index 42, the same tier as .vtoggle — both are page furniture that floats over the map. Above the
   card (8) so it survives the v2 dock, below the nav panel (44) so an open mobile menu covers it, and
   below the grain overlay (60), which is pointer-events:none and so grains it without eating the click.
   Hidden until the reader is a screen down, because at the top it would be an affordance for something
   already true. `hidden` is on the element in the markup and loop.js removes it once there is somewhere
   to go back FROM — that way it is absent from the tab order on first paint rather than merely invisible,
   which is the failure this file already polices for the markers and the card.
   44px is the WCAG 2.5.8 minimum target; the icon is 20 and the rest is padding. */
.totop {
  position: fixed;
  z-index: 42;
  right: clamp(14px, 2.4vw, 28px);
  bottom: calc(clamp(14px, 2.4vw, 28px) + env(safe-area-inset-bottom) + var(--footer-lift));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--dim);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity var(--t-mid) ease,
    transform var(--t-mid) var(--e-out),
    color var(--t-fast) ease,
    border-color var(--t-fast) ease;
}
.totop svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.totop.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.totop:hover,
.totop:focus-visible {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
}
/* The sheet case is NOT handled here. The card becomes a full-width bottom sheet below 1024 and the
   button would sit on top of the stage copy, so it has to stand down — but doing that in CSS left the
   element at opacity 0 with `tabindex="0"` still on it, because loop.js sets the tabindex from the scroll
   position and knew nothing about a media query. That is a focusable, invisible control: measured at
   390x844 mid-walkthrough, exactly the failure this file polices for the markers and the card.
   syncToTop() owns the whole state instead, and reads isSheet() — the same query, in the language that
   also writes the tabindex. One owner; see the .gsap-in note for the same argument about the card. */
@media (prefers-reduced-motion: reduce) {
  .totop {
    transition:
      opacity var(--t-mid) ease,
      color var(--t-fast) ease,
      border-color var(--t-fast) ease;
    transform: none;
  }
  .totop.on {
    transform: none;
  }
}
/* Pinned to the viewport top, above the nav (z-index 41 > 40). Not on --footer-lift: lifting with the
   stage hid the bar whenever page-bottom claimed the viewport while the nav stayed at top:0. */
.sprog {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  z-index: 41;
  background: rgba(255, 255, 255, 0.06);
}
.sprog i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 0.12s linear;
}

/* ---------- scroll driver ---------- */
.scroller {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
/* .hero-scrollcue was in this list and had no effect: its own rule further down sets pointer-events:none at
   equal specificity and later in the file, which wins. It is aria-hidden decoration naming a gesture, not a
   control, so `none` is the correct end state — the entry here was just misleading. */
.scroller a,
.scroller button {
  pointer-events: auto;
}
/* dvh: with vh, a collapsing mobile URL bar shifts innerHeight/2, which is the basis of both
   active-stage detection and loop progress — the active stage flickered during toolbar transitions */
/* ONE STAGE COSTS 65dvh OF SCROLL, not a full screen. At 100dvh the walkthrough alone was seven screens
   and the document 11.2; this brings it to 8.8. A stage still holds the screen long enough to read its
   card, because the card's own dwell is a share of the section rather than a fixed distance.
   THIS WAS ONLY SAFE ONCE THE AGENT'S BEAT WAS RE-ANCHORED. A first attempt at 65dvh, with the beat still
   keyed to comet units, slid every window off the copy it was tuned against — the agent was invisible
   through the hero moment and then landed at full size on top of the board. The beat now reads the premise
   section's own travel (premiseFrac in loop.js), which does not care what .step measures.
   What still does not rescale is MAX_STEP: it caps frac-per-FRAME, so shorter sections raise the
   frac-per-pixel rate and the limiter binds at lower scroll speeds. Measured over real wheel and trackpad
   deltas, the share of moving frames where it saturates goes 53% -> 81% at wheel deltas and is unchanged
   at trackpad deltas. That is the real cost of going shorter, and it is why this is 65 and not 40. */
.step {
  min-height: 65vh;
  min-height: 65dvh;
}
/* opener runway. Was 200vh (a core landing on the plane plus seven cubes rising), then 130vh, now exactly
   one screen — because the "Why think in terms of a lifecycle?" section now follows the hero directly.
   The extra 30vh was PINNED runway: .intro-hero is sticky, and it held an empty screen with the copy
   already gone and the next section still a full viewport below. At 100vh the section has no room to be
   late — the hero scrolls up and the copy scrolls in behind it, contiguously. introProgress() falls back
   to the section's own height when there is no pinned span (see loop.js), so the hero scrub still ramps
   0 → 1 across it.
   NOTE that .intro-hero's `position:sticky` therefore has ZERO travel and behaves as static. That is why
   applyIntro fades the copy over 0.15 → 0.70 of this section rather than 0.66 → 1: the card leaves through
   the top of the viewport at about 0.67, so a fade that ran to 1 was still at full strength while the copy
   was visibly sliding off, and then spent its last third fading something already gone. If this section is
   ever given real pinned runway again, that window has to move with it. */
.intro-step {
  height: 100vh;
  height: 100dvh;
  position: relative;
}
/* Handover between the last stage and the outro, now ZERO height. It was a full screen, then 62vh, and
   both were dead scroll: the camera reaches its final framing as the last stage leaves, so every pixel
   of runway here is a frame with the loop parked right, the left half empty, and the summary still
   below the fold. The closing region owns the runway instead (see .outro-step / .outro-stick), which
   puts the copy on screen at the same moment.
   The element stays — loop.js inserts the seven stage sections before it, and it is the marker for
   "everything after the walkthrough". Only `.step` sections feed active-stage detection, so its height
   cannot affect which stage is active. */
.overview-step {
  min-height: 0;
}
/* scenery cube emergence — faces fade in as the cube grows (var set per-cube during the intro) */
.cube > b {
  opacity: var(--riseop, 1);
}
/* ---------- scroll cue ----------
   Bottom of the opening screen, ON THE SAME CENTRELINE AS THE COPY. It follows the hero: while the hero
   sat on the page gutter this stood there too, because a centred cue under a left-aligned title card is
   the only centred thing on the screen, pointing at a column it does not stand on. The hero is centred
   again, so this is as well. Positioned against .intro-hero (sticky, so it is a containing block).
   left:0/right:0 with align-items:center rather than left:50% + translateX(-50%), deliberately: the .gone
   state below animates `transform`, and a translate in the base rule would be overwritten by it — the cue
   would jump to the left edge of the screen on its way out. A full-width box centring its own children
   leaves the transform channel free. */
.hero-scrollcue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(42px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.24em;
  color: var(--faint);
  pointer-events: none;
}
/* No padding correction on .hsc-word for the trailing letter-space: measured, the flex centring
   already lands the glyphs on the arrow's axis to within 0.01px, and padding-left pushed the word
   OFF it by half the padding (0.24em → 1.44px right). */
.scroll-chev {
  display: block;
  width: 19px;
  height: 19px;
  stroke: var(--faint);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: chevBob 1.8s ease-in-out infinite;
}
@keyframes chevBob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}
/* short windows: the cue and the hero copy compete for the same vertical space */
@media (max-height: 640px) {
  .hero-scrollcue {
    bottom: 22px;
  }
}
/* Landscape phones and small windows. Measured at 844×390 before this, the CTA's bottom edge (343px) sat
   BELOW the scroll cue's top (326px) — they overlapped. There is no room for a standing invitation to
   scroll in 390px of height, so the cue goes and the copy compresses to fit one screen. */
@media (max-height: 520px) {
  .hero-scrollcue {
    display: none;
  }
  .eyebrow {
    margin-bottom: 10px;
  }
  .intro-hero .hero-card h1 {
    font-size: clamp(24px, 4.6vw, 32px);
    line-height: 1.06;
    margin-bottom: 10px;
  }
  .intro-hero .hero-card p {
    font-size: 14.5px;
    line-height: 1.5;
  }
  /* the sheet cannot take 62% of a 390px-tall screen and still leave the map readable */
  .tcard {
    max-height: 74vh;
    max-height: 74dvh;
    padding-bottom: 0;
  }
  .tc-illus {
    display: none;
  }
  /* Same sticky action as the ≤820 sheet, but keyed to HEIGHT: a landscape phone is 844 wide, so it gets
     the desktop dock and missed the width-scoped rule — measured 474px of content in a 289px card with the
     CTA below the fold. */
  .tc-btn {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 10px;
    display: flex;
    width: 100%;
    padding: 10px 0 8px;
    background: rgba(14, 14, 14, 0.97);
  }
  .tc-btn::after {
    bottom: 8px;
  }
  .tc-body {
    padding-bottom: 10px;
  }
}
/* Hero copy pinned for the whole opener, centred over the plane; fades out (via JS) as the map takes the
   screen. justify-content:center is what makes it a centred composition — the map is aimed BELOW the copy,
   not behind it, so the title card sits on the screen's own axis and the plane opens up underneath it.
   This was flex-start on --page-gutter for a while, to put the hero on the same left column the premise
   section and the closing summary use. Reverted by request: the hero is a title card, not a body section,
   and the centred axis is what separates the two. The gutter alignment survives everywhere else. */
.intro-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--page-gutter);
  pointer-events: none;
}
/* ---------- "Why think in terms of a lifecycle?" ----------
   The premise, between the hero and the walkthrough. Ordinary page flow, not a scroll-driver step (see
   loop.html for why), and OPAQUE: the map has faded up behind it by this point in the scroll, so this
   section is what holds it back until the copy has been read. z-index for the same reason. */
/* BOTH EDGES FADE. The background is one vertical gradient with transparent ends rather than a flat fill:
   the hero's bloom and lattice above, and the map's isometric plane below, are near-black but not the same
   near-black as --bg, and the section's own lattice is a different grid again — so a flat fill drew two
   visible horizontal seams across the page as it scrolled (reported at the top edge, measured at both).
   This has to be the SECTION's background, not an ::after overlay: an overlay fading to transparent over
   an opaque fill reveals the fill, not what is behind the element. 150/300px ramps, in px rather than %
   because the section's height changes with the copy and the seam is a fixed optical distance. */
/* A SCRIM NOW, NOT A FILL. The middle stops were var(--bg) — fully opaque — which is what let this section
   hide the map entirely while the copy was read. That is also why the page needed a fake lattice here at
   all: nothing behind this box rendered, so the floor could not be the thing the reader was standing on.
   At .74 the extended floor (.grid, doubled to 5376) reads faintly through, so hero, section and map are
   one continuous ground; white copy on a near-black scrim is still far past AA.
   Deliberately NOT fully transparent: the route and the first plinth are ramping up behind this while the
   copy is being read (see the route and introVis windows in loop.js), and at full transparency they would
   compete with the text rather than sit under it. */
.lifecycle-step {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  --lc-runway: clamp(160px, 28vh, 340px);
  /* First screen is a viewport of centred copy; extra height below is the handover runway. */
  min-height: calc(100vh + var(--lc-runway));
  min-height: calc(100dvh + var(--lc-runway));
  /* --page-gutter, not its own clamp: this section used to start at x=180 while the nav's brand mark stood
     at 150 and the outro's copy at 86 — three columns on one page. Everything left-aligned now stands on
     the one the brand mark defines. */
  /* THE BOTTOM PADDING IS THE HANDOVER RUNWAY, not decoration. It was 22vh, and that is what put the stage
     card on top of this section's last paragraph: stage 1 takes over when this section's bottom edge is
     half a screen down the viewport (HANDOVER in loop.js — it has to be there, or the comet is mid-flight
     when the card arrives), so at that moment everything within 50vh of this box's bottom edge is still on
     screen. At 54vh the copy has cleared before the card can reach it, and the space it leaves is not dead
     scroll — it is where the map's plinths rise and where the route draws.
     84vh, not 54. It briefly went to 178vh to buy the agent a clear, empty floor to be introduced on, back
     when the agent was revealed AFTER the copy left. It no longer is: the agent is now the subject of the
     same screen as the prose, held large in the right third while the copy is read, so it needs no empty
     runway of its own. What the extra 30vh over the original still buys is room for the camera to pull
     back and the conveyor to draw before stage 1 takes over. */
  /* 84vh -> 54vh. 84 was left over from an experiment that briefly took this to 178vh for a version of the
     agent beat that no longer exists, and with the stage board gone it left a measured ~450px where the
     copy had left, no stage card had arrived and station 01 was still building — nothing to read but an
     agent on empty floor. 54vh is the original value and it is the floor, not a preference: the card docks
     when this box's bottom edge is half a screen down the viewport, and any shorter puts it on top of the
     last paragraph. At 54 the copy clears at ~1680 and the card docks at ~1768.
     Changing this no longer disturbs the agent, whose clock now measures .lc-inner (see measurePremise). */
  padding: calc(var(--bar-h, 0px) + 88px) var(--page-gutter) var(--lc-runway);
  /* The scrim lives on ::before so it can be MASKED HORIZONTALLY — see there. */
  background: none;
}
/* The scrim. It is what makes the copy legible over the floor, and it used to cover the section's full
   width on the element itself. That is fine until something on the floor is meant to be the subject of the
   same screen: the agent stands in the right third and rendered at 26% of its own brightness under a .74
   panel, where the reference has it at full strength on black.
   The panel now fades out across 58%→84% of the width — opaque where the prose is, gone where the agent
   is, with the transition wide enough that there is no visible edge down the middle of the page.
   The top ramp is longer than the bottom one and takes an intermediate stop: it used to reach .66 in
   150px, and 150px of ramp arriving exactly where the hero's backdrop ends put a second tonal step on the
   same pixel row as the bloom's clip — two edges at one boundary read as one hard line. Spreading the
   scrim's arrival over 420px means it is never the thing you notice.
   z-index:-1 is safe: .lifecycle-step has z-index:3 and so opens its own stacking context, which the -1 is
   confined to. It paints behind this section's copy and in front of the map, not behind the map. */
.lifecycle-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(7, 7, 8, 0) 0,
    rgba(7, 7, 8, 0.28) 180px,
    rgba(7, 7, 8, 0.62) 420px,
    rgba(7, 7, 8, 0.74) 620px,
    rgba(7, 7, 8, 0.74) calc(100% - 40vh),
    rgba(7, 7, 8, 0.66) calc(100% - 22vh),
    rgba(7, 7, 8, 0) calc(100% - 6vh)
  );
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 58%, transparent 84%);
  mask-image: linear-gradient(90deg, #000 0, #000 58%, transparent 84%);
}
/* .lc-bg is gone. It was a masked wrapper whose only child was .lc-lattice, and its top mask (transparent
   → opaque over 260px) was half of what made the join visible: the hero's lattice had already faded out
   with the copy well before this one reached strength, leaving roughly half a screen with no texture at
   all between the two. One fixed layer has no ends to mask. */
/* .lc-bg / .lc-lattice lived here. Both are gone — the premise section no longer carries a lattice of its
   own, because a second lattice element is exactly what could not be made continuous with the first. See
   the note on .grid in the world block above — the real floor reaches these sections now. */
/* margin:0, not `0 auto`. Centring the 1080px block inside the padded box put its left edge 30px right of
   the section's own padding, so even the gutter fix would not have landed it on the page column. */
.lc-inner {
  position: relative;
  max-width: 1080px;
  margin: 0;
}
/* Match .tc-heading / .tc-desc so the premise section reads at the same type scale as the stage card. */
.lc-inner h1,
.lc-inner h2 {
  font-family: var(--sg);
  font-weight: 600;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
}
.lc-inner p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: #d4d4d4;
  margin: 0 0 12px;
  max-width: 70ch;
  text-align: justify;
}
/* .lc-copy > p:first-of-type and .lc-lead lived here — the standfirst and the list lead-in of the previous
   two shapes. The standfirst is a named class now (.lc-standfirst, in the board block below) rather than
   "whichever paragraph happens to come first": a `>` selector on a wrapper is exactly what broke silently the
   last time the markup gained a level. */
/* ---------- the premise section, redesigned as a board ----------
   WHAT WAS WRONG WITH THE PREVIOUS TWO SHAPES. First it was one prose column down the page gutter with the
   right half of a 2000px screen empty. Then it was that column with a stage panel beside it — which fixed the
   emptiness but said the seven stages twice, once as prose and once as a list, and still left the section
   reading as text with a diagram parked next to it.
   This is the section's own sentence as a layout: four stages above a dashed line, three below it, "everything
   above the line is rehearsal, everything below it is happening to real users". Full width, because the
   lifecycle is the widest thing this page has to say. */
.lc-wide {
  max-width: 1440px;
}
/* The heading owns a row of its own; the two setup paragraphs share the next one. Heading-left / prose-right
   was tried and left a 400px void under a two-line heading beside six lines of prose — a two-column header only
   works when both columns are short (Grok, Linear), and this section's standfirst is not.
   The heading's measure is capped so it breaks where a display line should rather than running 1400px wide. */
.lc-head {
  margin-bottom: clamp(16px, 2vh, 24px);
}
/* Same clamp as .tc-heading — the dedicated display size is dropped so this opens at card scale. */
.lc-head h1,
.lc-head h2 {
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.2;
  text-wrap: balance;
}
/* Two prose columns of roughly equal height. The 1.05fr on the first is the standfirst's larger type paying
   for itself: at 1fr each the brighter column ran a line longer than the supporting one and the pair looked
   accidental. */
/* ONE COLUMN, AND ONLY THE LEFT ~60% OF THE ROW. This was two columns spanning the full 1440, which was
   right when the section had the width to itself; it does not any more. The agent stands on the floor to
   the right of this copy and is the subject of the same screen, so the prose gives that side back and
   stacks instead. The 60% is what leaves the agent's art box clear at the hero framing, measured — not a
   proportion picked by eye.
   The BOARD below keeps the full 1440. It arrives after the agent has begun receding, so the two never
   want the same pixels. */
.lc-copyrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 60%;
  gap: 0;
  align-items: start;
  margin-bottom: clamp(34px, 4.6vh, 58px);
}
.lc-head {
  max-width: 60%;
}
.lc-copyrow p:last-child {
  margin-bottom: 0;
}
/* Match .tc-title — the standfirst is the card's subtitle role for this section. */
.lc-inner .lc-standfirst {
  font-family: var(--sg);
  font-weight: 600;
  font-size: clamp(17px, 1.65vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--gold);
  margin: 0 0 12px;
  max-width: 62ch;
  text-align: left;
}
/* ---------- the board ----------
   position:relative is the containing block for the return path, and the padding is that path's channel: it
   runs down the left of both bands and along the bottom of the production one, so those two edges have to be
   room the cards do not use. */
/* the band's own label: dot, name, and the stage numbers it owns, in the same 01–07 the plinth badges and the
   stage cards count in */
/* Hollow for the rehearsal band, filled for the live one — the same outline/fill pair the map's floor captions
   and the stage card's phase chip use. It is the channel that still reads without hue, so nothing here depends
   on telling blue from green. */
/* FOUR COLUMNS IN BOTH BANDS, including the one that holds three stages. The production row's fourth cell is
   the closing paragraph, so the two bands share one grid — three cards in a 3-column row would have been
   wider than the four above them and the two rows would not have lined up. */
/* The cards. A hairline, a low-alpha fill and a phase-coloured top edge — the top edge is what makes a row of
   four read as one band rather than four unrelated boxes, and it is the same device the panel above the map's
   stage detail uses.
   NO overflow:hidden. It was there to keep the top accent inside the radius and it silently ate the flow
   arrows below, which sit in the gap OUTSIDE the card — measured, none of the six were on screen. The accent
   is inset by a pixel and carries the card's own top radius instead, which needs no clipping.
   The third background layer is the phase colour bleeding out of the corner the number sits in: it is what
   stops a row of four near-black rectangles reading as placeholder boxes. */
/* THE FLOW BETWEEN CARDS, in the gap rather than as chrome inside it: one arrow per join, centred on the 14px
   gap, so the row reads as a sequence and not as a set. aria-hidden by construction — it is a pseudo-element,
   so it is never in the accessible name, and the <ol> already says these are ordered. */
/* the last card of the production band joins the closing text cell, and an arrow into a paragraph is a
   sentence about nothing */
/* Hover lifts the card and brings its number up to its phase colour. transform + border only: nothing here
   changes layout, so a row of four cannot shuffle under the pointer. */
/* the closing paragraph, sitting in the production row's fourth column: smaller and dimmer than a card's
   copy, with no border, so it reads as the note it is rather than an eighth stage */
/* ---------- the threshold ----------
   One row: a stub in the crossing colours, the LIVE chip, the sentence, then a rule that fades out. It is the
   same object the map draws across its floor, and it is the actual boundary between the two bands here rather
   than a caption about one. */
/* the long half runs INTO nothing rather than into the board's edge: at full strength it read as a border. The
   fade is in the background, not a second mask layer, so there is no mask-composite dependency. */
/* ---------- the return path ----------
   Out of the production band, around the outside, back into stage 01 — the closing paragraph as geometry.
   THE BOARD SIMPLIFIES. The isometric map routes this through the agent (07 → agent → 01) because the agent
   is an object on that floor; the board is a list of the seven stages and has no agent card, so its loop
   goes straight back to 01. The tail paragraph beside it carries the full order in words.
   Amber because it is ROUTE (the thing you walk), not a phase enclosure; see the --gold / --phase-* note at
   the top of the file. Three borders on one box: no SVG, so there is no viewBox to stretch non-uniformly and
   thin the stroke on one axis, and it tracks the board's height at every width.
   right:37.5% puts the bottom run's end under the third card of a four-column row, which is stage 07 — the
   stage the insights come from. top:42px is stage 01's card, a little below its top edge — it tracks the
   band label's height (12px mono + 9px margin), so it moves whenever that margin does.
   NO border-top. It was there and it was wrong: a top border spans the whole box, so the line ran past stage
   01 and terminated in the middle of the row with an arrowhead pointing at nothing. With only the left and
   bottom borders set, border-top-left-radius still curves the left border's top end to the right and stops it
   — the turn into stage 01, and nothing beyond it. */
/* the arrowhead, at the end of that turn and pointing into stage 01: a two-border corner rotated so its vertex
   leads, at the same weight as the line it ends */
/* the label rides ON the vertical run and breaks its dashes, which is what makes line and word read as one
   object instead of a rule beside a caption */
/* The threshold sentence itself. It is a <p> inside the threshold row, so it takes the row's own baseline and
   the body rules have to be turned off — .lc-inner p would otherwise give it the card body size and a 70ch
   measure inside a flex row. */
.lc-inner .lc-cross {
  flex: 0 1 auto;
  margin: 0;
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.5;
  color: var(--dim);
  max-width: 66ch;
}
/* ---------- narrower than four columns ----------
   1200 → two columns. Four cards need ~210px each before "Evaluation and Simulation" starts breaking badly,
   and the flow arrow in the gap needs the row to actually be a row.
   The arrows go with the single-file layouts: an arrow pointing right between two cards that are stacked
   vertically is a lie about the direction of travel. */
@media (max-width: 1199px) {
  /* THE AGENT'S COLUMN IS GIVEN BACK. The 60% caps on .lc-head / .lc-copyrow and the scrim's right-hand
     cutout all exist to leave room for the agent to stand beside the prose at its hero scale. Below 1200
     there is no such room — at 390px the reserved third is ~137px, narrower than the art itself — so the
     hero shot is off (see AGENT_HERO_Z in loop.js, which reads the same breakpoint) and the copy takes the
     full width back. The scrim goes back to covering everything, because the agent is behind it again. */
  .lc-head,
  .lc-copyrow {
    max-width: none;
  }
  .lifecycle-step::before {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* The two prose columns stack below 1024: side by side they are down to ~40 characters a line, under the 45
   floor that reads comfortably, and on a phone they were two columns of five words. */
@media (max-width: 1023px) {
  .lc-copyrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .lc-inner .lc-standfirst {
    margin-bottom: 12px;
  }
  /* the return path's channel is 30px of a 375px screen for a decorative line — the threshold and the band
     labels carry the same split, and the closing paragraph states the loop in words */
  /* the sentence drops under the rule rather than sharing a line with it */
  .lc-inner .lc-cross {
    flex: 1 0 100%;
  }
}
/* ---------- mobile scroll budget ----------
   The walkthrough is scroll-driven, and every distance in it was tuned against a mouse wheel on a 900px-tall
   desktop window. On a phone the same distances are a lot of thumb: one screen per stage plus a 135vh
   closing region plus this section's own desktop padding came to roughly eleven swipes of runway, much of it
   over a floor with the card already parked and nothing changing. These are the three that cost the most.
   .step stays above 80vh on purpose — it is what gives each stage a settled reading position, and below that
   the active-stage hand-over starts to feel like a flick between cards rather than a walk. */
@media (max-width: 820px) {
  .step {
    min-height: 58vh;
    min-height: 58dvh;
  } /* the same cut as the base rule, from 80 */
  /* the summary is one card; it does not need a screen and a third of approach on a phone */
  .outro-step {
    min-height: 104vh;
    min-height: 104dvh;
  }
  /* the premise section's desktop padding is ~240px top — half a phone screen of empty ramp before the
     copy starts. The BOTTOM is not free in the same way: it is the handover runway (see the base rule),
     and cutting it to 132px is what let the sheet slide up over this section's last paragraph. It has to
     stay above the handover distance, which is half a viewport — and on a phone .step is 80vh, so the
     card arrives no earlier. 52vh, trimmed from the desktop 54 because the bottom sheet docks lower than
     the desktop card and needs a little less clearance. */
  .lifecycle-step {
    --lc-runway: max(32vh, 220px);
    min-height: calc(100vh + var(--lc-runway));
    min-height: calc(100dvh + var(--lc-runway));
    padding-top: calc(var(--bar-h, 0px) + 72px);
    padding-bottom: var(--lc-runway);
  }
}
@media (max-width: 640px) {
  /* Shorter ramps on a phone — 300px of fade is a third of the screen there — and the copy's own padding
     follows them down so no line sits in the gradient. */
  /* Top ramp shortens; the bottom one does not, for the same reason the padding above it does not — it is
     the handover, and the panel has to be gone before the sheet arrives rather than ending underneath it.
     Expressed in vh here so it tracks the runway on a phone, where 300px is a much larger share of the
     screen than it is on a desktop. */
  /* Scrim alphas track the base rule — a phone's copy sits over the same floor. Slightly denser (.80) than
     the desktop .74: the text is larger relative to the screen and there is less empty panel around it, so
     the floor lines run closer to the letterforms. */
  .lifecycle-step {
    --lc-runway: max(32vh, 200px);
    min-height: calc(100vh + var(--lc-runway));
    min-height: calc(100dvh + var(--lc-runway));
    padding-top: calc(var(--bar-h, 0px) + 64px);
    padding-bottom: var(--lc-runway);
    /* Same lengthened top ramp as the base rule, scaled down — the bloom overflows this element's box by
       MORE on a short phone (~425px at 667px tall), not less, so the seam matters here most. */
    background: linear-gradient(
      180deg,
      rgba(7, 7, 8, 0) 0,
      rgba(7, 7, 8, 0.34) 110px,
      rgba(7, 7, 8, 0.68) 240px,
      rgba(7, 7, 8, 0.8) 340px,
      rgba(7, 7, 8, 0.8) calc(100% - 46vh),
      rgba(7, 7, 8, 0.7) calc(100% - 24vh),
      rgba(7, 7, 8, 0) 100%
    );
  }
  /* The .lc-bg mask that stood here is gone with the element — see the base rules. */
  /* One card per row on a phone, so the cards get their own breathing room rather than the row's: the padding
     and the number's margin are what make a 210px-wide card look deliberate, and neither is needed when the
     card is the full column. */
}

/* ---------- opening-screen backdrop ----------
   Two decorative layers behind the copy, both from the design. They are scoped to .intro-hero and sit
   BELOW it in z-order, so the map (which the intro scrub fades up in .world, a different subtree) is
   unaffected — the isometric floor plane and this flat lattice are not the same element.
   The whole layer fades with the hero copy: it is part of the opening statement, not of the map. */
/* THE BOTTOM FADE IS NOT DECORATION — it is what stops the bloom being guillotined.
   .hero-bloom is a 944×882 box with filter:blur(135px) and a rotation matrix, and the matrix swings its
   corners well outside the unrotated box: measured, the blurred result reaches y = 1212 − 1.18·vh past
   this element's bottom edge. That is 54px of overflow in a 982px window, 150px at 900, and 425px on a
   667px phone. overflow:hidden then cuts all of it off on one pixel row, which draws a hard horizontal
   line across the left 39% of the screen — the width the bloom actually covers — at exactly the boundary
   between the hero and the premise section. It reads as the two sections being clipped apart.
   overflow:hidden has to stay (without it the bloom paints down over the premise copy, which is now a
   translucent scrim rather than an opaque fill, so it would show through). Fading the layer out before it
   reaches the clip means there is nothing left to cut. 58% keeps the bloom's core — its centre sits at
   about 27% of the viewport at 982px tall, and still above this stop on the shortest phone. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
}
/* #isoField's rules lived here. Removed with the element: a flat CSS lattice cannot be the same object
   as the map's floor, because it does not move with the camera. The floor is extended instead — see
   the enlarged .grid up in the world block. */
/* one large amber bloom, low and left of centre. 135px blur on a 944×882 ellipse; the transform is the
   design's own matrix, which flips and rotates it so the warm end of the gradient falls to the bottom
   left of the screen. */
.hero-bloom {
  position: absolute;
  width: 944px;
  height: 882px;
  left: 50%;
  top: -18%;
  margin-left: -1432px; /* design: centre − 944/2 − 960 */
  background: linear-gradient(180deg, rgba(43, 255, 255, 0) 30%, rgba(255, 185, 70, 0.4) 100%);
  filter: blur(135px);
  transform: matrix(-0.79, -0.61, -0.61, 0.79, 0, 0);
}
/* the bloom is a 944px object anchored off the centre line; below the design width it would sit off
   screen entirely, so it is pulled back in and scaled down with the viewport */
@media (max-width: 1200px) {
  .hero-bloom {
    margin-left: -1040px;
    width: 760px;
    height: 710px;
    filter: blur(110px);
  }
}
@media (max-width: 760px) {
  .hero-bloom {
    margin-left: -620px;
    width: 560px;
    height: 520px;
    filter: blur(90px);
    top: -8%;
  }
  /* The --iso-cell override for the flat lattice stood here. Gone with it: the floor is a real plane now,
     so its on-screen cell size is set by the camera's zoom, not by a media query. */
}
/* Two lines each, headline and standfirst.
   At 760px the 58px headline broke as "Build AI agents that / improve with every / interaction." —
   three lines, the last one a single word — and the standfirst spilled "loop." onto a third line as
   an orphan. Measured: the headline's unwrapped width is 1387px and the standfirst's is 1544px, so
   two lines need roughly 700px and 780px of measure plus room for the break to land on a word
   boundary. 940 / 900 is the tightest pair that holds T2/B2 from 900px viewport width all the way to
   2560px. Verified without text-wrap:balance too, so browsers that lack it get the same line counts.
   Below ~900px the copy reflows to more lines, which is what a phone should do. */
/* CENTRED. The hero is the page's title card and is allowed its own axis; every body section after it
   (the premise copy, the stage detail, the closing summary) still stands on the left column the brand mark
   defines. That contrast is deliberate — a centred opening statement reads as a cover, and the switch to
   a left column is what tells the reader the page has started.
   The standfirst is narrower than the headline (760 against 940) so the block tapers rather than sitting
   as two equal-width slabs, and auto margins keep it on the same centreline as the h1 above it. */
.intro-hero .hero-card {
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}
.intro-hero .hero-card p {
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  width: min(760px, 100%);
}
/* balance is the enhancement, not the mechanism: the widths above already give two lines. This just
   evens them out instead of leaving a long first line and a short second. */
.intro-hero h1,
.intro-hero .hero-card p {
  text-wrap: balance;
}
.intro-hero .hero-card {
  pointer-events: auto;
}
/* while the intro scrubs, cubes track scroll 1:1 (kill the .6s ease so the rise has no lag) */
.stage.intro-scrub .cube {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .intro-step {
    height: 100vh;
    height: 100dvh;
  }
  .intro-hero {
    position: relative;
  }
}
/* The closing region. 160vh of runway with a STICKY viewport-height frame inside it, rather than one
   100vh flex box: the card has to be in frame from the instant the ending fires, and a flow-laid card
   in a 100vh section is a screen too low at that moment (measured: its centre sat at ~1170px on a
   900px viewport). The sticky frame is what decouples "where the copy sits" from "how far the reader
   has scrolled", which is what makes the reveal simultaneous with the loop's pan. */
/* var(--page-gutter): the closing copy stood at x=86 against the brand mark's 150 — the page's last screen
   started on a column nothing else used. */
.outro-step {
  min-height: 135vh;
  min-height: 135dvh;
  padding: 0 var(--page-gutter);
  text-align: left;
}
.outro-stick {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
/* The closing copy is the other place text sits in a left column with the loop beside it, and above 1120px it
   had nothing behind it — white headline and grey body straight onto the artwork. What sits behind it now is
   not an element at all: html.outro-up masks the map itself (see the .stage-fixed rules near the top). That
   replaced a fixed, z-index:-1 gradient plate here, which banded for the reason --map-fade documents.
   html.outro-up is set by loop.js on the same single edge that reveals the copy (setOutroCopy), so the fade
   and the words arrive and leave together. */
.hero-card {
  max-width: 540px;
  pointer-events: auto;
}
/* No BOXED scrim panel — the card edge it drew read as a panel around nothing. What sits behind this copy
   above 1120px is the full-bleed --sweep on .outro-stick above; the ≤1120px block below re-adds the boxed
   version for the widths where the copy genuinely shares the frame with the art. */
.outro-step .hero-card {
  margin-left: 0;
  max-width: 580px;
  background: none;
  padding: 0;
}
/* Stara 600 at 16px on 0.6em tracking, per the design. It used to carry margin-right:-.6em to cancel the
   trailing letter-space, which only matters for CENTRED text — every eyebrow on the page is left-aligned on
   the gutter now, so the correction is dropped rather than left as a no-op.
   margin-bottom 28px, down from 39: the label belongs to the headline under it, and at 39 it floated
   between the two with no clear owner. */
.eyebrow {
  font-family: var(--sg);
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.2em;
  color: #ffba4a;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.hero-card h1,
.hero-card h2 {
  font-family: var(--sg);
  font-weight: 600;
  font-size: clamp(34px, 4.45vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  color: #fff;
}
/* Match .tc-heading / .tc-desc so the closing summary sits on the same type scale as the stage card. */
.outro-step .hero-card h2 {
  font-family: var(--sg);
  font-weight: 600;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 8px;
}
.hero-card h1 em {
  font-style: normal;
  color: var(--gold);
}
.hero-card p {
  font-size: clamp(16px, 1.39vw, 20px);
  line-height: 1.5;
  color: #fff;
  margin: 0;
  max-width: 60ch;
}
.outro-step .hero-card p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: #d4d4d4;
  max-width: 46ch;
  margin: 0 0 12px;
  text-align: justify;
}
.outro-step .hero-card p:last-of-type {
  margin-bottom: 16px;
}
.outro-step .hero-card p {
  margin-left: 0;
}
/* .hero-cta ("Build reliable agents") is gone — the opening screen ends on the standfirst and the
   outro's .hero-btn is the page's one action. Its rules are removed rather than left dead. */
/* .hero-scrollcue now lives with the intro-hero rules above — it is positioned against the opening
   screen, not laid out in the hero card's flow. .hero-skip ("Skip to the summary") is gone. */
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  min-height: 44px;
  background: transparent;
  padding: 13px 22px;
  border-radius: 3px;
  border: 1px solid var(--line2);
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.3s,
    color 0.3s;
  cursor: pointer;
}
.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.hero-btns .hero-btn {
  margin-top: 16px;
}
.hero-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--amber);
}
.hero-btn .hb-ar {
  transition: transform 0.3s;
}
.hero-btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
}
.hero-btn:hover .hb-ar {
  transform: translateX(4px);
}
/* .outro-alt (the "Prefer to read it as an article?" line) removed with its markup. */
/* Fallback note. Shown only under .no-js, which now means EITHER scripting is off (the head script
   never ran) OR loop.js failed to boot (the head's watchdog put .no-js back). It used to live in a
   <noscript>, which covers only the first of those — with scripting on and loop.js blocked the reader got
   a hero, a screen of void and the outro, with nothing explaining it. */
.nojs-note {
  display: none;
}
.no-js .nojs-note {
  display: block;
  position: relative;
  z-index: 5;
  max-width: 640px;
  margin: 96px auto 0;
  padding: 20px 22px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: rgba(12, 12, 12, 0.94);
  pointer-events: auto;
}
.no-js .nojs-note p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--dim);
}
.no-js .nojs-note a {
  color: var(--gold);
  text-decoration: underline;
}

/* ---------- no scripting ----------
   Every scroll-driver section is empty until loop.js fills it, and the map itself is built entirely
   in JS. Without scripting the page was the <noscript> note followed by ~10 viewport-heights of
   nothing (130vh intro + 100vh overview + 100vh outro, and the seven .step sections did not even
   exist yet). Collapse the runway and hide the dead canvas so the note and the outro copy are the
   whole page. .no-js ships in the markup and is removed by the head script before first paint. */
/* The floor plane needs no entry here: it lives inside .stage-fixed, which this already hides. */
.no-js .stage-fixed,
.no-js .hud-frame,
.no-js .sprog {
  display: none;
}
.no-js .intro-step {
  height: auto;
}
/* The premise section's bottom padding is the handover runway — half a screen of deliberate space for the
   map's plinths to rise into as the panel clears. With no scripting there is no map and no handover, so it
   is exactly the dead canvas the rest of this block exists to collapse. */
.no-js .lifecycle-step {
  padding-bottom: 80px;
}
.no-js .intro-hero {
  position: static;
  height: auto;
  padding: 120px clamp(24px, 6vw, 90px) 40px;
}
.no-js .overview-step {
  display: none;
}
.no-js .outro-step {
  min-height: 0;
  padding-top: 40px;
  padding-bottom: 80px;
}
/* without scripting there is no camera to make room for, so the closing region collapses to its copy
   and the sticky frame must not hold a viewport of empty height open */
.no-js .outro-stick {
  position: static;
  height: auto;
}
.no-js .hero-scrollcue {
  display: none;
} /* the runway is collapsed, so there is nothing to scroll to */

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  /* ---- nav: the bar is 78px of which the CTA is 48, and at 390 the three surviving items were within
     ~30px of touching. Everything steps down one notch; the CTA keeps a 44px tap target. ---- */
  /* the gutter itself steps down, so everything aligned to it (V2's copy) follows the brand mark */
  :root {
    --page-gutter: 16px;
  }
  .site-nav {
    gap: 12px;
  }
  .nav-word {
    font-size: 21px;
  }
  .nav-brand img {
    width: 22px;
    height: 22px;
  }
  .nav-main {
    margin-left: 6px;
  }
  .nav-main a,
  .nav-right a {
    font-size: 14px;
    min-height: 44px;
  }
  .nav-demo {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }
}
/* ---- the narrowest bar. Adding the burger gave .nav-right a fourth fixed-width child, and the bar's
   minimum content width went to a MEASURED 345px: brand 84 + "Why" 29 + right group 181 (CTA 123 + gap 14 +
   burger 44) + 32 padding + 18 of gaps. That fits 390 and 360 with room, and overflows 320 by 25px — where
   body{overflow-x:hidden} would have swallowed it by clipping the burger's right edge, i.e. hiding the only
   control that reaches the navigation. Reclaiming 34px here (CTA padding 32→28, right-group gap 14→8, and
   the 12px gutter that already applies below 380) brings the minimum to ~311.
   NOT verified by rendering: this headless build clamps its window to 500px, so 320 could not be loaded.
   The numbers above are measured at 500px and the 320 case is arithmetic on them. ---- */
@media (max-width: 400px) {
  .nav-right {
    gap: 8px;
  }
  .nav-demo {
    padding: 0 14px;
  }
}
@media (max-width: 820px) {
  /* ---- hero: 64px/20px/0.6em is a 1440 setting. On a 390 screen the eyebrow's tracking alone ran the
     label to the full width, and the headline's 1.0 line-height is too tight once it wraps to three
     lines. ---- */
  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
    margin-bottom: 16px;
  }
  .intro-hero .hero-card h1 {
    font-size: clamp(27px, 8.2vw, 38px);
    line-height: 1.08;
    margin-bottom: 14px;
  }
  .intro-hero .hero-card p {
    font-size: 15.5px;
    line-height: 1.55;
    max-width: 36ch;
  }

  /* ---- sheet: a tighter rhythm for the copy. The sheet LAYOUT itself is not here — it starts at
     1023px, see the block below this one. ---- */
  /* Measured at 390×844: the stack (illustration + copy + four features + stat + flow + CTA) came to
     ~540px inside a 523px sheet, so the "Read more" button — the sheet's only action — sat below the fold
     on the primary phone size. Every row loses a few pixels rather than any content being dropped. */
  .tc-body {
    padding: 0 18px;
  }
  /* wrap: at 390px the row is "01 / 07 · TAG · PRE-PRODUCTION" against a 44px close-button reserve, and
     three mono items in .16em tracking do not fit. The chip carries margin-left:auto, so when it wraps it
     lands on its own line, still right-aligned, instead of squeezing the stage name. */
  .tc-top {
    margin: 12px 0 8px;
    padding-right: 44px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .tc-heading {
    font-size: 22px;
  }
  .tc-title {
    font-size: 16px;
  }
  .tc-desc {
    font-size: 15px;
  }
  .lc-inner h1,
  .lc-inner h2,
  .lc-head h1,
  .lc-head h2,
  .outro-step .hero-card h2 {
    font-size: 22px;
  }
  .lc-inner .lc-standfirst {
    font-size: 16px;
  }
  .lc-inner p,
  .outro-step .hero-card p {
    font-size: 15px;
  }
  .tc-feat li {
    padding: 7px 0 7px 16px;
  }
  .tc-feat li::before {
    top: 13px;
  }
  .tc-foot {
    gap: 7px;
    margin-top: 10px;
  }
  .tc-btn {
    margin-top: 12px;
    min-height: 48px;
  }

  /* The on-map labels are unreadable at these widths and are not worth the collision risk: they render at
     12px × the camera's fit scale, i.e. a measured 4.2px at 320, 4.8px at 360 and 5.2px at 390. The card
     carries the same information ("04 / 07 RED TEAMING") at full size, so below the sheet breakpoint the
     map keeps the plinths and drops the captions. */
  .gem .glabel {
    display: none;
  }
  /* The lane LABELS go with them, and for the same arithmetic: their world-space type renders at ~11px at
     these fit scales. The lane outlines and the closing loop stay — geometry reads at any scale — and the
     card's own phase chip carries the naming. */
  .route .lane-t {
    display: none;
  }
}

/* ---------- the card is a BOTTOM SHEET ----------
   1023px, not 820. Between those two widths the card was neither: .card-dock is `width:min(780px,88vw)`,
   so the 88vw cap does not bite until 887px of viewport, and the sheet block started at 820 — leaving a
   200px band where a 780px card sat on a 900px screen. Measured at 900×800 (V1): the card covered x=51→831
   of 885px (88% of the frame), dockBandX's own band collapsed to nothing so the focused node was aimed at
   x≈74 — INSIDE the card, its label clipped mid-word — and .tc-btn landed 39px below the fold with the
   sticky rule out of scope and no .tc-close to dismiss with. A wall of text over a map you cannot see,
   whose one action is off-screen.
   The reasoning that keeps the sheet at all is unchanged: there is no room for a 780px panel BESIDE the
   map until the two-column list turns on at 1180. Below that, the map owns the frame and the copy docks
   under it. BP_SHEET in loop.js reads this same breakpoint through matchMedia. */
@media (max-width: 1023px) {
  /* env() insets: the sheet docks 12px off the bottom, which on a phone with a home indicator puts
     the close button and the CTA inside the 34px system gesture zone, and in landscape runs the sheet
     under the notch and the rounded corners. calc() with env() falls back to plain 12px anywhere
     env() is unsupported, so this costs nothing on hardware without insets. */
  .card-dock {
    position: fixed;
    top: auto;
    transform: none;
    width: auto;
    left: calc(12px + env(safe-area-inset-left));
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom) + var(--footer-lift));
  }
  /* the well has to come down with the sheet: at 236px it took nearly half of a 66vh sheet before the
     copy started */
  .tc-illus {
    height: min(20vh, 138px);
    padding: 10px 16px 12px;
  }
  /* double-tap-to-zoom over the sheet is the last thing wanted on the page's main reading surface */
  .tcard {
    touch-action: pan-y;
  }
  /* Scoped HERE, not globally. Above this width .tc-close is display:none and the Escape handler is gated
     on isSheet(), so a sheet dismissed at 800px and then widened to 1200px stayed display:none with no
     control left that could reopen it — the desktop layout had no content pane at all. loop.js also
     clears the state on the crossing (see undismiss); this makes the CSS side impossible to strand. */
  .tcard.dismissed {
    display: none;
  }
  /* NO overscroll-behavior, for the same reason the desktop card has none (see .tcard above). The
     sheet is the largest touch target on the screen and the page scroll is this page's only
     navigation; measured, the page-swipe band left above the sheet is 240px at 390×844, 162px at
     360×640 and 114px at 320×512, i.e. SMALLER than on desktop, so `contain` swallowing the gesture
     at the sheet's last line froze the walkthrough exactly where escaping was hardest. */
  .tcard {
    max-height: 66vh;
    max-height: 66dvh;
    overflow-y: auto;
    padding: 0;
  }
  .tc-close {
    display: flex;
  }
  /* STICKY action. Even after trimming every row, the stack is taller than a 640px phone can show
     (measured: 536px of content in a 397px sheet at 360×640), so the sheet's one action would sit below
     its own fold and a reader would have to discover the inner scroll to find it. Sticking it to the
     bottom edge of the scrollport keeps it reachable at every height. It is now a text link rather than
     a filled button, so the opaque backing the copy scrolls under has to be stated here — without it
     the feature rows ran straight through the link's own line. */
  .tc-btn {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 12px;
    display: flex;
    width: 100%;
    padding: 12px 0 10px;
    background: rgba(14, 14, 14, 0.97);
  }
  .tc-btn::after {
    bottom: 10px;
  }
  .tc-body {
    padding-bottom: 12px;
  }
}
/* the hero/outro copy sits over the loop art until the layout is wide enough to clear it */
@media (max-width: 1120px) {
  /* The scrim is for copy that reads OVER the artwork. The opening hero does not: the intro scrub keeps the
     map faded down until the copy has left, so on a phone this only drew a visible rounded panel edge
     around centred text on a black screen (its top-left corner was the giveaway). The outro genuinely
     overlaps the loop and keeps its own scrim below. */
  /* The hero has NO scrim here (see the note above), so its padding was pure inset — it pushed the opening
     copy 20px off the column everything else stands on. Only the outro, which does get a scrim panel, keeps
     padding, and it pulls itself back by the same amount so the PANEL bleeds past the gutter while the TEXT
     stays on it. */
  .intro-hero .hero-card {
    padding: 0;
  }
  /* needs the .outro-step prefix to actually win: `.outro-step .hero-card` above is more specific
     than `.hero-card`, so the plain rule alone cannot re-add either the scrim or its padding.
     Below 720px the camera does not pan the loop aside at all (BP_NARROW in loop.js), so here the
     copy really is reading over the artwork and needs the backing. */
  .outro-step .hero-card {
    padding: 24px 22px;
    border-radius: 14px;
    margin-left: -22px;
    background: radial-gradient(
      135% 92% at 28% 46%,
      rgba(3, 3, 3, 0.92),
      rgba(3, 3, 3, 0.5) 66%,
      transparent
    );
  }
  /* THE GUTTER ITSELF STEPS DOWN — the hero and outro no longer opt out of it. This used to set their own
     clamp(16px,4vw,32px) padding, which meant that between 1024 and 1120 the page had two columns again:
     measured at 1100, the brand mark and the premise section sat at 114 while the hero and the closing copy
     sat at 52. Redefining the token moves the nav, the hero, the premise section, the stage copy and the
     outro together, so the single column survives the breakpoint instead of only existing above it. */
  :root {
    --page-gutter: clamp(16px, 4vw, 44px);
  }
}
@media (max-width: 480px) {
  .tc-illus {
    height: min(19vh, 132px);
  }
  /* the 4th feature used to be display:none here — that silently deleted 7 facts on mobile
     and at 400% zoom. Content stays; the card scrolls instead. */
  .tc-desc {
    font-size: 15px;
  }
  .lc-inner p,
  .outro-step .hero-card p {
    font-size: 15px;
  }
}
/* short viewports (landscape phones, small windows): shrink the hero well so more of the copy
   fits without scrolling. No max-height override here on purpose — the base
   max-height:calc(100dvh - 128px) already scales with the viewport AND leaves the room the top
   HUD needs. The old 88vh/92vh override exceeded that budget on a 390px-tall landscape phone
   (card 343px + 76px HUD clearance > 390px) and, being unscoped, also beat the 62vh bottom-sheet
   cap and pushed the sheet 216px off a 320×568 screen. */
@media (max-height: 640px) {
  .tc-illus {
    height: 124px;
  }
}
/* mobile: drop the decorative scatter city so the loop reads clearly on small screens */
@media (max-width: 720px) {
  .scatter {
    display: none;
  }
}

/* ============================================================
   micro-interaction layer
   One shared rhythm for everything that is not scroll-driven: 180ms for state echoes (colour,
   opacity), 260ms for anything that moves, ease-out on the way in and the faster ease-in on the way
   back. Every rule here is transform/opacity/filter only — no layout properties — so none of it can
   cost a reflow while the camera is running, and all of it is switched off in the reduced-motion
   block at the end of the file.
   ============================================================ */
:root {
  --t-fast: 180ms;
  --t-mid: 260ms;
  --e-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* --gimg-lift has to be a registered property for the plinth hover to interpolate: custom properties
   are un-animatable by default, so without this the lift would snap. An unsupported at-rule is
   skipped whole, so those browsers get the snap and the hover still reads. */
@property --gimg-lift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* ---- nav: arrival, then hover echoes ---- */
@keyframes navIn {
  from {
    opacity: 0;
    transform: translateY(-9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.site-nav > * {
  animation: navIn 0.5s var(--e-out) both;
}
.site-nav > :nth-child(2) {
  animation-delay: 0.07s;
}
.site-nav > :nth-child(3) {
  animation-delay: 0.14s;
}
.nav-brand img {
  transition: transform var(--t-mid) var(--e-out);
}
.nav-brand:hover img {
  transform: scale(1.08) rotate(-6deg);
}
.nav-word {
  transition: filter var(--t-fast) ease;
}
.nav-brand:hover .nav-word {
  filter: brightness(1.12);
}
/* the current-tab underline draws itself in on load, and non-current tabs grow one on hover, so the
   hover state answers the same visual language as "you are here" */
.nav-main a.on::after {
  transform-origin: left center;
  animation: underlineIn 0.5s 0.2s var(--e-out) both;
}
@keyframes underlineIn {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.nav-main a:not(.on) {
  position: relative;
}
.nav-main a:not(.on)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-mid) var(--e-out);
}
.nav-main a:not(.on):hover::after {
  transform: scaleX(1);
}
/* CTA: a sheen crosses it on hover, which is the one place on the page a gradient sweep is worth the
   paint — it is the single conversion control in the chrome */
.nav-demo {
  position: relative;
  overflow: hidden;
}
.nav-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(255, 255, 255, 0.26) 50%,
    transparent 66%
  );
  transform: translateX(-120%);
  transition: transform 0.62s var(--e-out);
}
.nav-demo:hover::after {
  transform: translateX(120%);
}
.nav-demo:active {
  transform: translateY(0) scale(0.985);
}

/* ---- opening beat: the hero copy assembles itself ----
   CSS keyframes, deliberately NOT a GSAP timeline. The headline is the page's primary content, so its
   visibility must not depend on a third-party script from a CDN ticking: a from-state of opacity:0
   written by JS is a blank hero the moment anything stops that tween. Keyframes cannot get stuck
   part-way, and .intro-hero's own scroll-driven opacity (applyIntro) is on the CONTAINER, so the two
   never write the same property. */
@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.intro-hero .eyebrow {
  animation: heroIn 0.7s 0.16s var(--e-out) both;
}
.intro-hero h1 {
  animation: heroIn 0.8s 0.28s var(--e-out) both;
}
.intro-hero .hero-card p {
  animation: heroIn 0.7s 0.42s var(--e-out) both;
}
/* No entrance animation on .hero-scrollcue, deliberately. It needs the opposite fill behaviour from
   the copy above — the .gone rule further down has to be able to take its opacity away again once the
   reader scrolls, and a filling animation outranks a class for as long as it applies. Measured: with
   an entrance tween on it the cue stayed at opacity 0. Its chevron already animates (chevBob), which
   is the arrival signal that matters here. */

/* ---- hero + outro actions ---- */
.hero-btn,
.tc-btn,
.nav-demo,
.gem {
  touch-action: manipulation;
}
/* the amber rule on the outro button grows to the full height of the control on hover, so the button
   fills toward the direction its arrow points */
.hero-btn::before {
  transform-origin: center bottom;
  transition:
    transform var(--t-mid) var(--e-out),
    width var(--t-mid) var(--e-out);
}
.hero-btn:hover::before {
  width: 5px;
}
.hero-btn:active {
  transform: translateY(1px);
}
.hero-btn {
  transition:
    border-color 0.3s,
    color 0.3s,
    transform var(--t-fast) var(--e-out),
    background-color var(--t-mid) ease;
}
.hero-btn:hover {
  background-color: rgba(255, 255, 255, 0.035);
}

/* ---- map markers: the plinth lifts toward the reader on hover/focus ----
   The lift is expressed as a length in the SAME transform the art already uses (see .gem .gem-img),
   because writing a second transform here would replace that one and drop the art back to its
   anchor. */
.gem .gem-img {
  transition:
    --gimg-lift var(--t-mid) var(--e-out),
    filter var(--t-mid) ease;
}
.gem:hover .gem-img,
.gem:focus-visible .gem-img {
  --gimg-lift: 7px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}
/* ---- zoomed into a stage: one plinth is lit, the rest are switched off ----
   Every revealed plinth sits at full strength (opacity IS its build frac — see applyNodeVis), which is
   right for the overview: the accumulating loop is the point there. But it also meant that with the camera
   pushed in on one stage, its neighbours read exactly as loudly as the stage being read, and the amber
   accent — the only colour on this page — was repeated three or four times across the frame. Nothing said
   which plinth the card belonged to except the step chip.
   So the colour is taken away from everything the reader is not on: the body is near-black already, so
   desaturating drains the accent and the plinth falls back to being part of the floor. It is a filter, not
   an opacity change, because opacity is owned per frame by applyNodeVis (a CSS opacity here would fight
   it) — and because a dark plinth still standing there is the point: the walk so far stays visible, it
   just stops competing.
   Scoped to .focusing, i.e. only while a stage owns the screen. In the overview and at the ending there is
   no focused stage, so every plinth keeps its amber and the loop reads as one object. */
.focusing .gem:not(.on) .gem-img {
  filter: saturate(0.12) brightness(0.62);
}
/* …but a dimmed plinth is still a button. Hover/focus brings enough of it back to answer the pointer,
   and has to restate the lift shadow: the rule above is more specific than the hover rule, so without
   this the two would not compose. */
.focusing .gem:not(.on):hover .gem-img,
.focusing .gem:not(.on):focus-visible .gem-img {
  --gimg-lift: 7px;
  filter: saturate(0.6) brightness(0.86) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}
/* the contact shadow follows the art down, or the plinth reads as lit-from-below while its own body is off */
.focusing .gem:not(.on)::after {
  opacity: 0.5;
}
/* its ground shadow spreads as it rises, which is what makes the lift read as height rather than as
   the whole marker sliding up the screen */
.gem::after {
  transition:
    opacity var(--t-mid) ease,
    width var(--t-mid) var(--e-out);
}
.gem:hover::after,
.gem:focus-visible::after {
  width: 268px;
  opacity: 0.82;
}
.gem .glabel {
  transition:
    opacity 0.4s ease,
    transform var(--t-mid) var(--e-out);
}
.gem:hover .glabel {
  transform: translate(-50%, 204px);
}
/* press: the plinth settles back down under the finger, so a tap has a physical answer before the
   camera starts moving to it */
.gem:active .gem-img {
  --gimg-lift: 2px;
}
/* the active marker's step chip keeps a slow pulse, so the map always says which node the card
   belongs to even after the camera has settled and nothing else is moving */
@keyframes chipPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 185, 70, 0.5);
  }
  55% {
    box-shadow: 0 0 0 6px rgba(255, 185, 70, 0);
  }
}
.gem.on .gl-n {
  animation: chipPulse 2.6s ease-out infinite;
}
/* The closing handover beat is GONE. It flared an amber radial-gradient halo on each marker's
   hit-area pseudo-element, staggered 95ms apart along the path — but the flares are 0.85s each, so
   all seven overlapped and the map read as seven big yellow blobs sitting over the plinths. Removed
   by request; nodePing / pingNodes() went with it. The active marker's step chip still pulses
   (chipPulse above), which is what actually says which node the card belongs to. */

/* ---- stage card ---- */
/* the hero art breathes while you read the card. 7s and ±3px: slow and small enough to register as
   depth rather than as an animation competing with the copy. */
@keyframes illusFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
/* The 1s delay is what keeps this off GSAP's entry tween (which also writes transform on this element, and
   finishes inside ~1s). Stated as a dependency rather than a coincidence: if the entry timeline ever gets
   longer, this delay has to grow with it, or the idle float will fight it for the overlap. */
.tcard.show .tc-illus img {
  animation: illusFloat 7s ease-in-out infinite 1s;
}
/* feature rows answer the pointer: the amber dash extends and the row steps toward the reader.
   Colour only here. This rule used to restate opacity/transform at .4s, and being later in the file it
   outranked the .tc-feat li base rule above — so the fast EXIT declared there never applied. The entry
   timing lives on .tcard.show .tc-feat li; the exit lives on the base rule. */
.tc-feat li {
  transition:
    opacity 0.14s ease-in,
    transform 0.14s ease-in,
    color var(--t-fast) ease;
}
.tc-feat li::before {
  transition:
    width var(--t-mid) var(--e-out),
    background-color var(--t-fast) ease;
}
.tcard.show .tc-feat li:hover {
  color: #fff;
}
.tcard.show .tc-feat li:hover::before {
  width: 12px;
}
/* The CTA's lift-and-glow lived here for the white slab. As a text link its hover is the colour shift,
   the growing underline and the arrow (see .tc-btn above), so there is nothing left to add. */
.tc-close {
  transition:
    transform var(--t-fast) var(--e-out),
    border-color var(--t-fast) ease,
    background-color var(--t-fast) ease;
}
.tc-close:hover {
  transform: rotate(90deg);
  border-color: var(--line2);
  background: rgba(24, 24, 24, 0.94);
}

/* ---- chrome ---- */
/* the progress rail carries a soft glow at its leading edge, so the bar reads as travel rather than
   as a static width */
.sprog i {
  box-shadow: 0 0 10px rgba(255, 185, 70, 0.55);
}
.skip-link {
  transition:
    top 0.18s var(--e-out),
    box-shadow var(--t-fast) ease;
}
/* the scroll cue fades out as soon as the reader has taken its advice (class from loop.js) */
.hero-scrollcue {
  transition:
    opacity 0.45s ease,
    transform 0.45s var(--e-out);
}
/* translateY only. This carried translateX(-50%) from when the cue was centred with transform; with the cue
   now on the gutter that half-width shift would have kicked it sideways as it faded out. */
.hero-scrollcue.gone {
  opacity: 0;
  transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    display: none;
  }
  body {
    transition: none;
  }
  /* everything added by the micro-interaction layer above, off in one place */
  .site-nav > *,
  .nav-main a.on::after,
  .gem.on .gl-n,
  .tcard.show .tc-illus img,
  .intro-hero .eyebrow,
  .intro-hero h1,
  .intro-hero .hero-card p,
  .hero-scrollcue,
  .nav-demo::after {
    display: none;
  }
  .nav-brand:hover img,
  .gem:hover .glabel,
  .tc-close:hover {
    transform: none;
  }
  .gem:hover .gem-img,
  .gem:focus-visible .gem-img {
    --gimg-lift: 0px;
  }
  .route line,
  .route path {
    animation: none !important;
  }
  .route .trail,
  .route .trail-head {
    display: none !important;
  }
  .scroll-chev {
    animation: none;
  }
  .sprog i {
    transition: none;
  }
  .cube {
    transition: none !important;
  }
  /* .16s out / .3s in, matching the split in the base rules: even under reduced motion the card has to
     be off the column before the closing copy is readable on it. */
  .tcard {
    transition: opacity 0.16s;
    transform: none;
  }
  .tcard.show {
    transition: opacity 0.3s;
  }
  /* no blur/scale focus-in under reduced motion */
  .tcard,
  .tcard * {
    filter: none !important;
    transform: none !important;
  }
}

/* ============================================================
   Global site footer (matched to getnetra.ai footer)
   Sits above the fixed stage so it is reachable after the outro.
   ============================================================ */
.svg-sprite {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}
.mobile-only {
  display: block;
}
@media only screen and (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}
.desktop-only {
  display: block;
}
@media only screen and (max-width: 767.9px) {
  .desktop-only {
    display: none !important;
  }
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

footer {
  padding: 30px 0;
  border-top: 1px solid #2f2e2e;
  margin-top: 1px;
  position: relative;
  z-index: auto;
  overflow: visible;
  background: #000;
  pointer-events: auto;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
@media only screen and (max-width: 767.9px) {
  footer {
    padding-top: 0;
    padding-bottom: 24px;
    border-top: none;
  }
}
footer p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #c6c6c6;
  margin: 0 0 12px;
}
@media only screen and (max-width: 767.9px) {
  footer p {
    margin-bottom: 10px;
  }
}
@media only screen and (max-width: 479.9px) {
  footer p {
    font-size: 12px;
  }
}
footer img {
  display: block;
}
footer a {
  color: inherit;
  text-decoration: none;
}
footer .footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 24px;
}
@media only screen and (max-width: 767.9px) {
  footer .footer-content {
    padding-bottom: 0;
  }
}
footer .footer-logo img {
  height: 35px;
}
@media only screen and (max-width: 1024.9px) {
  footer .footer-logo img {
    height: 30px;
  }
}
@media only screen and (max-width: 767.9px) {
  footer .footer-logo {
    order: 2;
  }
  footer .footer-logo img {
    height: 24px;
  }
}
footer .footer-security p {
  text-align: center;
}
footer .footer-security-list {
  display: flex;
  gap: 16px;
  justify-content: center;
}
footer .footer-security-list img {
  height: 50px;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: all 0.3s ease;
}
footer .footer-security-list img:hover,
footer .footer-security-list a:hover img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}
@media only screen and (max-width: 1024.9px) {
  footer .footer-security-list img {
    height: 40px;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}
@media only screen and (max-width: 767.9px) {
  footer .footer-security {
    order: 1;
    width: 100%;
    text-align: center;
    padding: 30px 0;
    margin-bottom: 30px;
    position: relative;
  }
  footer .footer-security::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100vw;
    height: 1px;
    background: #2f2e2e;
    transform: translateX(-50%);
  }
  footer .footer-security-list img {
    height: 44px;
  }
}
footer .footer-contact-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
footer .footer-contact-main > p {
  text-align: left;
  margin-bottom: 0;
  white-space: nowrap;
}
@media only screen and (max-width: 767.9px) {
  footer .footer-contact-main {
    order: 3;
    align-items: flex-end;
    text-align: right;
  }
  footer .footer-contact-main > p {
    display: none;
  }
  footer .footer-contact-main .social-links {
    justify-content: flex-end;
    gap: 10px;
  }
  footer .footer-contact-main .social-links a {
    width: 38px;
    height: 38px;
  }
  footer .footer-contact-main .social-links svg {
    width: 16px;
    height: 16px;
    margin-top: 1px;
  }
  footer .footer-contact-main .social-links svg.twitter-icon {
    width: 13px;
    height: 13px;
  }
  footer .footer-contact-main .footer-contact {
    margin-top: 0;
    justify-content: flex-end;
  }
  footer .footer-contact-main .footer-contact span {
    display: none;
  }
  footer .footer-contact-main .footer-contact p {
    text-align: right;
  }
}
footer .footer-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
footer .footer-contact p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
footer .footer-contact svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}
footer .footer-contact a {
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}
@media only screen and (max-width: 767.9px) {
  footer .footer-contact {
    justify-content: center;
    flex-wrap: wrap;
  }
  footer .footer-contact p {
    text-align: center;
  }
  footer .footer-contact a {
    font-size: 14px;
  }
}
footer .footer-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  padding-top: 20px;
  margin-bottom: 0;
}
@media only screen and (max-width: 767.9px) {
  footer .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 18px;
    padding-bottom: 4px;
    margin-top: 18px;
  }
}
footer .footer-links-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 767.9px) {
  footer .footer-links-list {
    justify-content: center;
    gap: 10px 18px;
  }
}
footer .footer-link {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  margin-right: 12px;
}
footer .footer-link:after {
  content: "";
  background: #6d6b6b;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 12px;
}
footer .footer-link:last-child {
  margin-right: 0;
}
footer .footer-link:last-child:after {
  display: none;
}
@media only screen and (max-width: 767.9px) {
  footer .footer-link {
    margin: 0;
  }
  footer .footer-link:after {
    display: none;
  }
}
footer .social-links {
  display: flex;
  gap: 12px;
  margin: 0;
}
footer .social-links a {
  width: 50px;
  height: 50px;
  border: 1px solid #2f2e2e;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}
footer .social-links a:hover {
  background: #111;
}
footer .social-links svg {
  display: block;
  height: 20px;
  margin-top: 2px;
  width: 20px;
}
footer .social-links svg.twitter-icon {
  width: 16px;
  height: 16px;
}

/* Footer video section — matches site-wide .footer-video */
.footer-video {
  background-color: #000;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.page-bottom {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  background: none;
}
/* Top matches the stage wash; bottom lands on #000 so it joins `.footer-video` without a seam. */
.page-bottom .why-netra-faq {
  background: linear-gradient(180deg, #0c0c0d 0%, #000 100%);
}
.page-bottom .footer-video {
  background-color: #000;
}
.footer-video__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 auto;
  padding: 0 40px;
  max-width: 100%;
}
@media only screen and (min-width: 1200px) {
  .footer-video__media {
    max-width: 1100px;
  }
}
@media only screen and (min-width: 1366px) {
  .footer-video__media {
    max-width: 1200px;
  }
}
@media only screen and (min-width: 1680px) {
  .footer-video__media {
    max-width: 1250px;
  }
}
@media only screen and (max-width: 767.9px) {
  .footer-video__media {
    padding: 40px 25px 0;
  }
}
@media only screen and (max-width: 575.9px) {
  .footer-video__media {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.footer-video__frame {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 40%;
}
.footer-video__poster,
.footer-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: opacity 0.25s ease;
}
.footer-video__poster {
  z-index: 2;
  pointer-events: none;
}
.footer-video video {
  z-index: 1;
}
.footer-video:not(.is-video-ready) .footer-video__poster {
  opacity: 1;
}
.footer-video:not(.is-video-ready) video {
  opacity: 0;
  visibility: hidden;
}
.footer-video.is-video-ready .footer-video__poster {
  opacity: 0;
}
.footer-video.is-video-ready video {
  opacity: 1;
  visibility: visible;
}
@media only screen and (min-width: 768px) {
  .footer-video:not(.is-video-ready) video {
    opacity: 1;
    visibility: visible;
  }
}
.footer-video footer {
  flex-shrink: 0;
  margin-top: auto;
  position: relative;
  z-index: auto;
}