/* ============================================================================
   LimoPilot — design system
   Cream canvas · near-black ink · Limo Legacy gold
   Display: Nephilm (from the Limo Legacy brand kit) · Body: Inter · Labels: mono
   ========================================================================== */

/* ---------- 1. Fonts ---------------------------------------------------- */
@font-face {
  font-family: "Nephilm";
  src: url("fonts/Nephilm.woff2") format("woff2"),
       url("fonts/Nephilm.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nephilm";
  src: url("fonts/Nephilm-Italic.woff2") format("woff2"),
       url("fonts/Nephilm-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. Tokens --------------------------------------------------- */
:root {
  /* ---- Brand -------------------------------------------------------------
     These are the LimoPilot PRODUCT tokens, lifted from the app's own
     globals.css so the marketing site and the thing you log into are visibly
     the same software. Do not drift them independently — if the app's brand
     colour moves, move it here too. */
  --cream:      #F6F6F3;   /* app --color-page   */
  --cream-2:    #EFEFEA;
  --cream-3:    #E8E7E2;   /* app --color-line   */
  --ink:        #1B1B18;   /* app --color-ink    */
  --ink-2:      #15171C;   /* app --color-sidebar */
  --ink-3:      #1F222A;   /* app --color-sidebar-soft */
  --ink-line:   #2A2E37;   /* app --color-sidebar-line */
  --gold:       #C39A2E;   /* app --color-brand  */
  --gold-lt:    #D4AD4A;   /* app dark-mode brand — gold text on dark */
  --gold-tint:  #F6EED7;   /* app --color-brand-tint */
  /* The app's --color-brand-strong (#9C7A1C) only reaches 3.7:1 on the page
     colour, so small mono labels would fail. This is the same hue taken
     further down until it clears 4.5:1. Use --gold for fills, marks and
     anything on a dark surface; use this whenever gold carries small words. */
  --gold-dk:    #4A390A;

  /* ---- Data spectrum ------------------------------------------------------
     The app's six chart hues, in its fixed order, so a series means the same
     thing here as it does in the product. This is also what stops the site
     reading as a monochrome brochure — a software product has more than one
     colour in it. */
  --viz-1: #C39A2E;  /* gold    — revenue, the house series */
  --viz-2: #2F7FD4;  /* azure   — leads / volume            */
  --viz-3: #16A97F;  /* emerald — won / positive            */
  --viz-4: #A855C9;  /* violet  — forecast / modelled       */
  --viz-5: #E0663C;  /* coral   — cost / risk               */
  --viz-6: #2BB3C0;  /* teal    — secondary volume          */

  /* Status, from the app */
  --ok:     #2F7D57;  --ok-bg:   #E6F3EC;
  --info:   #2B6CAB;  --info-bg: #E7F0F9;
  --warn:   #8F6C13;  --warn-bg: #F6EDD6;
  --bad:    #B3402F;  --bad-bg:  #FAE9E6;

  /* ---- Liquid glass -------------------------------------------------------
     Three separable parts, same as the app: tint (what the glass is made of),
     rim (the specular highlight along the lit edge — the load-bearing detail;
     without it a translucent box just looks like a bug), and the blur. */
  --glass-tint:        rgb(255 255 255 / 0.72);
  --glass-tint-strong: rgb(255 255 255 / 0.88);
  --glass-rim:         rgb(255 255 255 / 0.9);
  --glass-rim-low:     rgb(255 255 255 / 0.5);
  --glass-edge:        rgb(27 27 24 / 0.08);
  --glass-blur:        20px;

  /* Semantic — light (default) */
  --bg:         var(--cream);
  --bg-alt:     var(--cream-2);
  --fg:         var(--ink);
  --fg-muted:   rgba(23, 20, 16, 0.74);
  --fg-faint:   rgba(23, 20, 16, 0.60);
  --line:       rgba(23, 20, 16, 0.13);
  --line-soft:  rgba(23, 20, 16, 0.07);
  --card:       rgba(255, 255, 255, 0.72);
  --card-brd:   rgb(27 27 24 / 0.08);
  --shadow:     0 1px 2px rgb(27 27 24 / .04), 0 8px 32px -8px rgb(27 27 24 / .10);

  /* Type */
  --f-display: "Nephilm", "Didot", "Bodoni MT", Georgia, serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xl:  clamp(2.9rem, 8.2vw, 7rem);
  --t-lg:  clamp(2.2rem, 5.4vw, 4.5rem);
  --t-md:  clamp(1.75rem, 3.4vw, 2.9rem);
  --t-sm:  clamp(1.28rem, 2.2vw, 1.7rem);
  --t-lead: clamp(1.05rem, 1.35vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-label: 0.72rem;

  /* Space */
  --s-1: 0.5rem;  --s-2: 0.875rem; --s-3: 1.25rem; --s-4: 1.75rem;
  --s-5: 2.5rem;  --s-6: 3.5rem;   --s-7: 5rem;    --s-8: 7rem;
  --pad-section: clamp(4.5rem, 11vh, 8.5rem);
  --wrap: 1240px;
  --wrap-narrow: 860px;
  --radius: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Dark surface — applied per-section, not per-page. Mirrors the app's .dark
   block: the sidebar blue-black rather than a warm brown, brand lifted to the
   dark-mode gold, and a smoked glass rather than the light material inverted. */
.theme-dark {
  --bg:        var(--ink-2);
  --bg-alt:    var(--ink-3);
  --fg:        #E9E8E4;
  --fg-muted:  rgba(233, 232, 228, 0.78);
  --fg-faint:  rgba(233, 232, 228, 0.60);
  --line:      var(--ink-line);
  --line-soft: rgba(233, 232, 228, 0.08);
  --card:      rgba(233, 232, 228, 0.05);
  --card-brd:  rgba(233, 232, 228, 0.12);
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 18px 44px -20px rgba(0,0,0,.7);

  /* Gold on a dark field has to be lifted or it goes muddy — same reason the
     app's .dark block moves --color-brand rather than reusing the light one. */
  --gold:      var(--gold-lt);
  --gold-dk:   var(--gold-lt);

  --viz-1: #D4AD4A; --viz-2: #6BA8E8; --viz-3: #4FC9A3;
  --viz-4: #C48CE0; --viz-5: #EF8A63; --viz-6: #5CCCD8;

  --glass-tint:        rgb(28 30 36 / 0.55);
  --glass-tint-strong: rgb(28 30 36 / 0.8);
  --glass-rim:         rgb(255 255 255 / 0.16);
  --glass-rim-low:     rgb(255 255 255 / 0.07);
  --glass-edge:        rgb(255 255 255 / 0.09);

  background: var(--bg);
  color: var(--fg);
  position: relative;
  isolation: isolate;
  /* `clip`, NOT `hidden`. overflow:hidden makes this a scroll container, and
     the pipeline's position:sticky child then has nothing to stick to — the
     whole scrubbed canvas silently stops working. overflow:clip contains the
     ::before aurora without creating a scrollport. */
  overflow: clip;
}

/* Dark sections carry their OWN aurora. The page-level one is behind them and
   an opaque dark panel would simply cover it — and a flat near-black section is
   exactly what made this read as a brochure rather than a product. */
.theme-dark::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  pointer-events: none;
  /* Deep jewel tones, NOT the lifted --viz-* chart palette. This is the whole
     trick: hue without lightness. The pastel chart colours top out at ~0.22
     opacity before small labels fail; these carry 0.80 — nearly four times the
     colour on screen, from the same hues. Charts keep the lifted palette,
     because there the colour has to separate series, not sit behind text. */
  background:
    radial-gradient(38% 46% at 18% 22%, #123E77, transparent 68%),
    radial-gradient(34% 44% at 82% 30%, #493408, transparent 68%),
    radial-gradient(40% 50% at 62% 88%, #432066, transparent 68%),
    radial-gradient(30% 40% at 8% 82%, #0A4049, transparent 68%);
  /* ⚠️ An earlier version of this comment claimed dark sections had no
     legibility constraint because the text is light. That is wrong, and
     backwards: a BRIGHT field under LIGHT text closes the contrast gap exactly
     the way a dark field under dark text does. Measured, small faint labels
     over a blob at full strength:

       opacity   azure  teal   gold   violet
       0.50      3.02   2.65   2.82   3.07
       0.72      2.19   1.85   2.00   2.23
       0.95      1.64   1.36   1.48   1.67

     All of that fails 4.5:1. So the colour cannot simply be turned up — it has
     to be moved off the text. The mask below drives the fields to full
     strength around the edges of the section and holds them near 20% through
     the middle band where the content sits, which is what lets the opacity go
     Masking the middle was tried and does not work: the content spans ~85% of
     the section, so there is almost no "edge" that is not also text. The fix
     is the colour itself — see the palette below. Measured at 0.80 with the
     deep tones: faint labels 4.57–5.05, muted 6.6–7.5, body 9.8–11.4. */
  opacity: 0.8;
  filter: blur(45px);
}

/* ---------- 3. Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.62;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video, canvas { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--gold); color: var(--ink); }

/* ---------- 4. Typography ----------------------------------------------- */
.display, h1, h2 {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 0.94;
  text-wrap: balance;
}
h1, .t-xl { font-size: var(--t-xl); }
h2, .t-lg { font-size: var(--t-lg); }
h3, .t-md {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-md);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.02;
}
h4, .t-sm {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: pretty;
  max-width: 62ch;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-dk);
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.theme-dark .eyebrow { color: var(--gold); }
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
  flex: none;
}
.eyebrow.is-centered { justify-content: center; }
.gold { color: var(--gold-dk); }
.theme-dark .gold { color: var(--gold); }
.muted { color: var(--fg-muted); }
.mono { font-family: var(--f-mono); font-size: 0.9em; letter-spacing: 0.02em; }
.num { font-variant-numeric: tabular-nums; }
em.serif { font-family: var(--f-display); font-style: italic; text-transform: none; }

/* ---------- 5. Layout --------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
/* Deliberately NO background here. The page aurora is fixed behind everything,
   and an opaque section would simply hide it. Light sections let it through;
   only .is-alt and .theme-dark paint, and .is-alt paints translucently so the
   colour still drifts underneath. */
.section {
  position: relative;
  padding-block: var(--pad-section);
  color: var(--fg);
}
.section.is-alt { background: rgb(232 231 226 / 0.45); }
.section.is-tight { padding-block: clamp(3rem, 7vh, 5rem); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.center .eyebrow { justify-content: center; }
.stack > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-5); }
.head { max-width: 74ch; }
.head .eyebrow { margin-bottom: var(--s-3); }
.head .lead { margin-top: var(--s-4); }
.grid { display: grid; gap: var(--s-4); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.hr { height: 1px; background: var(--line); border: 0; margin-block: var(--s-6); }

/* ---------- 6. Header / nav --------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding-block: 0.9rem;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(252, 248, 241, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}
.site-header.is-over-dark { color: var(--cream); }
.site-header.is-over-dark.is-stuck {
  background: rgba(23, 20, 16, 0.82);
  border-bottom-color: rgba(252, 248, 241, .14);
}
.site-header.is-hidden { transform: translateY(-102%); }
.site-header { transition: transform .45s var(--ease), background .4s var(--ease), border-color .4s var(--ease); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.brand { display: flex; align-items: center; gap: 0.62rem; flex: none; }
.brand-mark { width: 26px; height: 27px; flex: none; }
.brand-mark path { fill: var(--gold); }
.brand-word {
  font-family: var(--f-display);
  font-size: 1.24rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1;
  white-space: nowrap;
}
.brand-word i { font-style: normal; color: var(--gold-dk); }
.site-header.is-over-dark .brand-word i, .theme-dark .brand-word i { color: var(--gold); }
.brand-by {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: block;
  margin-top: 3px;
}
.site-header.is-over-dark .brand-by { color: rgba(252,248,241,.72); }

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav-links a {
  font-size: 0.855rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  padding-block: 0.3rem;
  opacity: 0.82;
  transition: opacity .25s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-links a[aria-current="page"] { opacity: 1; }
.nav-cta { display: flex; align-items: center; gap: 0.65rem; flex: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--ink);
  color: var(--cream);
  padding: 6rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: none; }
.mobile-menu a {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-block: 0.55rem;
  border-bottom: 1px solid rgba(252,248,241,.12);
}
.mobile-menu .btn { margin-top: var(--s-4); font-size: 0.9rem; }

/* ---------- 7. Buttons -------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.92rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 550;
  letter-spacing: 0.005em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--ease), border-color .3s, color .3s;
  text-align: center;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform .45s var(--ease);
}
.btn:hover { transform: translateY(-2px); color: var(--ink); border-color: var(--gold); }
.btn:hover::before { transform: none; }
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform .4s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn.is-gold { --btn-bg: var(--gold); --btn-fg: var(--ink); border-color: var(--gold); }
.btn.is-gold::before { background: var(--ink); }
.btn.is-gold:hover { color: var(--cream); border-color: var(--ink); }

.btn.is-ghost { --btn-bg: transparent; --btn-fg: var(--fg); border-color: var(--line); }
.btn.is-ghost::before { background: var(--fg); }
.btn.is-ghost:hover { color: var(--bg); border-color: var(--fg); }

.btn.is-sm { padding: 0.62rem 1.1rem; font-size: 0.8rem; }
.btn.is-lg { padding: 1.08rem 2rem; font-size: 0.98rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.center .btn-row { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 550;
  font-size: 0.92rem;
  color: var(--gold-dk);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap .3s var(--ease);
}
.theme-dark .link-arrow { color: var(--gold); }
.link-arrow:hover { gap: 0.8rem; }

/* ---------- 8. Reveal (JS-driven) --------------------------------------- */
.js [data-reveal] { opacity: 0; }
.js [data-reveal="up"]   { transform: translateY(26px); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translateX(-26px); }
.js [data-reveal="scale"]{ transform: scale(.965); }
.js .split-line { overflow: hidden; }
.js .split-word { display: inline-block; will-change: transform; }

/* ---------- 8b. The aurora ---------------------------------------------
   Four slow-drifting colour fields fixed behind the whole page. Ported from
   the app. Under-saturated and heavily blurred on purpose: this is the light
   source the glass works against, not decoration to look at directly. If you
   can name the shapes, it is too strong.
   ---------------------------------------------------------------------- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
/* The app runs this at 0.12 because live data sits on top of it. A marketing
   page carries no data, so this is ~4x that.

   THIS VALUE AND --gold-dk MOVE TOGETHER. The binding constraint is small gold
   text sitting directly on a blob, and the violet field is the darkest of the
   four, so it sets the floor. Measured, worst blob at full strength:

     aurora   #6B5310   #5C4710   #4A390A
     0.40      4.06      4.93      6.19
     0.45      3.79      4.60      5.78
     0.50      3.53      4.28      5.38   <- here
     0.55      3.29      3.99      5.01

   0.50 with #4A390A keeps 5.38:1 on a single blob and still clears 4.5:1
   where two blobs drift over each other. Push the aurora further and the gold
   has to go darker again — at which point it stops reading as gold at all. */
.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(95px);
  opacity: 0.5;
  will-change: transform;
}
.aurora i:nth-child(1), .aurora-1 {
  top: -14%; left: 58%; width: 44vw; height: 44vw;
  background: radial-gradient(circle, var(--viz-1), transparent 68%);
  animation: aurora-a 34s ease-in-out infinite alternate;
}
.aurora-2 {
  top: 22%; left: -12%; width: 38vw; height: 38vw;
  background: radial-gradient(circle, var(--viz-2), transparent 68%);
  animation: aurora-b 44s ease-in-out infinite alternate;
}
.aurora-3 {
  top: 56%; left: 62%; width: 40vw; height: 40vw;
  background: radial-gradient(circle, var(--viz-4), transparent 68%);
  animation: aurora-c 39s ease-in-out infinite alternate;
}
.aurora-4 {
  top: 70%; left: 10%; width: 34vw; height: 34vw;
  background: radial-gradient(circle, var(--viz-6), transparent 68%);
  animation: aurora-d 49s ease-in-out infinite alternate;
}
@keyframes aurora-a { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(-9vw, 7vh, 0) scale(1.18); } }
@keyframes aurora-b { from { transform: translate3d(0,0,0) scale(1.1); }  to { transform: translate3d(11vw,-6vh, 0) scale(0.92); } }
@keyframes aurora-c { from { transform: translate3d(0,0,0) scale(0.95); } to { transform: translate3d(-7vw,-9vh, 0) scale(1.15); } }
@keyframes aurora-d { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(8vw, 5vh, 0) scale(0.9); } }

/* Content has to sit above the fixed aurora.
   ⚠️ ONLY elements that have no position of their own may be listed here.
   .site-header is `position: fixed` and .mobile-menu is `position: fixed` with
   a translateY(-100%) to hide it off-screen. Including them here overwrote
   that, dropped both into normal flow, and put an open-looking menu at the top
   of the document with the whole page pushed down behind it — which reads as
   "the hero is gone". The app's own globals.css documents this exact trap for
   the same reason. Do not add a positioned element to this rule. */
main, .site-footer { position: relative; z-index: 1; }

/* ---------- 8c. Liquid glass -------------------------------------------
   tint + rim + blur. The rim is the load-bearing part — a translucent box
   without one reads as a rendering bug; with one it reads as a physical
   object. backdrop-filter composites on every paint, so this goes on whole
   panels only, never on list rows or table cells.
   ---------------------------------------------------------------------- */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 var(--glass-rim-low);
}
/* Denser text needs a more opaque body — legibility outranks the effect. */
.glass-strong {
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}
/* The gradient rim, layered over the inset highlights rather than replacing
   them, so a browser that ignores mask-composite still shows the effect. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    var(--glass-rim) 0%, transparent 38%, transparent 62%, var(--glass-rim-low) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
/* Pointer-tracked sheen. --mx/--my are written by motion.js on pointermove;
   unset they centre harmlessly, so a keyboard or touch user gets a static
   surface rather than a broken one. */
.glass-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
    rgb(255 255 255 / 0.5), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: -1;
}
.theme-dark .glass-spot::after { background: radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgb(255 255 255 / 0.10), transparent 60%); }
.glass-spot:hover::after { opacity: 1; }

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

