:root {
  
  --font-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-editorial: "Fraunces", "Newsreader", Georgia, serif;

  
  --bg-app: #ffffff;
  --bg-card: #ffffff;
  --bg-sub: #fafafa;
  --bg-inset: #f4f4f5;
  --bg-band: #f1f1f2;        
  --bg-hover: rgba(24, 24, 27, 0.04);
  --bg-active: rgba(24, 24, 27, 0.065);

  
  --border: rgba(24, 24, 27, 0.12);
  --border-2: rgba(24, 24, 27, 0.18);

  
  --text: #1c1a17;

  
  --accent: #ff5a2c;
  --user-bubble: #1c1a17;
  --accent-press: #ec491d;
  --accent-soft: rgba(255, 90, 44, 0.11);
  --accent-on: #ffffff;

  
  
  --ok: #127648;   --ok-soft: rgba(22, 147, 90, 0.12);
  --warn: #8b5c19; --warn-soft: rgba(207, 138, 38, 0.13);
  --crit: #b53c27; --crit-soft: rgba(216, 71, 47, 0.10);
  --info: #2863c8; --info-soft: rgba(47, 115, 232, 0.12);

  
  --r-xl: 18px; --r-lg: 14px; --r-md: 11px; --r-sm: 8px; --r-pill: 999px;

  
  --shadow-card: 0 1px 2px rgba(24, 24, 27, 0.06), 0 12px 28px -14px rgba(24, 24, 27, 0.18);
  --shadow-soft: 0 1px 2px rgba(24, 24, 27, 0.06);
  --shadow-pop: 0 30px 70px -28px rgba(24, 24, 27, 0.30), 0 4px 14px -8px rgba(24, 24, 27, 0.18);

  
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  
  --bg-content: var(--bg-app);
  --bg-sidebar: var(--bg-band);
  --bg-elevated: var(--bg-card);
  --border-default: var(--border);
  --border-strong: var(--border-2);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-tertiary: var(--text-3);
  --text-disabled: var(--text-4);
  --text-inverse: #ffffff;
  --accent-hover: var(--accent-press);
  --accent-subtle: var(--accent-soft);
  --severity-critical: var(--crit);
  --severity-warning: var(--warn);
  --severity-ok: var(--ok);
  --severity-critical-bg: var(--crit-soft);
  --severity-warning-bg: var(--warn-soft);
  --severity-ok-bg: var(--ok-soft);
  --radius-xs: 4px;
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --radius-pill: var(--r-pill);
  --font-sans: var(--font-ui);
  --ease-out: var(--ease);
}




*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: var(--accent-soft); color: var(--text); }


body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(820px 480px at 78% -6%, rgba(255,90,44,0.06), transparent 60%),
    radial-gradient(680px 460px at 8% 2%, rgba(255,160,90,0.05), transparent 58%);
  z-index: 0;
}


.para {
  position: fixed; inset: -10% -5%; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.para i { position: absolute; display: block; will-change: transform; }
.para .p1 {
  top: -8%; right: -6%; width: 62vw; height: 62vw;
  background: radial-gradient(circle at 50% 50%, rgba(255,90,44,0.10), rgba(255,90,44,0) 62%);
  transform: translate3d(0, calc(var(--sy, 0px) * 0.06), 0);
}
.para .p2 {
  top: 22%; left: -14%; width: 54vw; height: 54vw;
  background: radial-gradient(circle at 50% 50%, rgba(255,168,96,0.09), rgba(255,168,96,0) 60%);
  transform: translate3d(0, calc(var(--sy, 0px) * -0.04), 0);
}
.para .p3 {
  bottom: -18%; left: 26%; width: 48vw; height: 48vw;
  background: radial-gradient(circle at 50% 50%, rgba(120,140,255,0.06), rgba(120,140,255,0) 62%);
  transform: translate3d(0, calc(var(--sy, 0px) * 0.03), 0);
}

.para .pgrid {
  inset: -20% -10%; opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(28,25,20,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28,25,20,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: translate3d(0, calc(var(--sy, 0px) * 0.02), 0);
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 20%, transparent 78%);
}
@media (max-width: 900px) { .para .pgrid { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .para i { transform: none !important; }
}


.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }

html { overflow-x: clip; }
html, body { max-width: 100%; }
.lane { max-width: 760px; }
section { position: relative; z-index: 1; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow .tick { width: 16px; height: 1px; background: var(--accent); opacity: 0.8; }

.sec-head { max-width: 700px; }
.sec-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(25px, 3.1vw, 35px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 12px 0 0;
  text-wrap: balance;
}
.sec-title em { font-family: var(--font-editorial); font-style: italic; font-weight: 500; color: var(--accent); letter-spacing: -0.015em; }
.sec-sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 18px 0 0;
  
  max-width: 52ch;
  text-wrap: pretty;
}


.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg-app) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 8px; flex: none; }
.brand .mark { width: 26px; height: 26px; }
.brand .name { font-weight: 700; font-size: 16.5px; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--text-2);
  padding: 7px 12px; border-radius: var(--r-sm); transition: color 120ms, background 120ms;
}
.nav-links a:hover { color: var(--text); background: var(--bg-hover); }
.nav-links a.active { color: var(--text); font-weight: 600; }


.nav-drop { position: relative; }

.nav-drop::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px;
  pointer-events: none;
}
.nav-drop:hover::after,
.nav-drop:focus-within::after,
.nav-drop.open::after { pointer-events: auto; }


.nav-drop-mega::after { top: calc(50% + 16px); height: 22px; }
.nav-drop-mega:hover::after,
.nav-drop-mega:focus-within::after,
.nav-drop-mega.open::after {
  left: 50%; transform: translateX(-50%);
  width: min(940px, calc(100vw - 32px)); right: auto;
}
.nav-drop-t { display: inline-flex; align-items: center; gap: 5px; }
.nav-drop-t .caret {
  width: 9px; height: 6px; stroke-width: 1.9; opacity: 0.55;
  transition: transform 160ms var(--ease), opacity 160ms;
}
.nav-drop:hover .caret, .nav-drop.open .caret { opacity: 1; transform: rotate(180deg); }
.nav-links .nav-drop:hover > .nav-drop-t, .nav-links .nav-drop.open > .nav-drop-t {
  color: var(--text); background: var(--bg-hover);
}
.nav-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 288px; padding: 7px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 150ms var(--ease), transform 150ms var(--ease), visibility 150ms;
}
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu, .nav-drop.open .nav-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-links .nav-menu a {
  display: block; padding: 10px 12px; border-radius: var(--r-sm);
  font-weight: 500; color: var(--text);
}
.nav-links .nav-menu a + a { margin-top: 2px; }
.nav-menu .nm-t { display: block; font-size: 14px; font-weight: 600; }
.nav-menu .nm-d { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.35; }
.nav-menu a:hover .nm-d { color: var(--text-2); }


.nav-drop-mega { position: static; }
.nav-mega {
  left: 50%; transform: translate(-50%, -4px);
  width: min(940px, calc(100vw - 32px));
  min-width: 0; padding: 0;
}

.nav-mega-sol .mega-cols { grid-template-columns: 0.8fr 1.2fr 300px; }
.nav-drop-mega:hover .nav-mega,
.nav-drop-mega:focus-within .nav-mega,
.nav-drop-mega.open .nav-mega { transform: translate(-50%, 0); }

.mega-cols {
  display: grid; grid-template-columns: 1fr 1fr 300px;
  gap: 6px; padding: 14px;
}
.mega-note {
  margin: 8px 10px 0; padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.5; color: var(--text-3);
}
.mega-col { min-width: 0; }
.mega-h {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-3, var(--text-2)); padding: 6px 10px 8px;
}
.mega-h-2 { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.nav-links .nav-mega a {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; border-radius: var(--r-sm); margin-top: 0;
}
.nav-links .nav-mega a + a { margin-top: 1px; }
.mega-ic {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg-hover); color: var(--text-2);
  transition: background 140ms, color 140ms;
}
.mega-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.nav-links .nav-mega a:hover .mega-ic { background: var(--accent-soft, var(--bg-2)); color: var(--accent, var(--text)); }
.mega-tx { min-width: 0; }
.mega-tx .nm-d { white-space: normal; }


.mega-panel {
  position: relative; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--bg-2, var(--bg-hover));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px; min-height: 288px;
}
.mega-panel-art {
  
  position: absolute; left: 14px; right: 14px; top: 14px; bottom: 92px;
  display: grid; align-content: center;
  opacity: 0; transition: opacity 220ms var(--ease);
}
.mega-panel-art.on { opacity: 1; }

.mega-panel-art svg { width: 100%; height: auto; display: block; overflow: visible; }


.mp-dim rect, .mp-rows rect, .mp-grid rect, .mp-frames rect { fill: var(--border); opacity: 0.5; }
.mp-ink rect { fill: var(--text-2); opacity: 0.5; }
.mp-was rect { fill: var(--text-3); opacity: 0.35; }
.mp-card { fill: var(--bg-elevated); stroke: var(--border-2); stroke-width: 1; }
.mp-bubble { fill: var(--bg-elevated); stroke: var(--border-2); stroke-width: 1; }
.mp-hi { fill: var(--accent-soft); }
.mp-bars rect { fill: var(--text-3); opacity: 0.4; }
.mp-frames rect { fill: none; stroke: var(--border-2); stroke-width: 1.2; }
.mp-grid rect { fill: var(--bg-elevated); stroke: var(--border); stroke-width: 1; opacity: 1; }
.mp-rows rect { fill: var(--bg-elevated); stroke: var(--border); stroke-width: 1; opacity: 1; }


.mp-acc rect, .mp-acc circle { fill: var(--accent); }
.mp-acc path { fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.mp-card-acc { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }

.mp-dot, .mp-dot circle { fill: var(--text-3); }
.mp-dot-acc, .mp-dot-acc circle { fill: var(--accent); }
.mp-tick path { fill: none; stroke: var(--accent); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }


.mp-axis, .mp-tie, .mp-brace { fill: none; stroke: var(--border-2); stroke-width: 1.2; }
.mp-tie { stroke-dasharray: 3 4; }
.mp-dim-l { fill: none; stroke: var(--text-3); stroke-width: 2; opacity: 0.55; }
.mp-acc-l { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.mp-hold { fill: none; stroke: var(--accent); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }
.mp-life { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.mp-dashed { stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 4 5; opacity: 0.6; }
.mp-gap, .mp-drop { stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0.7; }
.mp-cap { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mp-tickmark path { stroke: var(--border-2); stroke-width: 1.2; }
.mp-strike path, .mp-expire { stroke: var(--text-3); stroke-width: 2;
  stroke-linecap: round; opacity: 0.75; fill: none; }
.mp-back { fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }


.mp-return rect { fill: var(--bg-2, #fff); stroke: var(--accent); stroke-width: 1.2;
  stroke-dasharray: 3 3; }
.mp-over rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.mp-null rect { fill: none; stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 2 3; }
.mp-gross { fill: var(--border); opacity: 0.55; }
.mp-net { fill: var(--accent); }
.mp-window { fill: none; stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.7; }
.mp-carry { fill: var(--accent-soft); }


.mp-lbl { font-family: var(--font-mono); font-size: 11px; fill: var(--text-2); }
.mp-lbl-dim { fill: var(--text-3); }
.mp-lbl-acc { fill: var(--accent-text); }
.mega-panel-cap { position: relative; }
.mega-panel-cap .mp-t { display: block; font-size: 14px; font-weight: 650; color: var(--text); }
.mega-panel-cap .mp-d { display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-2); margin-top: 4px; }

.mega-foot {
  border-top: 1px solid var(--border);
  padding: 12px 14px 14px;
  background: var(--bg-sub, var(--bg-hover));
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.mega-foot-h {
  display: block; padding: 0 4px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-3);
}
.mega-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nav-links .nav-mega .mega-teams a {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 12px; margin-top: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-elevated);
}
.nav-links .nav-mega .mega-teams a:hover { border-color: var(--border-2); }

@media (max-width: 1080px) {
  .mega-cols { grid-template-columns: 1fr 1fr; }
  .mega-panel { display: none; }
  .nav-mega { width: min(660px, calc(100vw - 32px)); }
}

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: auto; flex: none;
  background: transparent; border: 1px solid var(--border-2); border-radius: var(--r-sm);
  color: var(--text); cursor: pointer; padding: 0;
}
.nav-burger svg { width: 20px; height: 20px; stroke-width: 2; fill: none; stroke: currentColor; }
.nav-burger .ic-close { display: none; }
.nav.menu-open .nav-burger .ic-open { display: none; }
.nav.menu-open .nav-burger .ic-close { display: block; }


.mobile-menu {
  display: none; position: fixed; left: 0; right: 0; top: 64px; z-index: 49;
  background: var(--bg-app); border-bottom: 1px solid var(--border);
  box-shadow: 0 20px 40px -20px rgba(28,25,20,0.25);
  padding: 12px 20px 22px; flex-direction: column; gap: 2px;
}
.nav.menu-open + .mobile-menu { display: flex; }
.mobile-menu a {
  font-size: 16px; font-weight: 600; color: var(--text); padding: 13px 12px;
  border-radius: var(--r-sm); border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu a.mm-sub { padding-left: 26px; font-size: 15px; font-weight: 500; color: var(--text-2); }
.mobile-menu a:hover, .mobile-menu a:active { background: var(--bg-hover); }
.mobile-menu .mm-cta { margin-top: 14px; }


.mm-group { border-bottom: 1px solid var(--border); }
.mm-group > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 2px; font-size: 16px; font-weight: 600; color: var(--text);
  cursor: pointer; list-style: none;
}
.mm-group > summary::-webkit-details-marker { display: none; }
.mm-group > summary .caret {
  width: 11px; height: 7px; stroke-width: 2; opacity: 0.5;
  transition: transform 180ms var(--ease);
}
.mm-group[open] > summary .caret { transform: rotate(180deg); opacity: 1; }
.mm-group a { border-bottom: none; }
.mm-group > a:last-child { padding-bottom: 12px; }
.mobile-menu .mm-lbl {
  display: block; padding: 12px 2px 4px 26px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-2);
}
body.menu-open { overflow: hidden; }


.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 19px; border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background 140ms var(--ease), border-color 140ms, color 140ms, box-shadow 140ms;
}
.btn svg { width: 16px; height: 16px; stroke-width: 2; }

.btn-primary { background: var(--accent-fill); color: var(--accent-on); box-shadow: 0 1px 2px rgba(110,38,8,0.12), 0 8px 20px -10px rgba(255,90,44,0.5); }
.btn-primary:hover { background: var(--accent-fill-hover); }.btn-sm { height: 36px; padding: 0 15px; font-size: 13.5px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }


.hero { padding: 88px 0 76px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }.hero-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.hero-slogan {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.hero-slogan .w { transition: color 200ms; }
.hero-slogan .w1 { color: var(--text-3); }
.hero-slogan .w2 { color: var(--text-2); }
.hero-slogan .w3 { color: var(--accent-text); }
.hero-slogan .arw { width: 18px; height: 8px; flex: none; color: var(--border-2); }
.hero-slogan .arw svg { width: 100%; height: 100%; stroke-width: 1.5; }
.hero-slogan:hover .w1 { color: var(--text-2); }
.hero-slogan:hover .w2 { color: var(--text); }
.hero-tagline {
  font-family: var(--font-editorial); font-style: italic; font-weight: 500;
  font-size: clamp(14px, 1.15vw, 16px); line-height: 1.35; letter-spacing: 0;
  color: var(--muted); margin: 10px 0 0; text-wrap: balance; opacity: .85;
}
.hero h1 {
  font-weight: 800;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  margin: 10px 0 0;
  text-wrap: balance;
}
.hero h1 em { font-family: var(--font-editorial); font-style: italic; font-weight: 500; color: var(--accent); letter-spacing: -0.02em; }
.hero-lede { font-size: 18.5px; line-height: 1.6; color: var(--text-2); margin: 24px 0 0; max-width: 480px; text-wrap: pretty; }
.hero-cta { display: flex; align-items: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-note { font-size: 12.5px; color: var(--text-3); margin-top: 16px; font-family: var(--font-mono); letter-spacing: 0.02em; }


.cutout {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.cutout::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,90,44,0.04), transparent 48%);
}
.cutout > * { position: relative; }
.co-kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.co-h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 0; line-height: 1.25; }
.co-h1 .day { font-family: var(--font-editorial); font-style: italic; font-weight: 500; color: var(--accent); }



.builds-pin { padding-top: 0; padding-bottom: 0; }
.builds-sticky { position: static; padding: clamp(30px, 3.6vh, 48px) 0; }

.bstage { max-width: 940px; margin: clamp(22px, 3vh, 34px) auto 0; }


.bstage-tabs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin-bottom: 18px;
}
.bstage-tabs button {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  font: inherit; cursor: pointer; padding: 12px 14px;
  background: var(--bg-sub); border: 1px solid var(--border);
  border-radius: var(--r-lg); position: relative; isolation: isolate;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.bstage-tabs button:hover { border-color: var(--border-2); transform: translateY(-2px); }
.bt-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--text-4); }
.bt-l { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-2); }
.bt-s { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
        text-transform: uppercase; color: var(--text-4); }
.bstage-tabs button[aria-selected="true"] {
  background: var(--bg); border-color: var(--accent);
}
.bstage-tabs button[aria-selected="true"] .bt-l { color: var(--text-1); }
.bstage-tabs button[aria-selected="true"] .bt-n,
.bstage-tabs button[aria-selected="true"] .bt-s { color: var(--accent-text); }
.bstage-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


.bstage-panels {
  background: var(--bg-sub); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px;
}
.bpanel { display: none; }
.bpanel.on { display: block; animation: bpin .34s var(--ease) both; }
.bpanel[hidden] { display: none; }
@keyframes bpin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bpanel.on { animation: none; } }




@media (max-height: 725px) { .builds-sticky { padding: 44px 0; } }


@media (max-width: 860px) {
  .builds-sticky { padding: 56px 0; }
  .bstage-tabs { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  
  .bstage-tabs button:last-child { grid-column: 1 / -1; }
  .bstage-tabs button { padding: 10px 11px; }
  .bt-l { font-size: 13px; }
  .bstage-panels { min-height: 0; }
}


.builds-pin .sec-head { max-width: 620px; margin-left: auto; margin-right: auto; text-align: center; }
.builds-pin .sec-sub { margin-left: auto; margin-right: auto; }


.builds-slider { margin-top: clamp(26px, 3vh, 38px); position: relative; }
.builds {
  
  display: grid; grid-auto-flow: column; grid-auto-columns: min(720px, 82%);
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  
  scroll-behavior: smooth; scroll-padding-top: 84px;
  padding-bottom: 4px; margin: 0 -4px; padding-left: 4px; padding-right: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.builds::-webkit-scrollbar { display: none; }
.builds > .build { scroll-snap-align: start; }

.builds-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.builds-dots { display: flex; align-items: center; gap: 8px; }.builds-dot.on { background: var(--accent); width: 22px; border-radius: 4px; }@media (max-width: 640px) { .builds { grid-auto-columns: 88%; } .builds-arrows { display: none; } }
.build {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column;
  position: relative; isolation: isolate;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}

.build::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: transform 420ms var(--ease), opacity 200ms;
}
.build:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop, 0 30px 60px -24px rgba(28,25,20,0.28), 0 4px 12px -6px rgba(28,25,20,0.14));
  border-color: var(--border-2);
}
.build:hover::after { transform: scaleX(1); opacity: 1; }
.build:hover .build-canvas { border-color: rgba(255,90,44,0.28); }
.build-canvas { transition: border-color 260ms var(--ease); }
.build-head { padding: 18px 20px 0; }.build-reply .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); flex: none; }
.build-canvas { margin: 14px 16px 16px; background: var(--bg-sub); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; flex: 1; }
.build-cap { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 0 20px 18px; }
.build-cap .name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.build-cap .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }


.mini-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mkt { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 11px; }
.mkt-l { font-size: 10px; font-weight: 600; color: var(--text-3); }
.mkt-v { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mkt-d { font-size: 9.5px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.mkt-d.up { color: var(--ok); } .mkt-d.down { color: var(--crit); } .mkt-d.flat { color: var(--text-3); }
.mini-chart { margin-top: 10px; }
.mini-chart svg { width: 100%; height: 46px; display: block; }


.mini-agent { display: flex; flex-direction: column; gap: 8px; }
.mag-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 11px; }
.mag-sev { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; }
.mag-sev .d { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.mag-sev.crit { color: var(--crit); } .mag-sev.crit .d { background: var(--crit); }
.mag-sev.warn { color: var(--warn); } .mag-sev.warn .d { background: var(--warn); }
.mag-ent { font-size: 12px; font-weight: 600; }
.mag-rec { font-size: 10.5px; color: var(--text-2); margin-top: 1px; }
.mag-imp { text-align: right; }
.mag-imp .v { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mag-imp .l { font-size: 8.5px; color: var(--text-3); }

.mag-hist { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 11px; }
.mag-hist-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 10px; color: var(--text-2); }
.mag-hist-h b { font-size: 11.5px; color: var(--text-1); font-variant-numeric: tabular-nums; }
.mag-hist-strip { position: relative; height: 20px; margin: 7px 0 5px; border-radius: 3px; background: linear-gradient(to right, var(--border) 0 1px, transparent 1px) repeat-x; background-size: 25% 100%; border-bottom: 1px solid var(--border); }
.mag-hist-strip i { position: absolute; bottom: 0; left: calc(var(--x) * 1%); width: 3px; height: 11px; border-radius: 2px 2px 0 0; background: var(--crit); opacity: .75; }
.mag-hist-f { font-size: 9px; color: var(--text-3); }


.mini-plan { display: flex; flex-direction: column; }
.mpl-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.mpl-row:last-child { border-bottom: none; }
.mpl-n { width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); font-family: var(--font-mono); font-size: 10px; font-weight: 600; display: grid; place-items: center; flex: none; }
.mpl-t { font-size: 12px; font-weight: 500; flex: 1; }
.mpl-s { font-size: 10px; font-family: var(--font-mono); color: var(--text-3); }


.mini-camp { display: flex; flex-direction: column; gap: 7px; }
.mcp-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; }
.mcp-flag { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mcp-n { font-size: 11.5px; font-weight: 500; }
.mcp-sub { font-size: 9.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.msb { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: var(--r-pill); font-size: 10px; font-weight: 600; }
.msb.ok { color: var(--ok); background: var(--ok-soft); }
.msb.warn { color: var(--warn); background: rgba(207,138,38,0.13); }


.moat { background: #141210; color: #f4f2ee; position: relative; overflow: hidden; }
.moat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 84% -8%, rgba(255,90,44,0.20), transparent 56%),
    radial-gradient(60% 80% at 6% 108%, rgba(255,120,60,0.08), transparent 55%);
}

.moat-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.moat-particles i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,120,70,0.9), rgba(255,90,44,0));
  opacity: 0; will-change: transform, opacity;
}
@media (prefers-reduced-motion: no-preference) {
  .moat-particles i { animation: mote linear infinite; }
}
@keyframes mote {
  0% { transform: translateY(30px) scale(0.6); opacity: 0; }
  14% { opacity: 0.8; }
  86% { opacity: 0.5; }
  100% { transform: translateY(-70px) scale(1.1); opacity: 0; }
}

