/* ============================================================================
   FILE: assets/styles.css
   PURPOSE: The look of the Gonzo Digital site: warm near-black ground, one
     ember accent, a serif display face, glass panels, film grain, a CSS
     aurora. Everything here works with no JavaScript and no CDN; the Three.js
     scene (assets/hero3d.js) and the scripts only add to it.

   DESIGN CHOICES (one line each)
     - Ground is warm near-black, not blue and not pure black. The accent is a
       single ember orange. Teal is used only as the "routine work" lane colour.
       Bone-white means "a human". Red appears only when the kill switch is on.
     - Type is system fonts only (no external font request): a serif for big
       statements, a sans for reading, a mono for machine output.
     - Motion is slow and controlled. prefers-reduced-motion turns it all off.

   HONEST SCOPE: tested in one browser engine only (Chromium). The 3D scene is
     optional; if it never loads, the aurora below it is the hero background.
   ============================================================================ */

:root {
  color-scheme: dark;

  --ink: #0a0a09;
  --ink-2: #100f0d;
  --ink-3: #181613;
  --bone: #efeadf;
  --muted: #b3ad9e;
  --dim: #aaa496;
  --sand: #d9cdb2;
  --line: rgba(239, 234, 223, 0.11);
  --line-strong: rgba(239, 234, 223, 0.22);

  /* Colour roles (see content/legal/DESIGN_NOTES.md):
       bone  = text and anything a human does          sand  = labels, eyebrows, quiet links (never orange)
       ember = the one primary action, the selected state, and the few words that carry the page (hero emphasis)
       amber = ember-2: honest-status labels only (sandbox, sample, "comes to you")
       teal  = verified or safe only (a chain that checks out, a check that held)
       halt  = stop only (the kill switch, a refused action, a broken chain) */
  --ember: #ff7a3d;
  --ember-2: #ffa24d;
  --ember-ink: #1c0d05;
  --teal: #4fd8c4;
  --halt: #ff5a62;

  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.022));
  --glass-solid: rgba(16, 15, 13, 0.72);

  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Charter", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  --radius: 22px;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 106.25%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  /* transparent on purpose: the aurora and the 3D canvas sit behind the body, on the html background */
  background: transparent;
  color: var(--bone);
  font: 400 1rem/1.62 var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--ember); color: var(--ember-ink); }

:focus-visible {
  outline: 2px solid var(--ember-2);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ember); color: var(--ember-ink); padding: 10px 16px;
  border-radius: 10px; font-weight: 700; text-decoration: none; transition: top 0.2s;
}
.skip:focus { top: 12px; }

.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ------------------------------------------------------------------ ground */

.aurora {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, #1a0f0a 0%, transparent 60%),
    radial-gradient(100% 80% at -10% 110%, #08201f 0%, transparent 60%),
    var(--ink);
}
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform; opacity: 0.9;
}
.aurora i:nth-child(1) {
  width: 62vmax; height: 62vmax; right: -18vmax; top: -22vmax;
  background: radial-gradient(closest-side, rgba(255, 122, 61, 0.30), rgba(255, 122, 61, 0) 72%);
  animation: drift-a 34s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  width: 70vmax; height: 70vmax; left: -26vmax; bottom: -30vmax;
  background: radial-gradient(closest-side, rgba(36, 150, 138, 0.38), rgba(36, 150, 138, 0) 72%);
  animation: drift-b 42s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  width: 48vmax; height: 48vmax; left: 30vw; top: 38vh;
  background: radial-gradient(closest-side, rgba(150, 52, 22, 0.28), rgba(150, 52, 22, 0) 72%);
  animation: drift-c 50s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(-9vmax, 8vmax, 0) scale(1.1); } }
@keyframes drift-b { to { transform: translate3d(10vmax, -7vmax, 0) scale(1.08); } }
@keyframes drift-c { to { transform: translate3d(-12vmax, -9vmax, 0) scale(0.92); } }

#scene {
  position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%;
  display: block; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}
.webgl-on #scene { opacity: var(--scene-o, 1); }

.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- type bits */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }

h2 {
  font-size: clamp(2rem, 4.8vw, 3.7rem);
  line-height: 1.06;
  max-width: 22ch;
  text-wrap: balance;
}
h3 { font-size: 1.4rem; line-height: 1.2; }

em { font-style: italic; color: var(--ember); }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font: 500 0.74rem/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sand); margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.8; flex: none;
}
.eyebrow .sep { opacity: 0.45; }

.lede {
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
  line-height: 1.55; color: var(--muted); max-width: 60ch; margin-top: 22px;
}
.lede strong, .fineprint strong { color: var(--bone); font-weight: 600; }

.fineprint { font-size: 0.86rem; color: var(--dim); max-width: 78ch; line-height: 1.55; }

.mono { font-family: var(--mono); }

section { position: relative; scroll-margin-top: 72px; }
.section { padding-block: clamp(72px, 11vw, 150px); }
.sec-head { margin-bottom: clamp(36px, 5vw, 64px); }

/* ------------------------------------------------------------------ buttons */

.btn {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65em;
  padding: 0.95em 1.55em; border-radius: 999px; border: 1px solid transparent;
  font: 600 0.96rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform 0.25s var(--ease), box-shadow 0.3s, background 0.3s, border-color 0.3s, color 0.3s;
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn-primary { background: var(--ember); color: var(--ember-ink); }
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--ember-2);
  box-shadow: 0 0 0 7px rgba(255, 122, 61, 0.16), 0 14px 50px rgba(255, 122, 61, 0.38);
}
.btn-ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--line-strong); color: var(--bone); backdrop-filter: blur(8px); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--sand); background: rgba(255, 122, 61, 0.08); }
.btn-sm { padding: 0.7em 1.15em; font-size: 0.86rem; }

/* ---------------------------------------------------------------------- nav
   Header menu: Systems, Services, Markets, Resources, Pricing, About, and two buttons. Markup in generator/gonzogen/navmenu.py,
   behaviour in assets/nav.js. Wide screens: the four large groups open a full-width panel under the header, Pricing and About open
   a small dropdown. The header never changes height when a panel opens (panels are absolutely positioned).
   Phones (<= 1100px): the menu button opens the whole menu, each group is an accordion. No JavaScript: every group is a visible
   list on a phone, and the panels open on hover and keyboard focus on a wide screen. */