/* ---------- 9. Cards ---------------------------------------------------- */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-brd);
  border-radius: var(--radius);
  padding: var(--s-4);
  transition: transform .45s var(--ease), border-color .45s, background .45s;
}
.card.is-hover:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}
.card h4 { margin-bottom: 0.55rem; }
.card p { color: var(--fg-muted); font-size: 0.965rem; }
.card-num {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--gold-dk);
  display: block;
  margin-bottom: var(--s-3);
}
.theme-dark .card-num { color: var(--gold); }
.card-ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--card-brd);
  border-radius: 10px;
  margin-bottom: var(--s-3);
  color: var(--gold-dk);
}
.theme-dark .card-ico { color: var(--gold); }
.card-ico svg { width: 19px; height: 19px; }

/* Numbered problem list */
.prob {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
  align-items: start;
}
.prob:last-child { border-bottom: 1px solid var(--line); }
.prob-n {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--gold-dk);
  padding-top: 0.35rem;
  letter-spacing: .1em;
}
.theme-dark .prob-n { color: var(--gold); }
.prob h4 { font-size: 1.06rem; margin-bottom: 0.2rem; }
.prob p { color: var(--fg-muted); font-size: 0.95rem; }

/* ---------- 10. Stats --------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.stat { background: var(--bg); padding: var(--s-4) var(--s-3); }
.stat-n {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 0.06em;
}
.stat-n .suf { color: var(--gold-dk); }
.theme-dark .stat-n .suf { color: var(--gold); }
.stat-l {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fg-muted);
  margin-top: 0.7rem;
  line-height: 1.5;
}

/* ---------- 11. Marquee ------------------------------------------------- */
.marquee {
  --speed: 38s;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
  display: flex;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  flex: none;
  min-width: 100%;
  animation: marquee var(--speed) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.marquee-track span::after {
  content: "";
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
  flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 12. The pipeline (scroll-scrubbed canvas) ------------------- */
.pipeline { position: relative; }
.pipeline-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
/* Absolute fill, so the canvas can never collapse to zero while measuring. */
.pipeline-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pipeline-cap {
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 6vh, 3.5rem);
  transform: translateX(-50%);
  width: min(100% - 3rem, 640px);
  text-align: center;
  pointer-events: none;
  /* Grid so all five steps occupy ONE cell. They used to sit in normal flow —
     the inactive ones were only opacity:0, so they still took up space and made
     this box five steps tall. Anchored at the bottom, it then reached up into
     the middle of the canvas and collided with the drawn station cards. */
  display: grid;
}
.pipeline-cap h3 { margin-bottom: 0.6rem; }
.pipeline-cap p { color: var(--fg-muted); font-size: 1rem; margin-inline: auto; max-width: 46ch; }
.pipeline-step {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.pipeline-step.is-active { opacity: 1; }
.pipeline-prog {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 4vh, 2rem);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.pipeline-prog i {
  width: 30px; height: 2px;
  background: var(--line);
  display: block;
}
.pipeline-prog i.on { background: var(--gold); }

/* ---------- 13. Portal frame (product demo) ---------------------------- */
.frame {
  border: 1px solid var(--card-brd);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: var(--shadow);
}
.frame-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--card-brd);
  background: var(--card);
}
.frame-dots { display: flex; gap: 6px; }
.frame-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.frame-url {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
  margin-inline: auto;
  padding: 0.2rem 0.8rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
}
.frame-body { padding: clamp(1rem, 3vw, 1.75rem); min-height: 380px; }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--s-4); }
.tab {
  background: none;
  border: 1px solid var(--card-brd);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .3s var(--ease);
  color: var(--fg-muted);
}
.tab:hover { color: var(--fg); border-color: var(--fg-faint); }
.tab[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.panel[hidden] { display: none; }

/* Chat / inbox demo */
.chat { display: flex; flex-direction: column; gap: 0.6rem; }
.msg {
  max-width: 78%;
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
}
/* Hidden only when JS is present to reveal them again — an unconditional
   opacity:0 here leaves the inbox permanently blank if the script fails. */
.js .msg { opacity: 0; transform: translateY(8px); }
.msg.in  { align-self: flex-start; background: var(--card); border: 1px solid var(--card-brd); border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: var(--gold); color: var(--ink); border-bottom-right-radius: 4px; }
.msg.is-shown { opacity: 1; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.msg-meta {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.28rem;
  display: block;
}
.typing { display: inline-flex; gap: 4px; padding: 0.35rem 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: .9; } }

/* Mini KPI row inside the frame */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.7rem; margin-bottom: var(--s-3); }
.kpi { background: var(--card); border: 1px solid var(--card-brd); border-radius: 10px; padding: 0.85rem 0.95rem; }
.kpi-l { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.kpi-v { font-size: 1.42rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 0.28rem; letter-spacing: -0.02em; }
.kpi-d { font-size: 0.72rem; color: var(--gold-dk); margin-top: 0.15rem; }
.theme-dark .kpi-d { color: var(--gold); }

/* Bar chart — coloured across the data spectrum, not a wall of one hue.
   A single-colour chart is the tell that a page is a brochure. */
.bars { display: flex; align-items: flex-end; gap: 5px; height: 120px; margin-top: var(--s-3); }
.bars i {
  flex: 1; border-radius: 3px 3px 0 0; height: 10%; display: block;
  transition: height 1s var(--ease);
  background: var(--viz-2); opacity: .55;
}
.bars i:nth-child(6n+2) { background: var(--viz-3); }
.bars i:nth-child(6n+3) { background: var(--viz-6); }
.bars i:nth-child(6n+4) { background: var(--viz-4); }
.bars i:nth-child(6n+5) { background: var(--viz-2); }
.bars i:nth-child(6n)   { background: var(--viz-3); }
.bars i.hot { background: var(--viz-1); opacity: 1; }

/* Quote card */
.quote-card { background: var(--card); border: 1px solid var(--card-brd); border-radius: var(--radius); overflow: hidden; }
.quote-hd { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--card-brd); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.quote-li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 1.1rem; font-size: 0.9rem; border-bottom: 1px solid var(--line-soft); }
.quote-li span:last-child { font-variant-numeric: tabular-nums; }
.quote-tot { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.1rem; font-weight: 650; font-size: 1.05rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.28rem 0.62rem; border-radius: 999px;
  border: 1px solid var(--card-brd); color: var(--fg-muted);
}
.pill.ok { color: var(--gold-dk); border-color: currentColor; }
.theme-dark .pill.ok { color: var(--gold); }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Pricing rules list */
.rules li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.9rem; align-items: center;
  padding: 0.62rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.92rem;
}
.rules li:last-child { border-bottom: 0; }
.rules .v { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.rules .who { color: var(--fg-faint); font-size: 0.78rem; }

/* Live tracking */
.track { display: grid; gap: 0.9rem; }
.track-map {
  position: relative; border: 1px solid var(--card-brd); border-radius: 12px;
  background: var(--card); overflow: hidden;
}
.track-map svg { width: 100%; height: auto; display: block; }
.track-route { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 5 6; }
.track-done { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }
.track-stop { fill: var(--bg); stroke: var(--gold); stroke-width: 2; }
.track-car { fill: var(--gold); }
.track-car-ring { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: .5; }
.js .track-car-ring { animation: pingRing 2.2s ease-out infinite; transform-origin: center; }
@keyframes pingRing { 0% { r: 7; opacity: .6; } 100% { r: 17; opacity: 0; } }
.track-label {
  font-family: var(--f-mono); font-size: 8px; letter-spacing: .1em;
  text-transform: uppercase; fill: var(--fg-faint);
}
.track-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 0.7rem; }