.moat-grid-lines { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5;
  background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(80% 70% at 70% 20%, #000, transparent 75%);
}
.moat .wrap { position: relative; }
.moat-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
.moat-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.moat-eyebrow .tick { width: 16px; height: 1px; background: var(--accent); }
.moat h2 { font-size: clamp(27px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; margin: 20px 0 0; text-wrap: balance; }
.moat h2 em { font-family: var(--font-editorial); font-style: italic; font-weight: 500; color: var(--accent); }
.moat-sub { font-size: 16px; line-height: 1.62; color: rgba(244,242,238,0.62); margin: 20px 0 0; max-width: 46ch; text-wrap: pretty; }
.moat-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.moat-points li { display: flex; gap: 12px; font-size: 14px; line-height: 1.5; color: rgba(244,242,238,0.82); }
.moat-points li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); stroke-width: 2; }
.moat-points li b { color: #f4f2ee; font-weight: 600; }


.memcard { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-xl); padding: 8px; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6); }
.memcard-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; }
.memcard-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.memcard-ic svg { width: 16px; height: 16px; stroke-width: 2; }
.memcard-h { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.memcard-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,242,238,0.4); margin-top: 2px; }

.learns { display: flex; flex-direction: column; gap: 12px; padding: 4px; }
.learn { position: relative; padding-left: 20px; }
.learn::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: -12px; width: 1px; background: linear-gradient(var(--accent), transparent); }
.learn:last-child::before { display: none; }
.learn::after { content: ""; position: absolute; left: 1px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255,90,44,0.14); }
.learn-said { font-size: 13px; line-height: 1.5; color: rgba(244,242,238,0.92); }
.learn-said b { color: #fff; font-weight: 700; }
.learn-who { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,242,238,0.4); margin-bottom: 4px; }
.learn-said.act { font-style: normal; color: rgba(244,242,238,0.78); }
.learn-got { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 11.5px; font-weight: 500; color: var(--accent-text); }
.learn-got svg { width: 13px; height: 13px; flex: none; stroke-width: 2.5; }
.memcard-foot { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 11.5px; color: rgba(244,242,238,0.5); }
.memcard-foot .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 3px rgba(52,205,131,0.18); }
@media (max-width: 860px) { .moat-grid { grid-template-columns: 1fr; gap: 40px; } }.ring { width: 64px; height: 64px; flex: none; position: relative; }
.ring .score { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-editorial); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.co-health-main .ht { font-size: 13px; font-weight: 700; }
.co-health-main .hs { font-size: 12px; color: var(--text-2); margin-top: 3px; }


.co-list { margin-top: 14px; display: flex; flex-direction: column; }.co-ic.crit { background: var(--crit-soft); color: var(--crit); }
.co-ic.warn { background: var(--warn-soft); color: var(--warn); }
.co-ic.ok { background: var(--ok-soft); color: var(--ok); }
.co-item-main { min-width: 0; flex: 1; }
.co-item-t { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.co-item-w { font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.co-item-w b { color: var(--text); font-weight: 600; }

.sbadge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; flex: none; }
.sbadge.crit { color: var(--crit); background: var(--crit-soft); }
.sbadge.warn { color: var(--warn); background: var(--warn-soft); }
.sbadge.ok { color: var(--ok); background: var(--ok-soft); }.kpi-l { font-size: 11px; color: var(--text-3); font-weight: 500; }
.kpi-v { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi-d { font-size: 11px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-d.up { color: var(--ok); } .kpi-d.down { color: var(--crit); }


.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }.panel.before { background: var(--bg-sub); box-shadow: none; }
.panel.before .panel-label { color: var(--crit); }
.panel.after .panel-label { color: var(--ok); }.panel.before li svg { color: var(--text-4); }
.panel.after li svg { color: var(--ok); }
.panel.after li b { color: var(--text); font-weight: 600; }






.band { padding: clamp(34px, 3.6vh, 52px) 0; }
.band + .band { padding-top: clamp(26px, 2.9vh, 42px); }
.band > .wrap > .sec-head { margin-bottom: clamp(16px, 2vh, 24px); }
.band-sub {
  
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg-band) 0%, transparent) 0%,
    var(--bg-band) 14%,
    var(--bg-band) 86%,
    color-mix(in srgb, var(--bg-band) 0%, transparent) 100%
  );
  border-top: none; border-bottom: none;
}

.band + .band::before,
.band + .band-sub::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 30%, transparent) 0%,
    var(--border) 26%,
    transparent 88%);
  opacity: 0.7; pointer-events: none;
}


.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.step { position: relative; }
.step-n { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--accent-text); }
.step-ic { width: 46px; height: 46px; border-radius: var(--r-lg); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-soft); display: grid; place-items: center; margin: 16px 0 0; color: var(--text); }
.step-ic svg { width: 21px; height: 21px; stroke-width: 2; }
.step h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin: 18px 0 0; }
.step p { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 9px 0 0; text-wrap: pretty; }





.creative-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.creative-head { grid-column: 1 / -1; }
.creative-head { max-width: 520px; }
.creative-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 0; align-content: start; }
@media (max-width: 960px) {
  .creative-split { grid-template-columns: 1fr; gap: 32px; }
  .creative-head { position: static; max-width: 700px; }
  .creative-grid { margin-top: 4px; }
}
.creative-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 20px; box-shadow: var(--shadow-soft); }
.creative-ic { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.creative-ic svg { width: 20px; height: 20px; stroke-width: 2; }
.creative-card h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em; margin: 16px 0 0; }
.creative-card p { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin: 8px 0 0; text-wrap: pretty; }
.creative-card p em { font-family: var(--font-editorial); font-style: italic; font-weight: 500; color: var(--accent-text); }


.matrix-wrap { margin-top: 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 660px; font-size: 14px; }
.matrix th, .matrix td { padding: 15px 16px; text-align: center; border-bottom: 1px solid var(--border); }
.matrix thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); background: var(--bg-sub); border-bottom: 1px solid var(--border-2); }
.matrix thead th:first-child { border-top-left-radius: var(--r-md); }
.matrix thead th.mx-cap { text-align: left; }
.matrix thead th.mx-us { background: var(--accent-fill); color: var(--accent-on); border-top-right-radius: var(--r-md); letter-spacing: 0.04em; }
.matrix tbody th { text-align: left; font-weight: 600; font-size: 14px; color: var(--text); }
.matrix td.yes { color: var(--ok); font-weight: 700; font-size: 16px; }
.matrix td.no { color: var(--text-4); }
.matrix td.us { background: var(--accent-soft); color: var(--accent-text); }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: none; }
.matrix tbody tr:last-child td.us { border-bottom-right-radius: var(--r-md); }

@media (max-width: 720px) {
  .matrix-wrap { overflow-x: visible; }
  .matrix { min-width: 0; display: block; }
  .matrix thead { display: none; }
  .matrix tbody, .matrix tr { display: block; }
  .matrix tr { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px; background: var(--bg-card); }
  .matrix tbody th { display: block; font-size: 14.5px; padding: 0 0 9px; border: none; }
  .matrix td { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 0; border: none; font-size: 13px; }
  .matrix td::before { content: attr(data-l); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-4); }
  .matrix td.us { background: none; padding-right: 0; font-weight: 700; }
  .matrix td.us::before { color: var(--accent-text); }
  .matrix tbody tr:hover td:not(.us), .matrix tbody tr:hover th { background: none; }
}
.matrix-note { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--text-3); text-align: center; }


@property --off {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}



.s3-scene {
  --s: 0.78;
  --gap: calc(50px * var(--s));   
  --brk: calc(30px * var(--s));   
  position: relative; width: 100%; aspect-ratio: 5 / 4; min-height: 0;
  
  background: none; border: none; border-radius: 0; overflow: visible;
  perspective: 9000px; perspective-origin: 50% 50%;
  container-type: inline-size;
}
.s3-deck {
  position: absolute; left: 50%; top: 50%;
  width: calc(236px * var(--s)); height: calc(120px * var(--s));
  transform-style: preserve-3d;
  
  
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-42deg);
}
.s3-plate {
  position: absolute; inset: 0; transform-style: preserve-3d;
  
  --z: calc(var(--i) * var(--gap));
  transform: translateZ(calc(var(--z) + var(--off)));
  transition: transform 400ms var(--ease);
  will-change: transform;
}
.s3-face {
  position: absolute; inset: 0; border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.4);
  background: linear-gradient(145deg, var(--face2), var(--edge));
  box-shadow: 0 18px 34px -20px rgba(28,25,20,0.55);
  transition: box-shadow 260ms var(--ease);
}

.s3-face::after {
  content: ""; position: absolute; inset: 0; border-radius: 13px;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent 58%);
  pointer-events: none;
}

.s3-edge {
  position: absolute; inset: 0; border-radius: 13px;
  background: var(--edge); transform: translateZ(calc(-11px * var(--s))); filter: brightness(0.66);
}
.s3-l {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.9);
}





.s3-plate[data-tier="upper"] { --z: calc(var(--i) * var(--gap) + var(--brk)); }


.s3-plate.on .s3-face { box-shadow: 0 30px 50px -20px rgba(28,25,20,0.5); }

.s3-deck.focused .s3-plate:not(.on) .s3-face { opacity: 0.68; }
.s3-face { transition: box-shadow 320ms var(--ease), opacity 320ms var(--ease); }




.s3-ceiling {
  position: absolute; left: 0; right: 0; top: 62%; z-index: 1; pointer-events: none;
  border-top: 1px dashed var(--border-2);
}
.s3-ceiling span {
  position: absolute; left: 16px; top: -8px; background: var(--bg-sub); padding: 0 8px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-3);
}




.s3-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 6px; justify-content: center; align-items: stretch; min-width: 0; }
.s3-list li {
  padding: 13px 16px; border-radius: var(--r-lg); border: 1px solid transparent;
  box-sizing: border-box; width: 100%; min-width: 0;
  cursor: pointer; transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.s3-list li:hover { background: var(--bg-hover); }
.s3-list li.on { background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow-soft); }
.s3-li-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s3-li-n { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-3); }

.s3-list h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.s3-li-hd { display: block; margin: 0; font: inherit; }
.s3-li-t { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.s3-li-tag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); background: var(--bg-inset); border-radius: var(--r-pill); padding: 3px 9px;
}
.s3-list li[data-tier="upper"] .s3-li-n { color: var(--accent-text); }
.s3-list li[data-tier="upper"] .s3-li-tag { background: var(--accent-soft); color: var(--accent-text); }.s3-list li.on .s3-li-body { grid-template-rows: 1fr; }.s3-list li p { font-size: 13px; line-height: 1.6; color: var(--text-2); margin: 9px 0 0; text-wrap: pretty; }
.s3-list li p.s3-li-v { color: var(--text-3); font-size: 12.5px; }


.stack-kicker {
  margin: 30px 0 0; max-width: 68ch; text-align: left; font-size: 15px;
  line-height: 1.6; color: var(--text-2); text-wrap: pretty;
}

@media (max-width: 1180px) {
  .stack3d .s3-scene { --s: 0.78; }
}
@media (max-width: 980px) {
  .stack3d { grid-template-columns: 1fr; gap: 24px; }
  .stack3d .s3-scene { aspect-ratio: 4 / 3; --s: 0.85; }
}
@media (max-width: 560px) {
  .s3-list li p { display: block; }
  .s3-list li { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
  .s3-plate { transition: none; }
  .s3-list li p { display: block; }
}


.gt-trap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; margin-top: 44px; align-items: stretch; }
.gt-lens { background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-card); padding: 24px 22px; display: flex; flex-direction: column; }
.gt-above { border-radius: var(--r-xl) 0 0 var(--r-xl); }
.gt-below { border-radius: 0 var(--r-xl) var(--r-xl) 0; border-color: rgba(255,90,44,0.3); }
.gt-lens-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gt-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); background: var(--bg-inset); border-radius: var(--r-pill); padding: 5px 11px; }
.gt-tag-us { background: var(--accent-soft); color: var(--accent-text); }
.gt-what { font-size: 12px; color: var(--text-3); }
.gt-metric { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.gt-metric b { font-size: 27px; font-weight: 700; letter-spacing: -0.03em; }
.gt-ok { font-size: 12px; font-weight: 600; color: var(--ok); background: var(--ok-soft); border-radius: var(--r-pill); padding: 4px 10px; }
.gt-bad { font-size: 12px; font-weight: 600; color: var(--crit); background: var(--crit-soft); border-radius: var(--r-pill); padding: 4px 10px; }
.gt-said { font-size: 13.5px; line-height: 1.65; color: var(--text-2); margin: 14px 0 0; text-wrap: pretty; flex: 1; }
.gt-verdict { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-3); }
.gt-verdict b { font-weight: 700; }
.gt-verdict-scale b { color: var(--text-2); }
.gt-verdict-stop b { color: var(--accent-text); }


.gt-line { position: relative; width: 46px; display: grid; place-items: center; }
.gt-line::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, var(--border-2) 0 6px, transparent 6px 12px); }
.gt-line span {
  position: relative; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3); background: var(--bg-app);
  padding: 8px 4px; writing-mode: vertical-rl; text-align: center;
}

.gt-kicker { margin: 22px 0 0; max-width: 68ch; text-align: left; font-size: 15.5px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.gt-kicker + .gt-points { margin-top: 40px; }
.gt-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gt-point { background: var(--bg-sub); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
.gt-point-t { font-size: 14.5px; font-weight: 700; letter-spacing: -0.015em; }
.gt-point p { font-size: 13px; line-height: 1.6; color: var(--text-2); margin: 9px 0 0; text-wrap: pretty; }

@media (max-width: 860px) {
  .gt-trap { grid-template-columns: 1fr; }
  .gt-above { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .gt-below { border-radius: 0 0 var(--r-xl) var(--r-xl); border-top: none; }
  .gt-line { width: auto; height: 40px; }
  .gt-line::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 2px; background: repeating-linear-gradient(to right, var(--border-2) 0 6px, transparent 6px 12px); }
  .gt-line span { writing-mode: horizontal-tb; padding: 4px 10px; }
  .gt-points { grid-template-columns: 1fr; }
}


.math-wrap { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; margin-top: 44px; align-items: start; }
.math-calc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: 26px 24px 22px; }


.math-input label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.math-field { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.math-field .math-cur { font-size: 15px; font-weight: 700; color: var(--text-3); }
.math-spend-out { display: block; margin-top: 12px; font-size: 30px; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.math-spend-out span { font-size: 14px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }

input[type="range"][data-math-spend] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 3px;
  background: var(--bg-inset); cursor: pointer;
}
input[type="range"][data-math-spend]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg-card); box-shadow: var(--shadow-soft); cursor: grab;
}
input[type="range"][data-math-spend]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--bg-card);
  background: var(--accent); box-shadow: var(--shadow-soft); cursor: grab;
}
input[type="range"][data-math-spend]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }


.math-rows { margin-top: 26px; border-top: 1px solid var(--border); }
.math-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.math-row-t { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.math-row-s { font-size: 12.5px; color: var(--text-3); margin-top: 3px; text-wrap: pretty; }
.math-row-r { text-align: right; white-space: nowrap; }
.math-row-r b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.math-row-r span { font-size: 12px; color: var(--text-3); margin-left: 2px; }
.math-total { border-bottom: none; margin-top: 4px; padding-top: 18px; border-top: 2px solid var(--text); }
.math-total .math-row-t { font-size: 15.5px; }
.math-total .math-row-r b { font-size: 26px; color: var(--accent); letter-spacing: -0.03em; }

.math-foot { display: flex; gap: 9px; margin: 20px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-3); text-wrap: pretty; }
.math-foot svg { width: 15px; height: 15px; flex: none; margin-top: 2px; stroke-width: 2; }
.math-foot b { color: var(--text-2); font-weight: 700; }


.math-aside { background: var(--bg-sub); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 24px 22px; }
.math-aside-t { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
.math-aside p { font-size: 13.5px; line-height: 1.65; color: var(--text-2); margin: 12px 0 0; text-wrap: pretty; }
.math-aside-cut { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.math-aside-cut span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.math-aside-cut b { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); }

@media (max-width: 900px) { .math-wrap { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .math-spend-out { font-size: 26px; }
  .math-total .math-row-r b { font-size: 22px; }
  .math-row-s { display: none; }
}

.integ { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }.ilogo.live svg { color: var(--ok); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.stat { padding: 4px 0; }
.stat-v { font-family: var(--font-editorial); font-weight: 500; font-size: 46px; line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--text); }
.stat-l { font-size: 13px; color: var(--text-2); margin-top: 12px; line-height: 1.5; }.quote .by { font-family: var(--font-ui); font-size: 13px; color: var(--text-3); margin-top: 24px; letter-spacing: 0.01em; }


.faq { margin-top: 44px; border-top: 1px solid var(--border-2); }
.faq details { border-bottom: 1px solid var(--border-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 18px; height: 18px; flex: none; color: var(--text-3); transition: transform 200ms var(--ease); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq-a { padding: 0 4px 24px; font-size: 14.5px; line-height: 1.65; color: var(--text-2); max-width: 720px; text-wrap: pretty; }


.cta { background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-card); padding: 56px; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 320px at 88% -20%, rgba(255,90,44,0.08), transparent 60%); }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; position: relative; }
.cta h2 { font-size: clamp(25px, 3.1vw, 35px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; margin: 14px 0 0; text-wrap: balance; }
.cta h2 em { font-family: var(--font-editorial); font-style: italic; font-weight: 500; color: var(--accent); }
.cta p { font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 16px 0 0; max-width: 420px; }
.cta-points { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.cta-points li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.cta-points li svg { position: absolute; left: 0; top: 0.15em; width: 16px; height: 16px; color: var(--ok); stroke-width: 2; }

.lead { background: var(--bg-sub); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px; }
.lead h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.lead .field { margin-top: 16px; }
.lead label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.lead input, .lead select {
  width: 100%; height: 44px; padding: 0 13px; border-radius: var(--r-sm);
  background: var(--bg-card); border: 1px solid var(--border-2);
  color: var(--text); font-family: var(--font-ui); font-size: 14px;
  transition: border-color 140ms, box-shadow 140ms;
}
.lead input::placeholder { color: var(--text-4); }
.lead input:focus, .lead select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lead select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a958a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.lead .btn { width: 100%; margin-top: 20px; }
.lead-fine { font-size: 11.5px; color: var(--text-3); margin: 14px 0 0; line-height: 1.5; text-align: center; }
.lead-demo-sub { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 12px 0 0; }
.lead-form { margin-top: 18px; }
.lf-field { display: block; margin-top: 13px; }
.lf-field span { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.lead-form textarea {
  width: 100%; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--bg-card); border: 1px solid var(--border-2);
  color: var(--text); font-family: var(--font-ui); font-size: 14px; line-height: 1.5;
  resize: vertical; min-height: 76px; transition: border-color 140ms, box-shadow 140ms;
}
.lead-form textarea::placeholder { color: var(--text-4); }
.lead-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lead-form .btn { width: 100%; margin-top: 18px; }
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-done { display: none; text-align: center; padding: 18px 4px; }
.lead-done-ic { display: block; }
.lead-done svg { width: 42px; height: 42px; color: var(--ok); margin: 0 auto 14px; stroke-width: 2; }
.lead-done h3 { font-size: 17px; }
.lead-done p { font-size: 13.5px; color: var(--text-2); margin: 8px 0 0; line-height: 1.55; }
.lead.sent form { display: none; }
.lead.sent .lead-done { display: block; }


.footer { background: var(--bg-band); border-top: 1px solid var(--border); padding: 56px 0 36px; margin-top: 8px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; }

@media (max-width: 1180px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-brand .brand { margin-bottom: 16px; }
.foot-brand p { font-size: 13px; line-height: 1.6; color: var(--text-3); max-width: 280px; }

.foot-col .foot-h { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 16px; }
.foot-col a, .foot-col button { display: block; font-size: 13.5px; color: var(--text-2); padding: 6px 0; transition: color 120ms; }
.foot-col button { width: 100%; border: 0; background: none; font-family: inherit; font-weight: inherit; text-align: left; cursor: pointer; }
.foot-col a:hover, .foot-col button:hover { color: var(--text); }
.foot-col button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.foot-bottom span { font-size: 12.5px; color: var(--text-3); }
.foot-social { display: flex; gap: 8px; }
.foot-social a { width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--border-2); background: var(--bg-card); display: grid; place-items: center; color: var(--text-2); transition: color 120ms, border-color 120ms; }
.foot-social a:hover { color: var(--text); border-color: var(--text-4); }
.foot-social svg { width: 16px; height: 16px; stroke-width: 2; }


#cc-main {
  --cc-font-family: var(--font-ui);
  --cc-modal-border-radius: var(--r-xl);
  --cc-btn-border-radius: var(--r-sm);
  --cc-bg: var(--bg-card);
  --cc-primary-color: var(--text);
  --cc-secondary-color: var(--text-2);
  --cc-btn-primary-bg: var(--accent-fill);
  --cc-btn-primary-color: var(--accent-on);
  --cc-btn-primary-border-color: var(--accent-fill);
  --cc-btn-primary-hover-bg: var(--accent-fill-hover);
  --cc-btn-primary-hover-color: var(--accent-on);
  --cc-btn-primary-hover-border-color: var(--accent-fill-hover);
  --cc-btn-secondary-bg: var(--bg-sub);
  --cc-btn-secondary-color: var(--text);
  --cc-btn-secondary-border-color: var(--border-2);
  --cc-btn-secondary-hover-bg: var(--bg-inset);
  --cc-btn-secondary-hover-color: var(--text);
  --cc-btn-secondary-hover-border-color: var(--border-2);
  --cc-separator-border-color: var(--border);
  --cc-toggle-on-bg: var(--accent);
  --cc-cookie-category-block-bg: var(--bg-sub);
  --cc-cookie-category-block-border: var(--border);
  --cc-cookie-category-block-hover-bg: var(--bg-inset);
  --cc-cookie-category-block-hover-border: var(--border-2);
  --cc-footer-bg: var(--bg-sub);
  --cc-footer-color: var(--text-2);
  --cc-footer-border-color: var(--border);
}
#cc-main .cm, #cc-main .pm {
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-pop);
}
#cc-main .cm__title, #cc-main .pm__title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