.nav { position: sticky; top: 0; z-index: 60; transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s; border-bottom: 1px solid transparent; }
.nav.scrolled, .nav.open {
  background: rgba(10, 10, 9, 0.72); border-bottom-color: var(--line);
  backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%);
}
.nav-inner { display: flex; align-items: center; gap: 20px; min-height: 68px; flex-wrap: nowrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 400 1.5rem/1 var(--serif); letter-spacing: -0.02em; flex: none; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand small { font: 500 0.64rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-left: 2px; }

.nav-links { display: flex; align-items: center; align-self: stretch; gap: clamp(8px, 1.4vw, 22px); margin-left: auto; }
.nav-list { display: flex; align-items: stretch; align-self: stretch; gap: clamp(0px, 0.4vw, 6px); }
.nav-group { display: flex; align-items: stretch; position: relative; }
.nav-group.nav-wide { position: static; }
.nav-trigger {
  appearance: none; background: none; border: 0; cursor: pointer; border-radius: 8px; position: relative;
  display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; font: 400 0.9rem/1 var(--sans); color: var(--muted);
  transition: color 0.2s;
}
.nav-trigger::after {
  content: ""; width: 6px; height: 6px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s;
}
.nav-trigger:hover, .nav-trigger[aria-expanded="true"], .nav-group.is-current > .nav-trigger { color: var(--bone); }
.nav-trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.nav-group.is-current > .nav-trigger::before {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 14px; height: 1px; background: var(--ember);
}

.nav-panel {
  display: none; position: absolute; top: 100%; inset-inline-start: 0; z-index: 70; min-width: 270px; padding: 18px;
  background: #0d0c0a; border: 1px solid var(--line-strong); border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
}
.nav-panel-end { inset-inline-start: auto; inset-inline-end: 0; }
.nav-panel-wide {
  inset-inline: 0; min-width: 0; border-radius: 0 0 24px 24px; border-inline: 0; border-top-color: var(--line);
  padding: 26px max(var(--gutter), calc((100vw - var(--maxw)) / 2)) 22px;
}
.nav-group.is-open > .nav-panel { display: block; animation: nav-in 0.16s var(--ease); }
html:not(.nav-ready) .nav-group:hover > .nav-panel, html:not(.nav-ready) .nav-group:focus-within > .nav-panel { display: block; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-4px); } }

.nav-cols { display: grid; gap: 4px 28px; grid-template-columns: minmax(0, 1fr); }
.nav-cols-2 { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
.nav-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-panel-wide .nav-cols { max-width: var(--maxw); margin-inline: auto; }
.nav-sub { font: 500 0.66rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); margin: 0 12px 10px; }
.nav-col { min-width: 0; }
.nav-panel a { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--bone); }
.nav-panel a:hover, .nav-panel a:focus-visible { background: rgba(255, 255, 255, 0.06); }
.nav-lab { display: block; font-size: 0.95rem; line-height: 1.3; }
.nav-cap { display: block; margin-top: 2px; font-size: 0.78rem; line-height: 1.35; color: var(--dim); }
.nav-panel a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--ember); background: rgba(255, 122, 61, 0.07); }
.nav-panel a[aria-current="true"] { box-shadow: inset 2px 0 0 var(--line-strong); }
.nav-all { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.nav-panel-wide .nav-all { max-width: var(--maxw); margin-inline: auto; }
.nav-all a { display: inline-block; padding: 6px 12px; font: 600 0.82rem/1.2 var(--mono); letter-spacing: 0.04em; color: var(--sand); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong); cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 18px; height: 1.5px; background: var(--bone); margin: auto; position: relative; transition: transform 0.25s, background 0.25s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav.open .nav-toggle span { background: transparent; }
.nav.open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-inner { flex-wrap: wrap; row-gap: 0; padding-block: 8px; }
  .nav-links { flex-direction: column; align-items: stretch; align-self: auto; flex-basis: 100%; margin: 0; gap: 0; padding-bottom: 20px; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-group, .nav-group.nav-wide { display: block; position: static; border-bottom: 1px solid var(--line); }
  .nav-trigger { width: 100%; justify-content: space-between; padding: 15px 2px; font-size: 1.05rem; color: var(--bone); border-radius: 0; }
  .nav-group.is-current > .nav-trigger::before { display: none; }
  .nav-panel, .nav-panel-wide, .nav-panel-end {
    position: static; display: block; min-width: 0; padding: 0 0 12px; background: none; border: 0; border-radius: 0; box-shadow: none; animation: none;
  }
  .nav-panel-wide { padding: 0 0 12px; }
  .nav-cols, .nav-cols-2, .nav-cols-3 { grid-template-columns: minmax(0, 1fr); }
  .nav-col + .nav-col { margin-top: 10px; }
  .nav-sub { margin-inline: 0; }
  .nav-panel a { padding: 10px 4px; }
  .nav-all { margin-top: 6px; padding-top: 6px; }
  .nav-all a { padding-inline: 4px; }
  .nav-actions { padding-top: 18px; flex-wrap: wrap; }
  html:not(.nav-ready) .nav-trigger { pointer-events: none; }
  html:not(.nav-ready) .nav-trigger::after { display: none; }
  /* with JavaScript: the menu is closed until the button opens it, and each group is an accordion */
  .js .nav-toggle { display: block; }
  .js .nav-inner { flex-wrap: nowrap; }
  .js .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%; flex-basis: auto; max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px);
    overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--gutter) 24px; background: rgba(10, 10, 9, 0.97);
    backdrop-filter: blur(18px); border-bottom: 1px solid var(--line);
  }
  .js .nav.open .nav-links { display: flex; }
  .nav-ready .nav-panel { display: none; }
  .nav-ready .nav-group.is-open > .nav-panel { display: block; }
}

/* -------------------------------------------------------------------- hero */

.hero {
  min-height: min(100svh, 820px); display: flex; align-items: center;
  padding-block: clamp(40px, 8vh, 96px) clamp(56px, 9vh, 100px);
}
.hero-copy { max-width: 780px; }
.hero-title {
  font-size: clamp(2.6rem, 7.6vw, 6.2rem);
  line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance;
}
.hero-title em { color: var(--ember); padding-right: 0.06em; }
.hero .lede { margin-top: 30px; color: #c9c3b5; max-width: 54ch; }
.hero-sub { margin-top: 18px; font: 500 0.86rem/1.5 var(--mono); letter-spacing: 0.04em; color: var(--sand); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; max-width: 700px; }
.badge {
  display: inline-flex; align-items: center; gap: 12px; padding: 11px 16px 11px 13px;
  border: 1px solid var(--line-strong); border-radius: 16px;
  background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(10px);
  font-size: 0.84rem; line-height: 1.35; color: var(--bone);
}
.badge svg { width: 20px; height: 20px; flex: none; color: var(--teal); }
.badge:nth-child(2) svg { color: var(--sand); }

.scene-caption {
  position: absolute; right: var(--gutter); bottom: 22px; max-width: 34ch; text-align: right;
  font: 400 0.68rem/1.5 var(--mono); letter-spacing: 0.04em; color: var(--dim);
}
.scroll-cue { position: absolute; left: 50%; bottom: 22px; width: 1px; height: 54px; background: linear-gradient(var(--line-strong), transparent); overflow: hidden; }
.scroll-cue::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--ember); animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { to { top: 110%; } }
@media (max-width: 760px) { .scene-caption, .scroll-cue { display: none; } }

/* word-by-word headline reveal (only after app.js says it is ready) */
.js-ready .hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.js-ready .hero-title .wi { display: inline-block; transform: translateY(112%); transition: transform 0.7s var(--ease); transition-delay: calc(var(--wi) * 50ms + 30ms); }
.js-ready .hero-title.in .wi { transform: none; }

/* ----------------------------------------------------------- reveal on scroll */