/* Fleet list */
.fleet li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.9rem; align-items: center;
  padding: 0.68rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.92rem;
}
.fleet li:last-child { border-bottom: 0; }
.fleet .cap { color: var(--fg-muted); font-size: 0.82rem; }

/* Calendar grid */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal b {
  font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-faint); text-align: center; padding-bottom: 4px; font-weight: 400;
}
.cal i {
  aspect-ratio: 1; border: 1px solid var(--line-soft); border-radius: 6px;
  display: grid; place-items: center; font-size: 0.72rem; font-style: normal;
  color: var(--fg-faint); font-variant-numeric: tabular-nums;
}
.cal i.book { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 600; }
.cal i.new { border-color: var(--gold); color: var(--gold-dk); }
.theme-dark .cal i.new { color: var(--gold); }

/* ---------- 14. Accordion ----------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 1.35rem 3rem 1.35rem 0;
  font-size: 1.06rem;
  font-weight: 550;
  cursor: pointer;
  position: relative;
  line-height: 1.4;
  transition: color .3s;
}
.acc-btn:hover { color: var(--gold-dk); }
.theme-dark .acc-btn:hover { color: var(--gold); }
.acc-btn::after {
  content: "";
  position: absolute;
  right: 0.35rem; top: 50%;
  width: 13px; height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  transition: transform .4s var(--ease);
  color: var(--gold-dk);
}
.theme-dark .acc-btn::after { color: var(--gold); }
.acc-btn[aria-expanded="true"]::after { transform: rotate(135deg); }
.acc-panel { overflow: hidden; height: 0; }
.acc-panel > div { padding: 0 3rem 1.5rem 0; color: var(--fg-muted); max-width: 70ch; }
.acc-panel p + p { margin-top: 0.8rem; }

/* ---------- 15. Pricing ------------------------------------------------- */
.price-card {
  border: 1px solid var(--card-brd);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: clamp(1.75rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.price-card.is-feature { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow); }
.price-tag {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--f-display);
  line-height: 1;
  margin-block: var(--s-3) var(--s-2);
}
.price-tag .amt { font-size: clamp(3.2rem, 7vw, 5rem); font-variant-numeric: tabular-nums; }
.price-tag .per { font-family: var(--f-body); font-size: 1rem; color: var(--fg-muted); letter-spacing: 0; text-transform: none; }
.price-sub { font-size: 0.95rem; color: var(--fg-muted); }
.ribbon {
  position: absolute;
  top: 1.15rem; right: -3.1rem;
  transform: rotate(38deg);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.4rem 3.4rem;
}
.checks { margin-top: var(--s-4); }
.checks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  padding-block: 0.5rem;
  font-size: 0.965rem;
  align-items: start;
}
.checks li::before {
  content: "";
  width: 16px; height: 16px;
  margin-top: 0.28rem;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ROI calculator */
.calc { display: grid; gap: var(--s-4); }
.calc-row label { display: block; font-size: 0.88rem; font-weight: 550; margin-bottom: 0.5rem; }
.calc-row .hint { font-family: var(--f-mono); font-size: 0.68rem; color: var(--fg-faint); letter-spacing: .08em; }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; background: var(--line); border-radius: 99px; outline: none; margin: 0.9rem 0 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--bg); cursor: grab;
  box-shadow: 0 2px 8px rgba(23,20,16,.28);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--bg);
  background: var(--gold); cursor: grab;
}
.calc-out {
  background: var(--card); border: 1px solid var(--card-brd);
  border-radius: var(--radius); padding: var(--s-4); text-align: center;
}
.calc-out .big {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--gold-dk);
}
.theme-dark .calc-out .big { color: var(--gold); }