#cc-main .cm--cloud { max-width: 780px; }
#cc-main .cm--cloud .cm__body { align-items: center; }
#cc-main .cm--cloud .cm__texts { flex: 1 1 auto; padding: 13px 0; }
#cc-main .cm--cloud .cm__title { font-size: 13.5px; line-height: 1.3; padding-inline: 18px; }
#cc-main .cm--cloud .cm__desc { font-size: 12.5px; line-height: 1.5; padding: 1px 18px 0; }
#cc-main .cm--cloud .cm__btns { flex: 0 0 auto; padding: 12px 18px 12px 0; }
#cc-main .cm--cloud .cm__btns,
#cc-main .cm--cloud .cm__btn-group {
  display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: nowrap;
}
#cc-main .cm--cloud .cm__btn { min-height: 38px; font-size: 12.75px; padding-inline: 15px; white-space: nowrap; margin: 0; }
#cc-main .cm--cloud .cm__btn--secondary {
  background: transparent; border-color: transparent;
  text-decoration: underline; text-underline-offset: 2px; padding-inline: 6px;
}
#cc-main .cm--cloud .cm__footer { padding: 5px 0 7px; font-size: 11px; }

@media (max-width: 640px) {
  #cc-main .cm--cloud .cm__btns { flex-direction: column; align-items: stretch; padding: 4px 18px 12px; }
  #cc-main .cm--cloud .cm__btn { flex: 1 1 0; min-height: 44px; }
  #cc-main .cm--cloud .cm__texts { padding: 13px 0 4px; }
}
#cc-main .pm__btn { min-height: 44px; }


.phead { padding: 76px 0 12px; }
.phead h1 { font-weight: 800; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -0.04em; margin: 18px 0 0; text-wrap: balance; }
.phead h1 em { font-family: var(--font-editorial); font-style: italic; font-weight: 500; color: var(--accent); }
.phead p { font-size: 17px; line-height: 1.6; color: var(--text-2); margin: 20px 0 0; max-width: 600px; }


.legal { max-width: 768px; margin: 0 auto; }
.legal-updated { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-top: 16px; }
.legal-intro { font-size: 17px; line-height: 1.66; color: var(--text-2); margin: 22px 0 0; max-width: 100%; text-wrap: pretty; }
.legal-intro b { color: var(--text); font-weight: 600; }
.legal-toc { margin: 34px 0 0; padding: 20px 22px; background: var(--bg-sub); border: 1px solid var(--border); border-radius: var(--r-lg); }
.legal-toc h2 { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 14px; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; columns: 2; column-gap: 28px; }
.legal-toc li { counter-increment: toc; break-inside: avoid; margin-bottom: 9px; }
.legal-toc a { font-size: 13.5px; line-height: 1.4; color: var(--text-2); display: inline-flex; gap: 9px; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--text-4); flex: none; }
.legal-toc a:hover { color: var(--accent-text); }
.legal-body { margin-top: 8px; }
.legal-body section { margin-top: 40px; scroll-margin-top: 84px; }
.legal-body h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.022em; color: var(--text); margin: 0 0 14px; display: flex; gap: 12px; align-items: baseline; text-wrap: balance; }
.legal-body h2 .secnum { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--accent-text); flex: none; }
.legal-body h3 { font-size: 15.5px; font-weight: 600; color: var(--text); margin: 26px 0 8px; }
.legal-body p { font-size: 15px; line-height: 1.72; color: var(--text-2); margin: 0 0 15px; text-wrap: pretty; }
.legal-body p b, .legal-body li b { color: var(--text); font-weight: 600; }
.legal-body code { overflow-wrap: anywhere; }
.legal-body ul { margin: 0 0 15px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.legal-body ul li { position: relative; padding-left: 19px; font-size: 14.5px; line-height: 1.62; color: var(--text-2); }
.legal-body ul li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.legal-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.legal-callout { margin: 18px 0; padding: 16px 20px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); background: var(--bg-sub); }
.legal-callout p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--text); }
.legal-callout p + p { margin-top: 10px; }
.legal-contact { margin-top: 44px; padding: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); }
.legal-contact h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.legal-contact p { font-size: 14px; line-height: 1.7; color: var(--text-2); margin: 0; }
.legal-contact a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }


.chat-thread { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; }
.cmsg-user { align-self: flex-end; max-width: 86%; background: var(--accent-fill); color: var(--accent-on); border-radius: 14px 14px 4px 14px; padding: 10px 13px; font-size: 13px; font-weight: 500; line-height: 1.45; }
.cmsg-bot { align-self: flex-start; max-width: 94%; background: var(--bg-sub); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 13px; }
.cmsg-bot .ct { font-size: 13px; line-height: 1.58; color: var(--text); }
.cmsg-bot .ct b { font-weight: 600; }
.cmsg-bot .ct .num { font-variant-numeric: tabular-nums; }
.chat-fix { display: flex; align-items: center; gap: 11px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.fixbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-sm); background: var(--accent-fill); color: var(--accent-on); font-size: 12px; font-weight: 600; }
.fixbtn svg { width: 13px; height: 13px; stroke-width: 2.5; }
.fixnote { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--text-3); }
.fixnote svg { width: 12px; height: 12px; stroke-width: 2; }
.chat-next { display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin-top: 12px; }
.next-chip { display: inline-flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 13px; border-radius: var(--r-sm); background: var(--bg-sub); border: 1px solid var(--border); color: var(--text-2); font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; cursor: pointer; text-align: left; transition: color 140ms, background 140ms, border-color 140ms; }
.next-chip svg { width: 14px; height: 14px; color: var(--accent); stroke-width: 2; flex: none; }
.next-chip:hover { color: var(--text); background: var(--bg-card); border-color: var(--accent); }
.chat-input { display: flex; align-items: center; gap: 9px; margin-top: 14px; height: 42px; padding: 0 6px 0 15px; background: var(--bg-card); border: 1px solid var(--border-2); border-radius: var(--r-pill); }
.chat-input span { font-size: 12.5px; color: var(--text-4); flex: 1; }
.chat-input .send { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: var(--accent-on); }
.chat-input .send svg { width: 14px; height: 14px; stroke-width: 2; }


.layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(26px, 3vh, 36px); position: relative; }



.ctx-ghost {
  position: absolute; right: -18px; top: -190px; z-index: 0;
  pointer-events: none; opacity: 0; transform: translateY(22px) scale(.965);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.3s cubic-bezier(.16,1,.3,1);
}
.ctx-ghost.in { opacity: 1; transform: none; }
.ctx-ghost-text {
  font-family: var(--font-display, var(--font-sans)); font-weight: 800;
  font-size: 190px; line-height: .78; letter-spacing: -0.05em;
  
  background-image: linear-gradient(
    104deg,
    color-mix(in srgb, var(--text-4) 26%, transparent) 0%,
    color-mix(in srgb, var(--text-4) 52%, transparent) 26%,
    color-mix(in srgb, var(--text) 34%, transparent) 42%,
    color-mix(in srgb, var(--text-4) 58%, transparent) 58%,
    color-mix(in srgb, var(--text-4) 22%, transparent) 100%
  );
  background-size: 260% 100%;
  background-position: calc((1 - var(--ghost-p, 0.5)) * 100%) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .5;
  animation: ctx-ghost-breathe 11s ease-in-out infinite;
}
@keyframes ctx-ghost-breathe { 0%,100% { opacity: .46; } 50% { opacity: .58; } }
@media (prefers-reduced-motion: reduce) {
  .ctx-ghost-text { animation: none; background-position: 50% 0; }
}
@media (max-width: 1100px) { .ctx-ghost { display: none; } }


.mem-ghost {
  position: absolute; top: 8px; width: 240px; z-index: 0;
  pointer-events: none; opacity: 0; transform: translateY(24px) scale(.96);
  transition: opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1);
}
.mem-ghost.in { opacity: 1; transform: none; }
.mem-ghost-l { left: -104px; top: -6px; width: 230px; }
.mem-ghost-l svg { opacity: .2; }

.mem-ghost svg {
  width: 100%; height: auto; fill: none; stroke: var(--accent); stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round; opacity: .34;
  
  --gm: calc(var(--ghost-p, .5) * 100%);
  -webkit-mask-image: linear-gradient(200deg,
    rgba(0,0,0,.16) 0%,
    rgba(0,0,0,.34) max(0%, calc(var(--gm) - 30%)),
    rgba(0,0,0,1) var(--gm),
    rgba(0,0,0,.3) min(100%, calc(var(--gm) + 32%)),
    rgba(0,0,0,.1) 100%);
  mask-image: linear-gradient(200deg,
    rgba(0,0,0,.16) 0%,
    rgba(0,0,0,.34) max(0%, calc(var(--gm) - 30%)),
    rgba(0,0,0,1) var(--gm),
    rgba(0,0,0,.3) min(100%, calc(var(--gm) + 32%)),
    rgba(0,0,0,.1) 100%);
  animation: mem-ghost-breathe 9s ease-in-out infinite;
}
@keyframes mem-ghost-breathe { 0%,100% { opacity: .24; } 50% { opacity: .36; } }
.mem-ghost-r svg { animation-delay: -4.5s; }
.mem-ghost svg circle { fill: var(--accent); stroke: none; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .mem-ghost svg { animation: none; } }
@media (max-width: 1100px) { .mem-ghost { display: none; } }


.wrap:has(> .sec-ghost) { position: relative; }
.sec-ghost {
  position: absolute; right: -42px; top: -34px; width: 250px; z-index: 0;
  pointer-events: none; opacity: 0; transform: translateY(24px) scale(.96);
  transition: opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1);
}
.sec-ghost.in { opacity: 1; transform: none; }
.sec-ghost svg {
  width: 100%; height: auto; fill: none; stroke: var(--accent); stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round; opacity: .3;
  --gm: calc(var(--ghost-p, .5) * 100%);
  -webkit-mask-image: linear-gradient(196deg,
    rgba(0,0,0,.14) 0%,
    rgba(0,0,0,.32) max(0%, calc(var(--gm) - 30%)),
    rgba(0,0,0,1) var(--gm),
    rgba(0,0,0,.28) min(100%, calc(var(--gm) + 32%)),
    rgba(0,0,0,.08) 100%);
  mask-image: linear-gradient(196deg,
    rgba(0,0,0,.14) 0%,
    rgba(0,0,0,.32) max(0%, calc(var(--gm) - 30%)),
    rgba(0,0,0,1) var(--gm),
    rgba(0,0,0,.28) min(100%, calc(var(--gm) + 32%)),
    rgba(0,0,0,.08) 100%);
  animation: mem-ghost-breathe 10s ease-in-out infinite;
}
.sec-ghost svg circle.solid { fill: var(--accent); stroke: none; opacity: .5; }
@media (prefers-reduced-motion: reduce) { .sec-ghost svg { animation: none; } }
@media (max-width: 1240px) { .sec-ghost { display: none; } }


.layer { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: 26px; display: flex; flex-direction: column; position: relative; }
.layer-phase { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.layer-phase .n { width: 22px; height: 22px; border-radius: 7px; background: var(--accent-soft); display: grid; place-items: center; }
.layer-phase .n svg { width: 13px; height: 13px; stroke-width: 2.2; }
.layer h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 16px 0 0; }
.layer > p { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin: 9px 0 0; text-wrap: pretty; }
.layer-ex { list-style: none; margin: 18px 0 0; padding: 17px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.layer-ex li { display: block; padding-left: 24px; text-indent: -24px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.layer-ex li svg { display: inline-block; vertical-align: -2px; margin-right: 9px; text-indent: 0; width: 15px; height: 15px; flex: none; }
.layer-ex li svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--accent); stroke-width: 2; }
.layer-ex li b { color: var(--text); font-weight: 600; }


.report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.report-pot { display: inline-flex; align-items: baseline; gap: 7px; }
.report-pot .v { font-family: var(--font-editorial); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; color: var(--ok); font-variant-numeric: tabular-nums; }
.report-pot .l { font-size: 11.5px; color: var(--text-2); }
.report-flags { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.rflag { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-lg); background: var(--bg-sub); border: 1px solid var(--border); }
.rflag-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; }
.rflag-ic svg { width: 16px; height: 16px; stroke-width: 2; }
.rflag-ic.crit { background: var(--crit-soft); color: var(--crit); }
.rflag-ic.warn { background: var(--warn-soft); color: var(--warn); }
.rflag-ic.ok { background: var(--ok-soft); color: var(--ok); }
.rflag-main { min-width: 0; flex: 1; }
.rflag-t { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rflag-w { font-size: 12.5px; color: var(--text-2); margin-top: 4px; line-height: 1.55; text-wrap: pretty; }
.rflag-w b { color: var(--text); font-weight: 600; }
.rflag-est { font-family: var(--font-mono); font-size: 11px; color: var(--ok); margin-top: 6px; letter-spacing: 0.01em; }
.report-foot { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); }
.report-foot svg { width: 14px; height: 14px; flex: none; stroke-width: 2; color: var(--text-3); }.roi-card.pay { background: var(--bg-sub); box-shadow: none; }.roi-card.found .roi-v { color: var(--accent); }.ptier.on { border-color: var(--accent); }
.ptier .pflag { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); height: 14px; }
.ptier .pn { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; }.ptier .pp .amt { font-family: var(--font-editorial); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.ptier .pp .per { font-size: 11.5px; color: var(--text-3); }

@media (max-width: 920px) {
  .layers { grid-template-columns: 1fr; }
  .ptiers { grid-template-columns: 1fr 1fr; }
  .roi { grid-template-columns: 1fr; gap: 14px; }
  .roi-arrow { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .ptiers { grid-template-columns: 1fr; }
}.tier, .principle, .who-card, .pcard, .blog-feature { box-shadow: var(--shadow-card); }.panel.before, .tier-feats { box-shadow: none; }


@media (max-width: 920px) {
  .hero-grid, .integ, .cta-grid { grid-template-columns: 1fr; gap: 40px; }
  
  .hero-copy { order: 1; }
  .hero-cutout { order: 2; }
  .split, .steps, .feat-grid, .stats, .foot-grid, .creative-grid { grid-template-columns: 1fr 1fr; }
  .feat-wide { grid-column: span 2; }
}

@media (max-width: 920px) {
  .nav-links, .nav-login { display: none; }
  .nav-right > .btn { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .hero { padding: 40px 0 34px; }
  .band { padding: 30px 0; }
  .split, .steps, .feat-grid, .stats, .co-kpis, .creative-grid { grid-template-columns: 1fr; }
  .feat-wide { grid-column: span 1; }
  .cta { padding: 32px 24px; }
  .stats { grid-template-columns: 1fr 1fr; }
}




@media (prefers-reduced-motion: no-preference) {
  body::before { animation: aurora-drift 26s ease-in-out infinite alternate; }
  @keyframes aurora-drift {
    0%   { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    100% { transform: translate3d(2%, 1.5%, 0) scale(1.1); }
  }
}


@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    
    filter: blur(6px);
    transition:
      opacity 0.85s var(--ease),
      transform 0.85s cubic-bezier(.16,1,.3,1),
      filter 0.6s var(--ease);
    transition-delay: var(--rd, 0ms);
  }
  html.js [data-reveal="left"]  { transform: translateX(-34px); }
  html.js [data-reveal="right"] { transform: translateX(34px); }
  html.js [data-reveal="scale"] { transform: translateY(26px) scale(0.96); }
  html.js [data-reveal].in { opacity: 1; transform: none; filter: none; will-change: auto; }
}.layer, .tier, .principle, .who-card, .pcard, .rflag {
  transition: transform 0.26s var(--ease), border-color 0.26s var(--ease), box-shadow 0.26s var(--ease);
}.layer:hover, .principle:hover, .who-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  box-shadow: 0 1px 2px rgba(28,25,20,0.05), 0 22px 46px -22px rgba(255,90,44,0.30);
}
.tier:hover, .pcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }


.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover::after { animation: btn-sheen 0.85s var(--ease); }
  @keyframes btn-sheen { to { left: 150%; } }
}


.hero-cutout { position: relative; }
.float-chip {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-pop);
  font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.float-chip .lbl { color: var(--text-3); font-weight: 600; }
.float-chip .fdot { width: 7px; height: 7px; border-radius: 50%; }
.float-chip .up { color: var(--ok); } .float-chip .down { color: var(--crit); }
.chip-a { top: -26px; left: 14px; }
.chip-b { bottom: -26px; right: -4px; }
.chip-c { bottom: -26px; left: 54px; }
@media (prefers-reduced-motion: no-preference) {
  .float-chip { animation: floaty 6.5s ease-in-out infinite; }
  .chip-b { animation-delay: -2.2s; } .chip-c { animation-delay: -4.4s; }
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
}
@media (max-width: 900px) { .float-chip { display: none; } }


.chat-step { opacity: 0; transform: translateY(8px); }
.chat-step.show { opacity: 1; transform: none; transition: opacity 0.42s var(--ease), transform 0.42s var(--ease); }
html:not(.js) .chat-step { opacity: 1; transform: none; }
.typing { display: inline-flex; gap: 5px; align-items: center; padding: 13px 15px; background: var(--bg-sub); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-4); display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .typing i { animation: blink 1.25s infinite; }
  .typing i:nth-child(2) { animation-delay: 0.18s; }
  .typing i:nth-child(3) { animation-delay: 0.36s; }
  @keyframes blink { 0%,60%,100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
}



.marquee-band { padding: 18px 0; background: transparent; border-top: 0; border-bottom: 1px solid var(--border); position: relative; z-index: 1; overflow: hidden; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee + .marquee { margin-top: 12px; }
.marquee-row { display: flex; gap: 12px; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-row { animation: scroll-x 42s linear infinite; }
  .marquee-row.rev { animation-direction: reverse; }
  .marquee-band:hover .marquee-row { animation-play-state: paused; }
  @keyframes scroll-x { to { transform: translateX(-50%); } }
}
.qchip { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 17px; border-radius: var(--r-pill); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-soft); font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.qchip svg { width: 15px; height: 15px; color: var(--accent); stroke-width: 2; flex: none; }


.report-scan { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .report-scan.in::after {
    content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 44%;
    border-radius: var(--r-xl) var(--r-xl) 0 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,90,44,0.12), transparent);
    animation: scandown 1.7s var(--ease) 0.2s forwards; opacity: 0;
  }
  @keyframes scandown { 0% { transform: translateY(-25%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(190%); opacity: 0; } }
}


.nav { transition: box-shadow 0.2s var(--ease), background 0.2s var(--ease); }
.nav.scrolled { box-shadow: 0 1px 0 var(--border), 0 12px 30px -20px rgba(28,25,20,0.22); }






.two-lens{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.8vw,20px);
  margin:clamp(18px,2.6vh,30px) 0 clamp(14px,2vh,22px);}
.lens{border:1px solid var(--border);background:var(--bg-card);border-radius:var(--r-lg);
  padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow-soft);}
.lens.lens-us{border-color:var(--accent);box-shadow:var(--shadow-card);}
.lens-cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);margin:0;}
.lens.lens-us .lens-cap{color:var(--accent-text);}
.lens-num{font-family:var(--font-editorial);font-weight:500;font-size:clamp(34px,5vw,52px);
  line-height:1;letter-spacing:-.02em;margin:0;font-variant-numeric:tabular-nums;}
.lens-num.good{color:var(--ok);}
.lens-num.bad{color:var(--crit);}
.lens-sub{font-family:var(--font-mono);font-size:12px;color:var(--text-3);margin:0;letter-spacing:.02em;}
.lens-verdict{font-size:16px;font-weight:650;letter-spacing:-.01em;color:var(--text);margin:0;}
.lens.lens-us .lens-verdict{color:var(--accent-text);}
.lens-note{font-size:13px;line-height:1.5;color:var(--text-2);margin:0;}
.lens-kicker{font-size:15px;line-height:1.6;color:var(--text);max-width:80ch;margin-top:6px;}
.lens-kicker strong{color: var(--accent-text);}


.pcard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(16px,2vw,24px);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:9px;}
.pcard h3{font-size:16px;font-weight:650;letter-spacing:-.01em;color:var(--text);margin:0;}
.pcard p{font-size:13.5px;line-height:1.55;color:var(--text-2);margin:0;}
.pcard-n{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--text-3);margin:0;}

@media (max-width:860px){
  .two-lens{grid-template-columns:1fr;}
}


.grid{display:grid;gap:clamp(12px,1.8vw,20px);margin-top:clamp(16px,2.4vh,26px);}
.grid.g3{grid-template-columns:repeat(3,1fr);}
.grid.g2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid.g3{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.grid.g3,.grid.g2{grid-template-columns:1fr;}}




.builds > .build {
  
  transform:
    scale(calc(1 - 0.14 * var(--p, 0)))
    translateY(calc(18px * var(--p, 0)))
    perspective(1200px) rotateY(calc(-5deg * var(--s, 0) * var(--p, 0)));
  opacity: calc(1 - 0.5 * var(--p, 0));
  transition: transform 420ms var(--ease), opacity 420ms var(--ease), filter 420ms var(--ease);
  transform-origin: 50% 60%;
  filter: saturate(calc(1 - 0.4 * var(--p, 0)));
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .builds > .build { transform: none; opacity: 1; filter: none; }
}


.readbar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: transparent; pointer-events: none;
}
.readbar i {
  display: block; height: 100%; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .readbar i { transition: none; } }


.topics .topic { cursor: pointer; }
.grid-posts .pcard { transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease), opacity 220ms var(--ease); }
.grid-posts .pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--border-2); }
.grid-posts .pcard.hide { display: none; }

.pcard-cover { overflow: hidden; }
.pcard-cover img { transition: transform 520ms var(--ease); display: block; width: 100%; height: auto; }
.pcard:hover .pcard-cover img { transform: scale(1.04); }
.blog-feature .feature-visual { overflow: hidden; }
.blog-feature .feature-visual img { transition: transform 620ms var(--ease); }
.blog-feature:hover .feature-visual img { transform: scale(1.03); }


.build-canvas { margin: 18px 20px 20px; padding: 18px; }.build-cap .name { font-size: 16px; }
.build-cap .tag { font-size: 11px; }
.mkt { padding: 13px 14px; }
.mkt-l { font-size: 11.5px; }
.mkt-v { font-size: 24px; }
.mkt-d { font-size: 11px; }
.mini-chart svg { height: 68px; }
.mag-ent { font-size: 13.5px; }
.mag-rec { font-size: 12px; }
.mag-sev { font-size: 11.5px; }
.mag-imp .v { font-size: 14px; }
.mag-imp .l { font-size: 10px; }
.mag-hist-h { font-size: 11.5px; } .mag-hist-h b { font-size: 13px; }
.mag-hist-f { font-size: 10.5px; }
.mpl-t { font-size: 13.5px; }
.mpl-s { font-size: 11.5px; }
.mpl-n { width: 23px; height: 23px; font-size: 11.5px; }
@media (max-width: 640px) {
  .builds { grid-auto-columns: 90%; }
  .build-canvas { margin: 14px 16px 16px; padding: 14px; }
  .mkt-v { font-size: 19px; }
  .mini-chart svg { height: 52px; }
}