.js-ready .rv { opacity: 0; translate: 0 22px; transition: opacity 0.9s var(--ease), translate 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js-ready .rv.in { opacity: 1; translate: none; }
/* a revealed tilt card keeps its own transform transition */
.js-ready .rv.tilt { transition: opacity 0.9s var(--ease) calc(var(--i, 0) * 70ms), translate 0.9s var(--ease) calc(var(--i, 0) * 70ms), transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s; }

/* -------------------------------------------------------------------- bands */

.band { border-block: 1px solid var(--line); background: rgba(10, 10, 9, 0.5); backdrop-filter: blur(6px); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; }
.stat { padding: 26px 28px 26px 0; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat + .stat { padding-left: 28px; }
.stat .num { font: 400 clamp(2.3rem, 4.2vw, 3.3rem)/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .num .dash { color: var(--dim); margin-inline: 0.08em; }
.stat p { margin-top: 12px; font-size: 0.9rem; color: var(--muted); max-width: 30ch; line-height: 1.45; }
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat, .stat + .stat { padding: 18px 12px 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .stat .num { font-size: 2rem; }
  .stat p { font-size: 0.9rem; }
}

.marquee-band { padding-block: 26px; }
.marquee-title { text-align: center; font: 500 0.7rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; padding-inline: var(--gutter); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 14px; animation: marquee 55s linear infinite; padding-right: 14px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track li {
  flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.03);
  font: 500 0.78rem/1 var(--mono); letter-spacing: 0.04em; color: #cfc9ba; white-space: nowrap;
}
.marquee-track li::before { content: ""; width: 6px; height: 6px; background: var(--ember); transform: rotate(45deg); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ console */

.console {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--glass-solid); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 50px 140px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden; position: relative;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.console.halted { border-color: rgba(255, 77, 85, 0.65); box-shadow: 0 50px 140px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 77, 85, 0.18); }
.console-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.dots { display: inline-flex; gap: 7px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(239, 234, 223, 0.2); display: block; }
.console-title { font: 500 0.8rem/1 var(--mono); color: var(--muted); letter-spacing: 0.04em; }
.sandbox-tag {
  margin-left: auto; font: 600 0.68rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sand); border: 1px solid rgba(255, 162, 77, 0.45); background: rgba(255, 122, 61, 0.1);
  padding: 7px 10px; border-radius: 999px;
}

.kpis { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.kpi { padding: 14px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.kpi:nth-child(5n) { border-right: 0; }
.kpi:nth-last-child(-n+5) { border-bottom: 0; }
.kpi dt { font: 500 0.62rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.kpi dd { margin-top: 6px; font: 400 1.7rem/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi dd small { font: 500 0.78rem/1 var(--mono); color: var(--muted); margin-left: 4px; }
.kpi.ok dd { color: var(--teal); }
.kpi.warn dd { color: var(--sand); }
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi, .kpi:nth-child(5n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .kpi:nth-child(2n) { border-right: 0; }
  .kpi:nth-last-child(-n+5) { border-bottom: 1px solid var(--line); }
  .kpi:nth-last-child(-n+2) { border-bottom: 0; }
}

.feed {
  height: clamp(300px, 48vh, 470px); overflow-y: auto; padding: 14px 18px 18px;
  font: 400 0.82rem/1.5 var(--mono); scroll-behavior: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(239, 234, 223, 0.25) transparent;
}
.line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 0; border-bottom: 1px dashed rgba(239, 234, 223, 0.07); }
.line .t { color: var(--dim); font-variant-numeric: tabular-nums; }
.line .agent { color: var(--bone); }
.line .kind { color: var(--dim); font-size: 0.72rem; letter-spacing: 0.04em; }
.line .sum { flex: 1 1 36ch; color: #d6d0c2; font-family: var(--sans); font-size: 0.9rem; }
.line .sum .caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; background: var(--ember); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tag {
  display: inline-block; font: 600 0.62rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 6px; border: 1px solid; min-width: 62px; text-align: center;
}
.tag.general { color: var(--teal); border-color: rgba(79, 216, 196, 0.45); background: rgba(79, 216, 196, 0.08); }
.tag.finance { color: var(--sand); border-color: rgba(255, 162, 77, 0.5); background: rgba(255, 122, 61, 0.1); }
.tag.handoff { color: var(--bone); border-color: rgba(239, 234, 223, 0.6); background: rgba(239, 234, 223, 0.1); }
.line.halt-line .sum { color: var(--halt); }
.line.halt-line .tag { color: var(--halt); border-color: rgba(255, 77, 85, 0.6); background: rgba(255, 77, 85, 0.1); }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 14px 18px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.switch { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.switch .track { width: 58px; height: 32px; border-radius: 999px; background: rgba(239, 234, 223, 0.14); border: 1px solid var(--line-strong); position: relative; transition: background 0.3s, border-color 0.3s; flex: none; }
.switch .track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--bone); transition: transform 0.3s var(--ease), background 0.3s; }
.switch[aria-checked="true"] .track { background: rgba(255, 77, 85, 0.3); border-color: var(--halt); }
.switch[aria-checked="true"] .track::after { transform: translateX(26px); background: var(--halt); }
.switch .lbl { font: 600 0.8rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-align: left; }
.switch .lbl small { display: block; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--dim); margin-top: 3px; }
.status { display: inline-flex; align-items: center; gap: 9px; font: 500 0.76rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.status i { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); display: block; }
.console[data-state="running"] .status i { background: var(--teal); box-shadow: 0 0 0 0 rgba(79, 216, 196, 0.6); animation: pulse 1.8s infinite; }
.console[data-state="halted"] .status i { background: var(--halt); box-shadow: 0 0 12px var(--halt); }
.console[data-state="done"] .status i { background: var(--bone); }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(79, 216, 196, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 216, 196, 0); } }
.controls .spacer { margin-left: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font: 400 0.72rem/1 var(--mono); color: var(--muted); }
.console-caption { padding: 12px 18px 16px; font: 400 0.74rem/1.5 var(--mono); color: var(--dim); border-top: 1px solid var(--line); }
.console-caption b { color: var(--sand); font-weight: 600; }
.console-empty { padding: 40px 18px; color: var(--muted); }

/* ------------------------------------------------------------------- cards */

.card {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--glass); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 70px rgba(0, 0, 0, 0.35);
  min-width: 0;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 0%), rgba(255, 122, 61, 0.95), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.35s;
}
.card .spec {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(380px circle at var(--sx, 50%) var(--sy, 0%), rgba(255, 236, 220, 0.11), transparent 58%);
}
.tilt {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
  will-change: transform;
}
.tilt:hover::before, .tilt:hover .spec, .tilt.is-active::before { opacity: 1; }
.tilt.is-active { border-color: rgba(255, 122, 61, 0.45); }

/* --------------------------------------------------------------- products */

.products-wrap { display: grid; gap: 40px; }
@media (min-width: 1100px) {
  .products-wrap { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; }
  .rail { position: sticky; top: 92px; align-self: start; height: calc(100svh - 120px); min-height: 560px; display: flex; flex-direction: column; }
  .rail .sec-head { margin-bottom: 26px; }
  .rail h2 { font-size: clamp(2rem, 2.9vw, 2.7rem); }
  .rail .agent-panel { margin-top: auto; }
}
.rail .sec-head { margin-bottom: 8px; }
.rail .lede { font-size: 1rem; margin-top: 16px; }
.rail .sec-head p, .rail h2 { text-shadow: 0 1px 14px rgba(10, 10, 9, 0.95), 0 0 3px rgba(10, 10, 9, 0.85); }

.seg { display: inline-flex; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, 0.04); margin-top: 24px; }
.seg button { padding: 0.55em 1.2em; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font: 600 0.84rem/1 var(--sans); cursor: pointer; transition: background 0.25s, color 0.25s; }
.seg button[aria-pressed="true"] { background: var(--ember); color: var(--ember-ink); }
.price-note { margin-top: 12px; font-size: 0.8rem; color: var(--dim); max-width: 36ch; }