/* ---------- 16. Table (compare) ----------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); }
.cmp { min-width: 720px; font-size: 0.92rem; }
.cmp th, .cmp td { padding: 0.9rem 1rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cmp thead th {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-muted); background: var(--bg-alt);
  position: sticky; top: 0; z-index: 2; font-weight: 500;
}
.cmp tbody th { font-weight: 550; font-size: 0.95rem; }
.cmp td.is-us { background: rgba(201, 168, 92, 0.09); }
.cmp .yes { color: var(--gold-dk); font-weight: 600; }
.theme-dark .cmp .yes { color: var(--gold); }
.cmp .no { color: var(--fg-faint); }

/* ---------- 17. Milestones (intelligence) ------------------------------- */
.ms { border-top: 1px solid var(--line); }
.ms-item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.ms-n { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: .12em; color: var(--gold-dk); padding-top: 0.3rem; }
.theme-dark .ms-n { color: var(--gold); }
.ms h4 { font-size: 1.02rem; margin-bottom: 0.25rem; }
.ms p { font-size: 0.93rem; color: var(--fg-muted); }
.ms .refused {
  margin-top: 0.55rem;
  font-size: 0.87rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--gold);
  color: var(--fg-faint);
}
.ms .refused b { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 0.15rem; color: var(--gold-dk); font-weight: 500; }
.theme-dark .ms .refused b { color: var(--gold); }