.cta-inline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 44px; padding: 22px 26px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
  position: relative; overflow: hidden;
}
.cta-inline::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
.cta-inline p { margin: 0; font-size: 15.5px; color: var(--text-2); max-width: 54ch; }
.cta-inline p b { color: var(--text); font-weight: 650; }
.cta-inline .btn { flex: none; }
@media (max-width: 620px) {
  .cta-inline { flex-direction: column; align-items: stretch; text-align: left; }
  .cta-inline .btn { width: 100%; justify-content: center; }
}



.cta-grid { align-items: start; }
.lead-demo {
  background: transparent;
  border: none;
  padding: 0;
}
.lead-demo .lf-field span i {
  font-style: normal; font-weight: 500; color: var(--text-4);
  font-size: 11px; letter-spacing: 0.02em;
}
.lead-demo .lf-field + .lf-field { margin-top: 14px; }
.lead-demo .btn { width: 100%; justify-content: center; margin-top: 20px; }
.lead-demo .lead-fine { text-align: center; }

@media (min-width: 861px) {
  .cta-grid > div:first-child { padding-top: 4px; }
}


@property --in {
  syntax: "<length>"; inherits: false; initial-value: 0px;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .s3-plate {
    
    transform: translateZ(calc(var(--z) + var(--off) + var(--in)));
  }
  html.js [data-stack]:not(.in) .s3-plate {
    --in: -420px;
    opacity: 0;
  }
  html.js [data-stack].in .s3-plate {
    --in: 0px;
    opacity: 1;
    transition:
      --in 900ms cubic-bezier(.16,1,.3,1),
      opacity 500ms var(--ease),
      transform 400ms var(--ease);
    
    transition-delay: calc(var(--i) * 110ms);
  }
}


.s3-list li { position: relative; }
.s3-list li::after {
  content: ""; position: absolute; top: 22px;
  width: 20px; height: 1px; background: var(--border-2);
  transition: background 200ms var(--ease), width 200ms var(--ease);
}
.s3-list-b li::after { left: -22px; }
.s3-list li.on::after { background: var(--accent); width: 26px; }
.s3-list-b li.on::after { left: -28px; }

.s3-list li::before {
  content: ""; position: absolute; top: 19.5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-2);
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.s3-list-b li::before { left: -25px; }
.s3-list li.on::before { background: var(--accent); transform: scale(1.35); }
.s3-list-b li.on::before { left: -31px; }


@media (max-width: 980px) {
  .stack3d { grid-template-columns: 1fr; gap: 24px; }
  .stack3d .s3-scene { order: -1; }
  .s3-list li::after, .s3-list li::before { display: none; }
}


.s3-list li.on { position: relative; z-index: 2; }
.s3-list li.on { max-width: 100%; }
.s3-list li p { max-width: 100%; }




.stack3d .s3-scene { --s: 0.78; aspect-ratio: auto; min-height: 560px; }



@media (max-width: 560px) {
  .stack3d .s3-scene { display: none; }
  .stack3d { gap: 0; }
  .s3-detail { margin-top: 18px; }
}



.stack3d .s3-ceiling { left: 8%; right: 8%; }


.s3-li-h { flex-wrap: nowrap; }
.s3-li-tag { white-space: nowrap; flex: none; }
.s3-list h3, .s3-li-t { min-width: 0; }
@media (max-width: 1180px) { .s3-li-h { flex-wrap: wrap; } }



.s3-detail {
  position: relative; margin: 26px auto 0; max-width: 720px; min-height: 92px;
  text-align: center;
}
.s3-d {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 260ms var(--ease);
}
.s3-d.on { opacity: 1; visibility: visible; position: relative; }
.s3-d-n {
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text);
  margin-bottom: 8px;
}
.s3-d p { font-size: 14.5px; line-height: 1.62; color: var(--text-2); margin: 0; text-wrap: pretty; }
.s3-d p + p { margin-top: 8px; }
.s3-d p.s3-li-v { color: var(--text-3); font-size: 13.5px; }
@media (max-width: 980px) {
  .s3-detail { text-align: left; margin-top: 18px; }
}


.stack3d {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 26px; margin-top: 44px;
}
@media (min-width: 981px) {
  
  .s3-list {
    position: relative; display: flex; flex-direction: column;
    justify-content: center; gap: 2px;
    min-height: 0 !important; align-self: center;
  }
  .s3-list li {
    position: relative; left: auto; right: auto; top: auto;
    transform: none; z-index: 2;
    margin: 0; padding: 7px 12px;
    display: flex; align-items: center; justify-content: flex-start;
    text-align: left; background: none; border: 1px solid transparent;
  }
  .s3-list li.on {
    background: var(--bg-card); border-color: var(--border);
    box-shadow: var(--shadow-soft); transform: none;
  }
  
  .s3-list li::before, .s3-list li::after { z-index: 3; }
  
  .s3-list li::after  { left: -22px; right: auto; top: 50%; margin-top: -0.5px; }
  .s3-list li::before { left: -25px; right: auto; top: 50%; margin-top: -3px; }
  .s3-list li.on::after  { left: -28px; }
  .s3-list li.on::before { left: -31px; }

  
  .s3-detail { text-align: right; margin: 0; max-width: none; min-height: 150px;
               display: flex; flex-direction: column; justify-content: center; }
  .s3-detail .s3-d p { margin-left: auto; }
}
@media (max-width: 980px) {
  .stack3d { grid-template-columns: 1fr; gap: 22px; }
  .stack3d .s3-scene { order: -1; }
  .s3-detail { order: 1; }
}

@media (min-width: 981px) { .s3-list h3 { white-space: nowrap; } }


.report-flags .rflag { cursor: default; }

.report-flags .rflag .rflag-w {
  display: grid; grid-template-rows: 1fr; margin-top: 4px;
}

.report-flags .rflag .rflag-w > .rflag-copy { display: block; overflow: hidden; min-height: 0; }



@media (min-width: 981px) {
  .s3-detail {
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
    padding: 22px 24px;
    min-height: 0;
  }
  .s3-detail .s3-d p { margin-left: 0; }
}


@media (min-width: 981px) {
  .s3-list li.s3-div {
    height: 20px; padding: 0 12px; pointer-events: none;
    border: none; background: none; box-shadow: none;
    display: flex; align-items: center; gap: 10px;
  }
  .s3-list li.s3-div::after, .s3-list li.s3-div::before { display: none; }
  .s3-list li.s3-div span {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-4); white-space: nowrap;
  }
  .s3-list li.s3-div::marker { content: none; }
}
@media (max-width: 980px) { .s3-list li.s3-div { display: none; } }


.matrix { border-collapse: separate; border-spacing: 0; }
.matrix th, .matrix td { transition: background 160ms var(--ease); }

.matrix td:not(.us) { color: var(--text-4); }
.matrix thead th:not(.mx-us):not(.mx-cap) { color: var(--text-3); font-weight: 600; }

.matrix .us { background: var(--accent-soft); }
.matrix thead .mx-us {
  color: var(--accent-text); font-weight: 800; background: var(--accent-soft);
  border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md);
  box-shadow: inset 0 2px 0 var(--accent);
}
.matrix tbody tr:hover td:not(.us) { background: var(--bg-hover); }
.matrix tbody tr:hover th { background: var(--bg-hover); }

.matrix tbody th { font-weight: 600; color: var(--text); }


.faq { border-top: none; display: flex; flex-direction: column; gap: 10px; }
.faq details {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card); box-shadow: var(--shadow-soft);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.faq details:hover { border-color: var(--border-2); }
.faq details[open] { border-color: var(--border-2); box-shadow: var(--shadow-card); }
.faq summary { padding: 18px 20px; font-size: 15.5px; }
.faq summary .chev { color: var(--text-4); }
.faq details[open] summary { padding-bottom: 10px; }
.faq details[open] summary .chev { color: var(--accent); }
.faq-a { padding: 0 20px 20px; max-width: 68ch; }.hero-grid-lines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.6;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(88% 78% at 62% 26%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(88% 78% at 62% 26%, #000, transparent 76%);
}
.hero-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-particles i {
  position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,140,90,0.9), rgba(255,90,44,0));
  will-change: transform, opacity;
}
.hero-particles i:nth-child(1){left:8%;  top:72%; width:5px;height:5px;}
.hero-particles i:nth-child(2){left:22%; top:88%; width:3px;height:3px;}
.hero-particles i:nth-child(3){left:37%; top:64%; width:4px;height:4px;}
.hero-particles i:nth-child(4){left:52%; top:92%; width:6px;height:6px;}
.hero-particles i:nth-child(5){left:64%; top:70%; width:3px;height:3px;}
.hero-particles i:nth-child(6){left:78%; top:86%; width:5px;height:5px;}
.hero-particles i:nth-child(7){left:88%; top:60%; width:4px;height:4px;}
.hero-particles i:nth-child(8){left:15%; top:56%; width:3px;height:3px;}
@media (prefers-reduced-motion: no-preference) {
  .hero-particles i { animation: mote linear infinite; }
  .hero-particles i:nth-child(1){animation-duration:14s; animation-delay:0s;}
  .hero-particles i:nth-child(2){animation-duration:18s; animation-delay:-3s;}
  .hero-particles i:nth-child(3){animation-duration:16s; animation-delay:-7s;}
  .hero-particles i:nth-child(4){animation-duration:21s; animation-delay:-11s;}
  .hero-particles i:nth-child(5){animation-duration:15s; animation-delay:-5s;}
  .hero-particles i:nth-child(6){animation-duration:19s; animation-delay:-9s;}
  .hero-particles i:nth-child(7){animation-duration:17s; animation-delay:-13s;}
  .hero-particles i:nth-child(8){animation-duration:22s; animation-delay:-2s;}
}


.hero-dark .hero-slogan .w { color: rgba(244,242,238,0.5); }
.hero-dark .hero-slogan .w3 { color: var(--accent); }
.hero-dark .hero-slogan .arw { color: rgba(244,242,238,0.28); }.hero-dark .hero-lede { color: rgba(244,242,238,0.74); }
.hero-dark .hero-lede strong { color: #fff; }
.hero-dark .hero-note { color: rgba(244,242,238,0.42); }

.hero-dark .cutout {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.02) inset;
  backdrop-filter: blur(8px);
}
.hero-dark .co-kicker { color: rgba(244,242,238,0.45); }
.hero-dark .float-chip {
  background: rgba(28,25,20,0.86); border-color: rgba(255,255,255,0.12);
  color: #f4f2ee; backdrop-filter: blur(10px);
}
.hero-dark .float-chip .lbl { color: rgba(244,242,238,0.5); }


.hero-dark .cmsg-bot {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10);
}
.hero-dark .cmsg-bot .ct { color: rgba(248,246,242,0.92); }
.hero-dark .cmsg-bot .ct b { color: #fff; }
.hero-dark .chat-fix { border-top-color: rgba(255,255,255,0.10); }
.hero-dark .fixnote { color: rgba(244,242,238,0.45); }
.hero-dark .next-chip {
  background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.09);
  color: rgba(244,242,238,0.78);
}
.hero-dark .next-chip:hover {
  background: rgba(255,255,255,0.09); border-color: var(--accent); color: #fff;
}.hero-dark .chat-input {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10);
  color: rgba(244,242,238,0.7);
}
.hero-dark .typing i { background: rgba(244,242,238,0.5); }



.faq-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr); gap: 40px; margin-top: 40px; align-items: start; }
.faq { margin-top: 0; }
.faq-aside { position: sticky; top: 96px; }
.faq-aside-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-card);
  padding: 26px; position: relative; overflow: hidden;
}
.faq-aside-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 200px at 92% -18%, rgba(255,90,44,0.10), transparent 62%);
}
.faq-aside-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.faq-aside-h { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 12px 0 0; text-wrap: balance; }
.faq-aside-p { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 12px 0 18px; text-wrap: pretty; }
.faq-aside .btn { width: 100%; justify-content: center; }
.faq-aside-l { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.faq-aside-l li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.faq-aside-l svg { width: 14px; height: 14px; flex: none; color: var(--ok); stroke-width: 2.2; margin-top: 1px; }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: 26px; }
  .faq-aside { position: static; }
}



.why-close {
  max-width: 68ch; margin: 26px 0 0; text-align: left;
  font-size: 14.5px; line-height: 1.65; color: var(--text-2); text-wrap: pretty;
}
.why-close b { color: var(--text); }


.why-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 30px; align-items: stretch; }

.why-card {
  display: flex; flex-direction: column;
  padding: 24px; border-radius: var(--r-lg, var(--r-md));
  border: 1px solid var(--border); background: var(--bg-elevated);
  transition: border-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.why-card:hover {
  border-color: var(--border-2); transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.07);
}
.why-card-ic {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; background: var(--bg-hover); color: var(--text-2);
}
.why-card-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.why-card:hover .why-card-ic { color: var(--accent, var(--text)); }
.why-card-t { display: block; margin-top: 14px; font-size: 17px; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }
.why-card-d { display: block; margin-top: 7px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.why-card-go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 16px; align-self: flex-start;
  font-size: 13.5px; font-weight: 600; color: var(--accent-text, var(--text));
}
.why-card-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 160ms var(--ease); }
.why-card:hover .why-card-go svg { transform: translateX(3px); }
@media (max-width: 720px) { .why-cards { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: no-preference) {
  .hs-live i { animation: hs-pulse 2.2s ease-in-out infinite; }
  @keyframes hs-pulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(22,147,90,0.55); }
    50%      { opacity: 0.65; box-shadow: 0 0 0 5px rgba(22,147,90,0); }
  }
}.hs-line { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hs-line.swap { animation: hs-swap 460ms var(--ease); }
  @keyframes hs-swap {
    0%   { opacity: 0; transform: translateY(7px); }
    100% { opacity: 1; transform: none; }
  }
}
@media (max-width: 620px) { .hero-status { display: none; } }


@media (min-width: 981px) {
  .stack3d { align-items: center; }
  .s3-detail { align-self: center; }
}


.cr-demo {
  margin-top: 0; max-width: none; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-card); padding: 16px; max-width: 460px;
}
.cr-demo-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cr-demo-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.cr-demo-id { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); letter-spacing: 0.04em; }
.cr-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1/1; max-width: 260px; margin: 0 auto; }
.cr-art { display: block; width: 100%; height: auto; }
.cr-tag {
  position: absolute; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.06em; padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(28,25,20,0.82); color: #f4f2ee; backdrop-filter: blur(6px);
  white-space: nowrap;
}
.cr-tag-1 { left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; }
.cr-tag-2 { right: 10px; top: 38px; }
.cr-dna { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cr-dna span {
  font-size: 10.5px; color: var(--text-3); background: var(--bg-sub);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 10px;
}
.cr-dna b { color: var(--text); font-weight: 600; }
.cr-hold { margin-top: 14px; }
.cr-hold-h { display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
.cr-hold-h span:first-child { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.cr-hold-v b { color: var(--crit); font-weight: 700; }
.cr-hold svg { width: 100%; height: 46px; display: block; }
.cr-verdict {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.55; color: var(--text-2); text-wrap: pretty;
}
.cr-verdict b { color: var(--text); font-weight: 700; }
@media (max-width: 960px) { .cr-demo { max-width: 560px; } }

.mc-legend { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mc-l { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-3); }
.mc-l::before { content: ""; width: 9px; height: 2px; border-radius: 1px; }
.mc-l-a::before { background: var(--accent); }
.mc-l-b::before { background: var(--info); opacity: 0.65; }
.mc-l-c::before { background: var(--text-4); }
.mc-days { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-4); letter-spacing: 0.06em; }

.mini-chart svg { height: 58px; }

.bstage .mkt { padding: 9px 11px; }
.bstage .mkt-v { font-size: 19px; margin-top: 2px; }
.bstage .mkt-l { font-size: 10.5px; }
.mc-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--text-3); }
.mc-foot b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-note { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-4); }
.cr-tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

.cr-scrub { position: absolute; left: 10px; right: 10px; bottom: 9px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.22); overflow: hidden; }
.cr-scrub b { display: block; height: 100%; background: var(--accent); border-radius: 2px; }


body { position: relative; }


.spine {
  position: absolute; top: 0; left: max(18px, calc(50vw - 622px));
  width: 2px; z-index: 40; pointer-events: none;
}
.spine-rail {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0,
    rgba(28, 25, 20, 0.16) 90px,
    rgba(28, 25, 20, 0.16) calc(100% - 220px),
    transparent 100%
  );
}
.spine-fill {
  position: absolute; top: 0; left: 0; width: 2px; height: 0;
  
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--accent) 12%, transparent) 0,
    color-mix(in oklab, var(--accent) 42%, transparent) 12%,
    color-mix(in oklab, var(--accent) 74%, transparent) 46%,
    var(--accent) 88%,
    #ffb489 100%
  );
  
  box-shadow: 0 0 8px rgba(255, 90, 44, 0.34), 0 0 22px rgba(255, 90, 44, 0.18);
  opacity: 0.94;
  will-change: height;
}


.spine-head {
  position: absolute; top: 0; left: 1px; width: 0; height: 0;
  will-change: transform;
}
.spine-end {
  position: absolute; bottom: -5px; left: 1px;
  width: 9px; height: 9px; margin-left: -4.5px;
  transform: rotate(45deg);
  border: 1.5px solid rgba(28, 25, 20, 0.28);
  background: var(--spine-ring, var(--bg-app));
  transition: background 400ms var(--ease), border-color 400ms var(--ease),
              box-shadow 400ms var(--ease);
}
.spine.complete .spine-end {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 18px rgba(255, 90, 44, 0.6);
}

.spine-sign {
  position: absolute; bottom: -5px; left: 14px;
  display: flex; align-items: baseline; gap: 9px;
  white-space: nowrap; pointer-events: none;
  transform: translateY(50%);
}
.spine-sign i {
  font-family: var(--font-editorial); font-style: italic; font-weight: 500;
  font-size: 17px; letter-spacing: -0.01em; line-height: 1;
  color: var(--accent);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.spine-sign i + i::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 3px; height: 3px; margin: -2px 9px 0 0; border-radius: 50%;
  background: currentColor; opacity: 0.5;
}
.spine.complete .spine-sign i { opacity: 1; transform: none; }
.spine.complete .spine-sign i:nth-child(2) { transition-delay: 130ms; }
.spine.complete .spine-sign i:nth-child(3) { transition-delay: 260ms; }
@media (prefers-reduced-motion: reduce) {
  .spine-sign i { transition: none; transform: none; }
}

.spine.beat .spine-fill { opacity: 1; box-shadow: 0 0 22px rgba(255, 90, 44, 0.55); }
.spine.beat .spine-head > i:not(.spine-spark) {
  transform: scale(1.22);
  filter: drop-shadow(0 0 7px rgba(255, 90, 44, 0.95));
}
.spine-fill, .spine-head > i:not(.spine-spark) { transition: opacity 500ms var(--ease), filter 500ms var(--ease), transform 420ms var(--ease); }
.spine-head.done > i:not(.spine-spark) { opacity: 0; }

.spine-head > i:not(.spine-spark) {
  position: absolute; left: -5px; top: -5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid color-mix(in srgb, var(--accent) 72%, #b82f13);
  box-shadow: 0 0 10px rgba(255, 90, 44, 0.68), 0 0 22px rgba(255, 90, 44, 0.32);
  animation: spine-pulse 2.6s var(--ease) infinite;
}

.spine.on-dark { --spine-ring: #141210; }



.spine { --spine-vis: 1; }
.spine .spine-rail,
.spine .spine-fill,
.spine .spine-flow,
.spine .spine-seg,
.spine .spine-run,
.spine .spine-head,
.spine .spine-end,
.spine .spine-node,
.spine .spine-spark { transition: opacity 260ms var(--ease); }
.spine.fading .spine-rail,
.spine.fading .spine-fill,
.spine.fading .spine-flow,
.spine.fading .spine-seg,
.spine.fading .spine-run,
.spine.fading .spine-head,
.spine.fading .spine-end,
.spine.fading .spine-node,
.spine.fading .spine-spark { opacity: var(--spine-vis); transition: none; }
.spine.hidden .spine-rail,
.spine.hidden .spine-fill,
.spine.hidden .spine-flow,
.spine.hidden .spine-seg,
.spine.hidden .spine-run,
.spine.hidden .spine-head,
.spine.hidden .spine-end,
.spine.hidden .spine-node,
.spine.hidden .spine-spark { opacity: 0; }


.spine-cut { position: absolute; inset: 0; }
.spine.has-gap .spine-cut {
  -webkit-mask-image: var(--spine-gap-mask);
  mask-image: var(--spine-gap-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


@keyframes spine-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,90,44,0.58), 0 0 18px rgba(255,90,44,0.24); }
  50%      { box-shadow: 0 0 14px rgba(255,90,44,0.9), 0 0 30px rgba(255,90,44,0.42); }
}


.spine-fill { overflow: hidden; }
.spine-flow {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0px,
    rgba(255, 236, 228, 0.85) 5px,
    rgba(255, 255, 255, 0) 12px,
    rgba(255, 255, 255, 0) 78px
  );
  background-size: 100% 78px;
  opacity: 0.55;
  animation: spine-flow 2.6s linear infinite;
}
@keyframes spine-flow {
  from { background-position: 0 0; }
  to   { background-position: 0 78px; }
}
.spine.beat .spine-flow { opacity: 0.95; animation-duration: 1.1s; }


.spine-spark {
  position: absolute; left: -1.5px; top: 0;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255, 90, 44, 0.9);
  opacity: 0; pointer-events: none;
  animation: spine-spark 6.8s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes spine-spark {
  0%   { opacity: 0; transform: translate(0, 4px) scale(0.4); }
  12%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -120px) scale(0.2); }
}
.spine-spark:nth-child(2) { --dx: 4px; }
.spine-spark:nth-child(3) { --dx: -5px; }
.spine-spark:nth-child(4) { --dx: 2px; }


.spine-rail::after {
  content: ""; position: absolute; inset: 90px 0 220px 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(28, 25, 20, 0.22) 0px,
    rgba(28, 25, 20, 0.22) 6px,
    rgba(28, 25, 20, 0) 6px,
    rgba(28, 25, 20, 0) 26px
  );
  opacity: 0.5;
}




.spine-seg {
  position: absolute; left: -1px; width: 4px;
  top: 0; height: 0; opacity: 0;
  border-radius: 4px;
  background: linear-gradient(
    to bottom,
    transparent 0,
    color-mix(in oklab, var(--accent) 55%, transparent) 18%,
    color-mix(in oklab, var(--accent) 80%, transparent) 50%,
    color-mix(in oklab, var(--accent) 55%, transparent) 82%,
    transparent 100%
  );
  filter: blur(0.4px);
  transition: top 700ms var(--ease), height 700ms var(--ease), opacity 500ms var(--ease);
}
.spine-seg.on { opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) {
  .spine-seg.on { animation: spine-seg-breathe 3.4s var(--ease) infinite; }
}
@keyframes spine-seg-breathe {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.62; }
}