.agent-panel { display: none; padding: 18px 20px; font-size: 0.86rem; min-height: 214px; }
@media (min-width: 1100px) { .agent-panel { display: block; } }
.agent-panel .ap-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.agent-panel .ap-id { font: 600 0.8rem/1 var(--mono); color: var(--bone); word-break: break-all; }
.agent-panel ol { counter-reset: s; display: grid; gap: 7px; margin-top: 8px; }
.agent-panel li { counter-increment: s; display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: var(--muted); line-height: 1.4; }
.agent-panel li::before { content: counter(s); font: 600 0.7rem/1.9 var(--mono); color: var(--sand); }
.agent-panel .ap-conn { margin-top: 12px; font: 400 0.72rem/1.5 var(--mono); color: var(--dim); }
.agent-panel .ap-body { transition: opacity 0.25s; }
.agent-panel .ap-body.swap { opacity: 0; }

.product-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); align-items: start; }
.product { padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.product .p-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.product .idx { font: 500 0.72rem/1 var(--mono); color: var(--dim); letter-spacing: 0.12em; }
.lane-chip { font: 600 0.6rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; border: 1px solid; }
.lane-chip.general { color: var(--teal); border-color: rgba(79, 216, 196, 0.4); }
.lane-chip.finance { color: var(--sand); border-color: rgba(255, 162, 77, 0.45); }
.product h3 { font-size: 1.5rem; }
.product .pain { font: italic 400 1.04rem/1.5 var(--serif); color: #cdc7b9; }
.price { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; padding-block: 12px; border-block: 1px solid var(--line); }
.price .amt { font: 400 2rem/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price .unit { display: block; margin-top: 5px; font: 500 0.68rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.price .amt, .price .unit { transition: opacity 0.2s; }
.price.swap .amt { opacity: 0; }
.meta-line { font: 500 0.76rem/1.4 var(--mono); color: var(--muted); letter-spacing: 0.02em; }
.meta-line b { color: var(--sand); font-weight: 600; }
.deliv { display: grid; gap: 9px; font-size: 0.9rem; color: #cdc7b9; }
.deliv li { display: grid; grid-template-columns: 14px 1fr; gap: 9px; line-height: 1.45; }
.deliv li::before { content: ""; width: 5px; height: 5px; margin-top: 0.55em; background: var(--ember); border-radius: 50%; }
.more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 0;
  font: 600 0.8rem/1 var(--mono); letter-spacing: 0.06em; color: var(--sand); cursor: pointer;
}
.more::after { content: "+"; display: inline-block; transition: transform 0.3s; font-size: 1.1em; }
.more[aria-expanded="true"]::after { transform: rotate(45deg); }
.extra { display: grid; gap: 16px; padding-top: 4px; font-size: 0.88rem; }
.extra h4 { font: 600 0.66rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.extra ol { counter-reset: s; display: grid; gap: 7px; }
.extra ol li { counter-increment: s; display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: #cdc7b9; line-height: 1.4; }
.extra ol li::before { content: counter(s); font: 600 0.7rem/1.9 var(--mono); color: var(--sand); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 0.7rem/1 var(--mono); padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, 0.03); }
.chip b { color: var(--bone); font-weight: 600; }
.agent-id { font: 500 0.72rem/1.3 var(--mono); color: var(--dim); word-break: break-all; }

/* ---------------------------------------------------------------- finance */

.finance-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
@media (max-width: 960px) { .finance-grid { grid-template-columns: minmax(0, 1fr); } }
.finance-left { display: grid; gap: 22px; min-width: 0; }
.mandate { padding: 24px; }
.mandate .m-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.mandate h3 { font-size: 1.35rem; }
.badge-sbx { font: 600 0.62rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand); border: 1px solid rgba(255, 162, 77, 0.45); background: rgba(255, 122, 61, 0.1); padding: 6px 9px; border-radius: 999px; }
.mandate .note { font-size: 0.84rem; color: var(--muted); margin-bottom: 14px; }
.m-rows { display: grid; }
.m-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.m-row dt { font-size: 0.88rem; color: var(--muted); }
.m-row dd { font: 400 1.35rem/1 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-row dd small { font: 500 0.72rem/1 var(--mono); color: var(--dim); margin-left: 4px; }
.fp { margin-top: 14px; font: 400 0.7rem/1.5 var(--mono); color: var(--dim); word-break: break-all; }
.fp b { color: var(--muted); font-weight: 500; }

.ex-list { display: grid; gap: 8px; }
.ex-btn {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; text-align: left; width: 100%;
  padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
  cursor: pointer; transition: border-color 0.25s, background 0.25s;
}
.ex-btn:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.055); }
.ex-btn[aria-pressed="true"] { border-color: var(--ember); background: rgba(255, 122, 61, 0.09); }
.ex-btn .ex-title { font-size: 0.93rem; line-height: 1.3; }
.out-chip { font: 600 0.6rem/1.1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; border: 1px solid; text-align: center; white-space: nowrap; }
.out-chip.inside_mandate { color: var(--teal); border-color: rgba(79, 216, 196, 0.45); }
.out-chip.escalated_to_owner { color: var(--sand); border-color: rgba(255, 162, 77, 0.5); }
.out-chip.handed_off { color: var(--bone); border-color: rgba(239, 234, 223, 0.6); }

.chat-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 520px; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chat-head h3 { font-size: 1.15rem; }
.chat-body { flex: 1; padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 4px; }
.msg { max-width: 88%; display: flex; flex-direction: column; gap: 5px; animation: msg-in 0.5s var(--ease) both; }
.msg .who { font: 600 0.62rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.msg .who .ai { color: var(--sand); border: 1px solid rgba(255, 162, 77, 0.45); border-radius: 4px; padding: 2px 4px; margin-left: 6px; }
.msg .bub { padding: 12px 16px; border-radius: 18px; font-size: 0.95rem; line-height: 1.5; }
.msg .dec { font: 400 0.72rem/1.45 var(--mono); color: var(--muted); border-left: 2px solid var(--ember); padding-left: 10px; margin-top: 2px; }
.msg.buyer { align-self: flex-start; }
.msg.buyer .bub { background: rgba(255, 255, 255, 0.07); border-bottom-left-radius: 6px; }
.msg.agent { align-self: flex-end; }
.msg.agent .who { text-align: right; }
.msg.agent .bub { background: rgba(255, 122, 61, 0.13); border: 1px solid rgba(255, 122, 61, 0.3); border-bottom-right-radius: 6px; }
.msg.owner { align-self: center; max-width: 94%; }
.msg.owner .who { text-align: center; }
.msg.owner .bub { background: transparent; border: 1px dashed rgba(239, 234, 223, 0.5); text-align: center; border-radius: 14px; }
.msg.owner .dec { border-left-color: var(--bone); }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px); } }
.typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 122, 61, 0.1); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ember-2); animation: dotty 1s infinite; display: block; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotty { 30% { transform: translateY(-4px); opacity: 0.5; } }
.outcome { margin: 10px 20px 20px; padding: 13px 16px; border-radius: 14px; border: 1px solid; font-size: 0.9rem; display: flex; gap: 12px; align-items: center; animation: msg-in 0.5s var(--ease) both; }
.outcome.inside_mandate { color: var(--teal); border-color: rgba(79, 216, 196, 0.45); background: rgba(79, 216, 196, 0.07); }
.outcome.escalated_to_owner { color: var(--sand); border-color: rgba(255, 162, 77, 0.5); background: rgba(255, 122, 61, 0.08); }
.outcome.handed_off { color: var(--bone); border-color: rgba(239, 234, 223, 0.55); background: rgba(239, 234, 223, 0.07); }
.outcome b { font-weight: 600; }
.outcome span { color: var(--bone); opacity: 0.85; }