/* ---------- 17b. Phase headers (intelligence) --------------------------- */
/* Each phase owns a hue, the same way the app gives every section an --accent.
   Ten headings that look alike force you to read the text to know where you
   are; ten that each own a colour tell you before you have focused on any. */
.phase {
  --accent: var(--viz-1);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.95rem;
  align-items: center;
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
  padding-top: var(--s-3);
  border-top: 2px solid var(--accent);
}
.phase:first-of-type { margin-top: var(--s-4); }
/* The viz hues are chart-fill colours. At 10px they land between 2.3:1 and
   4:1 on the page, so anything that carries WORDS or a thin stroke uses the
   accent mixed down toward the ink — same hue, enough contrast. The 2px rule
   on .phase and the icon's tinted plate keep the raw colour, because a large
   block of colour has no legibility bar to clear. */
.phase .phase-ico {
  grid-row: 1 / 3;
  width: 42px; height: 42px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  color: var(--fg-muted);
  color: color-mix(in srgb, var(--accent) 58%, var(--ink));
  border: 1px solid currentColor;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.phase .phase-ico svg { width: 20px; height: 20px; }
.phase .n {
  font-family: var(--f-mono); font-size: 0.63rem; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  color: color-mix(in srgb, var(--accent) 55%, var(--ink));
  align-self: end;
}
.theme-dark .phase .n,
.theme-dark .phase .phase-ico {
  color: color-mix(in srgb, var(--accent) 72%, #E9E8E4);
}
.phase h3 { font-size: clamp(1.3rem, 2.2vw, 1.85rem); align-self: start; }
.phase .mechline {
  grid-column: 1 / -1;
  font-size: 0.9rem; color: var(--fg-muted);
  margin-top: 0.7rem;
}

/* Scorecard */
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); }
.score {
  border: 1px solid var(--card-brd); border-radius: var(--radius);
  padding: var(--s-4) var(--s-3); text-align: center; background: var(--card);
}
.score.is-us { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.score .v {
  font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.score.is-us .v { color: var(--gold-dk); }
.theme-dark .score.is-us .v { color: var(--gold); }
.score .of { font-family: var(--f-mono); font-size: .7rem; color: var(--fg-faint); }
.score .who { font-weight: 600; margin-top: .75rem; font-size: .95rem; }
.score .sub { font-size: .78rem; color: var(--fg-faint); margin-top: .15rem; }

/* ---------- 18. Testimonials -------------------------------------------- */
.testi {
  background: var(--card);
  border: 1px solid var(--card-brd);
  border-radius: var(--radius);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.testi.is-open { border-style: dashed; }
.testi-q { font-family: var(--f-display); font-size: 2rem; color: var(--gold-dk); line-height: 1; }
.theme-dark .testi-q { color: var(--gold); }
.testi p { color: var(--fg-muted); font-size: 0.95rem; flex: 1; }

/* ---------- 19. Footer -------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--cream); padding-block: var(--s-7) var(--s-5); }
.site-footer a { color: rgba(252, 248, 241, 0.7); transition: color .25s; font-size: 0.92rem; }
.site-footer a:hover { color: var(--gold); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s-5); }
.foot-h {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.17em;
  text-transform: uppercase; color: rgba(252,248,241,.62); margin-bottom: var(--s-3);
}
.foot-list li { padding-block: 0.28rem; }
.foot-bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(252, 248, 241, 0.13);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: rgba(252, 248, 241, 0.5);
}
.foot-brand .brand-word { font-size: 1.5rem; }
.foot-brand .brand-mark { width: 30px; height: 31px; }
.foot-legacy {
  margin-top: var(--s-3);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.82rem;
  color: rgba(252, 248, 241, 0.55);
}
.foot-legacy svg { width: 22px; height: 23px; flex: none; }
.foot-legacy svg path { fill: var(--gold); }

/* ---------- 19b. Channel list (lights up on scroll) --------------------- */
.chan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.chan li {
  display: flex; align-items: center; gap: 0.65rem;
  font-size: 0.9rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--card-brd); border-radius: 9px;
  color: var(--fg-faint);
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.chan li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); flex: none;
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.chan li.lit { color: var(--fg); border-color: rgba(201, 168, 92, .55); }
.chan li.lit::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(201, 168, 92, .18); }

/* ---------- 19c. Numbered steps ----------------------------------------- */
.steps { counter-reset: step; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  padding-block: var(--s-4); border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n {
  counter-increment: step;
  font-family: var(--f-display); font-size: 1.6rem; line-height: 1;
  color: var(--gold-dk); min-width: 2.4rem;
}
.theme-dark .step-n { color: var(--gold); }
.step-n::before { content: "0" counter(step); }
.step h4 { margin-bottom: 0.35rem; }
.step p { color: var(--fg-muted); font-size: 0.965rem; }
.step .when {
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-faint); margin-top: 0.5rem; display: block;
}

/* ---------- 19d. Feature row (alternating) ------------------------------ */
.feat { padding-block: var(--s-6); border-top: 1px solid var(--line); }
.feat:first-of-type { border-top: 0; }
.feat .split { align-items: center; }
.feat:nth-child(even) .feat-media { order: -1; }
.feat-media {
  background: var(--card); border: 1px solid var(--card-brd);
  border-radius: var(--radius-lg); padding: clamp(1.1rem, 2.5vw, 1.9rem);
  min-height: 240px; display: flex; flex-direction: column; justify-content: center;
}
.feat .fixes {
  margin-top: var(--s-3); padding-left: 0.9rem;
  border-left: 2px solid var(--gold); font-size: 0.93rem; color: var(--fg-muted);
}
.feat .fixes b {
  font-family: var(--f-mono); font-size: 0.63rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-dk); display: block;
  margin-bottom: 0.2rem; font-weight: 500;
}
.theme-dark .feat .fixes b { color: var(--gold); }
@media (max-width: 900px) {
  .feat:nth-child(even) .feat-media { order: 0; }
  .chan { grid-template-columns: 1fr; }
}