.spine-run {
  position: absolute; left: -2px; top: 0;
  width: 6px; height: 40px; margin-top: -20px;
  border-radius: 6px;
  background: linear-gradient(to bottom, transparent, var(--accent) 55%, transparent);
  box-shadow: 0 0 16px rgba(255, 90, 44, 0.7);
  opacity: 0; will-change: transform, opacity;
}
.spine-run.go { animation: spine-run 900ms var(--ease) 1; }
@keyframes spine-run {
  0%   { opacity: 0; transform: translateY(var(--from, 0px)) scaleY(0.5); }
  18%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--to, 0px)) scaleY(1.6); }
}


.spine-node.fired::before {
  animation: spine-fire 620ms var(--ease) 1;
}
@keyframes spine-fire {
  0%   { box-shadow: 0 0 0 0 rgba(255, 90, 44, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 90, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 44, 0); }
}
.spine-node.fired .spine-arm { width: 74px; }
@media (prefers-reduced-motion: no-preference) {
  .spine-node.fired.fired::after { animation: node-jitter 420ms var(--ease) 1 !important; }
}
@keyframes node-jitter {
  0%   { transform: scale(0.7); }
  30%  { transform: scale(1.35) translateX(1px); }
  55%  { transform: scale(1.1) translateX(-1px); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .spine-seg, .spine-run, .spine-flow, .spine-spark { display: none; }
  .spine-node.now::before { animation: none; }
}



.nav {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg-app) 92%, transparent) 0%,
    color-mix(in srgb, var(--bg-app) 74%, transparent) 100%
  );
}
.nav::after {
  content: ""; position: absolute; left: 0; top: 100%; height: 34px;
  width: 100%; pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg-app) 70%, transparent) 0%,
    color-mix(in srgb, var(--bg-app) 0%, transparent) 100%
  );
  opacity: 0; transition: opacity 320ms var(--ease);
}
.nav.stuck::after { opacity: 1; }
.nav.stuck { box-shadow: 0 1px 0 var(--border), 0 10px 30px -22px rgba(28,25,20,0.28); }

.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 25%, transparent));
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
  transition: transform 380ms var(--ease), opacity 300ms var(--ease);
}
.nav-links a:hover::after { transform: scaleX(0.55); opacity: 0.5; }
.nav-links a.active::after { transform: scaleX(1); opacity: 1; }


.spine-node {
  position: absolute; left: 1px; width: 0; height: 0;
}
.spine-node::before {
  content: ""; position: absolute; left: -5px; top: -5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg-app);
  border: 1.5px solid rgba(28, 25, 20, 0.28);
  box-shadow: 0 0 0 3px var(--bg-app);
  transition: background 320ms var(--ease), border-color 320ms var(--ease),
              box-shadow 320ms var(--ease), transform 320ms var(--ease);
}
.spine-node.lit::before {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--bg-app), 0 0 14px rgba(255, 90, 44, 0.55);
  transform: scale(1.15);
}
.spine-node-n,
.spine-node-l {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
  transition: color 320ms var(--ease), opacity 420ms var(--ease),
              transform 420ms var(--ease);
  opacity: 0;
}
.spine-node-n {
  right: 15px; top: 0; transform: translate(4px, -50%);
}
.spine-node-l {
  right: 16px; top: 15px;
  writing-mode: vertical-rl; text-orientation: mixed;
  letter-spacing: 0.2em;
  transform: translate(4px, 0);
}
.spine-node.lit .spine-node-n { opacity: 1; transform: translate(0, -50%); color: var(--accent); }
.spine-node.lit .spine-node-l { opacity: 1; transform: none; color: var(--text-3); }
.spine-node.now .spine-node-l { color: var(--text-2); }


.spine-node::after {
  content: ""; position: absolute; left: -1px; top: 0;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 90, 44, 0.4) 0%, rgba(255, 90, 44, 0) 68%);
  opacity: 0; transform: scale(0.6);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.spine-node::after {
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  background:
    radial-gradient(circle, rgba(255, 90, 44, 0.5) 0%, rgba(255, 90, 44, 0) 62%),
    radial-gradient(circle, rgba(255, 176, 132, 0.35) 0%, rgba(255, 176, 132, 0) 78%);
}
.spine-node.now::after { opacity: 1; transform: none; animation: spine-halo 3.2s var(--ease) infinite; }
@keyframes spine-halo {
  0%, 100% { transform: scale(0.78); opacity: 0.55; }
  50%      { transform: scale(1.28); opacity: 1; }
}
.spine-node.now::before {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--bg-app), 0 0 0 1.5px rgba(255, 90, 44, 0.65),
              0 0 14px rgba(255, 90, 44, 0.9), 0 0 34px rgba(255, 90, 44, 0.55);
  transform: scale(1.45);
  animation: spine-node-beat 2.4s var(--ease) infinite;
}
@keyframes spine-node-beat {
  0%, 100% { box-shadow: 0 0 0 3px var(--bg-app), 0 0 0 1.5px rgba(255,90,44,0.55),
                         0 0 12px rgba(255,90,44,0.7), 0 0 24px rgba(255,90,44,0.35); }
  50%      { box-shadow: 0 0 0 3px var(--bg-app), 0 0 0 1.5px rgba(255,90,44,0.85),
                         0 0 20px rgba(255,90,44,1), 0 0 44px rgba(255,90,44,0.6); }
}

.spine-node.now .spine-node-n {
  color: var(--accent); font-weight: 600;
  text-shadow: 0 0 14px rgba(255, 90, 44, 0.6);
}
.spine-node.now .spine-arm {
  height: 2px;
  box-shadow: 0 0 12px rgba(255, 90, 44, 0.7);
}


.spine-node .spine-arm {
  position: absolute; left: 3px; top: 0;
  height: 1px; width: 0;
  background: linear-gradient(90deg, var(--accent), transparent);
  transition: width 520ms var(--ease);
}
.spine-node.lit .spine-arm { width: 40px; }
.spine-node.now .spine-arm { width: 58px; }

.spine-node.pinned-hold .spine-arm { width: 58px; }


.sec-seam {
  position: absolute; top: 0; right: 0; height: 1px;
  
  left: max(18px, calc(50vw - 622px));
  z-index: 2; pointer-events: none; overflow: visible;
  background: linear-gradient(
    90deg,
    rgba(255, 90, 44, 0.65) 0,
    rgba(255, 90, 44, 0.28) 14%,
    rgba(28, 25, 20, 0.10) 46%,
    transparent 100%
  );
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
  transition: transform 1100ms var(--ease), opacity 700ms var(--ease);
}
.chapter-live > .sec-seam { transform: none; opacity: 1; }
.sec-seam::after {
  content: ""; position: absolute; left: 0; top: -2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: 0;
  box-shadow: 0 0 12px rgba(255, 90, 44, 0.7);
  transition: opacity 700ms var(--ease) 240ms;
}
.chapter-live > .sec-seam::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .chapter-live > .sec-seam::after {
    animation: seam-spark 760ms var(--ease) 160ms 1;
  }
  
  .sec-seam::before {
    content: ""; position: absolute; left: -5px; top: -7px;
    width: 15px; height: 15px; border-radius: 50%;
    border: 1.5px solid rgba(255, 90, 44, 0.85);
    opacity: 0; pointer-events: none;
  }
  .chapter-live > .sec-seam::before {
    animation: seam-burst 820ms cubic-bezier(.16,1,.3,1) 180ms 1;
  }
  
  .sec-bloom {
    position: absolute; left: max(18px, calc(50vw - 622px)); top: -40px;
    width: 420px; height: 260px; margin-left: -60px;
    pointer-events: none; z-index: 0; opacity: 0;
    background: radial-gradient(
      60% 60% at 20% 30%,
      rgba(255, 90, 44, 0.16) 0%,
      rgba(255, 90, 44, 0.06) 42%,
      rgba(255, 90, 44, 0) 72%
    );
    filter: blur(2px);
  }
  .chapter-live > .sec-bloom { animation: sec-bloom 1600ms var(--ease) 120ms 1; }
}
@keyframes seam-spark {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  22%  { opacity: 1; transform: translate(1px, -1px) scale(1.9); }
  38%  { transform: translate(-1px, 1px) scale(1.5); }
  54%  { transform: translate(1px, 0) scale(1.7); }
  70%  { transform: translate(0, 0) scale(1.2); }
  100% { opacity: 1; transform: none; }
}
@keyframes seam-burst {
  0%   { opacity: 0.9; transform: scale(0.3); }
  60%  { opacity: 0.35; }
  100% { opacity: 0; transform: scale(2.6); }
}
@keyframes sec-bloom {
  0%   { opacity: 0; transform: translateY(10px); }
  35%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@media (max-width: 900px) { .sec-bloom { display: none; } }

.sec-seam i {
  position: absolute; top: -1px; left: 0; width: 46px; height: 3px;
  border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  filter: blur(0.4px);
}
@media (prefers-reduced-motion: no-preference) {
  .chapter-live > .sec-seam i { animation: seam-run 1500ms var(--ease) 200ms 1; }
}
@keyframes seam-run {
  0%   { opacity: 0; transform: translateX(0); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(min(760px, 60vw)); }
}

@media (max-width: 900px) { .sec-seam { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .spine-fill, .spine-head { display: none; }
  .spine-node.now::after { animation: none; }
  .sec-seam { transition: none; transform: none; opacity: 1; }
  .sec-bloom { display: none; }
  .spine-node .spine-node-n, .spine-node .spine-node-l { opacity: 1; transform: none; }
}

@media (max-width: 1240px) and (min-width: 901px) {
  
  body { padding-left: 176px; }
  .spine { left: 148px; }
  .sec-seam { left: 148px; }
  .spine-node-n {
    right: 16px; left: auto; top: 0;
    font-size: 9px; letter-spacing: 0.08em; text-align: right;
    transform: translate(6px, -142%);
  }
  .spine-node-l {
    right: 16px; left: auto; top: 0;
    writing-mode: horizontal-tb; text-orientation: initial;
    font-size: 9px; letter-spacing: 0.1em;
    white-space: nowrap; text-align: right;
    transform: translate(6px, 12%);
  }
  .spine-node.lit .spine-node-n,
  .spine-node.now .spine-node-n { transform: translate(0, -142%); }
  .spine-node.lit .spine-node-l,
  .spine-node.now .spine-node-l { transform: translate(0, 12%); }
}


@media (max-width: 900px) { .spine { display: none; } }



.brainwrap, .metafig {
  position: relative; z-index: 3;
  width: max-content; margin-left: 0; margin-right: 0;
  display: flex; align-items: center; gap: 14px;
  transform: translateX(var(--spine-x, 0));
  transition: transform 600ms var(--ease);
}
.brainwrap { margin-top: 18px; padding-right: 0; }
.metafig { margin-top: 26px; }

.brain, .metafig svg { position: relative; z-index: 1; display: block; }
.brain { width: 92px; height: 92px; }
.metafig svg { width: 96px; height: 96px; }
.metafig-sm svg { width: 76px; height: 76px; }

.brain path, .brain circle {
  stroke: var(--text-4); stroke-width: 1.6; fill: none;
  transition: stroke 500ms var(--ease), filter 500ms var(--ease);
}
.brainwrap.lit .brain path, .brainwrap.lit .brain circle {
  stroke: var(--accent);
  filter: drop-shadow(0 0 8px rgba(255,90,44,0.5));
}
.metafig path, .metafig circle {
  fill: none; stroke: var(--text-4); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 600ms var(--ease), opacity 600ms var(--ease), transform 700ms var(--ease);
}
.metafig.lit path, .metafig.lit circle { stroke: var(--accent); }


.brain-cap, .metafig .mf-cap {
  position: relative !important; top: auto; left: auto; right: auto;
  margin: 0; align-self: center; transform: none; z-index: 3;
  white-space: nowrap; background: none; padding: 2px 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-4);
  transition: color 500ms var(--ease);
}
.brainwrap.lit .brain-cap, .metafig.lit .mf-cap { color: var(--accent); }


@media (prefers-reduced-motion: no-preference) {
  .hero .chat-input { position: relative; }
  .hero .chat-input::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit;
    border: 1.5px solid var(--accent); opacity: 0;
    animation: input-arm 1.1s var(--ease) 2.6s forwards;
    pointer-events: none;
  }
  @keyframes input-arm {
    0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
    30%  { opacity: 1; }
    100% { opacity: 1; clip-path: inset(0 0 0 0); }
  }
  .hero .chat-input .send { transition: background 400ms var(--ease), box-shadow 400ms var(--ease); }
  .hero .chat-input.armed .send { box-shadow: 0 0 0 4px var(--accent-soft); }
}


.gt-line.lit::before { background: repeating-linear-gradient(to bottom, var(--accent) 0 6px, transparent 6px 12px); }
.gt-line.lit span { color: var(--accent); }
.gt-line::before, .gt-line span { transition: background 500ms var(--ease), color 500ms var(--ease); }


.lf-field input, .lf-field textarea { transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease); }
.lf-field.lit input, .lf-field.lit textarea {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}


.tg-card { transition: border-color 500ms var(--ease), box-shadow 500ms var(--ease); }
.tg-card.lit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-card); }
.tg-card.lit .rflag { border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); }


.matrix .mx-us { transition: box-shadow 400ms var(--ease); }
.matrix .mx-us.lit { box-shadow: inset 0 3px 0 var(--accent), 0 0 18px -4px rgba(255,90,44,0.6); }







section, .band, .moat, .hero { z-index: auto; }

.wrap { z-index: 2; }
.cutout, .memcard, .build, .layer, .creative-card, .cr-demo, .s3-detail,
.gt-lens, .why-card, .faq details, .faq-aside-card, .cta, .matrix-wrap,
.rflag, .bstage, .marquee-row, .sec-head,
.wrap > h2, .sec-title, .sec-sub, .eyebrow, .stack-kicker, .gt-kicker, .matrix-note, .gt-line,
.s3-detail, .report-foot, .lead-fine {
  position: relative; z-index: 2;
}


.float-chip { position: absolute; z-index: 5; }




.moat { position: relative; z-index: 3; }



.metafig[data-fig="eye"] .mf-lid-t,
.metafig[data-fig="eye"] .mf-lid-b { transform-origin: 48px 48px; }
.metafig[data-fig="eye"]:not(.lit) .mf-lid-t { transform: translateY(20px) scaleY(0.12); }
.metafig[data-fig="eye"]:not(.lit) .mf-lid-b { transform: translateY(-20px) scaleY(0.12); }
.metafig[data-fig="eye"]:not(.lit) .mf-iris,
.metafig[data-fig="eye"]:not(.lit) .mf-pupil { opacity: 0; transform: scale(0.4); transform-origin: 48px 48px; }
.metafig[data-fig="eye"] .mf-ray { opacity: 0; stroke-width: 1.6; transition-delay: 260ms; }
.metafig[data-fig="eye"].lit .mf-ray { opacity: 0.85; }
.metafig[data-fig="eye"].lit .mf-pupil { fill: var(--accent); }


@media (prefers-reduced-motion: reduce) {
  .metafig path, .metafig circle { transform: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
}

@media (max-width: 1240px) {
  .brainwrap, .metafig { transform: none; margin-left: auto; margin-right: auto; }
}


:root:root {
  --accent: #ff5a2c;
  --border: rgba(28, 25, 20, 0.085);
}


:root { --gap: clamp(16px, 1.6vw, 24px); }.layers, .steps, .gt-points, .stats, .split, .creative-grid {
  gap: var(--gap);
  align-items: stretch;
}.layers > *, .steps > *, .gt-points > *, .split > * { height: 100%; }.layer, .step, .gt-point, .stat {
  position: relative;
  transition: transform 380ms var(--ease), border-color 380ms var(--ease),
              box-shadow 380ms var(--ease), background 380ms var(--ease);
}.layer::after, .step::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 12%, transparent));
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
  transition: transform 460ms var(--ease), opacity 300ms var(--ease);
}.layer:hover::after, .step:hover::after { transform: scaleX(1); opacity: 1; }.layer:hover, .step:hover, .gt-point:hover, .stat:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 26%, var(--border));
  box-shadow: 0 18px 40px -30px rgba(28, 25, 20, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .layer:hover, .step:hover, .feat:hover, .gt-point:hover, .stat:hover, .ptier:hover { transform: none; }
}


.sec-head .eyebrow { margin-bottom: 2px; }
.sec-head + * { margin-top: clamp(17px, 2.1vh, 26px); }


.hero { padding: clamp(44px, 5.4vh, 62px) 0 clamp(38px, 4.8vh, 56px); }
.hero-lede { max-width: 52ch; }

@media (min-width: 921px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 4.5vw, 64px); }
}


.moat { border-radius: 0; }
.moat::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-app) 55%, transparent), transparent);
}
.moat .wrap { z-index: 1; }

.moat-grid { gap: clamp(40px, 4.5vw, 68px); align-items: center; position: relative; }
.moat-points { margin-top: clamp(22px, 2.6vh, 32px); }.layer h3, .step h3 { margin-top: 12px; }.layer p, .step p { max-width: 42ch; }
.layer-ex { margin-top: 16px; }


.creative-split, .gt-trap, .integ, .math-wrap { gap: clamp(28px, 3.4vw, 48px); }
.gt-points { margin-top: clamp(20px, 2.4vh, 28px); }


.cta-grid { gap: clamp(32px, 4vw, 56px); }


.spine { z-index: 40; }

.moat::after { height: 56px; opacity: 0.45; }





:root {
  --text-2: #56524a;   
  --text-3: #69655e;   
  --text-4: #696760;   
  --border: rgba(28, 25, 20, 0.115);
  --border-2: rgba(28, 25, 20, 0.19);
  --bg-band: #e8e5df;
  --accent-soft: rgba(255, 90, 44, 0.13);
  --shadow-card: 0 1px 2px rgba(28, 25, 20, 0.06), 0 12px 30px -16px rgba(28, 25, 20, 0.2);
}
.sec-sub, .hero-lede { color: var(--text-2); }
.eyebrow { color: var(--accent-text); letter-spacing: 0.14em; }.layer p, .step p, .gt-point p { color: var(--text-2); }


.moat, .moat.band { background: #141210; color: #f4f2ee; }
.moat .moat-sub { color: rgba(244, 242, 238, 0.66); }
.moat .moat-eyebrow { color: var(--accent-text); letter-spacing: 0.14em; }
.moat h2, .moat .moat-points li b { color: #f4f2ee; }
.moat .moat-points li { color: rgba(244, 242, 238, 0.82); }
.moat::before, .moat::after { z-index: 0; }
.moat.band::before { background: none; }



.band { background: transparent; }

.band:nth-of-type(even):not(.moat)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg-band) 0%, transparent) 0%,
    color-mix(in srgb, var(--bg-band) 72%, transparent) 34%,
    color-mix(in srgb, var(--bg-band) 72%, transparent) 66%,
    color-mix(in srgb, var(--bg-band) 0%, transparent) 100%
  );
}
.band > .wrap { position: relative; z-index: 1; }


.sec-title em, .hero h1 em, .moat h2 em {
  background: linear-gradient(96deg, var(--accent), color-mix(in oklab, var(--accent) 62%, #ffb27a));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}.layer, .step, .gt-point, .stat {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  background-repeat: no-repeat; background-size: 100% 96px;
}
.moat .memcard { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)); }


.para { contain: layout style paint; }
.spine { contain: layout style; }
.spine-fill { will-change: height; }
.spine-head { will-change: transform; }


.creative-split { gap: var(--gap) clamp(28px, 3.4vw, 48px); }
.creative-split .sec-head + * { margin-top: 0; }
.creative-head { max-width: 58ch; margin-bottom: clamp(12px, 1.6vh, 22px); }
.creative-grid { gap: var(--gap); }.creative-card, .tg-card, .mem-card, .memcard, .stat, .gt-point {
  transition: transform 380ms var(--ease), border-color 380ms var(--ease),
              box-shadow 380ms var(--ease);
}
.creative-card, .tg-card {
  position: relative;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  background-repeat: no-repeat; background-size: 100% 84px;
}
.creative-card::after, .tg-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 12%, transparent));
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
  transition: transform 460ms var(--ease), opacity 300ms var(--ease);
}
.creative-card:hover::after, .tg-card:hover::after { transform: scaleX(1); opacity: 1; }
.creative-card:hover, .tg-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 26%, var(--border));
  box-shadow: 0 18px 40px -30px rgba(28, 25, 20, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .creative-card:hover, .tg-card:hover { transform: none; }
}.creative-ic, .layer-phase .n, .memcard-ic {
  background-image: linear-gradient(140deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 16%, transparent);
}


.creative-split .sec-head.creative-head { margin-bottom: 4px; }
.creative-split .cr-demo { margin-top: 0; align-self: start; }





.s3-scene::before {
  content: ""; position: absolute; left: 50%; top: 58%;
  width: min(78%, 620px); aspect-ratio: 1.7 / 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, color-mix(in oklab, var(--accent) 20%, transparent), transparent 72%);
  filter: blur(6px); opacity: 0.7; pointer-events: none; z-index: 0;
}
.s3-deck { z-index: 1; }


.s3-face {
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow:
    0 22px 40px -22px rgba(28,25,20,0.5),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.12);
}
.s3-plate[data-tier="upper"] .s3-face {
  box-shadow:
    0 26px 44px -22px color-mix(in oklab, var(--accent) 42%, rgba(28,25,20,0.5)),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.12);
}

.s3-plate.on .s3-face {
  box-shadow:
    0 34px 60px -24px color-mix(in oklab, var(--accent) 55%, rgba(28,25,20,0.55)),
    0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.7);
}
.s3-deck.focused .s3-plate:not(.on) .s3-face { opacity: 0.5; }

.s3-plate.on .s3-face::after {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.62), rgba(255,255,255,0.06) 46%, transparent 62%);
}
.s3-edge { filter: brightness(0.6) saturate(1.1); }


.s3-ceiling {
  border-top: 1px dashed color-mix(in oklab, var(--accent) 34%, var(--border-2));
}
.s3-ceiling::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46px;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--accent) 9%, transparent), transparent);
  pointer-events: none;
}


@media (min-width: 981px) {
  .s3-list::before {
    content: ""; position: absolute; left: -25px; top: 4%; bottom: 4%;
    width: 1px;
    background: linear-gradient(to bottom,
      transparent,
      color-mix(in oklab, var(--accent) 34%, transparent) 12%,
      var(--border-2) 62%,
      transparent);
  }
  .s3-list li.on {
    background: linear-gradient(100deg,
      color-mix(in oklab, var(--accent) 8%, var(--bg-card)), var(--bg-card) 60%);
    border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
    box-shadow: 0 16px 34px -26px rgba(28,25,20,0.55);
  }
}
.s3-list li[data-tier="upper"] h3 { color: var(--text-1); }
.s3-list li:not(.on) h3 { color: color-mix(in oklab, var(--text-1) 78%, var(--bg-app)); }
.s3-list li.on .s3-li-n { color: var(--accent-text); text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 45%, transparent); }
.s3-list li.on .s3-li-tag { background: var(--accent-soft); color: var(--accent-text); }