.desk-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); margin-top: 22px; }
.desk { padding: 22px 24px; }
.desk h3 { font-size: 1.15rem; margin-bottom: 12px; }
.desk ul { display: grid; gap: 0; }
.desk li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 0.88rem; align-items: start; }
.desk li .d-id { font: 600 0.74rem/1.3 var(--mono); color: var(--bone); word-break: break-all; }
.desk li .d-role { color: var(--muted); font-size: 0.84rem; grid-column: 1; }
.desk li .chips { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; max-width: 240px; }
@media (max-width: 560px) { .desk li { grid-template-columns: 1fr; } .desk li .chips { grid-column: 1; grid-row: auto; justify-content: flex-start; max-width: none; } }
.q-status { font: 600 0.6rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; border: 1px solid; white-space: nowrap; align-self: start; }
.q-status.pending_owner { color: var(--sand); border-color: rgba(255, 162, 77, 0.5); }
.q-status.approved_by_owner { color: var(--teal); border-color: rgba(79, 216, 196, 0.45); }
.q-status.handed_off { color: var(--bone); border-color: rgba(239, 234, 223, 0.55); }
.q-status.other { color: var(--muted); border-color: var(--line-strong); }
.q-kind { font: 600 0.72rem/1.3 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 3px; }

.never { margin-top: 26px; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--line-strong); background: rgba(10, 10, 9, 0.55); font-size: 0.95rem; color: #cdc7b9; max-width: 90ch; }
.never b { color: var(--bone); }

/* ----------------------------------------------------------------- growth */

.growth-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.g-card { padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; }
.g-card .g-key { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); }
.g-card .plain { color: #cdc7b9; font-size: 0.98rem; }
.g-card ul { display: grid; gap: 9px; font-size: 0.9rem; color: var(--muted); }
.g-card li { display: grid; grid-template-columns: 14px 1fr; gap: 9px; line-height: 1.45; }
.g-card li::before { content: ""; width: 5px; height: 5px; margin-top: 0.55em; background: var(--teal); border-radius: 50%; }
.g-card .limits { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--dim); line-height: 1.5; }
.g-card .limits b { color: var(--muted); font-weight: 600; }

/* ----------------------------------------------------------- how it works */

.pipe { display: grid; gap: 0; counter-reset: step; position: relative; margin-bottom: 70px; }
.pipe li { counter-increment: step; position: relative; padding: 0 0 26px 54px; }
.pipe li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font: 600 0.78rem/1 var(--mono); color: var(--sand);
  border: 1px solid rgba(255, 162, 77, 0.55); background: var(--ink-2);
}
.pipe li::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 1px; background: linear-gradient(var(--line-strong), transparent); }
.pipe li:last-child::after { display: none; }
.pipe h3 { font: 600 1rem/1.3 var(--sans); letter-spacing: 0; margin-bottom: 4px; }
.pipe p { font-size: 0.9rem; color: var(--muted); max-width: 40ch; }
@media (min-width: 1000px) {
  .pipe { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; }
  .pipe li { padding: 54px 0 0; }
  .pipe li::before { left: 0; top: 0; }
  .pipe li::after { left: 40px; right: -18px; top: 17px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--line-strong), var(--line)); }
  .js-ready .pipe li::before { animation: node-lit 9s infinite; animation-delay: calc(var(--n) * 0.7s); }
}
@keyframes node-lit { 0%, 12%, 100% { background: var(--ink-2); box-shadow: none; } 4%, 8% { background: rgba(255, 122, 61, 0.25); box-shadow: 0 0 0 7px rgba(255, 122, 61, 0.09), 0 0 28px rgba(255, 122, 61, 0.5); } }

.how-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .how-grid { grid-template-columns: minmax(0, 1fr); } }
.panel { padding: 26px 26px 24px; }
.panel h3 { margin-bottom: 8px; }
.panel .sub { font-size: 0.9rem; color: var(--muted); margin-bottom: 18px; max-width: 52ch; }

.ladder { display: grid; gap: 8px; }
.rung {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; text-align: left; width: 100%;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.3s var(--ease); margin-left: calc(var(--k) * 14px);
  width: calc(100% - var(--k) * 14px);
}
.rung:hover { border-color: var(--line-strong); }
.rung[aria-checked="true"] { border-color: var(--ember); background: rgba(255, 122, 61, 0.1); }
.rung .lv { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 0.8rem/1 var(--mono); border: 1px solid var(--line-strong); color: var(--muted); }
.rung[aria-checked="true"] .lv { background: var(--ember); color: var(--ember-ink); border-color: var(--ember); }
.rung .lb { font-size: 0.98rem; font-weight: 600; }
.ladder-detail { margin-top: 18px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(10, 10, 9, 0.5); font-size: 0.93rem; color: #cdc7b9; min-height: 92px; }
.matrix { margin-top: 14px; display: grid; gap: 0; font-size: 0.82rem; }
.matrix .mr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); align-items: center; }
.matrix .mr span:first-child { color: var(--muted); }
.cell { font: 600 0.64rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; border: 1px solid; white-space: nowrap; }
.cell.yes { color: var(--teal); border-color: rgba(79, 216, 196, 0.45); }
.cell.limited { color: var(--sand); border-color: rgba(255, 162, 77, 0.5); }
.cell.no { color: var(--dim); border-color: var(--line-strong); }
.cell.you { color: var(--bone); border-color: rgba(239, 234, 223, 0.6); }

.brakes { display: grid; gap: 12px; }
.brake { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.brake svg { width: 26px; height: 26px; color: var(--sand); margin-top: 2px; }
.brake h4 { font: 600 0.95rem/1.3 var(--sans); }
.brake p { font-size: 0.86rem; color: var(--muted); margin-top: 3px; }
.rules { margin-top: 20px; display: grid; gap: 10px; font-size: 0.9rem; color: var(--muted); }
.rules li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; line-height: 1.5; }
.rules li::before { content: ""; width: 5px; height: 5px; margin-top: 0.6em; border-radius: 50%; background: var(--ember); }
.rules b { color: var(--bone); font-weight: 600; }