/* ---------- 20. Cursor -------------------------------------------------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  opacity: 0;
  will-change: transform;
}
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
}

/* ---------- 21. Skip link + a11y ---------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 0.8rem 1.2rem;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- 22. Hero ---------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: var(--s-6);
  overflow: hidden;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000, transparent 78%);
  pointer-events: none;
}
/* No width here — this element also carries .wrap, and a `width: 100%` declared
   later in the file would beat .wrap's constrained width and throw the hero
   full-bleed while every other section stayed at the wrap. */
.hero-inner { position: relative; z-index: 1; }
.hero h1 { margin-block: var(--s-4) var(--s-4); }
.hero .lead { font-size: clamp(1.08rem, 1.5vw, 1.35rem); }
.hero-foot {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-5);
  align-items: center;
}
.hero-foot .bit { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: var(--fg-muted); }
.hero-foot .bit svg { width: 16px; height: 16px; color: var(--gold-dk); flex: none; }
.scroll-cue {
  position: absolute;
  left: 50%; bottom: 1.75rem;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  /* Hidden by default. With the product visual in place the hero is usually
     taller than the viewport, and an absolutely-positioned cue then lands on
     top of .hero-foot. Only shown when there is genuinely room below it. */
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
@media (min-height: 940px) {
  .scroll-cue { display: flex; }
}
.scroll-cue i { width: 1px; height: 34px; background: linear-gradient(var(--gold), transparent); display: block; }

/* ---------- 22b. Hero product visual ------------------------------------ */
.hero-split {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
/* --t-xl is tuned for a full-width headline. In a half-width column it wraps to
   four lines and pushes the whole hero past the fold, so the split hero gets its
   own smaller step. */
.hero-copy h1 { font-size: clamp(2.5rem, 5.2vw, 4.9rem); }
.hero-vis {
  position: relative;
  min-height: 370px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the dashboard sitting behind */
.hv-dash {
  position: absolute;
  inset: 6% -4% 14% 0;
  background: var(--ink);
  border: 1px solid rgba(201, 168, 92, .28);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 30px 70px -30px rgba(23, 20, 16, .55);
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
  overflow: hidden;
}
.hv-dash::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(252,248,241,.05));
}
.hv-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 1rem; }
.hv-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(252,248,241,.2); display: block; }
.hv-bar span {
  margin-left: auto; font-family: var(--f-mono); font-size: .55rem;
  letter-spacing: .12em; color: rgba(252,248,241,.62);
}
.hv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: .9rem; }
.hv-kpi { background: rgba(252,248,241,.05); border: 1px solid rgba(252,248,241,.09); border-radius: 8px; padding: .5rem .55rem; }
.hv-kpi b { display: block; font-size: .95rem; color: var(--cream); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hv-kpi span { font-family: var(--f-mono); font-size: .52rem; letter-spacing: .11em; text-transform: uppercase; color: rgba(252,248,241,.66); }
.hv-chart { display: flex; align-items: flex-end; gap: 3px; height: 54px; }
.hv-chart i { flex: 1; background: rgba(252,248,241,.14); border-radius: 2px 2px 0 0; display: block; }
.hv-chart i.on { background: var(--gold); }

/* the phone in front */
.hv-phone {
  position: relative;
  z-index: 2;
  width: min(58%, 236px);
  margin-left: auto;
  margin-right: -2%;
  aspect-ratio: 236 / 470;
  background: linear-gradient(160deg, #201b15, #100d0a);
  border: 1px solid rgba(201, 168, 92, .34);
  border-radius: 30px;
  padding: 1.15rem .8rem;
  box-shadow: 0 40px 80px -28px rgba(23, 20, 16, .7), inset 0 1px 0 rgba(252,248,241,.08);
  overflow: hidden;
}
.hv-notch {
  width: 46%; height: 5px; border-radius: 99px;
  background: rgba(252,248,241,.18); margin: 0 auto .9rem;
}
.hv-time {
  font-family: var(--f-display); font-size: 2.5rem; line-height: 1;
  color: var(--cream); text-align: center; letter-spacing: .02em;
}
.hv-date {
  font-family: var(--f-mono); font-size: .52rem; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(252,248,241,.66);
  text-align: center; margin: .35rem 0 1.1rem;
}
.hv-notif {
  background: rgba(252,248,241,.09);
  border: 1px solid rgba(201,168,92,.34);
  border-radius: 12px;
  padding: .6rem .65rem;
  margin-bottom: .5rem;
  backdrop-filter: blur(6px);
}
.hv-notif .app {
  font-family: var(--f-mono); font-size: .46rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .28rem;
}
.hv-notif .ttl { font-size: .82rem; font-weight: 650; color: var(--cream); letter-spacing: -.01em; }
.hv-notif .bod { font-size: .63rem; line-height: 1.45; color: rgba(252,248,241,.76); margin-top: .18rem; }
.hv-notif.is-dim { opacity: .42; border-color: rgba(252,248,241,.12); }
.js .hv-notif { opacity: 0; transform: translateY(10px); }
.js .hv-notif.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .hv-notif.is-dim.is-in { opacity: .42; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-vis { min-height: 340px; margin-top: 1rem; }
  .hv-phone { margin-right: auto; width: min(62%, 220px); }
  .hv-dash { inset: 8% 0 16% 0; transform: none; }
}

/* ---------- 22c. The race (problem section) ----------------------------- */
.race {
  border: 1px solid var(--card-brd);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.race-hd {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--fg-muted);
  padding-bottom: .9rem; border-bottom: 1px solid var(--line); margin-bottom: .4rem;
}
.race li {
  display: grid;
  grid-template-columns: 12.5rem 1fr auto;
  gap: .9rem;
  align-items: center;
  padding: .62rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.race li:last-child { border-bottom: 0; }
.race .who { font-size: .9rem; color: var(--fg-muted); }
.race .track {
  height: 6px; border-radius: 99px; background: var(--line);
  position: relative; overflow: hidden;
}
.race .track i {
  position: absolute; inset: 0 auto 0 0;
  width: var(--p, 0%);
  background: var(--fg-faint);
  border-radius: 99px;
  display: block;
  transform-origin: left;
}
.js .race .track i { transform: scaleX(0); }
.js .race .track i.is-in { transform: scaleX(1); transition: transform 1.1s var(--ease); }
.race .when {
  font-family: var(--f-mono); font-size: .72rem; color: var(--fg-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.race li.win .who { color: var(--fg); font-weight: 600; }
.race li.win .track i { background: var(--gold); }
.race li.win .when { color: var(--gold-dk); font-weight: 600; }
.theme-dark .race li.win .when { color: var(--gold); }
.race-foot {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--fg-muted);
}
@media (max-width: 620px) {
  .race li { grid-template-columns: 1fr auto; }
  .race li .track { grid-column: 1 / -1; order: 3; }
}

/* ---------- 22d. 168-hour coverage grid --------------------------------- */
.hours { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.25rem); }
.hours-col .hd {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .8rem;
}
.hours-col .hd b { font-size: .95rem; }
.hours-col .hd span {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; color: var(--fg-faint);
}
.hours-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
}
.hours-grid i {
  aspect-ratio: 1;
  border-radius: 1.5px;
  background: var(--line-soft);
  display: block;
}
.hours-grid i.on { background: var(--gold); }
.hours-col.is-them .hours-grid i.on { background: var(--fg-faint); }
.hours-key {
  margin-top: .8rem; font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint);
}
@media (max-width: 620px) { .hours { grid-template-columns: 1fr; } }

/* ---------- 22e. Mechanism diagrams (intelligence) ---------------------- */
.mech {
  border: 1px solid var(--card-brd);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.1rem 1.2rem;
  margin-top: var(--s-3);
}
.mech svg { width: 100%; height: auto; display: block; }
.mech-cap {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-faint); margin-top: .8rem;
}
.mech .lbl { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--fg-muted); }
.mech .lbl-gold { fill: var(--gold); }
.mech .box { fill: none; stroke: var(--card-brd); stroke-width: 1; }
.mech .box-on { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.mech .flow { fill: none; stroke: var(--line); stroke-width: 1.5; }
.mech .flow-on { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.mech .dot { fill: var(--gold); }
.mech .dot-off { fill: var(--line); }
.mech .barfill { fill: var(--gold); }
.mech .barempty { fill: var(--line); }
.mech .hatch { fill: url(#nohatch); }

/* phase header gets a mark */
.phase-vis { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; margin-top: var(--s-3); }
.phase-ico {
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--gold); border-radius: 11px;
  display: grid; place-items: center; color: var(--gold);
}
.phase-ico svg { width: 22px; height: 22px; }
.phase-vis p { font-size: .92rem; color: var(--fg-muted); }

/* ---------- 22f. Connect — 3D network ----------------------------------
   An isometric operator network. Real 3D transforms rather than a drawing of
   one, so it tilts and the nodes sit at genuine depths.
   ---------------------------------------------------------------------- */
.net3d {
  position: relative;
  perspective: 1100px;
  perspective-origin: 50% 40%;
  min-height: clamp(300px, 42vw, 460px);
  display: grid;
  place-items: center;
  /* The stage is rotated, so its bounding box is wider than its layout width
     and pushed the page 19px wide at 375. clip contains that without creating
     a scroll container. */
  overflow: clip;
}
.net3d-stage {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1 / 0.72;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-32deg);
  animation: netTilt 26s ease-in-out infinite alternate;
}
@keyframes netTilt {
  from { transform: rotateX(58deg) rotateZ(-32deg); }
  to   { transform: rotateX(50deg) rotateZ(-18deg); }
}
.net3d-plate {
  position: absolute;
  inset: 0;
  border: 1px solid var(--card-brd);
  border-radius: 18px;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 100% 11.11%,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 11.11% 100%;
  transform: translateZ(0);
}
.net3d-node {
  position: absolute;
  width: 15%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  translate: -50% -50%;
}
.net3d-node b {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--glass-tint-strong);
  border: 1px solid var(--card-brd);
  box-shadow: 0 10px 22px -10px rgb(27 27 24 / .4);
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: .06em;
  color: var(--fg-muted);
  transform: translateZ(var(--z, 34px));
}
.net3d-node i {                       /* the drop shadow leg down to the plate */
  position: absolute;
  left: 50%; top: 50%;
  width: 1px;
  height: var(--z, 34px);
  background: linear-gradient(var(--card-brd), transparent);
  transform: translate(-50%, 0) rotateX(-90deg);
  transform-origin: top;
}
.net3d-node.is-hub b {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 16px 34px -12px rgb(195 154 46 / .7);
}
.net3d-node.is-new b { border-color: var(--gold); border-style: dashed; color: var(--gold-dk); }
.net3d-link {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform-origin: left center;
  opacity: .55;
  border-radius: 2px;
}
.js .net3d-link { transform: scaleX(0); transform-origin: left center; }
.js .net3d-link.is-in { transform: scaleX(1); transition: transform 1s var(--ease); }
@media (max-width: 620px) {
  .net3d-stage { width: min(88%, 420px); }
  .net3d-node b { font-size: .5rem; border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .net3d-stage { animation: none; }
  .js .net3d-link { transform: none; }
}

/* ---------- 22g. The gate — free vs paid -------------------------------- */
.gate { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: stretch; }
.gate-col { border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); position: relative; }
.gate-col.is-free { border: 1px solid color-mix(in srgb, var(--viz-3) 45%, transparent); background: color-mix(in srgb, var(--viz-3) 7%, transparent); }
.gate-col.is-paid { border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.gate-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--s-3); }
.gate-hd b { font-size: 1.05rem; }
.gate-tag {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px; border: 1px solid currentColor;
}
.gate-col.is-free .gate-tag { color: color-mix(in srgb, var(--viz-3) 62%, var(--ink)); }
.gate-col.is-paid .gate-tag { color: var(--gold-dk); }
.gate-list li {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start;
  padding-block: .45rem; font-size: .95rem;
}
.gate-list li::before {
  content: ""; width: 15px; height: 15px; margin-top: .3rem; border-radius: 50%; flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center/12px no-repeat; mask: var(--ico) center/12px no-repeat;
}
.gate-col.is-free .gate-list li::before {
  color: color-mix(in srgb, var(--viz-3) 62%, var(--ink));
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gate-col.is-paid .gate-list li::before {
  color: var(--gold-dk);
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='9' rx='2' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M8 11V7.5a4 4 0 018 0V11' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
}
.gate-div { display: grid; place-items: center; }
.gate-div span {
  writing-mode: vertical-rl;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-faint); padding-block: 1rem;
  border-left: 1px dashed var(--line); border-right: 1px dashed var(--line);
  padding-inline: .8rem; height: 100%; display: grid; place-items: center;
}
@media (max-width: 900px) {
  .gate { grid-template-columns: 1fr; }
  .gate-div span { writing-mode: horizontal-tb; height: auto; border: 0; border-block: 1px dashed var(--line); width: 100%; text-align: center; padding-block: .7rem; }
}