.s3-detail { min-height: 168px; }
.s3-d { padding-right: 16px; }
@media (min-width: 981px) {
  .s3-d { border-right: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); }
}


.stack3d .s3-scene { min-height: 400px; }
.stack3d { margin-top: 34px; }
.stack-kicker { margin-top: 26px; }


@media (min-width: 981px) {
  .creative-split .cr-demo { position: sticky; top: 96px; }
  .creative-grid { gap: 14px; }
}
.creative-card {
  position: relative; overflow: hidden;
  padding: 22px 22px 22px 26px;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 4%, var(--bg-card)), var(--bg-card) 46%);
}

.creative-card::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--accent), color-mix(in oklab, var(--accent) 12%, transparent));
  opacity: 0.22; transition: opacity 240ms var(--ease), top 240ms var(--ease), bottom 240ms var(--ease);
}
.creative-card:hover::before { opacity: 1; top: 6px; bottom: 6px; }
.creative-card:hover .creative-ic {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 38%, transparent),
              0 10px 24px -18px color-mix(in oklab, var(--accent) 60%, transparent);
}
.creative-ic { transition: box-shadow 240ms var(--ease), color 240ms var(--ease), transform 240ms var(--ease); }
.creative-card:hover .creative-ic { transform: translateY(-1px) rotate(-3deg); }
.creative-card h3 { margin-top: 14px; }

.creative-card { counter-increment: crcard; }
.creative-grid { counter-reset: crcard; }
.creative-card::after {
  content: "0" counter(crcard);
  position: absolute; inset: 18px 20px auto auto;

  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--text-3); opacity: 0.55;
  background: none; border: 0; transform: none; width: auto; height: auto;
  transition: color 240ms var(--ease), opacity 240ms var(--ease);
}
.creative-card:hover::after { color: var(--accent); opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .creative-card:hover .creative-ic { transform: none; }
}


@media (min-width: 981px) {
  .s3-list { min-height: 400px !important; }
  
  .s3-list::before {
    top: 6%; bottom: 44%;
    background: linear-gradient(to bottom,
      transparent,
      color-mix(in oklab, var(--accent) 30%, transparent) 14%,
      var(--border-2) 82%,
      transparent);
  }
  
  .s3-d { border-right: 0; padding-right: 0; padding-left: 0; }
}
.s3-ceiling::after { height: 30px; opacity: 0.6; }


.creative-card::after { left: auto; bottom: auto; height: auto; }


.s3-plate { --lit: var(--accent); }

.s3-plate[data-tier="base"]    { --face2: #c9c4b9; --edge: #8b867b; --lit: #8b867b; }
.s3-plate[data-i="1"]          { --face2: #d3cdc2; --edge: #948e83; --lit: #948e83; }
.s3-plate[data-tier="ceiling"] { --face2: #e3d3bd; --edge: #b09274; --lit: #b09274; }
.s3-plate[data-i="3"] { --face2: #f7b992; --edge: #d98a55; --lit: #d98a55; }
.s3-plate[data-i="4"] { --face2: #ffa878; --edge: #e2703c; --lit: #e2703c; }
.s3-plate[data-i="5"] { --face2: #ff8f5c; --edge: #e2531f; --lit: var(--accent); }
.s3-plate[data-i="6"] { --face2: #ff7448; --edge: #e63f12; --lit: var(--accent); }


.s3-scene::before {
  background:
    radial-gradient(closest-side at 50% 38%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 74%),
    radial-gradient(closest-side at 50% 78%, color-mix(in oklab, #b09274 14%, transparent), transparent 76%);
  opacity: 0.78;
}


.s3-face {
  box-shadow:
    0 22px 40px -22px color-mix(in oklab, var(--lit) 34%, rgba(28,25,20,0.55)),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.14);
  transition: box-shadow 320ms var(--ease), opacity 320ms var(--ease), filter 320ms var(--ease);
}
.s3-plate[data-tier="upper"] .s3-face,
.s3-plate[data-tier="ceiling"] .s3-face {
  box-shadow:
    0 26px 46px -22px color-mix(in oklab, var(--lit) 46%, rgba(28,25,20,0.5)),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.14);
}
.s3-plate.on .s3-face {
  box-shadow:
    0 40px 70px -26px color-mix(in oklab, var(--lit) 62%, rgba(28,25,20,0.5)),
    0 0 0 1px color-mix(in oklab, var(--lit) 45%, transparent),
    0 0 46px -6px color-mix(in oklab, var(--lit) 34%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.75);
  filter: saturate(1.12) brightness(1.03);
}
.s3-deck.focused .s3-plate:not(.on) .s3-face { opacity: 0.46; filter: saturate(0.72); }


.s3-plate.on .s3-face::after {
  background: linear-gradient(115deg,
    rgba(255,255,255,0.7), rgba(255,255,255,0.08) 44%, transparent 60%);
  animation: s3-sheen 2.6s var(--ease) infinite;
}
@keyframes s3-sheen {
  0%   { transform: translate3d(-14%, -10%, 0); opacity: 0.55; }
  50%  { transform: translate3d(10%, 6%, 0);    opacity: 1; }
  100% { transform: translate3d(-14%, -10%, 0); opacity: 0.55; }
}


.s3-deck { animation: s3-float 11s ease-in-out infinite; }
@keyframes s3-float {
  0%, 100% { transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-42deg); }
  50%      { transform: translate(-50%, calc(-50% - 6px)) rotateX(56.5deg) rotateZ(-40.5deg); }
}
.s3-scene:hover .s3-deck { animation-play-state: paused; }


.s3-plate.on { transform: translateZ(calc(var(--z) + var(--off))) scale(1.035); }
.s3-plate.on .s3-edge { filter: brightness(0.72) saturate(1.25); }

@media (prefers-reduced-motion: reduce) {
  .s3-deck { animation: none; }
  .s3-plate.on .s3-face::after { animation: none; }
}


@media (min-width: 981px) {
  .stack3d { align-items: start; }
  .s3-detail {
    align-self: start; position: sticky; top: 104px;
    text-align: left; margin: 0;
    min-height: 236px; padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 5%, var(--bg-card)), var(--bg-card) 52%);
    box-shadow: 0 20px 44px -34px rgba(28,25,20,0.5);
    display: block;
  }
  .s3-detail::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--accent), color-mix(in oklab, var(--accent) 10%, transparent));
  }
  .s3-detail .s3-d p { margin-left: 0; }
  .s3-d.on { animation: s3-d-in 320ms var(--ease) both; }
  .s3-list, .stack3d .s3-scene { align-self: center; }
}
@keyframes s3-d-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .s3-d.on { animation: none; } }


@media (min-width: 981px) {
  #stack .stack3d { margin-top: 64px; }
  #stack .s3-list { margin-top: 64px; }
  
  .s3-detail { position: static; top: auto; align-self: center; }
}



.faq-aside { position: relative; top: auto; }
@media (min-width: 981px) {
  .faq-aside { position: relative; top: auto; min-height: 560px; }
  .faq-aside-card {
    position: sticky; top: 96px; z-index: 2;
    background: var(--bg-card);
  }
}



.metafig[data-fig="q"] .mf-q-ring {
  stroke-dasharray: 214; stroke-dashoffset: 214; opacity: 0.5;
  transition: stroke-dashoffset 1100ms var(--ease), stroke 600ms var(--ease), opacity 600ms var(--ease);
}
.metafig[data-fig="q"].lit .mf-q-ring { stroke-dashoffset: 0; opacity: 1; }
.metafig[data-fig="q"] .mf-q-hook {
  stroke-dasharray: 78; stroke-dashoffset: 78;
  transition: stroke-dashoffset 900ms var(--ease) 220ms, stroke 600ms var(--ease);
}
.metafig[data-fig="q"].lit .mf-q-hook { stroke-dashoffset: 0; }
.metafig[data-fig="q"] .mf-q-dot { opacity: 0; transition: opacity 400ms var(--ease) 900ms, fill 400ms var(--ease); }
.metafig[data-fig="q"].lit .mf-q-dot { opacity: 1; fill: var(--accent); stroke: none; }


#lead > .sec-seam { display: none; }

@media (min-width: 981px) {
  #stack .stack3d { margin-top: 48px; margin-bottom: 0; }
  #stack .s3-list { margin-top: 48px; }
  .stack3d .s3-scene { min-height: 440px; }
  .s3-list { min-height: 460px !important; }
}
.stack-kicker { margin-top: 14px; }


@media (min-width: 981px) {
  .stack3d .s3-scene { min-height: 392px; }
  .s3-list { min-height: 392px !important; }
  .s3-deck {
    transform: translate(-50%, calc(-50% + 392px * var(--s))) rotateX(58deg) rotateZ(-42deg);
  }
  .stack3d .s3-ceiling { top: 78%; }
  #stack .s3-list { margin-top: 40px; }
  #stack .stack-kicker { margin-top: 0; }
}




.brainwrap, .metafig { isolation: isolate; }
.brainwrap::before, .metafig::before,
.brainwrap::after, .metafig::after {
  content: ""; position: absolute; z-index: 0;
  left: var(--mf-cx, 48px); top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; pointer-events: none;
  opacity: 0;
}
.brainwrap::before, .metafig::before {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.brainwrap::after, .metafig::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .brainwrap.pop::before, .metafig.pop::before { animation: mf-ring 620ms var(--ease) 1; }
  .brainwrap.pop svg, .metafig.pop svg { animation: mf-kick 420ms var(--ease) 1; }
  .brainwrap.pop .brain-cap, .metafig.pop .mf-cap { animation: mf-cap-in 500ms var(--ease) 1; }
}
@keyframes mf-ring {
  0%   { opacity: 0.5; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes mf-kick {
  0%   { transform: scale(0.985); }
  100% { transform: scale(1); }
}
@keyframes mf-cap-in {
  0%   { opacity: 0; transform: translateX(-6px); letter-spacing: 0.28em; }
  100% { opacity: 1; transform: none; letter-spacing: 0.12em; }
}


.metafig[data-fig="bolt"] .mf-b-ring {
  stroke-dasharray: 208; stroke-dashoffset: 208; opacity: 0.6;
  transition: stroke-dashoffset 900ms var(--ease), opacity 500ms var(--ease), stroke 600ms var(--ease);
}
.metafig[data-fig="bolt"].lit .mf-b-ring { stroke-dashoffset: 0; opacity: 1; }
.metafig[data-fig="bolt"] .mf-b-bolt {
  opacity: 0; transform: scale(0.6); transform-origin: 48px 48px;
  transition: opacity 420ms var(--ease) 520ms, transform 520ms var(--ease) 520ms, fill 500ms var(--ease);
}
.metafig[data-fig="bolt"].lit .mf-b-bolt {
  opacity: 1; transform: none;
  fill: color-mix(in srgb, var(--accent) 24%, transparent);
}


.metafig[data-fig="layers"] .mf-ly {
  opacity: 0; transition: opacity 480ms var(--ease), transform 620ms var(--ease), stroke 600ms var(--ease);
}
.metafig[data-fig="layers"] .mf-ly-1 { transform: translateY(-14px); transition-delay: 460ms; }
.metafig[data-fig="layers"] .mf-ly-2 { transform: translateY(-10px); transition-delay: 260ms; }
.metafig[data-fig="layers"] .mf-ly-3 { transform: translateY(-6px);  transition-delay: 60ms; }
.metafig[data-fig="layers"].lit .mf-ly { opacity: 1; transform: none; }
.metafig[data-fig="layers"].lit .mf-ly-1 { fill: color-mix(in srgb, var(--accent) 14%, transparent); }


.metafig[data-fig="shield"] .mf-sh {
  stroke-dasharray: 260; stroke-dashoffset: 260;
  transition: stroke-dashoffset 1000ms var(--ease), stroke 600ms var(--ease), fill 600ms var(--ease);
}
.metafig[data-fig="shield"].lit .mf-sh {
  stroke-dashoffset: 0; fill: color-mix(in srgb, var(--accent) 10%, transparent);
}
.metafig[data-fig="shield"] .mf-sh-tick {
  stroke-dasharray: 46; stroke-dashoffset: 46;
  transition: stroke-dashoffset 520ms var(--ease) 680ms;
}
.metafig[data-fig="shield"].lit .mf-sh-tick { stroke-dashoffset: 0; }


.metafig[data-fig="bolt"], .metafig[data-fig="layers"], .metafig[data-fig="shield"] {
  margin-top: 22px; margin-bottom: 4px;
}
.metafig-sm::before, .metafig-sm::after { --mf-cx: 38px; }


.metafig[data-fig="threea"] .mf-a-ring {
  stroke-dasharray: 208; stroke-dashoffset: 208; opacity: .5;
  transition: stroke-dashoffset 1100ms var(--ease), stroke 600ms var(--ease), opacity 600ms var(--ease);
}
.metafig[data-fig="threea"].lit .mf-a-ring { stroke-dashoffset: 0; opacity: 1; }
.metafig[data-fig="threea"] .mf-a-txt {
  fill: var(--text-4); stroke: none;
  font-family: var(--font-mono); font-size: 27px; font-weight: 600; letter-spacing: .04em;
  opacity: 0; transition: opacity 500ms var(--ease) 320ms, fill 600ms var(--ease);
}
.metafig[data-fig="threea"].lit .mf-a-txt { opacity: 1; fill: var(--accent); }


.metafig[data-fig="creative"] .mf-cr-sun {
  opacity: 0; transform: translateY(12px); transform-origin: 48px 20px;
  transition: opacity 520ms var(--ease), transform 680ms var(--ease),
              fill 600ms var(--ease), stroke 600ms var(--ease), filter 600ms var(--ease);
}
.metafig[data-fig="creative"].lit .mf-cr-sun {
  opacity: 1; transform: none;
  fill: color-mix(in srgb, var(--accent) 22%, transparent);
  filter: drop-shadow(0 0 7px rgba(255,90,44,.42));
}
.metafig[data-fig="creative"] .mf-cr-ray {
  opacity: 0; stroke-width: 1.8;
  transition: opacity 380ms var(--ease) 340ms, stroke 600ms var(--ease);
}
.metafig[data-fig="creative"].lit .mf-cr-ray { opacity: .8; }
.metafig[data-fig="creative"] .mf-cr-peak {
  stroke-dasharray: 160; stroke-dashoffset: 160;
  transition: stroke-dashoffset 900ms var(--ease), stroke 600ms var(--ease);
}
.metafig[data-fig="creative"].lit .mf-cr-peak { stroke-dashoffset: 0; }
.metafig[data-fig="creative"] .mf-cr-base {
  stroke-dasharray: 90; stroke-dashoffset: 90;
  transition: stroke-dashoffset 600ms var(--ease) 220ms, stroke 600ms var(--ease);
}
.metafig[data-fig="creative"].lit .mf-cr-base { stroke-dashoffset: 0; }
.metafig[data-fig="creative"] { margin-top: 22px; margin-bottom: 4px; }
.creative-split > .metafig[data-fig="creative"] { grid-column: 1 / -1; justify-self: start; }


.hero-cta { position: relative; }
.mf-hero {
  position: absolute; left: 0; top: 50%;
  transform: translate(var(--spine-x, 0), -50%);
  margin: 0; z-index: 3; pointer-events: none;
}
.metafig.mf-hero svg { width: 34px; height: 37px; overflow: visible; }
.mf-hero .mf-mk {
  fill: color-mix(in oklab, var(--text-4) 55%, transparent); stroke: none;
  transition: fill 600ms var(--ease), filter 600ms var(--ease);
}
.mf-hero .mf-mk-i { fill: color-mix(in oklab, var(--text-4) 34%, transparent); }
.mf-hero.lit .mf-mk { fill: var(--accent); filter: drop-shadow(0 0 10px rgba(255,90,44,.42)); }
.mf-hero.lit .mf-mk-i { fill: color-mix(in oklab, var(--accent) 72%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .mf-hero svg { animation: none; }
  .mf-hero.pop svg { animation: mf-mark-lift 720ms var(--ease) 1; }
}
@keyframes mf-mark-lift {
  0% { transform: translateY(0); }
  38% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
@media (max-width: 1240px) { .mf-hero { display: none; } }


.hero-mark-ghost {
  position: absolute; right: -140px; top: -128px; width: 360px; z-index: 0;
  pointer-events: none;
}
.hero-mark-ghost svg {
  width: 100%; height: auto;
  --gm: calc(var(--ghost-p, .5) * 100%);
  -webkit-mask-image: linear-gradient(184deg,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.34) max(0%, calc(var(--gm) - 28%)),
    rgba(0,0,0,.92) var(--gm),
    rgba(0,0,0,.24) min(100%, calc(var(--gm) + 30%)),
    rgba(0,0,0,.04) 100%);
  mask-image: linear-gradient(184deg,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.34) max(0%, calc(var(--gm) - 28%)),
    rgba(0,0,0,.92) var(--gm),
    rgba(0,0,0,.24) min(100%, calc(var(--gm) + 30%)),
    rgba(0,0,0,.04) 100%);
  animation: hero-mark-breathe 12s ease-in-out infinite;
}
.hero-mark-ghost svg path { fill: rgba(255, 90, 44, .34); stroke: none; }
.hero-mark-ghost svg path + path { fill: rgba(255, 90, 44, .18); }
@keyframes hero-mark-breathe { 0%,100% { opacity: .42; } 50% { opacity: .62; } }
@media (prefers-reduced-motion: reduce) { .hero-mark-ghost svg { animation: none; } }
@media (max-width: 900px) { .hero-mark-ghost { display: none; } }


@media (max-width: 900px) {
  .metafig,
  .sec-ghost,
  .mem-ghost,
  .ctx-ghost,
  .hero-mark-ghost,
  .brainwrap,
  .faq-qm {
    display: none !important;
  }
}


@media (max-width: 640px) {
  
  .next-chip { height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .mobile-menu a,
  .mobile-menu .btn { min-height: 44px; display: flex; align-items: center; }
  .nav-burger { min-width: 44px; min-height: 44px; }
  .brand { min-height: 44px; }
  .topic { min-height: 40px; display: inline-flex; align-items: center; }

  
  .foot-col a, .foot-col button { padding: 13px 0; }

  
  .post-meta { font-size: 12px; letter-spacing: 0.06em; }
  .lens-cap { font-size: 12px; }
  .lens-sub { font-size: 13px; }
  .co-kicker { font-size: 11.5px; }
}




.src-note {
  font-size: .68em; color: var(--text-3); font-style: normal; letter-spacing: .01em;
  white-space: nowrap; display: inline-block; max-width: 100%;
}
@media (max-width: 520px) { .src-note { white-space: normal; overflow-wrap: anywhere; } }

.cmsg-bot .src-note,
.chatfig .src-note,
.ct .src-note,
.askout-note .src-note,
.build-cap .src-note { white-space: normal; display: inline; overflow-wrap: break-word; }

p > .src-note::after { content: ""; display: block; height: 0; }
li .src-note::after,
td .src-note::after,
.chatfig .src-note::after,
.cmsg-bot .src-note::after,
.src-note.inline::after { display: none; }


.rflag-est-crit { color: var(--crit); font-weight: 600; }



@media (min-width: 981px) {
  .stack3d { align-items: center; }
  .s3-detail {
    position: relative; top: auto; align-self: center;
    display: block; padding: 0;
    min-height: 360px;
  }
  
  .s3-detail .s3-d { inset: 22px 24px; }
  
  .s3-detail .s3-d.on { position: absolute; }
}


.chat-thread[data-hero-chat] { min-height: 430px; }
@media (max-width: 920px) { .chat-thread[data-hero-chat] { min-height: 390px; } }







.mini-mp { display: flex; flex-direction: column; gap: 9px; }
.mmp-gap {
  margin-bottom: 5px; padding: 10px 12px;
  border-left: 2px solid var(--warn); border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0;
  background: color-mix(in oklab, var(--warn) 8%, transparent);
  font-size: 12.5px; line-height: 1.5; color: var(--text-2); text-wrap: pretty;
}
.mmp-row { display: grid; grid-template-columns: 148px 1fr auto; align-items: center; gap: 12px; }
.mmp-ch { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.mmp-bar { height: 7px; border-radius: 4px; background: var(--bg-hover); position: relative; overflow: hidden; }
.mmp-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--accent); border-radius: 4px; }
.mmp-v { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }


.mag-spec { display: flex; flex-direction: column; gap: 7px; }
.mag-line { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: baseline; }
.mag-k {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-4); padding-top: 1px;
}
.mag-v { font-size: 12.5px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.mag-v b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.mag-v i { font-style: normal; color: var(--text-3); }
.mag-note {
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border);
  font-size: 11.5px; line-height: 1.5; color: var(--text-3); text-wrap: pretty;
}
@media (max-width: 560px) {
  .mag-line { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 560px) {
  .mmp-row { grid-template-columns: 1fr auto; }
  .mmp-bar { grid-column: 1 / -1; }
}

.appwin-ask { display: flex; justify-content: flex-end; }
.appwin-ask span {
  background: var(--accent-fill); color: var(--accent-on);
  font-size: 14.5px; font-weight: 600; line-height: 1.45;
  padding: 11px 16px; border-radius: 16px 16px 5px 16px; max-width: 84%;
  text-wrap: pretty;
}
.appwin-say { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--text-3); }
.appwin-say .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

.bstage .build-canvas {
  margin: 12px 0 0; padding: 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
}
.bstage .build-cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 11px; padding: 0 2px; font-size: 12px; color: var(--text-3); }
.bstage .build-cap .name { font-weight: 700; color: var(--text); }
.bstage .build-cap .tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; color: var(--text-4); margin-left: auto; }

@media (max-width: 860px) {
  .appwin-ask span { max-width: 100%; font-size: 14px; }
  .bpanel .build-canvas { padding: 14px; }
}


.cta-proof { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-sub); }
.cta-proof-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); margin-bottom: 9px; }
.cta-proof p { font-size: 13px; line-height: 1.62; color: var(--text-2); margin: 0; text-wrap: pretty; }
.cta-proof p + p { margin-top: 9px; }
.cta-proof b { color: var(--text); font-weight: 650; }



@media (min-width: 981px) {
  .stack3d { align-items: center; }
  .s3-detail { min-height: 380px; }
  .stack3d .s3-scene { min-height: 380px; }
  .s3-list { min-height: 380px !important; }
  .s3-detail, .stack3d .s3-scene, .s3-list { align-self: center; }
  .s3-deck {
    transform: translate(-50%, calc(-50% + 380px * var(--s))) rotateX(58deg) rotateZ(-42deg);
  }
  
  #stack .s3-list, #stack .stack3d { margin-top: 44px; }
}


.hero-sub { padding: 76px 0 44px; }
.hero-sub .hero-copy-wide { max-width: 760px; }
.hero-sub .hero-copy-wide .hero-lede { max-width: 66ch; }
.hero-sub h1 { max-width: 18ch; }
@media (max-width: 720px) { .hero-sub { padding: 44px 0 30px; } }