.chain-card { margin-top: 22px; padding: 28px 26px; }
.chain-top { display: grid; gap: 24px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
@media (max-width: 960px) { .chain-top { grid-template-columns: minmax(0, 1fr); } }
.chain-stats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.chain-stats div { min-width: 0; }
.chain-stats dt { font: 500 0.62rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.chain-stats dd { font: 400 1.5rem/1.2 var(--serif); margin-top: 4px; }
.chain-stats dd.ok { color: var(--teal); }
.chain-stats dd.bad { color: var(--halt); }
.head-hash { margin-top: 14px; }
.head-hash dt { font: 500 0.62rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.head-hash dd { margin-top: 6px; font: 400 0.76rem/1.55 var(--mono); color: var(--bone); word-break: break-all; }
.idbar { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; margin-top: 12px; height: 16px; }
.idbar i { display: block; border-radius: 3px; }
.chain-track { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.blk { position: relative; border: 1px solid var(--line-strong); border-radius: 12px; padding: 11px 12px; background: rgba(255, 255, 255, 0.035); font: 400 0.68rem/1.55 var(--mono); color: var(--muted); min-width: 0; transition: border-color 0.3s, background 0.3s; cursor: default; text-align: left; }
button.blk { cursor: pointer; }
button.blk:hover { border-color: var(--sand); }
.blk .n { color: var(--sand); font-weight: 600; letter-spacing: 0.08em; display: block; }
.blk .h { color: var(--bone); display: block; word-break: break-all; }
.blk .p { display: block; word-break: break-all; }
.blk .state { display: block; margin-top: 4px; font-weight: 600; letter-spacing: 0.06em; color: var(--teal); text-transform: uppercase; font-size: 0.6rem; }
.blk.edited { border-color: var(--ember); background: rgba(255, 122, 61, 0.1); }
.blk.edited .state { color: var(--sand); }
.blk.bad { border-color: rgba(255, 77, 85, 0.7); background: rgba(255, 77, 85, 0.08); }
.blk.bad .state { color: var(--halt); }
.chain-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
.chain-msg { font: 400 0.78rem/1.4 var(--mono); color: var(--muted); }

/* -------------------------------------------------------------- not / gone */

.not-list { columns: 2 340px; column-gap: 44px; max-width: 1000px; }
.not-list li { break-inside: avoid; display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 1rem; color: #cdc7b9; line-height: 1.5; }
.not-list li::before { content: "\00d7"; font: 300 1.5rem/1 var(--serif); color: var(--ember); }
.not-list li b { color: var(--bone); font-weight: 600; }

.vanish { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.vanish .card { padding: 28px 26px; }
.vanish .big { font: 400 3rem/1 var(--serif); color: var(--ember); margin-bottom: 14px; display: block; }
.vanish h3 { margin-bottom: 10px; }
.vanish p { color: var(--muted); font-size: 0.96rem; }
.callout { margin-top: 26px; padding: 20px 24px; border-radius: 16px; border: 1px solid rgba(255, 162, 77, 0.4); background: rgba(255, 122, 61, 0.07); font-size: 1.02rem; max-width: 80ch; color: #e0dacb; }

/* -------------------------------------------------------------------- roi */

.roi-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
@media (max-width: 960px) { .roi-grid { grid-template-columns: minmax(0, 1fr); } }
.roi-form { padding: 26px; display: grid; gap: 20px; }
.field label { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; color: var(--muted); margin-bottom: 8px; }
.field label output { font: 600 0.85rem/1 var(--mono); color: var(--bone); }
.field input[type="number"], .field select {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.05);
  color: var(--bone); font: 500 1rem/1.2 var(--sans); appearance: none; -webkit-appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
.field select option { background: #17150f; color: var(--bone); }
.field input[type="range"] { width: 100%; accent-color: var(--ember); }
.field input:focus-visible, .field select:focus-visible { outline-offset: 2px; }
.roi-out { padding: 26px; }
.roi-stats { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roi-stat { padding: 16px 0; border-top: 1px solid var(--line); }
.roi-stat:nth-child(odd) { padding-right: 18px; }
.roi-stat:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
.roi-stat dt { font: 500 0.64rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.roi-stat dd { font: 400 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--serif); margin-top: 8px; font-variant-numeric: tabular-nums; }
.roi-stat dd.neg { color: var(--sand); }
.roi-stat dd.pos { color: var(--teal); }
.roi-bars { margin-top: 20px; display: grid; gap: 12px; }
.bar { display: grid; gap: 6px; font: 400 0.76rem/1.3 var(--mono); color: var(--muted); }
.bar .rail2 { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.bar .rail2 i { display: block; height: 100%; border-radius: inherit; background: var(--ember); width: 0; transition: width 0.7s var(--ease); }
.bar.b2 .rail2 i { background: var(--teal); }
.roi-verdict { margin-top: 20px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(10, 10, 9, 0.5); font-size: 0.95rem; color: #d7d1c3; }
.roi-note { margin-top: 14px; font-size: 0.8rem; color: var(--dim); line-height: 1.5; }

/* -------------------------------------------------------------------- faq */

.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; gap: 24px; align-items: center; font: 400 clamp(1.15rem, 2vw, 1.5rem)/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; position: relative; flex: none; transition: transform 0.3s var(--ease), background 0.3s; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--bone); transform: translate(-50%, -50%); }
.faq summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .plus { transform: rotate(45deg); background: rgba(255, 122, 61, 0.15); }
.faq .ans { padding: 0 48px 26px 0; color: var(--muted); font-size: 1rem; line-height: 1.65; max-width: 70ch; }
.faq .ans p + p { margin-top: 12px; }
.faq .ans b { color: var(--bone); font-weight: 600; }

/* ---------------------------------------------------------------- founder */

.founder { padding: 30px 28px; max-width: 760px; }
.founder h3 { font-size: 1.9rem; margin-bottom: 4px; }
.founder .role { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); margin-bottom: 16px; display: block; }
.founder p { color: #cdc7b9; font-size: 1.02rem; max-width: 62ch; }

/* -------------------------------------------------------------------- cta */

.cta-box { position: relative; padding: clamp(36px, 7vw, 90px) clamp(22px, 5vw, 70px); border-radius: 30px; border: 1px solid var(--line-strong); background: radial-gradient(90% 120% at 100% 0%, rgba(255, 122, 61, 0.2), transparent 60%), rgba(16, 15, 13, 0.7); backdrop-filter: blur(16px); overflow: hidden; }
.cta-box h2 { max-width: 18ch; font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: 1.02; }
.cta-box .lede { max-width: 52ch; }
.cta-box .cta-row { margin-top: 34px; }
.contact-lines { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 26px; font: 500 0.86rem/1.4 var(--mono); color: var(--muted); }
.contact-lines a { color: var(--bone); text-decoration-color: rgba(255, 162, 77, 0.6); text-underline-offset: 4px; }

/* ------------------------------------------------------------------ footer */

.foot { border-top: 1px solid var(--line); padding-block: 56px 70px; background: rgba(8, 8, 7, 0.82); position: relative; z-index: 1; }
.foot-grid { display: grid; gap: 34px 40px; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(150px, 1fr)); }
.foot-grid > .foot-brand { grid-column: 1 / -1; max-width: 62ch; }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); } .foot-grid > .foot-brand { grid-column: auto; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot h3, .foot h4 { font: 500 0.66rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.foot p, .foot li, .foot dd { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
.foot a { text-decoration-color: rgba(255, 162, 77, 0.5); text-underline-offset: 3px; }
.foot dl { display: grid; gap: 10px; }
.foot dt { font: 500 0.62rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.foot .legal { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--dim); max-width: 90ch; line-height: 1.6; }

/* ------------------------------------------------ scene-aware tweaks, no-CDN */

.no-webgl .hero .lede { color: #d6d0c2; }

/* ----------------------------------------------------- reduced motion, print */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  .aurora i { animation: none !important; }
  .js-ready .rv, .js-ready .hero-title .wi { opacity: 1; transform: none; translate: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { width: auto; flex-wrap: wrap; justify-content: center; padding-right: 0; transform: none !important; }
  .marquee-track .dup { display: none; }
  .scroll-cue::after { animation: none; }
  .tilt { transform: none !important; }
}

@media print {
  .aurora, #scene, .grain, .nav, .scroll-cue, .marquee-band { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .console { background: #fff !important; border-color: #999 !important; box-shadow: none !important; backdrop-filter: none !important; }
  .js-ready .rv { opacity: 1 !important; translate: none !important; }
}

/* ----------------------------------------------------------------------------------------------
   Prerendered content (generator/gonzogen/homestatic.py). The page is complete without JavaScript:
   the card details are shown open, and the controls that need a script are hidden, until boot.js
   adds the 'js' class. With JavaScript the scripts redraw these sections in place.
   ---------------------------------------------------------------------------------------------- */
.answer-band { padding-block: clamp(22px, 3.5vw, 40px); }
.answer { max-width: 78ch; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.65; color: #d6d0c2; }
.answer b { color: var(--bone); font-weight: 600; }
html:not(.js) .product .more,
html:not(.js) .ladder,
html:not(.js) .seg,
html:not(.js) .controls,
html:not(.js) .ex-list,
html:not(.js) .chat-head .btn,
html:not(.js) .chain-actions,
html:not(.js) .agent-panel { display: none; }
html:not(.js) .product .extra[hidden] { display: grid; gap: 14px; }
.ladder-all { display: grid; gap: 10px; list-style: none; padding: 0; }
.ladder-all b { color: var(--bone); }
.js .ladder-all { display: grid; }
.matrix-static { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 0.82rem; line-height: 1.4; }
.matrix-static caption { text-align: left; font: 500 0.66rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); padding-bottom: 8px; }
.matrix-static th, .matrix-static td { text-align: left; padding: 8px 10px 8px 0; border-top: 1px solid var(--line); vertical-align: top; }
.matrix-static thead th { color: var(--muted); font-weight: 500; }
.matrix-static tbody th { color: var(--bone); font-weight: 400; }
.matrix-static td.no { color: var(--dim); }
.matrix-static td.yes { color: var(--teal); }
.matrix-static td.limited, .matrix-static td.you { color: var(--sand); }

/* ----------------------------------------------------------------------------------------------
   COLOUR ROLES, READABILITY AND THE ONE CALL TO ACTION  (content/legal/DESIGN_NOTES.md explains each choice)

   Amber stays only on honest-status labels. Everything else that used to be orange is sand (labels, quiet links)
   or neutral (bullets). Ember is the primary button, the selected state and the hero emphasis. Red is stop only.
   ---------------------------------------------------------------------------------------------- */
.sandbox-tag, .badge-sbx, .notice-label, .sample-label, .tag.finance, .lane-chip.finance, .out-chip.escalated_to_owner,
.outcome.escalated_to_owner, .q-status.pending_owner, .cell.limited, .kpi.warn dd, .roi-stat dd.neg, .console-caption b,
.msg .who .ai, .blk.edited .state, .matrix-static td.limited, .matrix-static td.you { color: var(--ember-2); }
.deliv li::before, .check-list li::before, .rules li::before { background: var(--dim); }
.marquee-track li::before { background: var(--dim); }
.vanish .big { color: var(--dim); }
.not-list li::before { color: var(--halt); }
.brake svg { color: var(--halt); }
.pipe li::before { color: var(--bone); border-color: var(--line-strong); }
.callout { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); }
.eyebrow::before { background: var(--ember); opacity: 1; }
.meta-line b { color: var(--bone); }

/* readable sizes: nothing below 12px, body at 17px, line length 60 to 75 characters */
.kpi dt, .chain-stats dt, .head-hash dt, .msg .who, .tag, .lane-chip, .cell, .out-chip, .q-status, .foot dt, .foot h3, .foot h4,
.nav-sub, .roi-stat dt, .matrix-static caption, .badge-sbx, .sandbox-tag, .price .unit, .extra h4, .idx, .cell.limited,
.agent-panel .ap-conn, .g-card .g-key, .marquee-title, .brand small, .field label output { font-size: max(0.72rem, 12px); }
.fineprint { font-size: 0.92rem; max-width: 68ch; }
.answer { max-width: 68ch; font-size: clamp(1.02rem, 1.5vw, 1.14rem); }
.lede { max-width: 62ch; }
.deliv { font-size: 0.96rem; }
.line .sum, .desk li, .matrix, .brake p, .rules, .panel .sub, .g-card ul, .g-card .limits, .roi-note, .ladder-detail { font-size: 0.94rem; }
.stat p { font-size: 0.96rem; }
.console-caption, .chain-msg, .scene-caption { font-size: max(0.78rem, 12.5px); }
.section { padding-block: clamp(52px, 8vw, 104px); }
.sec-head { margin-bottom: clamp(26px, 4vw, 44px); }

/* tap targets: 44px at least */
.btn { min-height: 48px; }
.btn-sm { min-height: 44px; }
.more { min-height: 44px; }
.seg button { min-height: 44px; }
.field input[type="number"] { min-height: 48px; }
.ex-btn, .rung { min-height: 48px; }
@media (max-width: 760px) {
  .foot-links a { display: inline-block; padding-block: 10px; }
  .foot-links { gap: 0; }
  .nav-panel a { padding-block: 12px; }
  .nav-all a { padding-block: 12px; }
}

/* ------------------------------------------------------------------ the one call to action */
.btn-primary { box-shadow: 0 0 0 0 rgba(255, 122, 61, 0); }
.btn-primary:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }
.cta-hero { margin-top: clamp(22px, 3vw, 34px); }
.cta-hero .cta-row { margin-top: 0; }
.cta-risk { margin-top: 14px; font-size: 0.96rem; color: var(--muted); }
.reach { margin-top: 8px; font-size: 0.96rem; color: var(--muted); max-width: 70ch; }
.reach a, .contact-lines a { color: var(--bone); text-decoration-color: rgba(217, 205, 178, 0.6); text-underline-offset: 4px; }
.reach a:hover, .reach a:focus-visible { text-decoration-color: var(--ember); }
.price-line { margin-top: 16px; font-size: 1.04rem; color: #d8d2c4; max-width: 62ch; }
.price-line b { color: var(--bone); font: 400 1.4rem/1 var(--serif); letter-spacing: -0.01em; }

.cta-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 18px 22px; border-radius: 18px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04);
}
.cta-inline p { font-size: 1.02rem; color: var(--bone); flex: 1 1 26ch; max-width: 46ch; }
.page-main .cta-inline { margin-block: clamp(22px, 3vw, 36px); }

.next-strip { margin-top: clamp(26px, 4vw, 40px); }
.next-title { font: 500 0.78rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); margin-bottom: 14px; }
.next-strip ol { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: ns; }
.next-strip li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 16px 16px 16px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.next-strip .step-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 0.82rem/1 var(--mono); border: 1px solid var(--line-strong); color: var(--bone); }
.next-strip b { display: block; font-weight: 600; color: var(--bone); font-size: 1rem; }
.next-strip li span:not(.step-n) { display: block; margin-top: 4px; font-size: 0.92rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) { .next-strip ol { grid-template-columns: minmax(0, 1fr); } }

.cta-band { margin-block-start: clamp(40px, 6vw, 80px); }
.cta-box .cta-risk { margin-top: 14px; }
.page-main .cta-box { padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 52px); border-radius: 26px; }
.page-main .cta-box h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); max-width: 20ch; }
.page-main .cta-box .cta-row { margin-top: 24px; }

.cta-bar { display: none; }
@media (max-width: 760px) {
  .cta-bar:not([hidden]) {
    display: flex; align-items: center; gap: 10px; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 140;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(10, 10, 9, 0.95);
    border-top: 1px solid var(--line-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .cta-bar .btn { flex: 1 1 auto; min-height: 48px; }
  .cta-bar-x { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong); color: var(--bone); cursor: pointer; }
  .cta-bar-x svg { width: 18px; height: 18px; }
  /* the Ask button sits above the bar, never under it */
  html.has-cta-bar .ask { inset-block-end: calc(var(--cta-bar-h, 68px) + 12px); }
}

/* ------------------------------------------------------------ folded sections (native <details>) */
.fold { border-block-start: 1px solid var(--line); }
.fold:last-child, .fold-block:last-of-type > .fold { border-block-end: 1px solid var(--line); }
.fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 56px; padding-block: 14px; border-radius: 6px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2, .fold > summary h3, .fold > summary h4 {
  margin: 0; max-inline-size: none; font: 400 clamp(1.2rem, 2.1vw, 1.55rem)/1.25 var(--serif); letter-spacing: -0.01em; color: var(--bone);
}
.fold > summary:hover h2, .fold > summary:hover h3, .fold > summary:hover h4 { color: #fff; }
.fold > summary:focus-visible { outline: 2px solid var(--ember-2); outline-offset: 2px; }
.fold > summary .plus { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; position: relative; flex: none; transition: transform 0.3s var(--ease), background 0.3s; }
.fold > summary .plus::before, .fold > summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--bone); transform: translate(-50%, -50%); }
.fold > summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.fold[open] > summary .plus { transform: rotate(45deg); background: rgba(255, 255, 255, 0.08); }
.fold > .fold-body { padding-block: 4px 26px; }
.fold > .fold-body > :first-child { margin-top: 0; }
.fold .fold > summary h3, .fold .fold > summary h4 { font-size: clamp(1.05rem, 1.7vw, 1.25rem); }
.fold .fold { border-color: var(--line); }
.fold-block { margin-block-start: 0; }
.block.fold-block + .block { margin-block-start: 0; }
.fold-all { text-align: end; margin: 0 0 6px; }
.fold-all-btn { background: none; border: 1px solid var(--line-strong); color: var(--sand); border-radius: 999px; padding: 0 16px; min-height: 40px; font: 600 0.82rem/1 var(--mono); letter-spacing: 0.06em; cursor: pointer; }
.fold-all-btn:hover, .fold-all-btn:focus-visible { border-color: var(--sand); }

/* a section a person opens on the home page: same pattern, larger heading */
.fold-section > summary h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.1; }
.fold-section > summary .sub { display: block; margin-top: 8px; font: 400 1rem/1.5 var(--sans); color: var(--muted); max-width: 60ch; }
.fold-section > summary { align-items: flex-start; min-height: 76px; padding-block: 22px; }
.fold-section > summary .plus { margin-top: 8px; }

/* -------------------------------------------------- styled option group (replaces a native <select>) */
.pick { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.pick legend { padding: 0; margin-bottom: 10px; font-size: 0.9rem; color: var(--muted); }
.pick label { position: relative; display: inline-flex; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04); color: var(--bone); font: 500 0.92rem/1 var(--sans); transition: background 0.2s, border-color 0.2s;
}
.pick label:hover span { border-color: var(--sand); }
.pick input:checked + span { background: var(--ember); border-color: var(--ember); color: var(--ember-ink); font-weight: 600; }
.pick input:focus-visible + span { outline: 3px solid var(--bone); outline-offset: 3px; }

/* ------------------------------------------------------------------------ home: proof, start here */
.reach-hero { margin-top: 10px; }
.band-tight { padding-block: clamp(26px, 4vw, 44px); }
.proof-head { margin-bottom: 18px; }
.proof-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proof-grid li { display: flex; }
.proof-grid a {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 18px 20px; border-radius: 16px; text-decoration: none;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); transition: border-color 0.2s, background 0.2s;
}
.proof-grid a:hover, .proof-grid a:focus-visible { border-color: var(--sand); background: rgba(255, 255, 255, 0.07); }
.proof-grid b { font: 600 1.02rem/1.3 var(--sans); color: var(--bone); }
.proof-grid span { font-size: 0.93rem; line-height: 1.5; color: var(--muted); }
.proof-grid .tick { color: var(--teal); }
@media (max-width: 900px) { .proof-grid { grid-template-columns: minmax(0, 1fr); } }
.start-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .start-grid { grid-template-columns: minmax(0, 1fr); } }
.start-card { padding: 28px 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.start-card h3 { font-size: 1.6rem; }
.start-card .why { font-size: 1.02rem; color: #d8d2c4; max-width: 46ch; }
.start-card .pain { font: italic 400 1.04rem/1.5 var(--serif); color: #cdc7b9; }
.start-card .link-arrow { margin-top: auto; font: 600 0.9rem/1.2 var(--mono); color: var(--sand); text-decoration: none; padding-block: 8px; }
.start-card .link-arrow:hover { color: var(--bone); text-decoration: underline; }
.price-from { margin-top: 18px; font-size: 1rem; color: var(--muted); max-width: 70ch; }
.price-from b { color: var(--bone); font-weight: 600; }
.stop-lede { max-width: 62ch; }
.limit-short { columns: 2 340px; column-gap: 44px; max-width: 1000px; }
.limit-short li { break-inside: avoid; display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.5; color: #d8d2c4; }
.limit-short li::before { content: "\00d7"; font: 300 1.5rem/1 var(--serif); color: var(--halt); }
.limit-short b { color: var(--bone); font-weight: 600; }
.vanish-short { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vanish-short li { padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: 16px; background: rgba(255, 255, 255, 0.04); font-size: 0.98rem; line-height: 1.5; color: var(--muted); }
.vanish-short b { display: block; margin-bottom: 4px; color: var(--bone); font: 400 1.25rem/1.25 var(--serif); }
@media (max-width: 900px) { .vanish-short { grid-template-columns: minmax(0, 1fr); } }
.explore-links { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.explore-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none; color: var(--bone); font-size: 0.95rem; }
.explore-links a:hover, .explore-links a:focus-visible { border-color: var(--sand); background: rgba(255, 255, 255, 0.05); }

/* the ember glow on the primary button is the one animated emphasis; none when motion is reduced (rule at the end of the file) */
@media (prefers-reduced-motion: reduce) {
  .cta-bar { transition: none; }
  .pick span { transition: none; }
}

/* a link to a folded section lands it below the sticky header */
details[id], .fold h2[id], .fold h3[id], .fold h4[id], .fold-body [id], .sources, .related { scroll-margin-top: 88px; }

/* ------------------------------------------------ tap targets found by a script check at 390 px (44 px at least) */
.brand { min-height: 44px; }
.link-arrow, .start-card .link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
.field input[type="range"] { min-height: 44px; }
.fold-all-btn { min-height: 44px; }
.reach { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.reach a { display: inline-flex; align-items: center; min-height: 44px; }
.models-note a, .contact-lines a { padding-block: 12px; }
@media (max-width: 760px) {
  .reach span[aria-hidden="true"] { display: none; }
  .reach { column-gap: 18px; }
}