/* ---------- 22h. Cascading tiers (3D stack) ----------------------------- */
.tiers { perspective: 900px; display: grid; gap: .6rem; }
.tier {
  border: 1px solid var(--card-brd);
  border-radius: 12px;
  padding: .85rem 1.1rem;
  background: var(--glass-tint);
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  transform: rotateX(8deg) translateZ(0);
  transition: transform .4s var(--ease), border-color .4s;
}
.tier:hover { transform: rotateX(0deg) translateZ(14px); border-color: var(--gold); }
.tier .n {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em;
  color: var(--gold-dk); text-transform: uppercase;
}
.tier .who { font-size: .95rem; font-weight: 550; }
.tier .when { font-family: var(--f-mono); font-size: .72rem; color: var(--fg-faint); }
.tier.is-won { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--glass-tint)); }

/* ---------- 22i. Cost comparison chart ---------------------------------- */
.costs { display: grid; gap: .55rem; }
.cost-row { display: grid; grid-template-columns: 13rem 1fr 6.5rem; gap: 1rem; align-items: center; }
.cost-row .who { font-size: .92rem; }
.cost-row .who small { display: block; color: var(--fg-faint); font-size: .76rem; }
.cost-bar { height: 26px; border-radius: 5px; background: var(--line-soft); position: relative; overflow: hidden; }
.cost-bar i {
  position: absolute; inset: 0 auto 0 0; display: block; border-radius: 5px;
  width: var(--p, 10%);
  background: var(--c, var(--viz-2));
  transform-origin: left;
}
.js .cost-bar i { transform: scaleX(0); }
.js .cost-bar i.is-in { transform: scaleX(1); transition: transform 1.1s var(--ease); }
.cost-row .amt { font-family: var(--f-mono); font-size: .82rem; font-variant-numeric: tabular-nums; text-align: right; }
.cost-row.is-us .who { font-weight: 700; }
.cost-row.is-us .amt { color: var(--gold-dk); font-weight: 700; }
@media (max-width: 700px) {
  .cost-row { grid-template-columns: 1fr auto; }
  .cost-bar { grid-column: 1 / -1; order: 3; }
}