.hwb-chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.hwb-link {
  padding: 22px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-elevated);
}
.hwb-link-h { display: flex; align-items: center; gap: 8px; }
.hwb-n { font-size: 14.5px; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }
.hwb-link p { margin: 10px 0 0; font-size: 14px; line-height: 1.62; color: var(--text-2); text-wrap: pretty; }


.hwb-locks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.hwb-lock {
  padding: 24px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-elevated);
}
.hwb-lock-n {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--accent-text, var(--text-3));
}
.hwb-lock h3 { margin: 12px 0 0; font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; }
.hwb-lock p { margin: 9px 0 0; font-size: 14px; line-height: 1.62; color: var(--text-2); text-wrap: pretty; }
.hwb-iso {
  margin-top: 20px; padding: 24px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-2, var(--bg-hover));
  
  max-width: calc(74ch + 48px);
}
.hwb-iso-t { font-size: 15.5px; font-weight: 650; color: var(--text); }
.hwb-iso p { margin: 9px 0 0; font-size: 14px; line-height: 1.62; color: var(--text-2); max-width: 74ch; text-wrap: pretty; }
.hwb-iso-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px !important; }
.hwb-iso-links a { font-size: 13.5px; font-weight: 600; color: var(--accent-text, var(--text)); }
@media (max-width: 900px) {
  .hwb-chain, .hwb-locks { grid-template-columns: 1fr; }
}


.cmp-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; align-items: stretch; }

.cmp-cat {
  display: flex; flex-direction: column;
  padding: 24px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-elevated);
}
.cmp-cat-h { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cmp-cat-k {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.cmp-cat-h h3 { margin: 6px 0 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.cmp-cat p { margin: 13px 0 0; font-size: 14px; line-height: 1.62; color: var(--text-2); text-wrap: pretty; }
.cmp-cat p b { color: var(--text); font-weight: 600; }
.cmp-cat-t {
  margin-top: auto !important; padding-top: 13px; border-top: 1px dashed var(--border);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3) !important;
}


.cmp-honest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.cmp-h-item {
  padding: 22px; border-radius: var(--r-md);
  border: 1px dashed var(--border-2, var(--border)); background: transparent;
}
.cmp-h-t { font-size: 15.5px; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }
.cmp-h-t em { font-style: normal; color: var(--accent, var(--text)); }
.cmp-h-item p { margin: 10px 0 0; font-size: 14px; line-height: 1.62; color: var(--text-2); text-wrap: pretty; }


.cmp-obj { display: grid; gap: 16px; margin-top: 30px; max-width: 860px; }
.cmp-obj-i {
  padding: 24px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-elevated);
}
.cmp-obj-q { font-size: 16px; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }
.cmp-obj-i p { margin: 11px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.cmp-obj-go { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px !important; }
.cmp-obj-go a { font-size: 13.5px; font-weight: 600; color: var(--accent-text, var(--text)); }
@media (max-width: 900px) {
  .cmp-cats, .cmp-honest { grid-template-columns: 1fr; }
}


.feat-rows { display: grid; gap: 0; margin-top: 8px; }
.feat-row {
  display: grid; grid-template-columns: 300px 1fr; gap: 40px;
  padding: 34px 0; border-top: 1px solid var(--border);
  transition: background 160ms var(--ease);
}
.feat-row:last-child { border-bottom: 1px solid var(--border); }
.feat-row:hover { background: var(--bg-hover); }
.feat-row-l { position: relative; }
.feat-n {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--text-3);
}
.feat-row-l h2 {
  margin: 8px 0 0; font-size: 22px; font-weight: 650;
  letter-spacing: -0.02em; color: var(--text);
}
.feat-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.feat-body { margin: 0; font-size: 15px; line-height: 1.68; color: var(--text-2); max-width: 68ch; text-wrap: pretty; }
.feat-pts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.feat-pts li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.feat-pts svg {
  flex: none; width: 15px; height: 15px; margin-top: 3px;
  fill: none; stroke: var(--accent, currentColor); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.feat-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  font-size: 13.5px; font-weight: 600; color: var(--accent, var(--text));
}
.feat-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 160ms var(--ease); }
.feat-row:hover .feat-go svg { transform: translateX(3px); }
@media (max-width: 860px) {
  .feat-row { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
}



.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 200;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  padding: 0; border: 0;
  background: var(--bg-elevated); color: var(--text);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus {
  width: auto; height: auto; overflow: visible; clip-path: none;
  padding: 10px 16px; border: 1px solid var(--border-2, var(--border));
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  outline: 2px solid var(--accent, currentColor); outline-offset: 2px;
}

#main:focus { outline: none; }


@media (prefers-reduced-motion: reduce) {
  html, .builds { scroll-behavior: auto; }
}


.s3-li-h {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: inherit;
  width: 100%; cursor: pointer;
}
.s3-li-h:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 3px; border-radius: var(--r-sm);
}


.hero-sub { position: relative; overflow: hidden; }
.hero-sub::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(64% 78% at 78% 18%, var(--hero-tint, rgba(255,90,44,0.07)), transparent 70%),
    linear-gradient(180deg, var(--hero-wash, rgba(255,90,44,0.035)), transparent 62%);
}
.hero-sub::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(28,25,20,0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,25,20,0.030) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(78% 72% at 74% 22%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(78% 72% at 74% 22%, #000, transparent 74%);
}
.hero-sub > .wrap { position: relative; z-index: 1; }

.hero-sub.hero-ind { --hero-tint: rgba(47,115,232,0.07); --hero-wash: rgba(47,115,232,0.035); }

.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.hero-split .hero-copy-wide { max-width: none; }
.hero-scene {
  position: relative; padding: 20px;
  border: 1px solid var(--border); border-radius: var(--r-lg, var(--r-md));
  background: var(--bg-elevated);
  box-shadow: 0 18px 44px rgba(0,0,0,0.06);
}
.hero-scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.hero-scene-cap {
  display: block; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3);
}
@media (max-width: 940px) {
  .hero-split { grid-template-columns: 1fr; gap: 30px; }
  .hero-scene { order: 2; }
}


.fig {
  margin: 30px 0 0; padding: 24px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-elevated);
}
.fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.fig-cap {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.55; color: var(--text-2); text-wrap: pretty;
}
.fig-cap b { color: var(--text); }
.fig-src { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }


.sc-plate { fill: var(--bg-2, var(--bg-hover)); stroke: var(--border); stroke-width: 1; }
.sc-card { fill: var(--bg-elevated); stroke: var(--border-2); stroke-width: 1.2; }
.sc-card-acc { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.4; }
.sc-hi { fill: var(--accent-soft); }

.sc-ink, .sc-ink rect { fill: var(--text-2); opacity: 0.42; }
.sc-dim, .sc-dim rect, .sc-dim circle { fill: var(--border); opacity: 0.62; }
.sc-was, .sc-was rect { fill: var(--text-3); opacity: 0.3; }
.sc-acc, .sc-acc rect, .sc-acc circle { fill: var(--accent); }

.sc-acc path, path.sc-acc { fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.sc-bars, .sc-axis { fill: none; stroke: var(--border-2); stroke-width: 1.2; }
.sc-line-dim { fill: none; stroke: var(--text-3); stroke-width: 2.2; opacity: 0.5; }
.sc-line-acc { fill: none; stroke: var(--accent); stroke-width: 2.8;
  stroke-linecap: round; stroke-linejoin: round; }

.sc-net { fill: var(--accent); }
.sc-gross { fill: var(--border); opacity: 0.6; }
.sc-hi { fill: var(--accent-soft); }
.sc-plate { fill: var(--bg-2, var(--bg-hover)); stroke: var(--border); stroke-width: 1; }
.sc-dash { fill: none; stroke: var(--text-3); stroke-width: 1.3;
  stroke-dasharray: 4 5; opacity: 0.7; }
.sc-dash-acc { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 4; }
.sc-ghost { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 3 3; }
.sc-strike { fill: none; stroke: var(--text-3); stroke-width: 2.4;
  stroke-linecap: round; opacity: 0.7; }

.sc-t { font-family: var(--font-mono); font-size: 12px; fill: var(--text-2);
  paint-order: stroke fill; stroke: var(--bg-elevated); stroke-width: 3.5px;
  stroke-linejoin: round; }
.sc-t-dim { fill: var(--text-3); }
.sc-t-acc { fill: var(--accent-text); }
.sc-t-big { font-family: var(--font-sans); font-size: 20px; font-weight: 650; fill: var(--text); }
.sc-t-big-acc { font-family: var(--font-sans); font-size: 20px; font-weight: 650; fill: var(--accent-text); }


.chatfig {
  margin: 32px 0 0; padding: 20px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-elevated);
  box-shadow: 0 12px 32px rgba(0,0,0,0.05);
  max-width: 760px;
}
.chatfig-h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding-bottom: 13px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
}
.chatfig-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.chatfig .chat-thread { display: flex; flex-direction: column; gap: 12px; }
.chatfig .cmsg-bot .ct .src-note { display: inline; }
.chatfig .cmsg-user i { font-style: italic; opacity: 0.85; }


.sec-ic {
  display: grid; place-items: center; width: 42px; height: 42px;
  margin-bottom: 16px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent-text);
}
.sec-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }


.hwb-lock-ic, .hwb-link-ic {
  display: grid; place-items: center; width: 34px; height: 34px;
  margin-bottom: 12px; border-radius: 9px;
  background: var(--bg-hover); color: var(--text-2);
}
.hwb-lock-ic svg, .hwb-link-ic svg { width: 17px; height: 17px; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }


.dv-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; align-items: stretch; }
.dv-side {
  display: flex; flex-direction: column;
  padding: 24px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-elevated);
}
.dv-side.dv-after { border-color: var(--accent); background: var(--accent-soft); }
.dv-side-h { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.dv-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3);
}
.dv-tag-us { color: var(--accent-text); }
.dv-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.dv-list li {
  position: relative; padding-left: 18px;
  font-size: 14px; line-height: 1.6; color: var(--text-2); text-wrap: pretty;
}
.dv-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--border-2);
}
.dv-list-us li::before { background: var(--accent); }
.dv-list li b { color: var(--text); font-weight: 600; }
.dv-side-f {
  margin: auto 0 0; padding-top: 14px; border-top: 1px dashed var(--border);
  font-size: 13px; line-height: 1.55; color: var(--text-3); text-wrap: pretty;
}
@media (max-width: 860px) { .dv-compare { grid-template-columns: 1fr; } }



.askpair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px; align-items: start; margin-top: 44px;
}
.askpair > .chatfig { margin-top: 0; max-width: none; }
.askpair-link { display: none; }
.askout {
  padding: 20px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-elevated);
  box-shadow: 0 12px 32px rgba(0,0,0,0.05);
}
.askout-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
}
.askout-tag {
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 10px; letter-spacing: 0.06em;
}
.askout svg.askout-fig { width: 100%; height: auto; display: block; overflow: visible; }
.askout-note {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.55; color: var(--text-3); text-wrap: pretty;
}
@media (max-width: 940px) {
  .askpair { grid-template-columns: 1fr; gap: 20px; }
}


.uifig {
  margin: 32px 0 0; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border-2); background: var(--bg-elevated);
  box-shadow: 0 20px 48px rgba(0,0,0,0.09);
}
.uifig-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg-sub, var(--bg-hover));
}
.uifig-dots { display: inline-flex; gap: 6px; }
.uifig-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); }
.uifig-url { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
.uifig-body { padding: 16px; }

.uikpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.uikpi {
  padding: 11px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg-sub, var(--bg-hover));
}
.uikpi-k {
  display: block; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}
.uikpi-v { display: block; margin-top: 5px; font-size: 15px; font-weight: 650; color: var(--text); }
.uikpi-v em { font-style: normal; margin-left: 6px; font-size: 10.5px; font-weight: 600; }
.uikpi-v em.up { color: var(--ok); }
.uikpi-v em.dn { color: var(--crit); }

.uisplit { display: grid; grid-template-columns: 200px 1fr; gap: 12px; margin-top: 12px; }
.uirail { display: grid; gap: 10px; align-content: start; }
.uiprev { border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); }
.uiprev svg { width: 100%; height: auto; display: block; }
.uipanel {
  padding: 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg-sub, var(--bg-hover));
}
.uipanel-lg { background: var(--bg-elevated); }
.uipanel-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 10px; font-size: 12.5px; font-weight: 650; color: var(--text);
}
.uipanel-h span {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.07em; color: var(--text-3);
}
.uidna { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.uidna-k {
  flex: none; width: 58px; font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.05em; color: var(--text-3);
}
.uidna-v {
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--bg-elevated); border: 1px solid var(--border);
  font-size: 10.5px; color: var(--text-2);
}
.uidos { margin: 0; font-size: 11px; line-height: 1.5; color: var(--text-2); }
.uimain { display: grid; gap: 10px; align-content: start; }
.uicurve { width: 100%; height: auto; display: block; }
.uiband { fill: var(--border); opacity: 0.12; }
.uiband-crit { fill: var(--crit); opacity: 0.1; }
.uiarea { fill: var(--accent); opacity: 0.1; }
.uiline { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; }
.uistrip { display: flex; gap: 3px; margin-top: 8px; }
.uistrip span {
  position: relative; height: 40px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-sub, var(--bg-hover));
}
.uistrip span.on { border-color: var(--crit); background: var(--crit-soft); }
.uistrip i {
  position: absolute; left: 5px; bottom: 4px; font-style: normal;
  font-family: var(--font-mono); font-size: 9px; color: var(--text-3);
}
.uiscenes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.uiscenes li { display: flex; align-items: baseline; gap: 10px; font-size: 11px; }
.uiscenes li.on .uisc { font-weight: 650; color: var(--text); }
.uitc { flex: none; width: 34px; font-family: var(--font-mono); color: var(--accent-text); }
.uisc { flex: 1; color: var(--text-2); }
.uidrop { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.uidrop-crit { color: var(--crit); font-weight: 600; }
.uidiag { margin: 0; font-size: 12px; font-weight: 600; color: var(--text); }
@media (max-width: 860px) {
  .uikpis { grid-template-columns: repeat(2, 1fr); }
  .uisplit { grid-template-columns: 1fr; }
}



.sec-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(32px, 4vw, 56px); align-items: center; }
.sec-split > .sec-head { margin: 0; }
.sec-motif { position: relative; }
.sec-motif svg { width: 100%; height: auto; display: block; overflow: visible; }
.mo-line { fill: none; stroke: var(--text-3); stroke-width: 1.6; opacity: 0.55;
  stroke-linecap: round; stroke-linejoin: round; }
.mo-acc { fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.mo-fill { fill: var(--border); opacity: 0.5; }
.mo-fill-acc { fill: var(--accent); opacity: 0.9; }
.mo-soft { fill: var(--accent-soft); }
.mo-plate { fill: var(--bg-elevated); stroke: var(--border-2); stroke-width: 1.2; }
.mo-ghost { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0.8; }
.mo-dash { fill: none; stroke: var(--text-3); stroke-width: 1.3; stroke-dasharray: 4 5; opacity: 0.6; }
.mo-t { font-family: var(--font-mono); font-size: 11px; fill: var(--text-3); }
.mo-t-acc { font-family: var(--font-mono); font-size: 11px; fill: var(--accent-text); }

.mo-helix { fill: none; stroke: var(--text-3); stroke-width: 2; opacity: 0.45;
  stroke-linecap: round; }
.mo-rung { fill: none; stroke: var(--border-2); stroke-width: 1.6; stroke-linecap: round; }
.mo-node { fill: var(--accent); }
@media (max-width: 900px) {
  .sec-split { grid-template-columns: 1fr; gap: 26px; }
  .sec-motif { max-width: 420px; }
}




@media (min-width: 941px) {
  
  .askpair { grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
  
  .askpair-flip > .chatfig { order: 2; }
  .askpair-flip > .askout { order: 1; }
}

.askpair > .chatfig,
.askpair > .askout { min-width: 0; }


.askpair > .askout .askout-fig { margin: auto 0; }


.chatfig { padding: 22px; }

.chatfig .chat-thread { gap: 10px; }

.chatfig .cmsg-user {
  font-size: 14px; line-height: 1.5; padding: 11px 15px;
  max-width: 76%; width: fit-content; margin-left: auto;
  border-radius: 15px 15px 5px 15px;
}
.chatfig .cmsg-bot {
  padding: 15px 16px; max-width: 92%; width: fit-content; margin-right: auto;
  border-radius: 15px 15px 15px 5px;
}
.chatfig .cmsg-bot .ct { font-size: 14px; line-height: 1.62; }

.chatfig .cmsg-bot .ct br + br { line-height: 0.7; }


.chatfig .cmsg-user + .cmsg-bot { margin-top: 2px; }
.chatfig .cmsg-bot + .cmsg-user { margin-top: 16px; }

.chatfig .cmsg-bot .ct br + br { content: ""; display: block; height: 8px; }


.askout { padding: 22px; }
.askout-note { font-size: 13px; }


.hero-scene { padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.hero-scene svg { margin: auto 0; }


.integ > .askpair { grid-column: 1 / -1; }


.integ .memcard { max-width: 100%; overflow: hidden; }
.integ .memcard .learn-said,
.integ .memcard .learn-got { overflow-wrap: anywhere; }


.band:not(.moat) .memcard { background: var(--bg-elevated); border: 1px solid var(--border); }
.band:not(.moat) .memcard .memcard-h,
.band:not(.moat) .memcard .learn-said { color: var(--text); }
.band:not(.moat) .memcard .memcard-sub,
.band:not(.moat) .memcard .memcard-foot { color: var(--text-3); }
.band:not(.moat) .memcard .learn { background: var(--bg-sub, var(--bg-hover)); border-color: var(--border); }
.band:not(.moat) .memcard .learn-said b { color: var(--text); }
.band:not(.moat) .memcard .learn-who { color: var(--text-3); }
.band:not(.moat) .memcard .memcard-ic { background: var(--accent-soft); color: var(--accent-text); }




.mobile-menu {
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


.hero-scene { margin-left: 0; margin-right: 0; }

@media (max-width: 940px) {
  
  .hero-scene { padding: 14px; }
  
  
  .hero-scene { padding: 10px; overflow: hidden; }
  .hero-scene svg { width: 100%; margin-left: 0; }
  .askout { padding: 14px; overflow: hidden; }
  .askout svg { width: 100%; margin-left: 0; }
  
  .src-note { white-space: normal; }
  
  .lead-form input, .lead-form textarea, .lead-form select { font-size: 16px; }
  
  .uikpis { grid-template-columns: repeat(2, 1fr); }
  .uikpis .uikpi:last-child { grid-column: 1 / -1; }
}


@media (pointer: coarse) {
  .lead-form input, .lead-form select { min-height: 44px; }
  .footer .soc a { width: 44px; height: 44px; }
}


.hero-scene svg, .askout svg, .sec-motif svg { overflow: hidden; }

.memcard { max-width: 100%; overflow: hidden; }




.sec-motif { min-width: 0; overflow: hidden; }


.band { overflow-x: clip; }


.builds-pin { overflow: visible; }
.builds-pin .sec-ghost { display: none; }


.conns { margin-top: 30px; }
.conns-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.conn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px 11px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--bg-elevated);
}
.conn-soon { border-style: dashed; background: transparent; }
.conn-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none; }
.conn-ic svg { width: 22px; height: 22px; display: block; }
.conn-t { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.conn-soon .conn-t { color: var(--text-2); font-weight: 500; }
.conn-tag {
  margin-left: 2px; padding: 2px 8px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
}
.conn-live { background: var(--ok-soft); color: var(--ok); }
.conn-next { background: var(--bg-hover); color: var(--text-3); }
.conns-h {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3);
}
.conns-note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-3); text-wrap: pretty; }
@media (max-width: 620px) { .conn-t { white-space: normal; } }
.conn-later { background: var(--bg-hover); color: var(--text-3); }


.agency-strip {
  max-width: 780px; margin: 0 auto; padding: 26px 28px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-elevated);
}
.agency-strip-k {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.agency-strip p {
  margin: 11px 0 0; font-size: 15px; line-height: 1.62;
  color: var(--text-2); text-wrap: pretty;
}
.agency-strip-a {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 15px;
  font-size: 14px; font-weight: 650; color: var(--accent-text, var(--accent));
}
.agency-strip-a svg { width: 15px; height: 15px; stroke-width: 2; transition: transform 200ms var(--ease); }
.agency-strip-a:hover svg { transform: translateX(3px); }
@media (max-width: 620px) { .agency-strip { padding: 20px 18px; } .agency-strip p { font-size: 14.5px; } }



.tg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.tg-split > * { min-width: 0; }
.tg-split .chatfig { margin: 0; display: flex; flex-direction: column; }
.tg-split .chatfig .chat-thread { flex: 1; }
.tg-split-card { margin: 0; display: flex; flex-direction: column; }
.tg-gap-fig {
  width: 100%; height: auto; display: block; margin: 14px 0 0;
  flex: 1; min-height: 0; overflow: visible;
}
.tgp-tick { fill: none; stroke: var(--border-2); stroke-width: 1.5; }
.tgp-brace {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-dasharray: 3 4; opacity: 0.75;
}
.tgp-mult {
  fill: var(--accent); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.tgp-ask rect {
  fill: none; stroke: var(--text-3); stroke-width: 1.4;
  stroke-dasharray: 5 4;
}
.tg-gap-note {
  margin: 14px 0 0; font-size: 13px; line-height: 1.55;
  color: var(--text-2); border-top: 1px solid var(--border); padding-top: 12px;
}
.tg-gap-note b { color: var(--text); font-weight: 650; }
@media (max-width: 980px) {
  .tg-split { grid-template-columns: 1fr; gap: 22px; }
}


.hwb-locks + .stack-kicker,
.hwb-iso + .stack-kicker { text-align: left; margin-left: 0; max-width: 68ch; }


.mirror {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  align-items: stretch; margin-top: 34px;
}
.mirror-side {
  min-width: 0; display: flex; flex-direction: column;
  padding: 20px; border-radius: var(--r-lg, 16px);
  border: 1px solid var(--border); background: var(--bg-elevated);
}
.mirror-after { border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); }
.mirror-h { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.mirror-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.mirror-tag-us { color: var(--accent-text); }
.mirror-sub { font-size: 13px; color: var(--text-2); }
.mirror-fig { width: 100%; height: auto; display: block; margin: 12px 0 0; flex: 1; min-height: 0; }
.mirror-note {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.55; color: var(--text-2);
}
.mirror-note b { color: var(--text); font-weight: 650; }


.mr-tool rect { fill: var(--bg-2, var(--bg-hover)); stroke: var(--border-2); stroke-width: 1.1; }
.mr-tool-in rect { fill: var(--bg-2, var(--bg-hover)); stroke: var(--border-2); stroke-width: 1.1; }
.mr-t { font-family: var(--font-sans); font-size: 13px; font-weight: 650; fill: var(--text); }
.mr-d { font-family: var(--font-mono); font-size: 11px; fill: var(--text-3); }
.mr-s { font-family: var(--font-mono); font-size: 10.5px; fill: var(--text-3); }
.mr-break { fill: none; stroke: var(--text-3); stroke-width: 1.6; stroke-linecap: round; opacity: 0.6; }
.mr-break path:nth-child(-n+4) { stroke-dasharray: 4 5; }
.mr-join { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; opacity: 0.75; }
.mr-read { fill: var(--bg-2, var(--bg-hover)); stroke: var(--border-2); stroke-width: 1.1; }
.mr-out { stroke-width: 1.4; }
.mr-out-bad { fill: var(--bg-2, var(--bg-hover)); stroke: var(--border-2); stroke-dasharray: 6 5; }
.mr-out-good { fill: var(--accent-soft); stroke: var(--accent); }
.mr-gate { fill: none; stroke: var(--border-2); stroke-width: 1.2; stroke-dasharray: 5 5; }
.mr-out-t { font-family: var(--font-sans); font-size: 15px; font-weight: 700; fill: var(--text); }
.mr-out-t-acc { fill: var(--accent-text); }
.mr-out-d { font-family: var(--font-mono); font-size: 11px; fill: var(--text-3); }

@media (max-width: 900px) {
  .mirror { grid-template-columns: 1fr; gap: 18px; }
}


.arc-head { max-width: 62ch; }
.arc-head h2 {
  font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; letter-spacing: -0.032em;
  line-height: 1.06; margin: 18px 0 0; text-wrap: balance;
}
.arc-head h2 em {
  font-family: var(--font-editorial); font-style: italic; font-weight: 500; color: var(--accent);
}
.arc {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.arc-i {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-radius: var(--r-md, 12px);
  border: 1px solid rgba(244,242,238,0.13);
  background: rgba(244,242,238,0.035);
}

.arc-turn { border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.arc-end  { border-color: color-mix(in srgb, var(--accent) 42%, transparent);
              background: color-mix(in srgb, var(--accent) 9%, transparent); }
.arc-k {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-text);
}
.arc-i p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(244,242,238,0.86); }
.arc-fig { width: 100%; height: auto; display: block; margin-top: auto; padding-top: 10px; }


.sp-box rect { fill: rgba(244,242,238,0.07); stroke: rgba(244,242,238,0.22); stroke-width: 1; }
.sp-dark rect { fill: rgba(20,18,16,0.75); stroke: rgba(244,242,238,0.16); stroke-width: 1; }
.sp-hi rect { fill: color-mix(in srgb, var(--accent) 26%, transparent); stroke: var(--accent); stroke-width: 1.1; }
.sp-bar rect { fill: rgba(244,242,238,0.34); }
.sp-line path { fill: none; stroke: rgba(244,242,238,0.3); stroke-width: 2; stroke-linecap: round; }
.sp-line-lit path { stroke: var(--accent); }
.sp-mark path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-axis { fill: none; stroke: rgba(244,242,238,0.22); stroke-width: 1; }
.sp-rise { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.sp-fall { fill: none; stroke: rgba(244,242,238,0.34); stroke-width: 2.2; stroke-linecap: round; }
.sp-cap { fill: none; stroke: rgba(244,242,238,0.34); stroke-width: 1.2; stroke-dasharray: 4 4; }
.sp-span { fill: none; stroke: rgba(244,242,238,0.3); stroke-width: 1.6; stroke-dasharray: 4 4; }
.sp-dot circle { fill: var(--accent); }
.sp-dot-late circle { fill: rgba(244,242,238,0.42); }
.sp-t { font-family: var(--font-mono); font-size: 9px; fill: rgba(244,242,238,0.5); }
.sp-t-r { text-anchor: end; }

@media (max-width: 1080px) { .arc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .arc { grid-template-columns: 1fr; } }


.dep { margin-top: 30px; }
.dep-fig { width: 100%; height: auto; display: block; overflow: visible; }
.dep-b rect { fill: var(--bg-elevated); stroke: var(--border-2); stroke-width: 1.3; }
.dep-b-acc rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.dep-t { font-family: var(--font-sans); font-size: 16px; font-weight: 700; fill: var(--text); }
.dep-t-acc { fill: var(--accent-text); }
.dep-d { font-family: var(--font-mono); font-size: 11px; fill: var(--text-3); }
.dep-arrow path { fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.dep-lbl { font-family: var(--font-mono); font-size: 11px; fill: var(--text-3); }
.dep-fail path { fill: none; stroke: var(--text-3); stroke-width: 1.2;
  stroke-dasharray: 3 4; opacity: 0.75; }
.dep-f { font-family: var(--font-mono); font-size: 10.5px; fill: var(--text-3); text-anchor: middle; }
.dep-f-b { text-anchor: middle; }


.gates { margin-top: 30px; }
.gates-fig { width: 100%; height: auto; display: block; overflow: visible; }
.gt-node circle { fill: var(--text-3); }
.gt-node-acc circle { fill: var(--accent); }
.gt-rail { fill: none; stroke: var(--border-2); stroke-width: 2; stroke-linecap: round; }
.gt-rail-acc { stroke: var(--accent); }
.gt-arrow { stroke: var(--border-2); stroke-linejoin: round; }
.gt-gate rect { fill: var(--bg-elevated); stroke: var(--border-2); stroke-width: 1.3; }
.gt-gate-acc rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.gt-n { font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; fill: var(--text-3); }
.gt-n-acc { fill: var(--accent-text); }
.gt-t { font-family: var(--font-sans); font-size: 14px; font-weight: 700; fill: var(--text); }
.gt-t-acc { fill: var(--accent-text); }
.gt-d { font-family: var(--font-mono); font-size: 10.5px; fill: var(--text-3); }
.gt-lbl { font-family: var(--font-mono); font-size: 10.5px; fill: var(--text-3); text-anchor: middle; }
.gt-lbl-d { fill: var(--text-3); opacity: 0.75; }
.gt-lbl-acc { fill: var(--accent-text); }
.gt-drop path { fill: none; stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0.7; }
.gt-x { font-family: var(--font-mono); font-size: 10px; fill: var(--text-3); text-anchor: middle; }


.nfy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.nfy-i {
  padding: 20px; border-radius: var(--r-md, 12px);
  border: 1px solid rgba(244,242,238,0.14); background: rgba(244,242,238,0.04);
}
.nfy-k {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-text);
}
.nfy-t {
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
  color: #f4f2ee; margin-top: 10px; line-height: 1.25;
}
.nfy-t em { font-family: var(--font-editorial); font-style: italic; font-weight: 500; color: var(--accent); }
.nfy-i p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(244,242,238,0.72); }
@media (max-width: 900px) { .nfy { grid-template-columns: 1fr; } }


@media (max-width: 560px) {
  .arc-fig { max-width: 220px; margin-left: 0; }
  .arc-i { padding: 14px; }
}


.hero { overflow-x: clip; }


@media (prefers-reduced-motion: no-preference) {
  html.js [data-anim] .sc-bars rect,
  html.js [data-anim] .sc-ghost rect,
  html.js [data-anim] .mo-fill rect,
  html.js [data-anim] .sc-acc > rect,
  html.js [data-anim] .mp-bars rect {
    transform-box: fill-box; transform-origin: 50% 100%;
    transform: scaleY(0.04); opacity: 0;
    transition: transform 620ms cubic-bezier(.16,1,.3,1), opacity 260ms var(--ease);
  }
  html.js [data-anim].in .sc-bars rect,
  html.js [data-anim].in .sc-ghost rect,
  html.js [data-anim].in .mo-fill rect,
  html.js [data-anim].in .sc-acc > rect,
  html.js [data-anim].in .mp-bars rect { transform: scaleY(1); opacity: 1; }

  
  html.js [data-anim] .sc-bars rect:nth-child(2),
  html.js [data-anim] .mo-fill rect:nth-child(2) { transition-delay: 60ms; }
  html.js [data-anim] .sc-bars rect:nth-child(3),
  html.js [data-anim] .mo-fill rect:nth-child(3) { transition-delay: 120ms; }
  html.js [data-anim] .sc-bars rect:nth-child(4),
  html.js [data-anim] .mo-fill rect:nth-child(4) { transition-delay: 180ms; }
  html.js [data-anim] .sc-bars rect:nth-child(n+5) { transition-delay: 240ms; }
  
  html.js [data-anim] .sc-ghost rect { transition-delay: 300ms; }

  
  html.js [data-anim] .sc-line-acc,
  html.js [data-anim] .sc-line-dim,
  html.js [data-anim] .sc-axis,
  html.js [data-anim] .mo-line,
  html.js [data-anim] .mr-join,
  html.js [data-anim] .sp-span,
  html.js [data-anim] .mo-helix path {
    stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000);
    transition: stroke-dashoffset 760ms var(--ease);
  }
  html.js [data-anim].in .sc-line-acc,
  html.js [data-anim].in .sc-line-dim,
  html.js [data-anim].in .sc-axis,
  html.js [data-anim].in .mo-line,
  html.js [data-anim].in .mr-join,
  html.js [data-anim].in .sp-span,
  html.js [data-anim].in .mo-helix path { stroke-dashoffset: 0; }
  html.js [data-anim] .sc-line-acc { transition-delay: 120ms; }

  
  html.js [data-anim] .sc-dash,
  html.js [data-anim] .sc-dash-acc,
  html.js [data-anim] .mo-dash,
  html.js [data-anim] .dep-fail path,
  html.js [data-anim] .gt-drop path,
  html.js [data-anim] .mp-dashed,
  html.js [data-anim] .tgp-brace {
    opacity: 0; transform: translateY(-4px);
    transition: opacity 420ms var(--ease) 180ms, transform 420ms var(--ease) 180ms;
  }
  html.js [data-anim].in .sc-dash,
  html.js [data-anim].in .sc-dash-acc,
  html.js [data-anim].in .mo-dash,
  html.js [data-anim].in .dep-fail path,
  html.js [data-anim].in .gt-drop path,
  html.js [data-anim].in .mp-dashed,
  html.js [data-anim].in .tgp-brace { opacity: 1; transform: none; }

  
  html.js [data-anim] .sc-card rect,
  html.js [data-anim] .sc-card-acc,
  html.js [data-anim] .sc-plate,
  html.js [data-anim] .gt-gate rect,
  html.js [data-anim] .dep-b rect,
  html.js [data-anim] .mr-tool rect,
  html.js [data-anim] .mr-read,
  html.js [data-anim] .mr-out,
  html.js [data-anim] .tgp-ask rect,
  html.js [data-anim] .mp-card {
    opacity: 0; transform: translateY(6px);
    transition: opacity 460ms var(--ease), transform 460ms cubic-bezier(.16,1,.3,1);
  }
  html.js [data-anim].in .sc-card rect,
  html.js [data-anim].in .sc-card-acc,
  html.js [data-anim].in .sc-plate,
  html.js [data-anim].in .gt-gate rect,
  html.js [data-anim].in .dep-b rect,
  html.js [data-anim].in .mr-tool rect,
  html.js [data-anim].in .mr-read,
  html.js [data-anim].in .mr-out,
  html.js [data-anim].in .tgp-ask rect,
  html.js [data-anim].in .mp-card { opacity: 1; transform: none; }
  html.js [data-anim] .sc-card rect:nth-child(2),
  html.js [data-anim] .gt-gate rect:nth-child(2),
  html.js [data-anim] .dep-b rect:nth-child(2),
  html.js [data-anim] .mr-tool rect:nth-child(2) { transition-delay: 80ms; }
  html.js [data-anim] .sc-card rect:nth-child(3),
  html.js [data-anim] .mr-tool rect:nth-child(3) { transition-delay: 160ms; }
  html.js [data-anim] .sc-card rect:nth-child(n+4),
  html.js [data-anim] .mr-tool rect:nth-child(n+4) { transition-delay: 240ms; }

  
  html.js [data-anim] text {
    opacity: 0;
    transition: opacity 340ms var(--ease) 200ms;
  }
  html.js [data-anim].in text { opacity: 1; }
  html.js [data-anim] .sc-t-acc,
  html.js [data-anim] .sc-t-big-acc,
  html.js [data-anim] .mo-t-acc,
  html.js [data-anim] .gt-t-acc,
  html.js [data-anim] .dep-t-acc,
  html.js [data-anim] .mr-out-t-acc,
  html.js [data-anim] .tgp-mult { transition-delay: 420ms; }

  
  html.js [data-anim] circle.sc-acc,
  html.js [data-anim] .sc-acc circle,
  html.js [data-anim] .sp-dot circle,
  html.js [data-anim] .gt-node circle,
  html.js [data-anim] .dep-node circle,
  html.js [data-anim] .mp-dot-acc,
  html.js [data-anim] .mo-node circle {
    transform-box: fill-box; transform-origin: 50% 50%;
    opacity: 0; transform: scale(0.3);
    transition: opacity 300ms var(--ease) 520ms, transform 380ms cubic-bezier(.34,1.56,.64,1) 520ms;
  }
  html.js [data-anim].in circle.sc-acc,
  html.js [data-anim].in .sc-acc circle,
  html.js [data-anim].in .sp-dot circle,
  html.js [data-anim].in .gt-node circle,
  html.js [data-anim].in .dep-node circle,
  html.js [data-anim].in .mp-dot-acc,
  html.js [data-anim].in .mo-node circle { opacity: 1; transform: none; }

  
  html.js [data-anim] .sc-strike path,
  html.js [data-anim] .mp-strike {
    stroke-dasharray: 40; stroke-dashoffset: 40;
    transition: stroke-dashoffset 300ms var(--ease) 560ms;
  }
  html.js [data-anim].in .sc-strike path,
  html.js [data-anim].in .mp-strike { stroke-dashoffset: 0; }
}


@media (prefers-reduced-motion: reduce) {
  [data-anim] *, [data-anim] {
    transform: none !important; opacity: 1 !important;
    stroke-dashoffset: 0 !important; transition: none !important;
  }
}


.band-ink {
  background: #141210; color: #f4f2ee;
  position: relative; overflow: hidden;
  
  padding-block: clamp(56px, 7vw, 96px);
}
.band-ink::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(72% 62% at 82% -10%, rgba(255,90,44,0.18), transparent 58%),
    radial-gradient(58% 78% at 4% 110%, rgba(255,120,60,0.07), transparent 56%);
}
.band-ink > .wrap { position: relative; z-index: 1; }


.band-ink .eyebrow { color: rgba(244,242,238,0.62); }
.band-ink .eyebrow .tick { background: var(--accent); }
.band-ink .sec-title, .band-ink h2, .band-ink h3 { color: #f8f6f2; }
.band-ink .sec-title em, .band-ink h2 em { color: var(--accent); }
.band-ink .sec-sub, .band-ink p { color: rgba(244,242,238,0.72); }
.band-ink .stack-kicker { color: rgba(244,242,238,0.66); }
.band-ink b, .band-ink strong { color: #fff; }
.band-ink a:not(.btn) { color: var(--accent); }
.band-ink .src-note { color: rgba(244,242,238,0.42); }


.ink-line {
  margin: 0; max-width: 30ch;
  font-size: clamp(26px, 3.4vw, 42px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.12; color: #f8f6f2;
  text-wrap: balance;
}
.ink-line em { font-style: normal; color: var(--accent); }
.ink-sub {
  margin: 20px 0 0; max-width: 54ch;
  font-size: 15.5px; line-height: 1.62; color: rgba(244,242,238,0.68);
  text-wrap: pretty;
}
.ink-split {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .ink-split { grid-template-columns: 1fr; gap: 26px; } }


.ink-facts { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.ink-fact {
  display: flex; gap: 14px; align-items: baseline;
  padding: 14px 16px; border-radius: var(--r-md);
  background: rgba(244,242,238,0.05);
  border: 1px solid rgba(244,242,238,0.12);
}
.ink-fact b {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--accent); flex: none; min-width: 4.5ch;
}
.ink-fact span { font-size: 13.5px; line-height: 1.5; color: rgba(244,242,238,0.78); }


.band-ink .sc-card rect, .band-ink .dv-side, .band-ink .pcard {
  background: rgba(244,242,238,0.05); border-color: rgba(244,242,238,0.14);
}




@media (prefers-reduced-motion: no-preference) {
  html.js .mega-panel-art .mp-bubble,
  html.js .mega-panel-art .mp-card,
  html.js .mega-panel-art .mp-plate {
    opacity: 0; transform: translateY(-5px);
    transition: opacity 240ms var(--ease), transform 300ms cubic-bezier(.16,1,.3,1);
  }
  html.js .mega-panel-art.on .mp-bubble,
  html.js .mega-panel-art.on .mp-card,
  html.js .mega-panel-art.on .mp-plate { opacity: 1; transform: none; }

  
  html.js .mega-panel-art .mp-tie {
    stroke-dasharray: 90; stroke-dashoffset: 90;
    transition: stroke-dashoffset 340ms var(--ease) 120ms;
  }
  html.js .mega-panel-art.on .mp-tie { stroke-dashoffset: 0; }

  
  html.js .mega-panel-art .mp-rows rect,
  html.js .mega-panel-art .mp-frames rect,
  html.js .mega-panel-art .mp-grid rect {
    opacity: 0; transform: translateX(-6px);
    transition: opacity 260ms var(--ease), transform 320ms cubic-bezier(.16,1,.3,1);
  }
  html.js .mega-panel-art.on .mp-rows rect,
  html.js .mega-panel-art.on .mp-frames rect,
  html.js .mega-panel-art.on .mp-grid rect { opacity: 1; transform: none; }
  html.js .mega-panel-art .mp-rows rect:nth-child(2),
  html.js .mega-panel-art .mp-frames rect:nth-child(2) { transition-delay: 90ms; }
  html.js .mega-panel-art .mp-rows rect:nth-child(3),
  html.js .mega-panel-art .mp-frames rect:nth-child(3) { transition-delay: 150ms; }
  html.js .mega-panel-art .mp-rows rect:nth-child(n+4),
  html.js .mega-panel-art .mp-frames rect:nth-child(n+4) { transition-delay: 200ms; }

  html.js .mega-panel-art .mp-bars rect {
    transform-box: fill-box; transform-origin: 50% 100%;
    transform: scaleY(0.08); opacity: 0;
    transition: transform 360ms cubic-bezier(.16,1,.3,1) 120ms, opacity 200ms var(--ease) 120ms;
  }
  html.js .mega-panel-art.on .mp-bars rect { transform: scaleY(1); opacity: 1; }

  
  html.js .mega-panel-art .mp-tick path {
    stroke-dasharray: 22; stroke-dashoffset: 22;
    transition: stroke-dashoffset 260ms var(--ease) 300ms;
  }
  html.js .mega-panel-art.on .mp-tick path { stroke-dashoffset: 0; }

  html.js .mega-panel-art .mp-acc rect,
  html.js .mega-panel-art .mp-acc circle,
  html.js .mega-panel-art .mp-dot-acc {
    transform-box: fill-box; transform-origin: 50% 50%;
    opacity: 0; transform: scale(0.5);
    transition: opacity 220ms var(--ease) 280ms, transform 300ms cubic-bezier(.34,1.56,.64,1) 280ms;
  }
  html.js .mega-panel-art.on .mp-acc rect,
  html.js .mega-panel-art.on .mp-acc circle,
  html.js .mega-panel-art.on .mp-dot-acc { opacity: 1; transform: none; }

  html.js .mega-panel-art .mp-lbl,
  html.js .mega-panel-art .mp-t,
  html.js .mega-panel-art .mp-d {
    opacity: 0; transition: opacity 240ms var(--ease) 220ms;
  }
  html.js .mega-panel-art.on .mp-lbl,
  html.js .mega-panel-art.on .mp-t,
  html.js .mega-panel-art.on .mp-d { opacity: 1; }

  
  html.js .nav-mega a .mega-ic svg { transition: transform 240ms cubic-bezier(.16,1,.3,1); }
  html.js .nav-mega a:hover .mega-ic svg { transform: translateX(1.5px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .mega-panel-art * { opacity: 1 !important; transform: none !important;
                      stroke-dashoffset: 0 !important; transition: none !important; }
}




.band-ink::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px;
  background: linear-gradient(to bottom, rgba(20,18,16,0), rgba(20,18,16,0) 44%, transparent);
  pointer-events: none;
}
.band + .band-ink { position: relative; }
.band + .band-ink::before {
  
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.055), transparent 120px),
    radial-gradient(72% 62% at 82% -10%, rgba(255,90,44,0.18), transparent 58%),
    radial-gradient(58% 78% at 4% 110%, rgba(255,120,60,0.07), transparent 56%);
}

@media (prefers-reduced-motion: no-preference) {
  
  html.js .band .sec-head[data-reveal] { transition-delay: 0ms; }
  html.js .band .sec-head[data-reveal] + * { transition-delay: 110ms; }

  
  html.js [data-reveal] .eyebrow .tick {
    transform-origin: left center; transform: scaleX(0);
    transition: transform 420ms cubic-bezier(.16,1,.3,1) 80ms;
  }
  html.js [data-reveal].in .eyebrow .tick { transform: scaleX(1); }

  
  html.js .band-ink .ink-line { transition-delay: 0ms; }
  html.js .band-ink .ink-sub { transition-delay: 120ms; }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow .tick { transform: none !important; }
}


.mini-rb { display: flex; flex-direction: column; gap: 8px; }
.mrb-note {
  margin-bottom: 4px; padding: 10px 12px;
  border-left: 2px solid var(--accent); border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  font-size: 12.5px; line-height: 1.5; color: var(--text-2); text-wrap: pretty;
}
.mrb-step {
  display: grid; grid-template-columns: 88px 1fr; align-items: baseline; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 12px;
}
.mrb-k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-4);
}
.mrb-v { font-size: 13px; color: var(--text-2); text-wrap: pretty; }
.mrb-v b { color: var(--text); font-variant-numeric: tabular-nums; }
.mrb-back { border-color: color-mix(in oklab, var(--accent) 42%, var(--border)); }
.mrb-back .mrb-k { color: var(--accent-text); }
.mrb-foot {
  margin-top: 2px; font-size: 12px; color: var(--text-3); text-wrap: pretty;
}
.mrb-foot b { color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .mrb-step { grid-template-columns: 1fr; gap: 3px; }
}




a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 3px;
  border-radius: 3px;
}


.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-2); }
.btn-ghost:hover { background: var(--bg-sub); border-color: var(--text-4); }


@media (max-width: 920px) {
  .layer p, .step p, .gt-point p { max-width: none; }
}

@media (max-width: 980px) {
  
  .faq-aside { display: none; }
}

@media (max-width: 640px) {
  
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-bottom { margin-top: 32px; }
}


.band.builds-pin, .band + .band.builds-pin { padding-top: 0; padding-bottom: 0; }