/* ---------- 22j. Capability depth rows (compare) ------------------------ */
.depth { border-top: 1px solid var(--line); }
.depth-row { border-bottom: 1px solid var(--line); padding-block: var(--s-4); }
.depth-q { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-bottom: var(--s-3); }
.depth-q h4 { font-size: 1.1rem; }
.depth-q .tagn { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; color: var(--gold-dk); text-transform: uppercase; }
.depth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.depth-cell {
  border: 1px solid var(--card-brd); border-radius: 11px; padding: .9rem 1rem;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.depth-cell.is-us { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.depth-cell .lbl {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-muted); display: block; margin-bottom: .4rem;
}
.depth-cell.is-us .lbl { color: var(--gold-dk); }
.depth-cell p { font-size: .88rem; color: var(--fg-muted); }
.depth-cell .verdict { font-size: .88rem; font-weight: 650; display: block; margin-bottom: .25rem; }
.depth-cell.no .verdict { color: var(--fg-muted); }

/* ---------- 23. Page hero (inner pages) --------------------------------- */
.page-hero { padding-top: clamp(8rem, 16vh, 11rem); padding-bottom: var(--pad-section); }
.crumbs {
  display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fg-faint); margin-bottom: var(--s-4);
}
.crumbs a:hover { color: var(--gold-dk); }
.crumbs li { display: flex; align-items: center; gap: 0.45rem; }
.crumbs li + li::before { content: "/"; opacity: 0.45; }

/* ---------- 23b. Prose (legal pages) ------------------------------------ */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--f-body); font-size: 1.06rem; font-weight: 650;
  text-transform: none; letter-spacing: -0.01em;
  margin-top: var(--s-4); margin-bottom: 0.4rem;
}
.prose p { color: var(--fg-muted); margin-bottom: var(--s-3); }
.prose ul { margin-bottom: var(--s-3); }
.prose ul li {
  color: var(--fg-muted); position: relative;
  padding-left: 1.2rem; margin-bottom: 0.5rem;
}
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.prose a { color: var(--gold-dk); border-bottom: 1px solid currentColor; }
.prose strong { color: var(--fg); }
.prose .updated {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-faint);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); margin-bottom: var(--s-5);
}

/* ---------- 24. CTA band ------------------------------------------------ */
.cta-band { position: relative; overflow: hidden; }
.cta-band h2 { max-width: 18ch; margin-inline: auto; }

/* ---------- 24b. Apply the glass material -------------------------------
   THIS BLOCK MUST STAY BELOW THE COMPONENT DEFINITIONS. Every selector here
   is a single class, so it only beats `.card { background: … }` on source
   order — put it higher up and the panels silently keep their flat
   backgrounds with no error anywhere.

   Top-level panels only. Nested ones (.quote-card inside a .feat-media, .kpi
   inside a .frame, table rows) deliberately do NOT take it: two stacked
   backdrop-filters cost twice and look muddy, and the app's own rule is that
   this material belongs on whole panels.
   ---------------------------------------------------------------------- */
.card, .price-card, .frame, .race, .mech, .feat-media, .calc-out, .testi, .score, .hours-col {
  position: relative;
  isolation: isolate;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 var(--glass-rim-low);
}
.card::before, .price-card::before, .frame::before, .race::before, .mech::before,
.feat-media::before, .calc-out::before, .testi::before, .score::before, .hours-col::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    var(--glass-rim) 0%, transparent 38%, transparent 62%, var(--glass-rim-low) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
.hours-col { border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 1.5rem); }
.price-card.is-feature { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow); }

/* Pointer-tracked sheen. --mx/--my are written by motion.js; unset they centre
   harmlessly, so touch and keyboard users get a static surface, not a broken one. */
.card::after, .price-card::after, .feat-media::after, .testi::after,
.score::after, .mech::after, .race::after, .calc-out::after, .hours-col::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
    rgb(255 255 255 / 0.55), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: -1;
}
.theme-dark .card::after, .theme-dark .score::after, .theme-dark .mech::after,
.theme-dark .testi::after, .theme-dark .feat-media::after {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
    rgb(255 255 255 / 0.10), transparent 60%);
}
.card:hover::after, .price-card:hover::after, .feat-media:hover::after,
.testi:hover::after, .score:hover::after, .mech:hover::after,
.race:hover::after, .calc-out:hover::after, .hours-col:hover::after { opacity: 1; }

/* ---------- 25. Responsive ---------------------------------------------- */
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav-links, .nav-cta .btn.is-ghost { display: none; }
  .nav-toggle { display: inline-block; }
  .split { grid-template-columns: 1fr; gap: var(--s-5); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .ms-item { grid-template-columns: 1fr; gap: 0.4rem; }
  .ms-n { padding-top: 0; }
}
@media (max-width: 620px) {
  :root { --pad-section: 3.75rem; }
  /* Brand + buy button + Menu toggle together overflow a 375px viewport by
     ~31px. The buy button goes; it is still the first thing in the mobile menu
     and both hero CTAs sit immediately below the fold. */
  .nav-cta .btn { display: none; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .wrap, .wrap-narrow { width: min(100% - 1.75rem, var(--wrap)); }
  .hero { min-height: auto; padding-top: 6.5rem; padding-bottom: var(--s-6); }
  .scroll-cue { display: none; }
  .acc-btn { padding-right: 2.2rem; font-size: 1rem; }
  .acc-panel > div { padding-right: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .cursor, .cursor-dot { display: none; }
  .pipeline-sticky { height: 82svh; }
}

/* ---------- 26. Motion preferences -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none; }
  .cursor, .cursor-dot { display: none; }
  .pipeline-sticky { position: static; height: auto; }
}

/* ---------- 27. Print --------------------------------------------------- */
@media print {
  .site-header, .mobile-menu, .cursor, .cursor-dot, .scroll-cue, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}