/* agentevo.sh page styles; tokens.css loads first. */

/* ---- base */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg-0); scroll-padding-top: 96px; scroll-padding-bottom: 24px; overflow-x: clip }
/* Smooth jumps after load. */
html.is-loaded { scroll-behavior: smooth }
body { margin: 0; min-height: 100vh; background: var(--bg-0); color: var(--fg-0); font-family: var(--font-sans); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip }
[hidden] { display: none !important }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance }
p { margin: 0; text-wrap: pretty }
ul, ol { margin: 0; padding: 0; list-style: none }
dl, dd, figure, blockquote { margin: 0 }
code { font-family: var(--font-mono); font-size: 0.875em; color: var(--fg-0) }
p code, li code { padding: 1px 5px; border-radius: var(--r-xs); background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; white-space: nowrap }
::selection { background: rgba(91, 208, 138, 0.28); color: var(--fg-0) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 }
.skip { position: fixed; top: 12px; left: 12px; z-index: var(--z-skip); display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); background: var(--fg-0); color: var(--bg-0); font: 500 14px/1 var(--font-sans); transform: translateY(-160%); transition: transform var(--d-fast) var(--ease-out) }
.skip:focus { transform: none }
.wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto }
.i { display: inline-block; flex: none; vertical-align: middle }
.dim { color: var(--fg-1) }
section { position: relative }

/* ---- buttons */
.start-local { padding: 56px 0; border-block: 1px solid var(--line); background: var(--bg-1) }
.start-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start }
.start-copy h2 { margin-top: 16px; font-size: clamp(28px, 3vw, 40px); line-height: 1.15 }
.start-copy > p:not(.section-index) { margin-top: 18px; color: var(--fg-1); max-width: 38rem }
.start-local a:not(.copy-btn) { text-underline-offset: 4px }
.start-prereq { font-size: 14px }
.start-prereq a, .start-result a { text-decoration: underline; color: var(--fg-0) }
.start-next { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--line-strong) }
.start-next a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--line-strong); font-size: 14px }
.start-next a > span:first-child { font: 400 12px/1.4 var(--font-mono); color: var(--accent) }
.start-next a > span:last-child { margin-left: auto; color: var(--fg-1) }
.start-next a:hover { color: var(--accent) }
.start-terminal { min-width: 0 }
.start-terminal .term-body { padding-block: 20px; line-height: 2 }
.start-result { margin-top: 18px; color: var(--fg-1); font-size: 14px; line-height: 1.65 }
.start-result strong { color: var(--fg-0); font-weight: 500 }
.start-manual { min-width: 0; align-self: start }
.start-manual > summary { min-height: 60px; padding: 16px; color: var(--fg-0); cursor: pointer; font-size: 15px }
.start-manual > summary span { display: block; margin: 8px 0 0 20px; color: var(--fg-1); font-size: 13px }
.start-manual > .term { margin-top: 0 }
@media (max-width: 767px) {
  .start-local { padding-block: 36px }
  .start-layout { grid-template-columns: minmax(0, 1fr); gap: 24px }
  .start-next { grid-template-columns: minmax(0, 1fr); gap: 0 }
}

.btn { --h: 44px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h); padding: 0 22px; border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; font: 500 15px/1 var(--font-sans); letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--d-instant) ease, border-color var(--d-instant) ease, color var(--d-instant) ease, transform var(--d-spring) var(--spring) }
.btn:active { transform: scale(0.97); transition-duration: 100ms }
.btn-solid { background: var(--fg-0); color: var(--bg-0) }
.btn-solid:hover { background: #fff }
.btn-solid:focus-visible { outline-color: var(--fg-0); outline-offset: 3px }
.btn-ghost { border-color: var(--line-strong); color: var(--fg-0) }
.btn-ghost:hover { border-color: var(--line-hover); background: rgba(255, 255, 255, 0.04) }
.btn-text { padding-inline: 12px; color: var(--fg-1) }
.btn-text:hover { color: var(--fg-0) }
.btn-sm { --h: 36px; padding: 0 14px; font-size: 13px }
.btn-go::after { content: "\203A" / ""; margin-left: -2px; font: 400 17px/1 var(--font-sans); transform: translateY(-1px); transition: translate var(--d-spring) var(--spring) }
/* E7: the arrow leans into hover and keyboard focus. */
.btn-go:hover::after, .btn-go:focus-visible::after { translate: 2px 0 }

/* ---- tags */
.tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-1); white-space: nowrap; font-variant-numeric: tabular-nums }
.tag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor }
/* Trust states: shape plus color. */
.t-state-observed { color: var(--fg-1) }
.t-state-candidate { color: var(--info); background: var(--info-soft); border-color: var(--info-line) }
.t-state-candidate::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%) }
.t-state-verified, .d-allow { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line) }
.t-state-verified::before, .d-allow::before { background: currentColor }
.t-state-trusted { color: var(--accent); background: rgba(91, 208, 138, 0.16); border-color: rgba(91, 208, 138, 0.45) }
.t-state-trusted::before { background: currentColor; box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 3px currentColor; transform: scale(0.72) }
.t-state-compiled { color: var(--on-accent); background: var(--accent); border-color: var(--accent) }
.t-state-compiled::before { border-radius: 1px; background: currentColor; transform: rotate(45deg) scale(0.8) }
.t-state-quarantined, .d-ask { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line) }
.t-state-quarantined::before, .d-ask::before { border: 0; border-radius: 0; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.t-state-stale { color: var(--warn); border: 1px dashed var(--warn) }
.t-state-stale::before { border-style: dashed }
.t-state-rejected { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line) }
.t-state-revoked { color: var(--danger); border-color: var(--danger-line); text-decoration: line-through; text-decoration-thickness: 1px }
.t-state-rejected::before, .t-state-revoked::before, .t-cls-c4::before { border: 0; border-radius: 0; background: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, currentColor 42% 58%, transparent 58%) }
.t-cls-c0, .t-cls-c1 { color: var(--fg-1) }
.t-cls-c0::before, .t-cls-c1::before { background: currentColor }
.t-cls-c2 { color: var(--info); background: var(--info-soft); border-color: var(--info-line) }
.t-cls-c2::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%) }
.t-cls-c3 { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line) }
.t-cls-c3::before { border: 0; border-radius: 0; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.t-cls-c4 { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line) }
.t-live { color: var(--accent); border-color: var(--accent-line) }
.t-live::before { background: currentColor }
.t-soon { color: var(--fg-1); border-color: var(--line-strong) }
.t-soon::before { border-style: dashed }

/* ---- texture */
.halftone { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg-1) }
.halftone::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, var(--tex-dot) 0.9px, transparent 1.3px) 0 0 / 6px 6px; -webkit-mask: radial-gradient(110% 80% at 18% 0%, #000, rgba(0, 0, 0, 0.4) 45%, transparent 72%); mask: radial-gradient(110% 80% at 18% 0%, #000, rgba(0, 0, 0, 0.4) 45%, transparent 72%); opacity: 0.6 }

/* ---- reveal (opacity + transform only: never layout) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-spring) var(--spring); transition-delay: calc(var(--i, 0) * var(--stagger)) }
.js .reveal.is-in, .js .is-in [data-stagger] > * { opacity: 1; transform: none }
/* Lists in a reveal arrive in turn (app.js sets --k). */
.js [data-stagger] > * { opacity: 0; transform: translateY(12px); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-spring) var(--spring); transition-delay: calc(140ms + var(--k, 0) * var(--stagger)) }

/* ---- small labels: mono or Geist */
:where(.eyebrow, .tread, .st-l, .agent .state) { font: 500 11px/1.3 var(--font-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2) }
:where(.strip-label, .trust-detail dt, .exits-cap, .lanes thead th, .modes-label, .meter-cap, .count-rules dt, .signed-in-title, .loop-stats dt, .foot-h, .numbers dt, .run-art-k) { font: 500 13px/1.35 var(--font-sans); letter-spacing: -0.005em; color: var(--fg-2) }

/* ---- section headings */
h2 { font-size: clamp(32px, 2.2vw + 14px, 48px); line-height: 1.04; letter-spacing: var(--tr-h2) }
/* Text measures are Geist's ch written in em (N x 0.663em): a ch measure is 14% narrower while the
 * fallback font shows, so the text would reflow when Geist swaps in. */
.sec-sub { margin-top: 22px; max-width: 30.498em; font-size: var(--t-body-l); line-height: 1.55; letter-spacing: var(--tr-body); color: var(--fg-1) }
.sec-head-center { display: flex; flex-direction: column; align-items: center; text-align: center }
.sec-head-center .sec-sub { max-width: 34.476em }
@media (max-width: 1023px) {
  .sec-head-center { align-items: flex-start; text-align: left }
}

/* ---- nav */
.site-head { position: relative; z-index: var(--z-nav) }
.nav { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: var(--z-nav); display: flex; justify-content: center; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); pointer-events: none }
/* Content fades under the pill: no hard line. */
.nav::before { content: ""; position: fixed; inset: 0 0 auto; z-index: -1; height: calc(84px + env(safe-area-inset-top, 0px)); background: linear-gradient(var(--bg-0) 30%, rgba(9, 9, 11, 0)); pointer-events: none }
.nav-pill { position: relative; display: flex; align-items: center; gap: 8px; width: min(1120px, 100%); height: 56px; padding: 0 8px 0 20px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--material); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.7); pointer-events: auto }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; padding-right: 8px; color: var(--fg-0); border-radius: var(--r-pill) }
.brand .mark { width: 20px; height: 20px; color: var(--fg-0); overflow: visible }
.wordmark { font: 500 17px/1 var(--font-sans); letter-spacing: -0.03em; transform: translateY(-0.5px) }
@keyframes fade-in { from { opacity: 0 } }
.nav-links { display: flex; align-items: center; gap: 2px; margin-inline: auto }
.nav-links a { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r-pill); font: 500 14px/1 var(--font-sans); letter-spacing: -0.005em; color: var(--fg-1); white-space: nowrap; transition: color var(--d-instant) ease, background-color var(--d-instant) ease }
.nav-links a:hover { color: var(--fg-0) }
.nav-links a::before { content: ""; width: 4px; height: 4px; margin-left: -8px; background: var(--accent); opacity: 0; transform: scale(0); transition: opacity var(--d-fast) ease, transform var(--d-spring) var(--spring), margin var(--d-spring) var(--spring) }
.nav-links a.active { color: var(--fg-0) }
.nav-links a.active::before { margin-left: 0; opacity: 1; transform: none }
.nav-cta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: none; min-width: 148px }
.clerk-slot { display: flex; align-items: center; gap: 6px }
.clerk-slot:empty { display: none }
.clerk-user { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; line-height: 0 }
.menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--fg-0); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--d-instant) ease, transform var(--d-spring) var(--spring) }
.menu-btn:hover { border-color: var(--line-hover) }
.menu-btn:active { transform: scale(0.94); transition-duration: 100ms }
.menu-btn .i-close, .menu-btn[aria-expanded="true"] .i-open { display: none }
.menu-btn[aria-expanded="true"] .i-close { display: block }
@media (max-width: 1023px) {
  .nav-pill { padding-left: 16px }
  /* The menu button needs app.js; without scripting a plain link (.menu-nojs) opens the sheet
     through :target instead, so the one menu control that shows always works. */
  .js #menuBtn, html:not(.js) .menu-nojs { display: inline-flex }
  .nav-cta { min-width: 0; margin-left: auto }
  /* Sheet: solid, grows from the menu button. */
  .nav-links { position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg-1); box-shadow: var(--e-3); transform-origin: calc(100% - 30px) -8px; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97); transition: opacity 160ms var(--ease-exit), transform 160ms var(--ease-exit), visibility 0s linear 160ms }
  .nav-links.open, html:not(.js) .nav-links:target { opacity: 1; visibility: visible; transform: none; transition: opacity var(--d-base) var(--ease-out), transform var(--d-spring) var(--spring), visibility 0s }
  .nav-links a { height: 48px; padding: 0 16px; border-radius: var(--r-sm); font-size: 15px }
  .nav-links a + a { border-top: 1px solid var(--line) }
  .nav-links a:hover { background: var(--bg-2) }
}
@media (max-width: 420px) {
  .nav-pill { gap: 4px; padding-left: 14px; padding-right: 6px }
  .nav-cta, .clerk-slot { gap: 4px }
  .nav-cta .btn-sm { padding: 0 12px }
  .clerk-slot .btn-text { padding: 0 8px }
}
/* 360-389: the first-paint nav fits the 16px-gutter pill. */
@media (max-width: 389px) {
  .brand { padding-right: 0 }
  .nav-cta, .clerk-slot { gap: 3px }
  .clerk-slot .btn-text { padding: 0 6px }
  .nav-cta .btn-go::after { display: none }
}
@media (max-width: 359px) {
  .wordmark { display: none }
}

/* ---- hero */
/* Arial (or a metric clone; Roboto on Android) scaled to Geist's advance: the font swap never moves
 * the hero. */
@font-face {
  font-family: "Geist Hero Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"), local("Arimo-Regular");
  size-adjust: 103.6%;
  ascent-override: 97.7%;
  descent-override: 28.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Hero Fallback Roboto";
  src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular");
  size-adjust: 103.8%;
  ascent-override: 96.8%;
  descent-override: 28.4%;
  line-gap-override: 0%;
}
.hero { padding: 136px 0 88px; overflow-x: clip }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center }
.hero-copy { grid-column: 1 / 7; align-self: start; padding: 36px 16px 0 0; font-family: "Geist", "Geist Hero Fallback", "Geist Hero Fallback Roboto", var(--font-sans) }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-1) }
.sq { display: inline-block; width: 6px; height: 6px; flex: none; background: var(--accent) }
/* h1 = 12.5% of its column's width, written in viewport units: a container unit here was sometimes
 * resolved before the column's first layout on a cold load, and the headline jumped (CLS 0.04).
 * Desktop column: half the 1240px wrap less 28px; phones: the page width less two 16px gutters. */
.hero h1 { margin-top: 28px; font-size: clamp(44px, 4.6vw + 16px, 84px); line-height: 0.98; letter-spacing: var(--tr-display) }
@media (min-width: 1024px) { .hero h1 { font-size: min(74px, 6.25vw - 8.5px) } }
@media (max-width: 399px) { .hero h1 { font-size: min(44px, 12.5vw - 4px) } }
.hero h1 .dim { display: block }
.lede { margin-top: 28px; max-width: 34rem; font-size: var(--t-body-l); line-height: 1.6; letter-spacing: var(--tr-body); color: var(--fg-1) }
.lede strong { font-weight: 500; color: var(--fg-0) }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px }
.proof { margin-top: 24px; font-size: 13px; line-height: 1.6; color: var(--fg-2); font-variant-numeric: tabular-nums }

/* The quickstart sits 32px below the A's feet (56/64 of the mark's box). */
.hero-visual { --hm: min(420px, 100%); grid-column: 7 / 13; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0 }
.hero-visual::before { content: ""; position: absolute; z-index: -1; top: -40px; right: -60px; width: calc(var(--hm) + 160px); aspect-ratio: 1; background: radial-gradient(circle, var(--tex-dot) 0.9px, transparent 1.3px) 0 0 / 6px 6px; -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.25) 60%, transparent); mask: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.25) 60%, transparent); opacity: 0.55; pointer-events: none }
/* ---- 3D extrusion (hero, trust): a .x3 body holds .xw walls and .xf faces. --u is one unit of the
 * 64 grid (the figure is the container), --dz the depth. A wall stands on its edge (rotateX) and faces
 * out; its front edge catches the light in the mark's blue-to-green. */
.x3 { --u: calc(100cqw / 64); position: absolute; inset: 0; transform-style: preserve-3d }
.xw { position: absolute; left: 0; top: 0; width: calc(var(--l) * var(--u) + 1px); height: var(--dz); transform-origin: 0 0; transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))) rotate(var(--a)) rotateX(90deg); backface-visibility: hidden; background: linear-gradient(rgba(255, 255, 255, calc(var(--lit) * 0.03)), rgba(255, 255, 255, calc(var(--lit) * 0.2))), #0e0e10; box-shadow: inset 0 1px 0 var(--line-strong); box-shadow: inset 0 1px 0 color-mix(in oklab, color-mix(in oklab, var(--glow-from), var(--glow-to) calc(var(--g) * 100%)) 45%, transparent) }
.xf { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(var(--dz)) }
/* The packet (hero and trust ladder): a cube whose foot stands at --px/--py on the 64 grid. x/z and y
 * ride separate transitions, so a hop arcs over the riser (rise first going up, drop last going down)
 * and the slope is one accelerating slide. */
.st-pk, .st-ghost { --px: -0.5; --py: 56; position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: translate3d(calc(var(--px) * var(--u)), 0, calc(var(--dz) * 0.62)); transition: transform 420ms var(--ease-in-out) }
.st-pky { position: absolute; transform-style: preserve-3d; transform: translateY(calc(var(--py) * var(--u))); transition: transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1) }
.st-pk.down .st-pky, .st-ghost.down .st-pky { transition-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3) }
.st-pk.slide, .st-pk.slide .st-pky { transition-duration: 560ms; transition-timing-function: cubic-bezier(0.55, 0, 0.9, 0.55) }
.cube { --c: calc(4.5 * var(--u)); position: absolute; left: calc(var(--c) / -2); top: calc(-1 * var(--c)); width: var(--c); height: var(--c); transform-style: preserve-3d }
.cube > i { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 2px; background: #3a9c64; backface-visibility: hidden; transform: translateZ(calc(var(--c) / 2)) }
.cube > :nth-child(2) { background: #2a7549; transform: rotateY(-90deg) translateZ(calc(var(--c) / 2)) }
.cube > :nth-child(3) { background: #86e2ac; transform: rotateX(90deg) translateZ(calc(var(--c) / 2)) }

/* Offset by the mark's 3/64 inset. The mark rests turned so its stairs show; the pointer (app.js) and
 * the scroll turn it further. */
.hero-mark { grid-area: 1 / 1; justify-self: end; width: var(--hm); aspect-ratio: 1; margin-right: calc(var(--hm) * -3 / 64); container-type: inline-size; perspective: 1600px }
.hm-scroll, .hm-tilt { position: absolute; inset: 0; transform-style: preserve-3d }
.hm-tilt { transition: transform 700ms var(--spring) }
.hm-body { --dz: calc(9 * var(--u)); transform: rotateX(-13deg) rotateY(21deg) translateZ(calc(var(--dz) / -2)) scale3d(1, 1, 1) }
.hm-svg { display: block; overflow: visible; fill: none; stroke-linejoin: miter }
.hm-svg .g0 { stop-color: var(--glow-from) }
.hm-svg .g1 { stop-color: var(--glow-to) }
.hm-svg .f0 { stop-color: #1d1d21 }
.hm-svg .f1 { stop-color: #0c0c0e }
.hm-face { fill: url(#heroFace) }
.hm-line .lp { stroke: url(#heroGrad); stroke-width: 0.24 }
/* ---- E8 specular light: a sheen on the mark's front face (1px proud of it, so the two planes never
 * z-fight), clipped to the mark's silhouette by a data-URI mask. The hotspot follows the pointer
 * (--lx/--ly from lean(), same smoothing as the tilt); the floor glow answers the opposite way.
 * Reduced motion or no scripting: a static centered sheen. */
.hm-spec {
  position: absolute; inset: 0; transform: translateZ(calc(var(--dz) + 1px)); pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='white' fill-rule='evenodd' d='M4 56V40H12V24H20V8H37L61 56H48L42 44H16V56ZM24 36H38L32 24H24Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='white' fill-rule='evenodd' d='M4 56V40H12V24H20V8H37L61 56H48L42 44H16V56ZM24 36H38L32 24H24Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.hm-spec > i {
  position: absolute; inset: -25%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 45%, transparent 70%);
  translate: calc(var(--lx, 0) * 20%) calc(var(--ly, 0) * 20%);
  transition: translate 700ms var(--spring);
}
/* Phones: one 1.2s rake across the face after the cube lands (.is-swept from app.js). Transform
 * composes with the lean translate (idle on phones), so the two never fight. */
@keyframes hm-sweep { from { transform: translateX(-45%) } to { transform: translateX(45%) } }
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .hero-visual.is-swept .hm-spec > i { animation: hm-sweep 1.2s var(--ease-in-out) }
}
@media (prefers-reduced-transparency: reduce) {
  .hm-spec { display: none }
}
/* The mark arrives already solid and fades in; the motion is the product: 900ms after load (app.js)
 * the ladder's cube climbs from the ground to Verified and stops there. Reduced motion or no
 * scripting: it already stands on Verified. */
@media (prefers-reduced-motion: no-preference) {
  .hero-mark { animation: fade-in 400ms var(--ease-out) both }
}
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .hm-body > .st-pk { --px: 16; --py: 24 }
}
/* Scrolling away: the mark lifts and tips back onto its treads. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero { view-timeline: --hero block }
    .hm-scroll { animation: hero-drift linear both; animation-timeline: --hero; animation-range: exit 0% exit 100% }
    .term.term-hero { animation: term-drift linear both; animation-timeline: --hero; animation-range: exit 0% exit 100% }
  }
}
@keyframes hero-drift { to { transform: translateY(-28px) rotateX(-20deg) } }
@keyframes term-drift { to { transform: translateY(-64px) } }
/* Glass in front of the mark: the halftone shows through, frosted; the pointer shifts it more than the
 * mark (it is nearer). Reduced transparency: solid. */
.term.term-hero { grid-area: 1 / 1; align-self: start; justify-self: end; width: min(560px, 100%); margin-top: calc(var(--hm) * 56 / 64 + 32px); border-color: rgba(255, 255, 255, 0.13); border-radius: 16px; background: linear-gradient(rgba(255, 255, 255, 0.035), transparent 44px), rgba(8, 8, 10, 0.62); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: var(--material-edge), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 12px 24px -8px rgba(0, 0, 0, 0.55), 0 48px 96px -32px rgba(0, 0, 0, 0.9); transition: translate 700ms var(--spring) }
/* The mark's light spills onto the floor behind the glass and reads, frosted, through it. E8: it
 * shifts against the specular hotspot for parallax light (same smoothing, so the two stay in step). */
.hero-visual::after { content: ""; position: absolute; z-index: -1; right: 4%; top: calc(var(--hm) * 0.78); width: 70%; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(114, 179, 234, 0.2), rgba(91, 208, 138, 0.08) 55%, transparent); pointer-events: none; translate: calc(var(--lx, 0) * -14px) calc(var(--ly, 0) * -8px); transition: translate 700ms var(--spring) }
@media (prefers-reduced-transparency: reduce), (max-width: 767px) {
  .term.term-hero { background: var(--bg-sunken); -webkit-backdrop-filter: none; backdrop-filter: none }
  .hero-visual::after { display: none }
}
.term-hero .term-body { padding-block: 14px 18px }

/* ---- terminal */
.term { position: relative; z-index: 1; overflow: hidden; border: var(--frame); border-radius: var(--r-md); background: var(--bg-sunken); box-shadow: var(--e-2) }
.term-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 6px 0 16px; border-bottom: 1px solid var(--line) }
.term-title { overflow: hidden; font: 400 13px/1 var(--font-mono); color: var(--fg-2); white-space: nowrap; text-overflow: ellipsis }
.copy-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--fg-1); font: 500 13px/1 var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--d-instant) ease, background-color var(--d-instant) ease, transform var(--d-spring) var(--spring) }
/* 44px hit area around a 30px visual. */
.copy-btn::after { content: ""; position: absolute; inset: -7px -4px }
.copy-btn:hover { color: var(--fg-0); background: var(--bg-2) }
.copy-btn:active { transform: scale(0.97); transition-duration: 100ms }
.copy-btn.is-done { color: var(--accent) }
/* Copying needs app.js: without scripting, the commands are selectable text and no dead button shows. */
@media (scripting: none) { .copy-btn { display: none } }
/* Copied: a drawn check replaces the glyph. */
.copy-btn .i { transition: opacity var(--d-fast) ease, transform var(--d-spring) var(--spring), stroke-dashoffset 360ms var(--ease-out) 60ms }
.copy-btn .i-ok { margin-left: -20px; opacity: 0; transform: scale(0.5); stroke-dasharray: 23; stroke-dashoffset: 23 }
.copy-btn.is-done .i { opacity: 0; transform: scale(0.5) }
.copy-btn.is-done .i-ok { opacity: 1; transform: none; stroke-dashoffset: 0 }
.copy-btn .lbl, .film-play .lbl { display: inline-flex; flex-direction: column; align-items: center }
.copy-btn .lbl::after { content: "Copied"; height: 0; overflow: hidden; visibility: hidden }
.term-body { position: relative; margin: 0; padding: 16px 20px 20px; font: 400 13px/1.7 var(--font-mono); color: var(--fg-0); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2 }
/* E7 copy success: a one-shot wash sweeps the copied block (translateX, 500ms). Pseudo-elements are
 * never in the accessibility tree; app.js drops .is-swept when the sweep ends, so nothing lingers in
 * the scrollable overflow. Off under reduced motion or reduced transparency. */
@keyframes copy-sweep { from { transform: translateX(-100%) } to { transform: translateX(340%) } }
@media (prefers-reduced-motion: no-preference) {
  .term-body.is-swept::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 32%; pointer-events: none;
    /* Two token washes (≈19% peak): one reads as nothing on the sunken surface. Linear: a sweep
     * keeps constant speed (ease-out would park it off the far edge for the second half). */
    background: linear-gradient(90deg, transparent, var(--accent-soft) 50%, transparent),
      linear-gradient(90deg, transparent, var(--accent-soft) 50%, transparent);
    animation: copy-sweep 500ms linear;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .term-body.is-swept::before { display: none }
}
.term-body code { display: block; padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; color: inherit }
.term-body .ln { display: block; padding-left: 2ch; text-indent: -2ch }
.term-body .ln.cont { padding-left: 4ch }
.term-body .p, .term-body .hint { color: var(--fg-2) }
/* The state reached: a step brighter than a comment. */
.term-body .hint.state { color: var(--fg-1) }
.term-body .p { user-select: none }
/* All hero lines settle in 610ms. */
@media (prefers-reduced-motion: no-preference) {
  .stagger .ln { animation: ln-in 220ms var(--ease-out) backwards; animation-delay: calc(40ms + var(--l, 0) * 50ms) }
}
@keyframes ln-in { from { opacity: 0; transform: translateY(4px) } }
/* ---- E4 teletype quickstart: command lines type once, in turn (6ms a char, 1506ms the card);
 * hints keep their fade. ch-clipping needs one row a line, so 768-1023 (where lines wrap) keeps
 * the stagger. Fill is backwards only: once a line's steps end the clip lifts, so the final
 * state never depends on font metrics. Copy and assistive tech always see the full commands. */
@keyframes ln-type {
  from { clip-path: inset(-2px calc(100% - 2ch) -2px 0) }
  to { clip-path: inset(-2px calc(100% - (2 + var(--n)) * 1ch) -2px 0) }
}
/* A finite caret on the typed card's last line: four blinks, then steady (like the film's). */
@keyframes ln-caret {
  from { opacity: 0 }
  2% { opacity: 1 } 12% { opacity: 0 } 22% { opacity: 1 } 32% { opacity: 0 }
  42% { opacity: 1 } 52% { opacity: 0 } 62% { opacity: 1 } 72% { opacity: 0 }
  82%, to { opacity: 1 }
}
@media (prefers-reduced-motion: no-preference) and ((min-width: 1024px) or (max-width: 767px)) {
  #quickstart .ln.cmd, #code-start .ln.cmd {
    position: relative;
    animation: ln-type calc(var(--n) * 6ms) steps(var(--n), jump-end) backwards var(--t);
  }
  #quickstart .ln.cmd[data-caret]::after, #code-start .ln.cmd[data-caret]::after {
    content: ""; position: absolute; left: calc((2 + var(--n)) * 1ch); top: 15%; bottom: 15%;
    width: 7px; background: var(--fg-1);
    animation: ln-caret 1.8s steps(1) var(--t) both;
  }
  /* The trailing hint waits for the typing to finish. */
  #quickstart .ln.hint:last-child { animation-delay: 1520ms }
  /* The CTA card is below the fold: it waits for .is-typing (app.js). Without scripting the
   * typing plays unseen and the card simply reads complete. */
  html.js #code-start .ln.cmd, html.js #code-start .ln.cmd[data-caret]::after { animation-play-state: paused }
  html.js #code-start.is-typing .ln.cmd, html.js #code-start.is-typing .ln.cmd[data-caret]::after { animation-play-state: running }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  /* On phones the hero terminal is below the fold too, so it waits as well. */
  html.js #quickstart .ln.cmd, html.js #quickstart .ln.cmd[data-caret]::after { animation-play-state: paused }
  html.js #quickstart.is-typing .ln.cmd, html.js #quickstart.is-typing .ln.cmd[data-caret]::after { animation-play-state: running }
}

/* ---- agent strip */
.strip { border-block: 1px solid var(--line) }
.strip-inner { display: flex; align-items: center; gap: 28px; min-height: 76px }
.strip-label { flex: none }
.agents { display: flex; align-items: stretch; flex: 1; min-width: 0 }
.agent { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-left: 1px solid var(--line); font: 500 15px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--fg-1); white-space: nowrap }
.agent .dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--fg-2) }
.agent .state { padding: 3px 6px; border: 1px dashed var(--line-strong); border-radius: var(--r-xs); letter-spacing: 0.08em }
.agent.is-live { color: var(--fg-0) }
.agent.is-live .dot { border-color: var(--accent); background: var(--accent) }
.agent.is-live .state { border: 1px solid var(--accent-line); color: var(--accent) }
/* Beta (exported sessions only): advisory blue. */
.agent.is-beta { color: var(--fg-0) }
.agent.is-beta .dot { border-color: var(--info); background: linear-gradient(90deg, var(--info) 50%, transparent 50%) }
.agent.is-beta .state { border: 1px solid var(--info-line); color: var(--info) }
/* 1200-1319: all five agents fit on the line, their padding easing from 24px down to 12px (the row
 * needs 891px plus 10 paddings; 14px spare). Below 1200 the strip scrolls sideways instead. */
@media (min-width: 1200px) {
  .agent { padding-inline: clamp(12px, 10vw - 108px, 24px) }
}

/* ---- check lists (quickstart logs, plans) */
.check-list { display: grid; gap: 8px; margin-top: 18px }
.check-list li, .feat li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5 }
.check-list li > span { min-width: 0 }
.check-list .i, .feat .i { margin-top: 3px; color: var(--accent) }

/* ---- security boundary */
.security { padding-block: calc(var(--section-y) * 0.6) }
.boundary { margin-top: 48px; padding: 8px 8px 32px; border: var(--frame); border-radius: var(--r-xl); background: var(--bg-1) }
.lanes { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px }
.lanes th, .lanes td { padding: 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle }
.lanes thead th { padding-block: 22px 16px; white-space: nowrap }
.lanes thead .zl, .lanes thead .zc { color: var(--fg-0) }
.lanes tbody th { width: 84px }
.lanes tbody td { color: var(--fg-1) }
.lanes tbody tr:last-child > * { border-bottom: 0 }
.lanes td:nth-child(2) { color: var(--fg-0) }
.lanes .zl { width: 200px }
.lanes .zc { position: relative; width: 230px; border-left: 1px dashed var(--fg-3); background: rgba(255, 255, 255, 0.018) }
.lanes thead .zc { border-top-right-radius: calc(var(--r-xl) - 9px) }
.lanes tbody tr:last-child .zc { border-bottom-right-radius: calc(var(--r-xl) - 9px) }
.pres { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 5px 12px; border: 1px solid transparent; border-radius: var(--r-pill); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap }
.pres.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent) }
/* Local is quiet text: green marks only what may leave. */
.lanes .zl .pres.on { padding-inline: 0; border-color: transparent; background: none; color: var(--fg-1) }
.pres.opt { border: 1px dashed var(--info); color: var(--info) }
.pres.off { padding-inline: 0; color: var(--fg-2) }
.pres.bad { position: relative; z-index: 1; border-color: var(--danger-line); background: #1a1314; color: var(--danger) }
/* C4: a strike bar across both zones, drawn behind the pills (which sit at z-index 1). */
.lane-c4 .zl, .lane-c4 .zc { position: relative }
.lane-c4 .zl::after, .lane-c4 .zc::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--danger); transform-origin: 0 50% }
/* Privacy modes crossfade the C2 cloud cell (pure CSS, every width): the four pills share one grid
 * cell, so the row never changes height with the mode. The outgoing pill fades over 160ms and its
 * visibility flips after; the incoming shows at once: a true crossfade, no display toggle. */
.c2-stack { display: grid }
.c2-stack > .pres { grid-area: 1 / 1; justify-self: start; align-self: center; transition: opacity 160ms var(--ease-out), visibility 0s linear 160ms }
.c2-stack > :not(.m-local) { visibility: hidden; opacity: 0 }
.security:has(input[value="relay"]:checked) .c2-stack > .m-local, .security:has(input[value="sync"]:checked) .c2-stack > .m-local, .security:has(input[value="vpc"]:checked) .c2-stack > .m-local { visibility: hidden; opacity: 0 }
.security:has(input[value="relay"]:checked) .c2-stack > .m-relay, .security:has(input[value="sync"]:checked) .c2-stack > .m-sync, .security:has(input[value="vpc"]:checked) .c2-stack > .m-vpc { visibility: visible; opacity: 1; transition-delay: 0s, 0s }
/* ---- E6 boundary scanner: on first view a beam sweeps the lanes table once (900ms, top to bottom,
 * constant speed); the C3 ✕ stamps in and the C4 verdict pops as its line crosses them, and the C4
 * strike draws itself. Per-row --beat (measured in app.js against the beam's line; --row is the
 * no-measure fallback) times each beat. Without scripting or motion the table simply reads complete. */
.lanes-wrap { position: relative; overflow: clip }
.lanes-scan { position: absolute; left: 0; right: 0; top: 0; height: 64px; border-bottom: 1px solid var(--accent); background: linear-gradient(transparent, var(--accent-soft)); opacity: 0; pointer-events: none }
@keyframes lanes-scan {
  from { transform: translateY(-72px); opacity: 0 }
  12% { opacity: 1 }
  88% { opacity: 1 }
  to { transform: translateY(var(--scan, 480px)); opacity: 0 }
}
@keyframes pres-pop { from { scale: 0.92 } to { scale: 1 } }
@keyframes strike-draw { from { scale: 0 1 } to { scale: 1 1 } }
@keyframes x-stamp { from { transform: rotate(-8deg) scale(1.5); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: no-preference) {
  .boundary.is-in .lanes-scan { animation: lanes-scan 900ms linear both }
  .boundary.is-in .lane-c4 .pres.bad { animation: pres-pop 240ms var(--spring) backwards; animation-delay: var(--beat, calc(90ms + var(--row) * 180ms)) }
  .boundary.is-in .lane .pres.off svg { animation: x-stamp 300ms var(--spring) backwards; animation-delay: var(--beat, calc(90ms + var(--row) * 180ms)) }
  .boundary.is-in :is(.lane-c4 .zl, .lane-c4 .zc)::after { animation: strike-draw 300ms var(--ease-out) backwards; animation-delay: var(--beat, calc(90ms + var(--row) * 180ms)) }
}
@media (prefers-reduced-transparency: reduce) {
  .lanes-scan { background: none }
}
.modes-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px 32px; margin: 28px 18px 0 }
.modes { position: relative; grid-column: 2 / 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; min-width: 0; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-sunken) }
/* One thumb slides to the chosen mode (--k: its index) on the spring. */
.seg-thumb { --k: 0; position: absolute; left: 4px; top: 4px; width: calc((100% - 20px) / 4); height: calc(100% - 8px); border-radius: var(--r-pill); background: var(--bg-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.5); transform: translateX(calc(var(--k) * (100% + 4px))); transition: transform var(--d-spring) var(--spring); pointer-events: none }
.modes:has([value="relay"]:checked) .seg-thumb { --k: 1 }
.modes:has([value="sync"]:checked) .seg-thumb { --k: 2 }
.modes:has([value="vpc"]:checked) .seg-thumb { --k: 3 }
.seg { position: relative; z-index: 1; display: block; cursor: pointer }
.seg input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer }
.seg span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: var(--r-pill); font-size: 15px; line-height: 1.2; text-align: center; color: var(--fg-1); transition: background-color var(--d-fast) ease, color var(--d-fast) ease, box-shadow var(--d-fast) ease, transform var(--d-spring) var(--spring) }
.seg small { font-size: 13px; color: var(--fg-2) }
.seg:hover span { color: var(--fg-0) }
.seg:active span { transform: scale(0.97); transition-duration: 100ms }
.seg input:checked + span { color: var(--fg-0) }
@supports not selector(:has(*)) {
  .seg-thumb { display: none }
  .seg input:checked + span { background: var(--bg-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.5) }
}
.seg input:checked + span small { color: var(--accent) }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px }
.mode-desc { grid-area: 2 / 3; align-self: start; display: grid; font-size: 15px; color: var(--fg-1) }
/* ...and the description. All four share one grid cell, so the block is always as tall as the longest
 * and nothing below it moves when the mode changes. Hidden ones are visibility: hidden (out of the
 * accessibility tree), so the polite region reads only the chosen mode. Old and new crossfade over
 * the same 160ms: the outgoing fades first and flips after, the incoming shows at once. */
.mode-desc > span { grid-area: 1 / 1; transition: opacity 160ms var(--ease-out), visibility 0s linear 160ms }
.mode-desc > :not(.m-local) { visibility: hidden; opacity: 0 }
.security:has(input[value="relay"]:checked) .mode-desc > .m-local, .security:has(input[value="sync"]:checked) .mode-desc > .m-local, .security:has(input[value="vpc"]:checked) .mode-desc > .m-local { visibility: hidden; opacity: 0 }
.security:has(input[value="relay"]:checked) .mode-desc > .m-relay, .security:has(input[value="sync"]:checked) .mode-desc > .m-sync, .security:has(input[value="vpc"]:checked) .mode-desc > .m-vpc { visibility: visible; opacity: 1; transition-delay: 0s, 0s }
.holds { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: 56px }
.guarantees { grid-column: 1 / 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); counter-reset: g }
.guarantees li { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5 }
.guarantees li::before { counter-increment: g; content: "G" counter(g); flex: none; width: 24px; padding-top: 3px; font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.06em; color: var(--fg-2) }
.numbers { grid-column: 9 / 13; display: grid; align-content: start }
.numbers > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line) }
.numbers dd { font-size: 13px; color: var(--fg-2); white-space: nowrap }
/* Numerals in Geist (Mono slashes its zero); units mono. */
.numbers .v { margin-right: 4px; font: 500 22px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--fg-0); font-variant-numeric: tabular-nums }
/* Always the real, final number (app.js may roll an odometer over it: devices.css). No kerning,
 * so the reel's columns add up to exactly the text's advance. */
.n { position: relative; display: inline-block; font-variant-numeric: tabular-nums; font-kerning: none }
.numbers .v .u { margin-left: 2px; font: 400 13px/1 var(--font-mono); letter-spacing: 0; color: var(--fg-1) }

/* ---- pricing */
.pricing { padding-block: calc(var(--section-y) * 0.6) }
.pricing-grid, .faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start }
.pricing-head { grid-column: 1 / 5; position: sticky; top: 112px }
.plans { grid-column: 5 / 13; display: grid; gap: var(--grid-gap) }
.plan { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg) }
/* E7: plan cards lift on hover; the deeper shadow fades in on ::after (opacity only, never an
 * animated box-shadow). The ::after sits over transparent paint only and never takes the pointer. */
@media (hover: hover) and (pointer: fine) {
  .plan { transition: translate var(--d-spring) var(--spring) }
  .plan:hover { translate: 0 -2px }
  .plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--e-2); opacity: 0; transition: opacity var(--d-base) ease; pointer-events: none }
  .plan:hover::after { opacity: 1 }
  /* E7 magnetic primary CTAs: --px/--py (-1..1) arrive from the shared pointermove handler. */
  .hero .btn-solid.btn-go, .cta [data-signup-open] {
    translate: calc(var(--px, 0) * 3px) calc(var(--py, 0) * 2px);
    transition: background-color var(--d-instant) ease, border-color var(--d-instant) ease, color var(--d-instant) ease, transform var(--d-spring) var(--spring), translate var(--d-spring) var(--spring);
  }
  /* The terminal bar's pointer light is positioned against the bar itself. */
  .term-bar { position: relative }
}
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.plan-name { font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em }
.plan-free { padding: 32px 36px 36px; border: 1px solid var(--accent-line); background: var(--bg-2); box-shadow: var(--e-2) }
.price { display: flex; align-items: baseline; gap: 6px; margin-top: 24px }
.price .num { font: 400 var(--t-num-xl) / 1 var(--font-sans); letter-spacing: -0.045em; font-variant-numeric: tabular-nums }
.price .per { font: 400 13px/1 var(--font-mono); color: var(--fg-2) }
.plan-sub { margin-top: 8px; font-size: 15px; color: var(--fg-1) }
.meter { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 3px; margin-top: 28px }
.meter i { height: 22px; border-radius: 2px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line) }
/* A whole-pixel line, so the odometer reel lands on exactly the pixels of the real number. */
.meter-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 10px; line-height: 18px; font-variant-numeric: tabular-nums }
.feat { display: grid; gap: 12px; margin: 24px 0 28px }
.feat li { font-size: 15px; line-height: 1.45 }
.count-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 28px; padding-top: 18px; border-top: 1px solid var(--line) }
.count-rules dt { color: var(--fg-0) }
.count-rules dd { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--fg-1) }
.plan-free .btn, .plan-soon .btn { align-self: flex-start; margin-top: auto }
.plans-soon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap) }
.plan-soon { padding: 24px 24px 22px; border: 1px solid var(--line) }
.feat-planned { display: grid; gap: 8px; margin: 18px 0 22px }
.feat-planned li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--fg-1) }
.feat-planned li::before { content: ""; flex: none; width: 8px; height: 1px; margin-top: 10px; background: var(--fg-2) }
.plan-ent { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 20px 28px; padding: 24px 0; border-block: 1px solid var(--line) }
.ent-head .plan-sub { margin-top: 6px }
.ent-list { max-width: 29.172em; font-size: 15px; line-height: 1.6; color: var(--fg-1) }
.ent-list span { margin-inline: 4px; color: var(--fg-2) }

/* ---- faq: one centred reading column */
.faq { padding-block: calc(var(--section-y) * 0.6) }
.faq-head { grid-column: 3 / 11; margin-bottom: 40px; text-align: center }
.faq-help { margin-top: 20px; font-size: 15px; color: var(--fg-1) }
.faq-help a, .cta-mail a, .cta-legal a, .faq-list .a a { color: var(--fg-0); text-decoration: underline; text-decoration-color: var(--line-hover); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--d-instant) ease }
.faq-help a:hover, .cta-mail a:hover, .cta-legal a:hover, .faq-list .a a:hover { text-decoration-color: var(--fg-0) }
.faq-list { grid-column: 3 / 11; border-top: 1px solid var(--line) }
.faq-list details { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 16px 0; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent }
.faq-list summary::-webkit-details-marker { display: none }
.faq-list summary:focus-visible { outline-offset: 4px; border-radius: var(--r-sm) }
.faq-list summary:active .q { opacity: 0.72 }
.faq-list .q { font-size: var(--t-h4); line-height: 1.35; letter-spacing: -0.01em }
/* A bare 11px plus that turns into a minus. */
.toggle { position: relative; flex: none; width: 24px; height: 24px; color: var(--fg-2); transition: color var(--d-instant) ease, transform var(--d-spring) var(--spring) }
.toggle::before, .toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px; border-radius: 1px; background: currentColor; transition: transform var(--d-spring) var(--spring), opacity var(--d-base) ease }
.toggle::after { transform: rotate(90deg) }
.faq-list summary:hover .toggle { color: var(--fg-0) }
.faq-list details[open] .toggle { color: var(--fg-0); transform: rotate(180deg) }
.faq-list details[open] .toggle::after { transform: rotate(180deg); opacity: 0 }
.faq-list .a { padding: 0 0 28px }
.faq-list .a p { max-width: 42.432em; font-size: 15px; line-height: 1.65; color: var(--fg-1) }
.faq-cmd { margin: 16px 0 0; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunken); font: 400 13px/1.75 var(--font-mono); color: var(--fg-0); scrollbar-width: thin }
.faq-cmd code { font-size: inherit }
@supports selector(::details-content) {
  .faq-list details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--d-spring) var(--spring), opacity var(--d-base) ease, content-visibility var(--d-spring) allow-discrete }
  .faq-list details[open]::details-content { block-size: auto; opacity: 1 }
}

/* ---- get started */
.cta { --stair-h: 192px; overflow-x: clip; padding-top: calc(var(--section-y) * 0.7) }
.cta-stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: end }
.cta-copy { grid-column: 1 / 6; align-self: center; padding-bottom: 32px }
@media (min-width: 1280px) {
  .cta h2 { font-size: clamp(34px, 2.4vw + 16px, 52px) }
}
.cta-text { margin-top: 20px; max-width: 25.194em; font-size: var(--t-body-l); line-height: 1.55; letter-spacing: var(--tr-body); color: var(--fg-1) }
.cta .cta-row { margin-top: 30px }
.is-signed-in .cta .cta-row, .is-signed-in .cta-legal { display: none }
.cta-legal { margin-top: 16px; max-width: 29.172em; font-size: 13px; line-height: 1.5; color: var(--fg-2) }
.cta-legal a { color: var(--fg-1) }
.cta-mail { margin-top: 14px; font-size: 13px; color: var(--fg-2) }
.cta-card { grid-column: 6 / 13; margin-left: 12%; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; box-shadow: var(--material-edge), 0 -24px 64px -32px rgba(0, 0, 0, 0.9) }
.cta-card .term-body { padding-bottom: 24px }
.stair { position: relative; grid-column: 1 / -1; height: var(--stair-h) }
.stair-svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: url(#stairGrad); stroke-width: 1; stroke-linejoin: miter }
.stair-svg .s-lo { stop-color: var(--fg-3) }
.stair-svg .s-hi { stop-color: var(--fg-1) }
/* The stair is a solid mass that melts into the footer. */
.stair-svg .sp-mass { fill: url(#stairFill); stroke: none }
.stair-svg .f-hi { stop-color: var(--bg-1) }
.stair-svg .f-lo { stop-color: var(--bg-0) }
.stair-svg path { vector-effect: non-scaling-stroke }
.st-l { position: absolute; left: var(--x); bottom: calc(100% - var(--y) + 10px); white-space: nowrap }
.s0 { --x: 0.5%; --y: 100% }
.s1 { --x: 10.8%; --y: 66.67% }
.s2 { --x: 20.8%; --y: 33.33% }
.s3 { --x: 30.8%; --y: 0% }
.signup-note { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--warn-line); border-radius: var(--r-sm); background: var(--warn-soft); font-size: 13px; line-height: 1.5 }
.signed-in-panel { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line) }
.signed-in-title [data-user-email] { color: var(--fg-0) }
.loop-panel { margin-top: 14px }
.loop-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--line) }
.loop-stats > div { padding: 12px 14px; background: var(--bg-1) }
.loop-stats dd { margin-top: 6px; font: 500 15px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
.mini-bar { height: 4px; margin-top: 12px; overflow: hidden; border-radius: 2px; background: var(--bg-3) }
.mini-bar span { display: block; width: 0; height: 100%; background: var(--accent) }
.loop-sub { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--fg-1) }
.signed-in-copy { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--fg-1) }
.loop-cta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }

/* ---- footer: the ground floor */
.site-foot { padding-top: 64px }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start }
.foot-brand { grid-column: 1 / 6 }
.so-line { margin-top: 20px; max-width: 18.564em; font-size: 20px; line-height: 1.35; letter-spacing: -0.015em; color: var(--fg-1) }
.site-foot nav { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start }
.site-foot nav:first-of-type { grid-column: 7 / span 2 }
.foot-h { margin-bottom: 10px; font-size: 13px }
.site-foot nav a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; color: var(--fg-1); transition: color var(--d-instant) ease }
.site-foot nav a:hover, .foot-base a:hover { color: var(--fg-0) }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: 56px; padding: 20px 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font-size: 13px; line-height: 1.4; color: var(--fg-2) }
.foot-base a { display: inline-flex; align-items: center; min-height: 36px; transition: color var(--d-instant) ease }
.status { display: inline-flex; align-items: center; gap: 10px }
.foot-legal { display: flex; flex-wrap: wrap; gap: 0 24px }

/* ---- touch targets */
@media (pointer: coarse) {
  .btn-sm { --h: 44px }
  .nav-links a { min-height: 44px }
  .term-bar { padding-right: 0 }
  .copy-btn { height: 44px; padding: 0 14px }
  .copy-btn::after { inset: 0 }
  .site-foot nav a, .foot-base a { min-width: 44px; min-height: 44px }
  .faq-help a, .cta-mail a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px }
  /* Inline links: a 44px hit box rides on ::after. */
  .cta-legal a, .faq-list .a a { position: relative; white-space: nowrap }
  .cta-legal a::after, .faq-list .a a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%) }
  /* 28px avatar, 44px hit ring in a 44px slot. */
  .clerk-user { min-width: 44px; min-height: 44px }
  .clerk-user button { position: relative }
  .clerk-user button::after { content: ""; position: absolute; inset: -8px; border-radius: 50% }
}

/* ---- 1024-1279: h1 >= 1.4x h2; the terminal keeps its 516px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-copy { grid-column: 1 / 7 }
  /* A 400px mark keeps the quickstart on a 768px-tall screen. */
  .hero-visual { --hm: min(400px, 100%); grid-column: 7 / 13 }
  .term.term-hero { width: min(560px, max(100%, 516px)) }
  /* Measured: at 362-420px the lede breaks alike in both fonts. */
  .lede { max-width: 420px }
  .term-body { font-size: 12px }
  .cta-card { margin-left: 0 }
}

/* ---- tablet */
@media (max-width: 1199px) {
  .agents { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent) }
  .agents::-webkit-scrollbar { display: none }
  .agent { scroll-snap-align: start }
  .agent:last-child { padding-right: 56px }
  .pricing-head { grid-column: 1 / -1; position: static }
  .plans { grid-column: 1 / -1; margin-top: 40px }
  .guarantees, .numbers { grid-column: 1 / -1 }
  .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap) }
  .numbers > div { flex-direction: column; justify-content: flex-start; gap: 8px }
}
@media (max-width: 1023px) {
  .hero { padding-top: 128px }
  .hero-copy, .hero-visual { grid-column: 1 / -1 }
  .hero-copy { padding: 0 }
  .hero-visual { --hm: min(420px, 78%); width: 100%; max-width: 640px; margin: 48px auto 0 }
  .lanes .zl, .lanes .zc { width: auto }
  .faq-head, .faq-list { grid-column: 1 / -1 }
  .faq-head { margin-bottom: 32px; text-align: left }
  /* Below 1024 the stair steps aside; the footer takes its own top edge. */
  .cta-copy, .cta-card { grid-column: 1 / -1 }
  .cta-copy { padding-bottom: 40px }
  .cta-card { margin: 0 0 var(--section-y); border-bottom: var(--frame); border-radius: var(--r-lg); box-shadow: var(--e-3) }
  .stair { display: none }
  .site-foot { border-top: 1px solid var(--line) }
  .foot-brand { grid-column: 1 / -1; margin-bottom: 16px }
  .site-foot nav, .site-foot nav:first-of-type { grid-column: span 4 }
}
@media (max-width: 899px) {
  /* Lanes stack as rows; roles keep table semantics. */
  .boundary { padding: 4px 4px 20px; border-radius: var(--r-lg) }
  .lanes, .lanes tbody, .lanes tr, .lanes th, .lanes td { display: block }
  .lanes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
  .lanes tbody tr { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 12px; padding: 16px 14px; border-bottom: 1px solid var(--line) }
  .lanes tbody tr:last-child { border-bottom: 0 }
  .lanes th, .lanes td { padding: 0; border: 0 }
  .lanes tbody th { width: auto; grid-row: span 3 }
  .lanes tbody td { font-size: 15px }
  .lanes td:nth-child(3) { font-size: 13px; color: var(--fg-2) }
  .lanes .zl { display: none }
  .lanes .zc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; border: 0; background: none }
  .lanes .zc::before { content: "Cloud"; position: relative; z-index: 1; min-width: 44px; font: 500 13px/1.3 var(--font-sans); color: var(--fg-2) }
  /* C2's four cloud pills crossfade inside their stack (see above): the row never changes
   * height with the mode. */
  .lane-c2 .zc { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px }
  .lane-c2 .zc > .c2-stack { grid-area: 1 / 2 }
  .pres { white-space: normal }
  .modes-row { grid-template-columns: minmax(0, 1fr) }
  .modes, .mode-desc { grid-area: auto }
}

/* ---- mobile */
@media (max-width: 767px) {
  /* Phones: the mark leads at 200px, above the eyebrow, and the quickstart follows the CTAs,
   * so the packet's first climb and the commands both play on screen. */
  .hero { padding-top: 100px; padding-bottom: 56px }
  .hero h1 { margin-top: 24px }
  .lede { font-size: 17px }
  .hero-grid { row-gap: 0 }
  .hero-visual { --hm: 200px; display: contents }
  .hero-visual::before { display: none }
  .hero-mark { position: relative; isolation: isolate; order: -1; grid-area: auto; grid-column: 1 / -1; justify-self: start; margin: 0 0 4px calc(var(--hm) * -4 / 64) }
  .hero-mark::before { content: ""; position: absolute; z-index: -1; inset: -24px -60px -12px -24px; background: radial-gradient(circle, var(--tex-dot) 0.9px, transparent 1.3px) 0 0 / 6px 6px; -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.25) 60%, transparent); mask: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.25) 60%, transparent); opacity: 0.55; pointer-events: none }
  .term.term-hero { grid-area: auto; grid-column: 1 / -1; justify-self: stretch; width: 100%; margin-top: 28px }
  .hm-line .lp { stroke-width: 0.3 }
  /* One line per command; the block scrolls sideways under a fade. */
  .term-body { padding: 14px 14px 16px; font-size: 12px; white-space: pre; overflow-wrap: normal; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 86%, transparent); mask: linear-gradient(90deg, #000 86%, transparent) }
  .term-body::-webkit-scrollbar { display: none }
  .faq-cmd { font-size: 12px }
  .term-body code { width: max-content; min-width: 100%; padding-right: 40px }
  .term-body .ln { padding-left: 0; text-indent: 0 }
  .term-body .ln.cont { padding-left: 2ch }
  .strip-inner { gap: 0; min-height: 0; flex-direction: column; align-items: stretch; padding-top: 18px }
  .agents { margin-left: calc(-1 * var(--gutter)); padding-left: var(--gutter) }
  .agent { padding: 16px 18px }
  .agent:first-child { padding-left: 0; border-left: 0 }
  .check-list { display: none }
  .guarantees { grid-template-columns: minmax(0, 1fr) }
  .numbers { grid-template-columns: minmax(0, 1fr) }
  .numbers > div { flex-direction: row; justify-content: space-between }
  .modes-row { margin: 20px 10px 0 }
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-lg) }
  .seg span { border-radius: calc(var(--r-lg) - 6px); font-size: 13px }
  /* 2 x 2: the thumb moves on both axes. */
  .seg-thumb { --x: 0; --y: 0; width: calc((100% - 12px) / 2); height: calc((100% - 12px) / 2); border-radius: calc(var(--r-lg) - 6px); transform: translate(calc(var(--x) * (100% + 4px)), calc(var(--y) * (100% + 4px))) }
  .modes:has([value="relay"]:checked) .seg-thumb { --x: 1 }
  .modes:has([value="sync"]:checked) .seg-thumb { --y: 1 }
  .modes:has([value="vpc"]:checked) .seg-thumb { --x: 1; --y: 1 }
  .plan-free { padding: 28px 22px }
  .meter { grid-template-columns: repeat(20, minmax(0, 1fr)) }
  .meter i { height: 16px }
  .plans-soon, .count-rules { grid-template-columns: minmax(0, 1fr) }
  .count-rules { gap: 14px }
  .plan-soon { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 20px }
  .plan-soon .plan-top { grid-column: 1 / -1; justify-content: flex-start }
  .plan-soon .plan-sub { grid-column: 1 / -1; margin-top: 4px }
  .feat-planned { margin: 10px 0 0 }
  .plan-soon .btn { grid-column: 1 / -1; justify-self: start; margin-top: 14px }
  .plan-ent { grid-template-columns: minmax(0, 1fr); gap: 16px }
  .plan-ent .btn { justify-self: start }
  .faq-list summary { align-items: flex-start }
  .cta { padding-top: 72px }
  .cta-card { margin-bottom: 72px; border-radius: var(--r-md) }
  .site-foot { padding-top: 48px }
  .site-foot nav, .site-foot nav:first-of-type { grid-column: span 6 }
  .site-foot nav:last-of-type { margin-top: 12px }
  .so-line { font-size: 18px }
  .foot-base { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 40px }
}

/* ---- sideways scrollers: keyboard and mouse can reach the tail (app.js keeps them in the tab order
 * only while they overflow). Focused, the ring sits inside the clip and the edge fade lifts; a fine
 * pointer gets a thin scrollbar instead of none. */
.term-body:focus-visible, .agents:focus-visible, .faq-cmd:focus-visible, .film-board:focus-visible { outline-offset: -2px; -webkit-mask: none; mask: none }
.term-body:focus-visible { border-radius: inherit }
@media (pointer: fine) {
  .agents, .term-body { scrollbar-width: thin; scrollbar-color: var(--line-hover) transparent }
  .agents::-webkit-scrollbar, .term-body::-webkit-scrollbar { display: block; height: 6px }
  .agents::-webkit-scrollbar-thumb, .term-body::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--line-hover) }
}
/* In the row layout the scrollbar hangs below the agents (its thickness, --sb, from app.js), so they
 * stay level with the "Works with" label. */
@media (pointer: fine) and (min-width: 768px) {
  .agents { margin-bottom: calc(-1 * var(--sb, 0px)) }
}

/* ---- phones: the proof line breaks alike in either font */
@media (max-width: 480px), (min-width: 1024px) and (max-width: 1279px) {
  .proof .br { display: block; height: 0; overflow: hidden }
}
@media (max-width: 359px) {
  .lede { font-size: 16px }
}

/* ---- motion off */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important }
  .js .reveal, .js [data-stagger] > * { opacity: 1; transform: none }
}

/* ---- E5 cross-document view transitions (Chrome 126+, Safari 18.2+; elsewhere ignored) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto }
  /* One element per name on each page: the nav-pill mark glides into the legal sticky bar, and back. */
  .site-head .brand .mark, .lg-head .brand .mark { view-transition-name: ae-mark }
  .site-head .wordmark, .lg-head .wordmark { view-transition-name: ae-word }
  #hero-title, .lg-main h1 { view-transition-name: page-title }
  /* Longhands only: the shorthand would reset the UA animation-name and kill the glide. */
  ::view-transition-group(*) { animation-duration: 280ms; animation-timing-function: var(--ease-out); animation-fill-mode: both }
}

/* --------------------------------------------------------------------------
 * 2026 experience layer
 * A precise, evidence-led visual system. The ornament is always product data:
 * a trust graph, verification states, boundaries and real terminal output.
 * ----------------------------------------------------------------------- */
:root {
  --accent-2: #8ab4f8;
  --accent-2-soft: rgba(138, 180, 248, 0.1);
  --accent-2-line: rgba(138, 180, 248, 0.26);
  --canvas-blue: #0c1020;
  --panel-deep: #0b0d11;
  --panel-raised: #13161d;
  --signal-glow: 0 0 48px rgba(91, 208, 138, 0.13);
}

body {
  background:
    radial-gradient(80% 42% at 72% 4%, rgba(92, 128, 180, 0.065), transparent 67%),
    radial-gradient(56% 32% at 15% 20%, rgba(91, 208, 138, 0.035), transparent 72%),
    var(--bg-0);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.page-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--z-nav) + 1);
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.page-progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 18px rgba(91, 208, 138, 0.55);
  will-change: transform;
}

/* Navigation reads as a product control, not a floating decoration. */
.nav { top: calc(14px + env(safe-area-inset-top, 0px)) }
.nav-pill {
  width: min(1200px, 100%);
  height: 60px;
  padding-inline: 18px 10px;
  border-color: rgba(255, 255, 255, 0.105);
  border-radius: 18px;
  background: rgba(12, 13, 17, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 20px 60px -24px rgba(0, 0, 0, 0.85);
}
.nav-pill::after {
  content: "";
  position: absolute;
  inset: auto 18px -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(138, 180, 248, 0.58), rgba(91, 208, 138, 0.58), transparent);
  opacity: 0.62;
}
.brand .mark { color: var(--accent) }
.nav-links a { height: 42px; border-radius: 12px }
.nav-links a:hover { background: rgba(255, 255, 255, 0.045) }
.nav-links a.active { background: var(--accent-soft) }

.btn { border-radius: 13px; min-height: 46px; padding-inline: 20px }
.btn-sm { min-height: var(--h, 36px); border-radius: 10px }
.btn-solid {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 28px -14px rgba(91, 208, 138, 0.8);
}
.btn-solid:hover { background: var(--accent-hover) }
.btn-solid:focus-visible { outline-color: var(--accent); outline-offset: 4px }
.btn-ghost { background: rgba(255, 255, 255, 0.025) }

/* Hero: one clear promise beside an evidence system in motion. */
.hero {
  min-height: 960px;
  padding: 152px 0 112px;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 7% -8% auto auto;
  width: min(64vw, 940px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 180, 248, 0.105), rgba(91, 208, 138, 0.035) 38%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.hero-grid { min-height: 696px; align-items: center }
.hero-copy { position: relative; z-index: 4; grid-column: 1 / 7; padding: 22px 36px 0 0 }
.eyebrow {
  gap: 12px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--accent-2-line);
  border-radius: 999px;
  background: var(--accent-2-soft);
  color: #c5d0ff;
  letter-spacing: 0.1em;
}
.eyebrow .sq { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(91, 208, 138, 0.12) }
.hero h1 {
  max-width: 10.7ch;
  margin-top: 30px;
  font-size: clamp(54px, 5.4vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.058em;
}
.hero h1 .dim {
  display: inline;
  color: #8ab4f8;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.lede { max-width: 31.5rem; margin-top: 30px; font-size: 18px; line-height: 1.62; color: #b3b3bd }
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 35rem;
  margin-top: 34px;
  border-block: 1px solid var(--line-strong);
}
.hero-facts li { min-width: 0; padding: 17px 14px 17px 0 }
.hero-facts li + li { padding-left: 16px; border-left: 1px solid var(--line) }
.hero-facts strong { display: block; font: 500 18px/1.2 var(--font-mono); letter-spacing: -0.035em; color: var(--fg-0) }
.hero-facts span { display: block; margin-top: 6px; font-size: 11px; line-height: 1.35; color: var(--fg-2) }
.hero .cta-row { margin-top: 30px }
.hero .proof { margin-top: 20px }

.hero-visual {
  --hm: min(354px, 58%);
  grid-column: 7 / 13;
  min-height: 696px;
  align-self: stretch;
  perspective: 1500px;
}
.hero-visual::before { display: none }
.hero-visual::after { top: 385px; right: 10%; width: 72%; opacity: 0.85 }
.evidence-field {
  position: absolute;
  inset: 0 -42px 64px -18px;
  z-index: -1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 36px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025), transparent 28%),
    radial-gradient(circle at 72% 28%, rgba(92, 128, 180, 0.11), transparent 38%),
    radial-gradient(circle at 28% 76%, rgba(91, 208, 138, 0.055), transparent 34%),
    rgba(10, 12, 17, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 46px 100px -54px #000;
  transform: rotateY(-2.5deg) rotateX(1deg);
  transform-origin: center;
}
.evidence-field::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.027) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at center, #000 12%, transparent 74%);
  mask-image: radial-gradient(circle at center, #000 12%, transparent 74%);
}
.evidence-field::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 80px 24px rgba(6, 7, 10, 0.6);
}
.evidence-field canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.field-head {
  position: absolute;
  top: 22px;
  left: 24px;
  right: 24px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.field-live { display: inline-flex; align-items: center; gap: 8px; color: var(--accent) }
.field-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor }
.field-states { position: absolute; inset: 0; z-index: 2; pointer-events: none }
.field-states li {
  position: absolute;
  top: calc(132px + var(--s) * 82px);
  left: calc(24px + var(--s) * 21px);
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--fg-2), var(--accent) calc(var(--s) * 22%));
}
.field-states li::before { content: "0" counter(field-state); width: 18px; color: var(--fg-3) }
.field-states { counter-reset: field-state -1 }
.field-states li { counter-increment: field-state }
.field-caption {
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 2;
  max-width: 25ch;
  font-size: 11px;
  line-height: 1.45;
  color: var(--fg-2);
}
.visual-toggle {
  position: absolute;
  top: 54px;
  right: -16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(10, 12, 17, 0.82);
  color: var(--fg-1);
  font: 500 11px/1 var(--font-sans);
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.visual-toggle > span { position: relative; width: 10px; height: 10px; border-left: 2px solid var(--accent); border-right: 2px solid var(--accent) }
.visual-toggle[aria-pressed="true"] > span { border: 0; background: var(--accent); clip-path: polygon(10% 0, 100% 50%, 10% 100%) }
.visual-toggle:hover { color: var(--fg-0); border-color: var(--line-hover) }
.visual-toggle b { font-weight: 500 }

.hero-mark {
  z-index: 2;
  align-self: start;
  margin-top: 112px;
  margin-right: 18px;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.46));
}
.hm-body { transform: rotateX(-17deg) rotateY(24deg) translateZ(calc(var(--dz) / -2)) scale3d(1, 1, 1) }
.term.term-hero {
  z-index: 4;
  width: min(620px, calc(100% + 18px));
  margin-top: 454px;
  margin-right: -24px;
  border-radius: 18px;
  background: linear-gradient(rgba(255, 255, 255, 0.04), transparent 46px), rgba(8, 9, 12, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 32px 72px -30px rgba(0, 0, 0, 0.95);
}

/* Repeated chapter markers create one dependable reading rhythm. */
.section-index {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-index::after { content: ""; width: 42px; height: 1px; order: -1; background: linear-gradient(90deg, transparent, currentColor) }
.section-index span { color: var(--fg-2) }
.sec-head-center .section-index { align-self: center }
.pricing-head .section-index, .trust-copy .section-index, .cta-copy .section-index { margin-bottom: 20px }

/* Section surfaces: large compositions, restrained component chrome. */
.film, .trust, .how, .security, .pricing, .faq { border-bottom: 1px solid var(--line) }
.film {
  background:
    radial-gradient(60% 25% at 70% 15%, rgba(138, 180, 248, 0.08), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 18%);
}
.film-head { max-width: none }
.trust-path { margin-top: 72px }
.trust-map {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0.004));
  perspective: 1400px;
}
.trust-map::after {
  content: "";
  position: absolute;
  inset: auto 12% 2% 12%;
  height: 22%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(91, 208, 138, 0.055), transparent 68%);
}
.trust-map-meta {
  position: absolute;
  inset: 24px 28px auto;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  color: var(--fg-2);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.trust-map-meta span:last-child { color: var(--accent) }
.trust-map svg {
  display: block;
  width: 100%;
  height: auto;
  color: rgba(255, 255, 255, 0.055);
  transform: rotateX(calc(var(--map-y, 0) * -1.25deg)) rotateY(calc(var(--map-x, 0) * 1.8deg));
  transition: transform 800ms var(--spring);
  transform-origin: 50% 50%;
}
.map-grid { color: rgba(255, 255, 255, 0.05); opacity: 0.58 }
.map-floor { fill: rgba(0, 0, 0, 0.3) }
.map-stage .top, .map-stage .side-a, .map-stage .side-b { stroke-width: 1.25; vector-effect: non-scaling-stroke }
.map-stage .top { fill: #15171a; stroke: #3c4043 }
.map-stage .side-a { fill: #0b0c0e; stroke: #24262a }
.map-stage .side-b { fill: #08090b; stroke: #202226 }
.map-stage text { fill: #8a8a93; font: 500 11px var(--font-mono); letter-spacing: 0.12em }
.stage-2 .top { fill: #171812; stroke: rgba(253, 214, 99, 0.62) }
.stage-2 .side-a, .stage-2 .side-b { stroke: rgba(253, 214, 99, 0.18) }
.stage-3 .top { fill: #111821; stroke: rgba(138, 180, 248, 0.68) }
.stage-3 .side-a, .stage-3 .side-b { stroke: rgba(138, 180, 248, 0.2) }
.stage-4 .top { fill: #142019; stroke: rgba(129, 201, 149, 0.76) }
.stage-4 .side-a, .stage-4 .side-b { stroke: rgba(129, 201, 149, 0.22) }
.trace-lines { fill: none; stroke: #9aa0a6; stroke-width: 2 }
.trace-lines circle { fill: #9aa0a6; stroke: none }
.branch-lines { fill: none; stroke: #fdd663; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.branch-lines circle { fill: #fdd663; stroke: #171812; stroke-width: 2 }
.verify-mark circle { fill: none; stroke: #8ab4f8; stroke-width: 3 }
.verify-mark path { fill: none; stroke: #d2e3fc; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round }
.map-brand { fill: #81c995 }
.map-cube path:first-child { fill: #b7e6c4 }
.map-cube path:nth-child(2) { fill: #5bb974 }
.map-cube path:nth-child(3) { fill: #3d8f55 }
.trust-route { fill: none; stroke: #f4f4f5; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke }
.route-nodes { fill: #09090b; stroke: #81c995; stroke-width: 3; vector-effect: non-scaling-stroke }

.trust-path-notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line-strong);
}
.trust-path-notes li { min-width: 0; padding: 26px 26px 30px 0 }
.trust-path-notes li + li { padding-left: 26px; border-left: 1px solid var(--line) }
.trust-path-notes span { display: block; color: var(--fg-3); font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em }
.trust-path-notes h3 { margin-top: 16px; font-size: 17px; line-height: 1.25; letter-spacing: -0.02em }
.trust-path-notes p { margin-top: 9px; font-size: 13px; line-height: 1.55; color: var(--fg-2) }
.trust-path-notes li:nth-child(2) span { color: #fdd663 }
.trust-path-notes li:nth-child(3) span { color: #8ab4f8 }
.trust-path-notes li:nth-child(4) span { color: #81c995 }

.js .trust-path:not(.is-in) .map-stage { opacity: 0; transform: translateY(18px) }
.map-stage { transition: opacity 500ms var(--ease-out), transform 760ms var(--spring); transition-delay: calc(var(--map-i, 0) * 90ms) }
.stage-1 { --map-i: 0 }
.stage-2 { --map-i: 1 }
.stage-3 { --map-i: 2 }
.stage-4 { --map-i: 3 }
.js .trust-path:not(.is-in) .trust-path-notes > li { opacity: 0; transform: translateY(12px) }
.trust-path-notes > li { transition: opacity 420ms var(--ease-out), transform 640ms var(--spring); transition-delay: calc(180ms + var(--i) * 70ms) }
@keyframes trust-route-draw { from { stroke-dashoffset: 1 } }
.trust-path.is-in .trust-route { animation: trust-route-draw 1.3s var(--ease-out) 360ms both }
.film-bridge { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 28px; padding-top: 56px; border-top: 1px solid var(--line) }
.film-bridge .section-index { margin: 0 }
.film-bridge h3 { max-width: 15ch; font-size: clamp(28px, 3vw, 46px); line-height: 1.02; letter-spacing: -0.04em; text-align: right }
.film-stage { border-radius: 30px }
.ff { border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 44px 100px -48px rgba(0, 0, 0, 0.95) }
.trust {
  background: radial-gradient(60% 45% at 12% 48%, rgba(91, 208, 138, 0.055), transparent 70%), var(--panel-deep);
}
.trust-figure {
  border-radius: 30px;
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 36px 92px -54px #000;
}
.trust-steps button { border-radius: 12px }
.trust-steps button[aria-current="true"] { background: linear-gradient(90deg, var(--accent-soft), rgba(91, 208, 138, 0.025)); box-shadow: inset 3px 0 0 var(--accent) }
.how { background: linear-gradient(180deg, rgba(19, 22, 29, 0.72), rgba(9, 9, 11, 0.2)) }
.run {
  border-color: rgba(255, 255, 255, 0.105);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 38px 90px -60px #000;
}
.run-bar { background: rgba(255, 255, 255, 0.018) }
.run-graph .node button { transition: transform var(--d-spring) var(--spring), border-color var(--d-fast) ease, background-color var(--d-fast) ease }
.run-graph .node button:hover { transform: translateY(-3px) }
.security {
  background:
    radial-gradient(45% 36% at 80% 42%, rgba(138, 180, 248, 0.075), transparent 75%),
    var(--bg-0);
}
.boundary {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 30px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 38px 90px -62px #000;
}
.pricing { background: var(--panel-deep) }
.plan { border-color: rgba(255, 255, 255, 0.105); border-radius: 22px; background: rgba(19, 22, 29, 0.74) }
.plan-free {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 105% -5%, rgba(91, 208, 138, 0.15), transparent 52%),
    linear-gradient(145deg, rgba(19, 29, 24, 0.96), rgba(14, 16, 20, 0.96));
  box-shadow: var(--signal-glow), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.plan-free::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--accent-2), var(--accent)) }
.plan-soon, .plan-ent { transition: transform var(--d-spring) var(--spring), border-color var(--d-fast) ease }
@media (hover: hover) and (pointer: fine) {
  .plan-soon:hover, .plan-ent:hover { transform: translateY(-4px); border-color: var(--line-hover) }
}
.faq { background: linear-gradient(180deg, rgba(19, 22, 29, 0.56), var(--bg-0)) }
.faq-head .section-index { justify-content: center }
.faq-list { border-top-color: var(--line-strong) }
.faq-list details { padding-inline: 20px; border-color: var(--line); border-radius: 14px; transition: background-color var(--d-fast) ease }
.faq-list details[open] { background: rgba(255, 255, 255, 0.024) }
.faq-list details + details { margin-top: 4px }
.faq-list summary { min-height: 72px }
.cta {
  background:
    radial-gradient(50% 80% at 20% 100%, rgba(91, 208, 138, 0.085), transparent 62%),
    radial-gradient(45% 70% at 80% 100%, rgba(138, 180, 248, 0.085), transparent 68%);
}
.cta-card { border-color: rgba(255, 255, 255, 0.13) }
.site-foot { background: #070709 }

@media (max-width: 1279px) {
  .hero { min-height: 920px }
  .hero-copy { padding-right: 24px }
  .hero h1 { font-size: clamp(50px, 5.6vw, 68px) }
  .evidence-field { right: -10px; left: -8px }
  .term.term-hero { width: calc(100% + 8px); margin-right: 0 }
  .visual-toggle { right: 10px }
}

@media (max-width: 1023px) {
  .hero { min-height: 0; padding-top: 136px }
  .hero-grid { min-height: 0 }
  .hero-copy { grid-column: 1 / -1; max-width: 760px; padding: 0 }
  .hero h1 { max-width: 11.5ch; font-size: clamp(58px, 9.4vw, 82px) }
  .lede { max-width: 39rem }
  .hero-visual { --hm: min(340px, 52%); grid-column: 1 / -1; min-height: 720px; margin-top: 62px }
  .evidence-field { inset: 0 0 70px }
  .hero-mark { margin-top: 100px; margin-right: 10% }
  .term.term-hero { width: min(680px, calc(100% - 32px)); margin-top: 448px; margin-right: 16px }
  .visual-toggle { top: 18px; right: 18px }
  .sec-head-center .section-index { align-self: flex-start }
  .faq-head .section-index { justify-content: flex-start }
  .film-bridge { margin-top: 68px }
  .trust-path { margin-top: 56px }
  .trust-path-notes { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .trust-path-notes li { padding: 24px }
  .trust-path-notes li:nth-child(3) { border-left: 0; border-top: 1px solid var(--line) }
  .trust-path-notes li:nth-child(4) { border-top: 1px solid var(--line) }
}

@media (max-width: 767px) {
  body::before { background-size: 48px 48px }
  .nav-pill { height: 56px; padding-left: 14px; border-radius: 16px }
  .hero { padding: 124px 0 80px }
  .hero h1 { max-width: 10.7ch; margin-top: 24px; font-size: clamp(47px, 13.6vw, 70px); line-height: 0.96 }
  .lede { margin-top: 24px; font-size: 17px }
  .hero-facts { margin-top: 28px }
  .hero-facts li { padding-block: 14px }
  .hero-facts strong { font-size: 15px }
  .hero-facts span { font-size: 10px }
  .hero .cta-row { align-items: stretch }
  .hero .cta-row .btn { flex: 1 1 160px }
  .hero-visual { --hm: min(260px, 66%); min-height: 680px; margin-top: 46px }
  .evidence-field { inset: 0 0 88px; border-radius: 26px; transform: none }
  .field-states { display: none }
  .field-caption { max-width: 21ch }
  .hero-mark { margin-top: 90px; margin-right: 9% }
  .term.term-hero { width: calc(100% - 20px); margin-top: 386px; margin-right: 10px; border-radius: 16px }
  .visual-toggle { display: none !important }
  .section-index { margin-bottom: 18px }
  .film-stage, .trust-figure, .run, .boundary { border-radius: 20px }
  .faq-list details { padding-inline: 14px }
  .film-bridge { display: block; margin-top: 50px; padding-top: 40px }
  .film-bridge h3 { margin-top: 20px; text-align: left }
  .trust-map svg { position: relative; left: 50%; width: 720px; max-width: none; transform: translateX(-50%) rotateX(calc(var(--map-y, 0) * -1.25deg)) rotateY(calc(var(--map-x, 0) * 1.8deg)) }
  .trust-map-meta { inset: 18px 18px auto }
  .trust-path-notes { grid-template-columns: minmax(0, 1fr) }
  .trust-path-notes li, .trust-path-notes li + li { padding: 20px 2px 22px; border-left: 0; border-top: 1px solid var(--line) }
  .trust-path-notes li:first-child { border-top: 0 }
}

@media (max-width: 480px) {
  .eyebrow { max-width: 100%; font-size: 9px; letter-spacing: 0.08em }
  .hero h1 { font-size: clamp(43px, 13.5vw, 58px) }
  .hero-facts { grid-template-columns: 0.9fr 1.15fr 1fr }
  .hero-facts li { padding-right: 8px }
  .hero-facts li + li { padding-left: 10px }
  .hero-visual { --hm: min(220px, 62%); min-height: 632px }
  .evidence-field { bottom: 84px }
  .field-head { top: 18px; left: 18px; right: 18px }
  .field-caption { left: 18px; bottom: 18px }
  .hero-mark { margin-top: 92px; margin-right: 10% }
  .term.term-hero { margin-top: 346px }
  .trust-map svg { width: 650px }
}

@media (prefers-reduced-transparency: reduce) {
  .nav-pill, .visual-toggle, .term.term-hero { background: var(--panel-deep); -webkit-backdrop-filter: none; backdrop-filter: none }
  .evidence-field { background: var(--panel-deep) }
}

@media (prefers-reduced-motion: reduce) {
  .page-progress { display: none }
  .visual-toggle { display: none !important }
  .evidence-field { transform: none }
}

/* Real-time 3D evidence system. Geometry is rendered locally; text stays outside the canvas. */
.hero-art {
  position: relative;
  grid-column: 7 / 13;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  min-width: 0;
  min-height: 700px;
  margin: -16px -24px 0 28px;
}
.hero-signal-field {
  position: absolute;
  inset: 7% 146px 11% -7%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .72;
  -webkit-mask-image: radial-gradient(ellipse 78% 74% at 58% 48%, #000 18%, rgba(0,0,0,.76) 55%, transparent 86%);
  mask-image: radial-gradient(ellipse 78% 74% at 58% 48%, #000 18%, rgba(0,0,0,.76) 55%, transparent 86%);
}
.hero-signal-field::before {
  content: "";
  position: absolute;
  inset: 8% 5%;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 50%;
  transform: rotate(-8deg);
}
.hero-signal-field canvas { display: block; width: 100%; height: 100% }
.signal-field-key {
  position: absolute;
  inset: auto 7% 3%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  color: rgba(161,161,170,.46);
  font: 500 7px/1.2 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.signal-field-key span { position: relative; padding-top: 9px }
.signal-field-key span::before { content: ""; position: absolute; inset: 0 15% auto 0; height: 1px; background: currentColor }
.signal-field-key span:nth-child(2) { color: rgba(229,180,84,.54) }
.signal-field-key span:nth-child(3) { color: rgba(114,179,234,.56) }
.signal-field-key span:nth-child(4) { color: rgba(91,208,138,.62) }
.hero-art-object {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 51% 46%, rgba(201, 205, 210, 0.045), transparent 35%),
    radial-gradient(circle at 50% 66%, rgba(112, 189, 134, 0.025), transparent 46%);
}
.hero-art-object::before {
  content: "";
  position: absolute;
  inset: 14% 4% 12%;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 50%;
  transform: perspective(900px) rotateX(67deg) rotateZ(-8deg);
}
.hero-art-object::after {
  content: "";
  position: absolute;
  inset: 8% 6%;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.026) 50%, transparent 50.1%),
    linear-gradient(transparent 49.9%, rgba(255,255,255,.022) 50%, transparent 50.1%);
  -webkit-mask-image: radial-gradient(circle, #000, transparent 69%);
  mask-image: radial-gradient(circle, #000, transparent 69%);
}
.hero-webgl canvas,
.trust-webgl canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 480ms var(--ease-out);
}
.is-webgl-ready canvas { opacity: 1 }
.webgl-fallback {
  position: absolute;
  inset: 16%;
  z-index: 0;
  display: grid;
  place-items: center;
  perspective: 900px;
  transition: opacity 320ms ease;
}
.is-webgl-ready .webgl-fallback { opacity: 0 }
.webgl-fallback i {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  transform: rotateX(65deg) translateZ(calc(var(--i) * 26px));
  box-shadow: inset 0 0 42px rgba(138, 180, 248, 0.025);
}
.webgl-fallback i:nth-child(1) { --i: 0 }
.webgl-fallback i:nth-child(2) { --i: 1; width: 34%; border-color: rgba(253, 214, 99, .45) }
.webgl-fallback i:nth-child(3) { --i: 2; width: 26%; border-color: rgba(138, 180, 248, .55) }
.webgl-fallback i:nth-child(4) { --i: 3; width: 18%; border-color: rgba(129, 201, 149, .62) }
.hero-art-rail {
  position: relative;
  z-index: 3;
  padding-left: 24px;
  border-left: 1px solid var(--line-strong);
}
.hero-art-rail > p { display: grid; gap: 8px; margin-bottom: 42px }
.hero-art-rail > p span,
.hero-art-rail > p b {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-art-rail > p span { color: var(--fg-3) }
.hero-art-rail > p b { color: var(--accent) }
.hero-art-rail ol { display: grid; gap: 25px }
.hero-art-rail li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px }
.hero-art-rail li::before { content: ""; position: absolute; left: -29px; top: 4px; width: 9px; height: 9px; border: 2px solid var(--bg-0); border-radius: 50%; background: var(--fg-3); box-shadow: 0 0 0 1px var(--fg-3) }
.hero-art-rail li:nth-child(2)::before { background: #b79a63; box-shadow: 0 0 0 1px #b79a63 }
.hero-art-rail li:nth-child(3)::before { background: #6f88aa; box-shadow: 0 0 0 1px #6f88aa }
.hero-art-rail li:nth-child(4)::before { background: #72a481; box-shadow: 0 0 0 1px #72a481 }
.hero-art-rail li > span { grid-row: 1 / 3; color: var(--fg-3); font: 500 9px/1.3 var(--font-mono) }
.hero-art-rail strong { color: var(--fg-1); font-size: 13px; line-height: 1.1; font-weight: 540 }
.hero-art-rail small { color: var(--fg-3); font: 500 9px/1.35 var(--font-mono) }

.compatibility { padding: 18px 0 66px }
.compatibility-inner { display: grid; grid-template-columns: minmax(230px, 0.78fr) minmax(0, 2fr); align-items: end; gap: 52px }
.compatibility-inner > p { max-width: 18ch; color: var(--fg-2); font-size: 14px; line-height: 1.45 }
.compatibility-inner > p span { color: var(--fg-0) }
.compatibility ul { display: flex; align-items: baseline; justify-content: space-between; min-width: 0; gap: 28px }
.compatibility li { display: flex; align-items: baseline; gap: 8px; white-space: nowrap }
.compatibility strong { color: var(--fg-1); font-size: clamp(15px, 1.45vw, 20px); font-weight: 470; letter-spacing: -0.025em }
.compatibility small { color: var(--fg-3); font: 500 8px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase }
.compatibility li:first-child small { color: var(--accent) }

.trust-engine { margin-top: 62px }
.trust-engine-stage {
  position: relative;
  aspect-ratio: 16 / 8.25;
  overflow: hidden;
  isolation: isolate;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 62%, rgba(138,180,248,.055), transparent 52%);
  background-size: 52px 52px, 52px 52px, auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.trust-engine-stage::after {
  content: "";
  position: absolute;
  inset: auto 12% 3%;
  z-index: 0;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.74), transparent 68%);
  filter: blur(15px);
}
.webgl-fallback-wide { inset: 10% 4% }
.webgl-fallback-wide i {
  width: 21%;
  border-radius: 22%;
  transform: translateX(calc((var(--i) - 1.5) * 118%)) rotateX(58deg) rotateZ(-18deg) translateZ(calc(var(--i) * 18px));
}
.trust-engine-caption { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; max-width: 980px; margin: 0 auto; padding: 28px 0 8px }
.trust-engine-caption strong { max-width: 18ch; font-size: clamp(23px, 2.2vw, 34px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 480 }
.trust-engine-caption span { padding-top: 4px; color: var(--fg-2); font-size: 15px; line-height: 1.7 }

@media (max-width: 1023px) {
  .hero-art { grid-column: 1 / -1; min-height: 680px; margin: 28px 0 0; grid-template-columns: minmax(0, 1fr) 164px }
  .hero-art-object { max-height: 680px }
  .hero-signal-field { inset: 7% 158px 10% -4% }
  .compatibility-inner { grid-template-columns: 1fr; gap: 24px }
  .compatibility-inner > p { max-width: none }
  .trust-engine-caption { gap: 36px }
}

@media (max-width: 767px) {
  .hero-art { min-height: 0; grid-template-columns: 1fr; margin-top: 26px }
  .hero-art-object { height: min(118vw, 590px); min-height: 450px }
  .hero-signal-field { inset: 0 0 30% -10%; opacity: .58 }
  .signal-field-key { display: none }
  .hero-art-object::after { inset: 11% 3% }
  .hero-art-rail { margin-top: -8px; padding: 20px 0 0; border-top: 1px solid var(--line-strong); border-left: 0 }
  .hero-art-rail > p { display: flex; justify-content: space-between; margin-bottom: 24px }
  .hero-art-rail ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
  .hero-art-rail li { grid-template-columns: 1fr; gap: 7px }
  .hero-art-rail li::before { display: none }
  .hero-art-rail li > span { grid-row: auto }
  .hero-art-rail small { display: none }
  .compatibility { padding: 26px 0 54px }
  .compatibility ul { justify-content: flex-start; width: calc(100% + var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent) }
  .compatibility ul::-webkit-scrollbar { display: none }
  .compatibility strong { font-size: 17px }
  .trust-engine { margin-top: 38px }
  .trust-engine-stage { aspect-ratio: 1.28; margin-inline: calc(-1 * var(--gutter)); background-size: 34px 34px, 34px 34px, auto }
  .trust-engine-caption { grid-template-columns: 1fr; gap: 18px; padding-top: 18px }
  .trust-engine-caption span { font-size: 14px }
}

@media (max-width: 480px) {
  .hero-art-object { height: 116vw; min-height: 420px }
  .hero-art-rail ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px }
  .trust-engine-stage { aspect-ratio: 1.12 }
}

@media (prefers-reduced-motion: reduce) {
  .hero-webgl canvas, .trust-webgl canvas { transition: none }
}

/* --------------------------------------------------------------------------
 * Verified evolution system: product contrast, outcome branches, guard lab,
 * artifact registry, and release evidence. Every mark below carries product
 * meaning; there are no decorative feature-card grids.
 * ----------------------------------------------------------------------- */

.hero-cli-shell {
  position: relative;
  max-width: 552px;
  margin-top: 28px;
}
.hero-cli {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(6, 7, 9, .72);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.hero-cli summary {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 18px;
  gap: 5px 16px;
  align-items: center;
  padding: 13px 92px 13px 16px;
  list-style: none;
  cursor: pointer;
}
.hero-cli summary::-webkit-details-marker { display: none }
.hero-cli summary::after { content: "+"; grid-column: 3; grid-row: 1 / 3; color: var(--fg-2); font: 400 17px/1 var(--font-mono); transition: transform var(--fast) var(--ease) }
.hero-cli[open] summary { border-bottom: 1px solid var(--line) }
.hero-cli[open] summary::after { transform: rotate(45deg) }
.hero-cli-copy { position: absolute; z-index: 2; top: 8px; right: 34px; height: 34px; font-size: 11px }
.hero-cli-label { grid-row: 1 / 3; color: var(--fg-3); font: 500 9px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase }
.hero-cli summary > code { color: var(--fg-0); font: 500 12px/1.3 var(--font-mono) }
.hero-cli summary > code span { color: var(--accent) }
.hero-cli-out { color: var(--accent); font: 500 10px/1.35 var(--font-mono); letter-spacing: .02em }
.hero-cli .hero-cli-full { max-height: 238px; padding: 14px 16px 16px; overflow: auto; border: 0; font-size: 10px; line-height: 1.65 }

.webgl-fallback { inset: 4% 2% }
.webgl-fallback img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: .78; filter: saturate(.78) contrast(1.05) }
.webgl-fallback-wide { inset: 3% 4% }
.webgl-fallback-wide img { transform: rotate(90deg) scale(.78); opacity: .7 }

.hero-art { position: relative }
.hero-art-rail li { display: block }
.hero-art-rail li button {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 2px 8px;
  width: 100%;
  min-height: 44px;
  margin: -8px 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.hero-art-rail li button > span { grid-row: 1 / 3; color: var(--fg-3); font: 500 9px/1.3 var(--font-mono) }
.hero-art-rail li button:hover strong,
.hero-art-rail li button[aria-pressed="true"] strong { color: var(--fg-0) }
.hero-art-rail li button[aria-pressed="true"] small { color: var(--fg-1) }

.hero-status {
  position: absolute;
  z-index: 4;
  left: 24px;
  right: 174px;
  bottom: 20px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(8, 10, 13, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hero-status li { min-width: 0; padding: 10px 11px; border-right: 1px solid var(--line) }
.hero-status li:last-child { border-right: 0 }
.hero-status span, .hero-status em { display: block; font: 500 8px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase }
.hero-status span { color: var(--fg-3) }
.hero-status b { display: block; overflow: hidden; margin-top: 7px; color: var(--fg-1); font: 500 10px/1.2 var(--font-mono); text-overflow: ellipsis; white-space: nowrap }
.hero-status em { margin-top: 4px; color: var(--warn); font-style: normal; letter-spacing: .03em; text-transform: none }
.hero-status .is-fail em { color: var(--danger) }
.hero-status .is-pass em { color: var(--accent) }
.js .hero-status li { opacity: 0; transform: translateY(8px); animation: hero-status-in 440ms var(--ease-out) forwards; animation-delay: calc(520ms + var(--s, 0) * 360ms) }
.js .hero-status li:nth-child(1) { --s: 0 }
.js .hero-status li:nth-child(2) { --s: 1 }
.js .hero-status li:nth-child(3) { --s: 2 }
.js .hero-status li:nth-child(4) { --s: 3 }
.js .hero-status li:nth-child(5) { --s: 4 }
@keyframes hero-status-in { to { opacity: 1; transform: none } }

.problem, .branches, .guard-lab, .artifacts, .evidence-proof {
  padding-block: var(--section-y);
  border-bottom: 1px solid var(--line);
}
.problem { background: linear-gradient(180deg, var(--bg-0), #0b0d11 22%, #0b0d11 78%, var(--bg-0)) }
.problem-head, .branches-head, .guard-head, .artifacts-head, .proof-head { max-width: 820px }
.problem-head h2, .branches-head h2, .guard-head h2, .artifacts-head h2, .proof-head h2 { max-width: 13.4em }

.compare-system {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px minmax(0, 1fr);
  align-items: stretch;
  margin-top: 64px;
}
.compare-side { position: relative; padding: 28px; border: 1px solid var(--line-strong); background: rgba(17, 19, 24, .68) }
.compare-memory { border-radius: var(--r-lg) 0 0 var(--r-lg) }
.compare-evolution { border-radius: 0 var(--r-lg) var(--r-lg) 0; box-shadow: inset 0 1px rgba(138, 180, 248, .06), 0 24px 90px -60px rgba(138, 180, 248, .42) }
.compare-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line) }
.compare-title h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.025em }
.compare-side ul { display: grid }
.compare-side li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line) }
.compare-side li:last-child { border-bottom: 0; padding-bottom: 0 }
.compare-side li > span { color: var(--fg-3); font: 500 10px/1.4 var(--font-mono) }
.compare-side strong, .compare-side small { display: block }
.compare-side strong { color: var(--fg-0); font-size: 15px; line-height: 1.35; font-weight: 520 }
.compare-side small { margin-top: 6px; color: var(--fg-2); font-size: 13px; line-height: 1.5 }
.compare-transfer { position: relative; display: grid; place-items: center; overflow: hidden; border-block: 1px solid var(--line-strong); background: #0d1015 }
.compare-transfer::before, .compare-transfer::after { content: ""; position: absolute; left: 50%; width: 1px; height: calc(50% - 34px); background: var(--line-strong) }
.compare-transfer::before { top: 0 }
.compare-transfer::after { bottom: 0 }
.compare-transfer i { width: 40px; height: 1px; background: linear-gradient(90deg, var(--fg-3), var(--accent-2)); box-shadow: 20px 0 var(--accent-2) }
.compare-transfer i::after { content: ""; display: block; width: 7px; height: 7px; margin: -3px 0 0 36px; border-top: 1px solid var(--accent-2); border-right: 1px solid var(--accent-2); transform: rotate(45deg) }
.compare-transfer span { position: absolute; top: calc(50% + 18px); color: var(--fg-3); font: 500 8px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; writing-mode: vertical-rl }
.compare-foot { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 12px; margin-top: 26px; color: var(--fg-2); font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase }
.compare-foot i { height: 1px; background: linear-gradient(90deg, var(--line-strong), var(--accent-line)) }

.branches { background: var(--panel-deep) }
.branch-console { margin-top: 58px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: #090b0e; box-shadow: var(--e-3) }
.branch-switch { display: flex; min-height: 62px; padding: 8px; border-bottom: 1px solid var(--line); background: #11141a }
.branch-switch button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--fg-2); font: 500 13px/1 var(--font-sans); cursor: pointer }
.branch-switch button[aria-selected="true"] { background: var(--bg-3); color: var(--fg-0); box-shadow: inset 0 0 0 1px var(--line) }
.branch-led { width: 7px; height: 7px; border-radius: 50% }
.branch-led.is-green { background: var(--accent); box-shadow: 0 0 14px rgba(91,208,138,.42) }
.branch-led.is-red { background: var(--danger); box-shadow: 0 0 14px rgba(238,123,114,.4) }
.branch-panels { min-height: 410px }
.branch-panel { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr); gap: 36px; align-items: center; padding: 46px }
.branch-panel[hidden] { display: none }
.branch-flow { display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr 42px 1fr 42px 1fr; align-items: center }
.branch-flow > span { position: relative; min-height: 128px; padding: 18px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--panel-raised) }
.branch-flow > span::after { content: ""; position: absolute; inset: auto 12px 10px; height: 2px; background: var(--accent); transform-origin: left; opacity: .56 }
.branch-flow-fail > span::after { background: var(--danger) }
.branch-flow > b { height: 1px; background: linear-gradient(90deg, var(--line-strong), var(--accent-line)); position: relative }
.branch-flow-fail > b { background: linear-gradient(90deg, var(--danger-line), var(--warn-line)) }
.branch-flow > b::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); color: var(--fg-2) }
.branch-flow i, .branch-flow strong, .branch-flow small { display: block }
.branch-flow i { color: var(--fg-3); font: 500 9px/1 var(--font-mono); font-style: normal }
.branch-flow strong { margin-top: 20px; color: var(--fg-0); font-size: 14px; line-height: 1.2; font-weight: 520 }
.branch-flow small { margin-top: 8px; color: var(--fg-2); font: 400 10px/1.35 var(--font-mono) }
.branch-receipt { padding: 24px; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-soft) }
.branch-receipt.is-failure { border-color: var(--danger-line); background: var(--danger-soft) }
.branch-receipt > code { display: block; margin-top: 18px; color: var(--fg-0); font: 500 15px/1.3 var(--font-mono) }
.branch-receipt p { margin-top: 14px; color: var(--fg-0); font-size: 17px; line-height: 1.4 }
.branch-receipt small { display: block; margin-top: 16px; color: var(--fg-2); font: 400 11px/1.5 var(--font-mono) }
.branch-note { padding: 16px 46px; border-top: 1px solid var(--line); color: var(--fg-2); font-size: 12px; line-height: 1.6 }
.branch-note .tag { margin-right: 10px }

.guard-lab { background: linear-gradient(180deg, var(--bg-0), #0c1016 38%, #0b0e13) }
.guard-simulator { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.6fr); margin-top: 60px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: #090b0f; box-shadow: var(--e-3) }
.guard-controls { padding: 28px; border-right: 1px solid var(--line); background: #101319 }
.guard-controls fieldset { min-width: 0; border: 0 }
.guard-controls fieldset + fieldset { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line) }
.guard-controls legend, .guard-step { color: var(--fg-1); font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase }
.guard-controls legend span, .guard-step > span { margin-right: 9px; color: var(--fg-3) }
.task-picker button, .action-picker button { display: block; width: 100%; min-height: 46px; margin-top: 8px; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--fg-2); text-align: left; cursor: pointer; transition: background-color var(--d-instant), border-color var(--d-instant), color var(--d-instant) }
.task-picker button:hover, .action-picker button:hover { color: var(--fg-0); background: var(--bg-3) }
.task-picker button[aria-pressed="true"], .action-picker button[aria-pressed="true"] { border-color: var(--accent-2-line); background: var(--accent-2-soft); color: var(--fg-0) }
.action-picker code { display: inline-flex; min-width: 45px; margin-right: 8px; color: var(--accent-2); font: 500 10px/1 var(--font-mono) }
.guard-output { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(270px, .75fr); min-width: 0 }
.recall-stack, .guard-verdict { padding: 30px }
.recall-stack { border-right: 1px solid var(--line) }
.guard-step small { float: right; color: var(--fg-3); font: inherit }
.recall-stack ol { display: grid; gap: 8px; margin-top: 26px }
.recall-stack li { display: grid; grid-template-columns: 22px auto minmax(24px, 1fr) auto; gap: 10px; align-items: center; min-height: 54px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-deep) }
.recall-stack li > span, .recall-stack li strong, .recall-stack li small { font: 500 10px/1 var(--font-mono) }
.recall-stack li > span, .recall-stack li small { color: var(--fg-3) }
.recall-stack li code { color: var(--fg-1); font: 500 11px/1.2 var(--font-mono); overflow-wrap: anywhere }
.recall-stack li i { height: 2px; background: var(--line-strong); transform-origin: left }
.recall-stack li:nth-child(1) i { background: var(--accent) }
.recall-stack li:nth-child(2) i { background: linear-gradient(90deg, var(--accent) 82%, var(--line) 82%) }
.recall-stack li:nth-child(3) i { background: linear-gradient(90deg, var(--accent) 76%, var(--line) 76%) }
.recall-stack li strong { color: var(--fg-1) }
.recall-stack li small { grid-column: 2 / -1; margin-top: -5px }
.recall-boundary { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 28px; color: var(--fg-3); font: 500 9px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase }
.recall-boundary i { height: 1px; background: repeating-linear-gradient(90deg, var(--warn) 0 6px, transparent 6px 11px) }
.guard-verdict { align-self: stretch }
.verdict-mark { display: flex; align-items: center; gap: 14px; margin-top: 38px }
.verdict-mark i { position: relative; width: 36px; height: 36px; border: 1px solid var(--accent-line); border-radius: 50%; background: var(--accent-soft) }
.verdict-mark i::before { content: ""; position: absolute; left: 10px; top: 8px; width: 9px; height: 14px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) }
.verdict-mark strong { color: var(--accent); font-size: 30px; line-height: 1; letter-spacing: -.04em; font-weight: 480 }
.guard-verdict > p:not(.guard-step) { min-height: 94px; margin-top: 22px; color: var(--fg-1); font-size: 14px; line-height: 1.65 }
.guard-verdict dl { margin-top: 24px; border-top: 1px solid var(--line) }
.guard-verdict dl div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.guard-verdict dt, .guard-verdict dd { color: var(--fg-2); font: 500 10px/1.4 var(--font-mono) }
.guard-verdict dd { color: var(--fg-1); text-align: right }
.guard-verdict[data-guard-verdict="deny"] .verdict-mark i,
.guard-verdict[data-guard-verdict="unknown"] .verdict-mark i { border-color: var(--danger-line); background: var(--danger-soft) }
.guard-verdict[data-guard-verdict="deny"] .verdict-mark strong,
.guard-verdict[data-guard-verdict="unknown"] .verdict-mark strong { color: var(--danger) }
.guard-verdict[data-guard-verdict="deny"] .verdict-mark i::before,
.guard-verdict[data-guard-verdict="unknown"] .verdict-mark i::before { left: 16px; top: 9px; width: 1px; height: 17px; border: 0; background: var(--danger); transform: rotate(45deg); box-shadow: 0 0 0 var(--danger) }
.guard-verdict[data-guard-verdict="deny"] .verdict-mark i::after,
.guard-verdict[data-guard-verdict="unknown"] .verdict-mark i::after { content: ""; position: absolute; left: 16px; top: 9px; width: 1px; height: 17px; background: var(--danger); transform: rotate(-45deg) }
.guard-verdict[data-guard-verdict="approval"] .verdict-mark i { border-color: var(--warn-line); background: var(--warn-soft) }
.guard-verdict[data-guard-verdict="approval"] .verdict-mark strong { color: var(--warn) }
.guard-verdict[data-guard-verdict="approval"] .verdict-mark i::before { left: 15px; top: 9px; width: 0; height: 16px; border: 0; border-left: 2px solid var(--warn); transform: none }
.guard-verdict[data-guard-verdict="approval"] .verdict-mark i::after { content: ""; position: absolute; left: 15px; top: 26px; width: 2px; height: 2px; border-radius: 50%; background: var(--warn) }
.guard-verdict[data-guard-verdict="modify"] .verdict-mark i { border-color: var(--info-line); background: var(--info-soft) }
.guard-verdict[data-guard-verdict="modify"] .verdict-mark strong { color: var(--info) }
.guard-verdict[data-guard-verdict="modify"] .verdict-mark i::before { left: 10px; top: 16px; width: 15px; height: 1px; border: 0; background: var(--info); transform: none; box-shadow: 0 -5px var(--info), 0 5px var(--info) }
.guard-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 16px 28px; border-top: 1px solid var(--line); color: var(--fg-3); font: 500 9px/1.2 var(--font-mono); text-transform: uppercase }
.guard-legend span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor }
.guard-legend .v-allow { color: var(--accent) }.guard-legend .v-deny { color: var(--danger) }.guard-legend .v-ask { color: var(--warn) }.guard-legend .v-modify { color: var(--info) }

.adapter-console { margin: 38px 0 26px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-deep) }
.adapter-tabs { display: flex; min-width: 0; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin }
.adapter-tabs button { flex: none; min-height: 50px; padding: 0 16px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--fg-2); font: 500 12px/1 var(--font-sans); cursor: pointer }
.adapter-tabs button[aria-selected="true"] { color: var(--fg-0); background: var(--bg-2); box-shadow: inset 0 -2px var(--accent) }
.adapter-tabs button:disabled { color: var(--fg-3); cursor: not-allowed }
.adapter-tabs small { margin-left: 7px; color: var(--fg-3); font: 500 8px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase }
.adapter-tabs button:first-child small { color: var(--accent) }
.adapter-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; min-height: 76px; padding: 16px 18px }
.adapter-panel[hidden] { display: none }
.adapter-panel p { color: var(--fg-2); font-size: 13px; line-height: 1.5 }.adapter-panel p span { color: var(--fg-0); margin-right: 8px }
.adapter-panel code { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-sunken); color: var(--fg-1); font: 500 11px/1.2 var(--font-mono) }

.artifacts {
  overflow: hidden;
  background:
    radial-gradient(72% 38% at 68% 34%, rgba(114,179,234,.045), transparent 72%),
    var(--panel-deep);
}
html:not(.js) .artifact-atlas { display: none }
.artifact-atlas {
  display: grid;
  grid-template-columns: minmax(250px, .64fr) minmax(0, 1.8fr);
  margin-top: 58px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: #090b0e;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 40px 110px -72px rgba(114,179,234,.72);
}
.artifact-atlas-copy {
  position: relative;
  z-index: 2;
  padding: 30px 28px;
  border-right: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(18,21,27,.96), rgba(12,14,18,.92));
}
.artifact-atlas-copy::after {
  content: "";
  position: absolute;
  inset: auto 28px 92px;
  height: 1px;
  background: linear-gradient(90deg, var(--info-line), transparent);
}
.artifact-atlas-k {
  color: var(--info);
  font: 500 9px/1.4 var(--font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.artifact-atlas-copy h3 { max-width: 8.5ch; margin-top: 34px; font-size: clamp(28px, 2.7vw, 42px); line-height: 1.02; letter-spacing: -.045em }
.artifact-atlas-copy > p:not(.artifact-atlas-k, .artifact-atlas-status) { margin-top: 22px; color: var(--fg-2); font-size: 13px; line-height: 1.65 }
.artifact-atlas-status { position: absolute; inset: auto 28px 28px; display: flex; align-items: center; justify-content: space-between; gap: 14px }
.artifact-atlas-status span { color: var(--fg-3); font: 500 9px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase }
.artifact-atlas-status code { overflow-wrap: anywhere; color: var(--accent); font: 500 10px/1.25 var(--font-mono); text-align: right }
.artifact-atlas-stage {
  position: relative;
  min-width: 0;
  height: 540px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    radial-gradient(circle at 50% 49%, rgba(114,179,234,.075), transparent 26%);
  background-size: 40px 40px, 40px 40px, auto;
}
.artifact-atlas-stage::before,
.artifact-atlas-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.artifact-atlas-stage::before { inset: 0; box-shadow: inset 0 0 90px 22px rgba(6,7,9,.7) }
.artifact-atlas-stage::after { left: 50%; top: 49%; width: 1px; height: 76%; background: linear-gradient(transparent, var(--line-strong), transparent); transform: translate(-50%, -50%) }
.artifact-atlas-routes { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible }
.artifact-atlas-routes path {
  fill: none;
  stroke: rgba(161,161,170,.22);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: stroke 320ms ease, opacity 320ms ease, stroke-width 320ms ease;
}
.artifact-atlas-routes path::selection { background: transparent }
.artifact-atlas-routes path.is-active { stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 6 9; opacity: .9 }
.artifact-atlas-routes path[data-artifact-route="guard"].is-active { stroke: var(--warn) }
.artifact-atlas-routes path[data-artifact-route="tombstone"].is-active { stroke: var(--danger) }
.atlas-orbit { fill: none; stroke: rgba(114,179,234,.23); stroke-width: 1; stroke-dasharray: 2 9; vector-effect: non-scaling-stroke }
.atlas-orbit-inner { stroke: rgba(91,208,138,.2); stroke-dasharray: 12 7 }
.artifact-atlas-core {
  position: absolute;
  left: 50%;
  top: 49%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 172px;
  height: 172px;
  border: 1px solid rgba(114,179,234,.25);
  border-radius: 50%;
  background: radial-gradient(circle, #161c25 0 19%, rgba(12,15,20,.92) 20% 54%, rgba(9,11,14,.72) 55%);
  box-shadow: inset 0 0 34px rgba(114,179,234,.05), 0 0 60px rgba(114,179,234,.035);
  transform: translate(-50%, -50%);
}
.artifact-atlas-core::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(91,208,138,.22); border-radius: 42% 58% 49% 51%; transform: rotate(18deg) }
.artifact-atlas-core i { position: absolute; width: 84%; height: 28%; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; transform: rotate(calc((var(--i) - 1) * 58deg)) }
.artifact-atlas-core i:nth-child(1) { --i:0 }.artifact-atlas-core i:nth-child(2) { --i:1 }.artifact-atlas-core i:nth-child(3) { --i:2 }
.artifact-atlas-core span,
.artifact-atlas-core em { position: absolute; color: var(--fg-3); font: 500 7px/1 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; font-style: normal }
.artifact-atlas-core span { top: 51px }.artifact-atlas-core em { bottom: 48px; color: var(--accent) }
.artifact-atlas-core strong { color: var(--fg-0); font: 500 15px/1 var(--font-mono); letter-spacing: -.02em }
.artifact-node {
  --node-color: var(--info);
  position: absolute;
  left: calc(var(--nx) * 1%);
  top: calc(var(--ny) * 1%);
  z-index: 3;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  width: min(190px, 24%);
  min-height: 64px;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(14,17,22,.92);
  color: var(--fg-2);
  text-align: left;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 12px 30px -24px #000;
  transition: border-color var(--d-fast) ease, background-color var(--d-fast) ease, color var(--d-fast) ease, transform var(--d-spring) var(--spring), box-shadow var(--d-fast) ease;
}
.artifact-node::before { content: ""; position: absolute; left: -4px; top: calc(50% - 4px); width: 7px; height: 7px; border: 1px solid var(--node-color); border-radius: 50%; background: #0e1116 }
.artifact-node:hover { border-color: var(--line-hover); color: var(--fg-0); transform: translate(-50%, -50%) translateY(-2px) }
.artifact-node.is-active { border-color: color-mix(in srgb, var(--node-color) 52%, transparent); background: color-mix(in srgb, var(--node-color) 9%, #0e1116); color: var(--fg-0); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 0 1px color-mix(in srgb, var(--node-color) 8%, transparent), 0 18px 42px -30px var(--node-color) }
.artifact-node.is-active::before { background: var(--node-color); box-shadow: 0 0 12px color-mix(in srgb, var(--node-color) 52%, transparent) }
.artifact-node > span { grid-row: 1 / 3; color: var(--fg-3); font: 500 8px/1.3 var(--font-mono) }
.artifact-node code { min-width: 0; overflow: hidden; color: inherit; font: 500 10px/1.3 var(--font-mono); text-overflow: ellipsis; white-space: nowrap }
.artifact-node small { margin-top: 5px; color: var(--fg-3); font-size: 10px; line-height: 1.2 }
.node-skill { --node-color: var(--accent) }
.node-guard { --node-color: var(--warn) }
.node-evidence { --node-color: var(--warn) }
.node-tombstone { --node-color: var(--danger) }
.artifact-atlas + .artifact-browser { margin-top: 26px }

@media (prefers-reduced-motion: no-preference) {
  .artifact-atlas.is-in .artifact-atlas-routes path.is-active { animation: artifact-route-flow 2s linear infinite }
  .artifact-atlas.is-in .artifact-atlas-core i { animation: artifact-core-orbit 16s linear infinite }
  .artifact-atlas.is-in .artifact-atlas-core i:nth-child(2) { animation-direction: reverse; animation-duration: 21s }
  .artifact-atlas.is-in .artifact-atlas-core i:nth-child(3) { animation-duration: 25s }
}
@keyframes artifact-route-flow { to { stroke-dashoffset: -30 } }
@keyframes artifact-core-orbit { to { rotate: 360deg } }

.artifact-browser { display: grid; grid-template-columns: minmax(250px, .65fr) minmax(0, 1.55fr); margin-top: 58px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: #0a0c10; box-shadow: var(--e-3) }
.artifact-index { padding: 12px; border-right: 1px solid var(--line); background: #101319 }
.artifact-index button { display: grid; grid-template-columns: 24px minmax(0, 1fr); width: 100%; min-height: 66px; padding: 12px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--fg-2); text-align: left; cursor: pointer }
.artifact-index button:hover { background: var(--bg-3) }
.artifact-index button[aria-selected="true"] { border-color: var(--accent-2-line); background: var(--accent-2-soft); color: var(--fg-0) }
.artifact-index button > span { grid-row: 1 / 3; color: var(--fg-3); font: 500 9px/1.3 var(--font-mono) }
.artifact-index code { overflow-wrap: anywhere; color: inherit; font: 500 12px/1.2 var(--font-mono) }
.artifact-index small { margin-top: 6px; color: var(--fg-3); font-size: 11px; line-height: 1.2 }
.artifact-inspector { min-width: 0 }
.artifact-panel { min-height: 564px; padding: 36px }
.js .artifact-panel:not(.is-active) { display: none }
.artifact-panel-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 26px; border-bottom: 1px solid var(--line) }
.artifact-panel-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 12px }
.artifact-panel-head code { color: var(--fg-0); font: 500 14px/1.2 var(--font-mono) }
.artifact-panel-head > span { color: var(--fg-3); font: 500 9px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase }
.artifact-panel h3 { max-width: 22ch; margin-top: 48px; font-size: clamp(28px, 3vw, 44px); line-height: 1.04; letter-spacing: -.04em; font-weight: 480 }
.artifact-summary { max-width: 42em; margin-top: 18px; color: var(--fg-1); font-size: 15px; line-height: 1.65 }
.artifact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--line); border-left: 1px solid var(--line) }
.artifact-fields div { min-height: 72px; padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.artifact-fields dt { color: var(--fg-3); font: 500 9px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase }
.artifact-fields dd { margin-top: 9px; color: var(--fg-1); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere }
.artifact-panel-tombstone { background: linear-gradient(135deg, rgba(238,123,114,.035), transparent 60%) }

.evidence-proof { background: #0d1015 }
.proof-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 58px; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong) }
.proof-ledger article { display: flex; flex-direction: column; min-height: 310px; padding: 26px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background: rgba(17,20,26,.52) }
.proof-k { color: var(--fg-3); font: 500 9px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase }
.proof-ledger strong { margin-top: 38px; color: var(--fg-0); font-size: clamp(34px, 3.4vw, 50px); line-height: .95; letter-spacing: -.05em; font-weight: 460 }
.proof-ledger strong small { color: var(--fg-2); font-size: 13px; letter-spacing: 0; font-weight: 500 }
.proof-ledger p { margin-top: 22px; color: var(--fg-2); font-size: 13px; line-height: 1.6 }
.proof-ledger a { align-self: flex-start; margin-top: auto; padding-top: 22px; color: var(--fg-1); font: 500 11px/1.2 var(--font-mono); text-decoration: underline; text-decoration-color: var(--line-hover); text-underline-offset: 4px }
.target-strip { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr); gap: 40px; align-items: center; margin-top: 20px; padding: 20px 24px; border: 1px solid var(--line); background: var(--panel-deep) }
.target-strip > p span { display: block; color: var(--fg-0); font-size: 13px }.target-strip > p { color: var(--fg-3); font: 500 10px/1.5 var(--font-mono); text-transform: uppercase }
.target-strip dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line) }
.target-strip dl div { padding: 10px 14px; background: var(--panel-deep) }
.target-strip dt { color: var(--fg-3); font: 500 9px/1.2 var(--font-mono); text-transform: uppercase }.target-strip dd { margin-top: 6px; color: var(--fg-1); font-size: 12px }

.faq-list summary { justify-content: flex-start }
.faq-cat { flex: 0 0 112px; color: var(--fg-3); font: 500 9px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase }
.faq-list summary .q { flex: 1 }
.faq-list summary .toggle { margin-left: auto }

@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-links a { padding-inline: 8px; font-size: 13px }
  .nav-pill { width: calc(100% - 8px); padding-left: 14px }
  .wordmark { font-size: 15px }
  .branch-panel { grid-template-columns: 1fr; gap: 28px }
  .branch-receipt { max-width: 520px }
}

@media (max-width: 1023px) {
  .compare-system { grid-template-columns: 1fr }
  .compare-memory, .compare-evolution { border-radius: var(--r-lg) }
  .compare-transfer { min-height: 84px; border: 0; border-inline: 1px solid var(--line-strong) }
  .compare-transfer::before, .compare-transfer::after { display: none }
  .compare-transfer span { top: auto; left: calc(50% + 28px); writing-mode: horizontal-tb }
  .compare-transfer i { transform: rotate(90deg) }
  .branch-panel { grid-template-columns: 1fr; padding: 34px 28px }
  .guard-simulator { grid-template-columns: 1fr }
  .guard-controls { border-right: 0; border-bottom: 1px solid var(--line) }
  .guard-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
  .guard-controls fieldset + fieldset { margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--line) }
  .artifact-atlas { grid-template-columns: 1fr }
  .artifact-atlas-copy { padding: 26px 28px; border-right: 0; border-bottom: 1px solid var(--line) }
  .artifact-atlas-copy h3 { max-width: none; margin-top: 22px }
  .artifact-atlas-copy > p:not(.artifact-atlas-k, .artifact-atlas-status) { max-width: 62ch }
  .artifact-atlas-copy::after { display: none }
  .artifact-atlas-status { position: static; justify-content: flex-start; margin-top: 22px }
  .artifact-atlas-stage { height: 520px }
  .artifact-browser { grid-template-columns: 1fr }
  .artifact-index { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: thin }
  .artifact-index button { flex: 0 0 210px }
  .proof-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .proof-ledger article { min-height: 270px }
}

@media (max-width: 767px) {
  .hero .cta-row { align-items: stretch }
  .hero .cta-row .btn { width: 100%; justify-content: center }
  .hero-cli-shell { margin-top: 22px }
  .hero-cli summary { grid-template-columns: minmax(0, 1fr) 18px; gap: 7px }
  .hero-cli-label { grid-row: auto }
  .hero-cli summary::after { grid-column: 2; grid-row: 1 / 4 }
  .hero-status { position: static; grid-template-columns: 1fr; margin-top: 18px; border-radius: var(--r-md) }
  .hero-status li { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; padding: 9px 11px; border-right: 0; border-bottom: 1px solid var(--line) }
  .hero-status li:last-child { border-bottom: 0 }.hero-status b, .hero-status em { margin-top: 0 }
  .hero-art-rail li button { grid-template-columns: 1fr; gap: 7px }
  .hero-art-rail li button > span { grid-row: auto }
  .problem, .branches, .guard-lab, .artifacts, .evidence-proof { padding-block: 86px }
  .compare-system, .branch-console, .guard-simulator, .artifact-browser, .proof-ledger { margin-top: 40px }
  .compare-side { padding: 22px 18px }.compare-transfer { min-height: 68px }
  .compare-foot { grid-template-columns: 1fr; gap: 8px; padding-left: 12px; border-left: 1px solid var(--line-strong) }.compare-foot i { display: none }
  .branch-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) }.branch-switch button { justify-content: center; padding-inline: 8px }
  .branch-panel { padding: 22px 16px }
  .branch-flow { grid-template-columns: 1fr; gap: 0 }
  .branch-flow > span { min-height: 90px }
  .branch-flow > b { width: 1px; height: 28px; margin-left: 28px; background: linear-gradient(var(--line-strong), var(--accent-line)) }
  .branch-flow-fail > b { background: linear-gradient(var(--danger-line), var(--warn-line)) }
  .branch-flow > b::after { right: -3px; top: 20px; transform: rotate(135deg) }
  .branch-note { padding: 14px 16px }
  .guard-controls { display: block; padding: 20px 16px }.guard-controls fieldset + fieldset { margin-top: 26px; padding: 24px 0 0; border-top: 1px solid var(--line); border-left: 0 }
  .guard-output { grid-template-columns: 1fr }.recall-stack { padding: 24px 16px; border-right: 0; border-bottom: 1px solid var(--line) }.guard-verdict { padding: 24px 16px }
  .guard-verdict > p:not(.guard-step) { min-height: 0 }.guard-legend { padding: 14px 16px }
  .adapter-panel { grid-template-columns: 1fr; gap: 12px }.adapter-panel code { overflow-x: auto; white-space: nowrap }
  .artifact-atlas { margin-top: 40px }
  .artifact-atlas-copy { padding: 24px 18px }
  .artifact-atlas-copy h3 { font-size: 31px }
  .artifact-atlas-status { align-items: flex-start; justify-content: space-between }
  .artifact-atlas-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; height: auto; padding: 16px; background-size: 32px 32px, 32px 32px, auto }
  .artifact-atlas-stage::after, .artifact-atlas-routes { display: none }
  .artifact-atlas-core { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: 100%; height: 150px; border-radius: var(--r-md); transform: none }
  .artifact-atlas-core::before { width: 108px; height: 108px; inset: 50% auto auto 50%; transform: translate(-50%, -50%) rotate(18deg) }
  .artifact-atlas-core i { width: 108px; height: 34px }
  .artifact-atlas-core span { top: 38px }.artifact-atlas-core em { bottom: 35px }
  .artifact-node { position: relative; left: auto; top: auto; width: 100%; min-width: 0; min-height: 70px; transform: none }
  .artifact-node:hover { transform: translateY(-2px) }
  .artifact-node::before { left: auto; right: 9px; top: 9px }
  .node-tombstone { grid-column: 1 / -1 }
  .artifact-panel { min-height: 0; padding: 24px 18px 28px }.artifact-panel h3 { margin-top: 32px }.artifact-fields { grid-template-columns: 1fr }.artifact-panel-head { align-items: flex-start }.artifact-panel-head > span { max-width: 80px; text-align: right }
  .proof-ledger { grid-template-columns: 1fr }.proof-ledger article { min-height: 250px }
  .target-strip { grid-template-columns: 1fr; gap: 18px }.target-strip dl { grid-template-columns: 1fr }
  .faq-cat { flex-basis: 78px }.faq-list summary { gap: 12px }
  .cta .cta-row { display: grid }.cta .cta-row .btn { width: 100%; justify-content: center }
}

@media (max-width: 419px) {
  .artifact-atlas-stage { grid-template-columns: 1fr }
  .artifact-atlas-core, .node-tombstone { grid-column: auto }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-status li { opacity: 1; transform: none; animation: none }
}

/* ================================================================
 * REDESIGN v2 — "Phosphor Blueprint" (2026-10-03).
 * Memorable-terminal energy on the shipped information architecture:
 * Archivo display type, JetBrains Mono voice, glyph-field canvas,
 * masked headline reveals, marquee proof strip, spotlight tilt cards.
 * Additive by design: nothing above this line was restyled in place,
 * and no selector used by the film / ladder / guard mechanics is
 * overridden here. Reduced-motion and no-JS states stay first-class.
 * ================================================================ */

/* ---- display type ---- */
#main h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.038em }
.hero h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.052em }
.proof-ledger strong, .numbers dd .v, .meter-cap .n { font-family: var(--font-display); font-variant-numeric: tabular-nums }

/* Headline lines rise inside their own masks (E4 teletype untouched). */
.hero h1 .hl { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em }
.hero h1 .hl > span { display: block; will-change: transform }
html.js:not(.is-ready) #hero-title .hl > span { transform: translateY(112%) }
html.js.is-ready #hero-title .hl > span { animation: hero-line var(--d-hero) var(--ease-out) both; animation-delay: calc(var(--hd, 70ms) + 0ms) }
html.js.is-ready #hero-title .hl:nth-child(2) > span { animation-delay: calc(var(--hd, 70ms) + 90ms) }
@keyframes hero-line {
  from { transform: translateY(112%) }
  to { transform: translateY(0) }
}

/* ---- hero entrance: staggered rise, gated on first frame ---- */
html.js:not(.is-ready) .hero-anim { opacity: 0 }
html.js.is-ready .hero-anim { animation: hero-rise var(--d-hero) var(--ease-out) both; animation-delay: var(--hd, 0ms) }
html.js.is-ready #hero-title.hero-anim { animation: none; opacity: 1 }
html.js.is-ready .hero-anim-art { animation-name: hero-art-in }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px) }
  to { opacity: 1; transform: none }
}
@keyframes hero-art-in {
  from { opacity: 0; transform: translateY(30px) scale(0.985) }
  to { opacity: 1; transform: none }
}

/* ---- glyph field: deterministic terminal rain behind the hero ---- */
.hero { position: relative; isolation: isolate }
.glyph-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 10%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 10%, #000 30%, transparent 78%) }
.glyph-field canvas { width: 100%; height: 100%; display: block; opacity: 0.55 }
.hero-grid { position: relative; z-index: 1 }

/* ---- reveal v2: masked wipe instead of a bare fade ---- */
.js .reveal { transform: translateY(24px) scale(0.996); clip-path: inset(0 0 10% 0);
  transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-spring) var(--spring), clip-path var(--d-reveal) var(--ease-out) }
.js .reveal.is-in { clip-path: inset(-2% 0 0 0) }
.js [data-stagger] > * { clip-path: inset(0 0 18% 0); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-spring) var(--spring), clip-path var(--d-slow) var(--ease-out) }
.js .is-in [data-stagger] > * { clip-path: inset(0 0 0 0) }

/* ---- nav: material deepens once the page moves ---- */
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none }
.nav-pill { transition: background-color var(--d-base) ease, border-color var(--d-base) ease, height var(--d-base) var(--ease-out) }
html.is-scrolled .nav-pill { height: 52px; background: var(--material-thick); border-color: var(--line-strong) }
html.is-scrolled .nav-cta .btn-go { box-shadow: 0 0 22px rgba(91, 208, 138, 0.28) }

/* ---- buttons: light sweeps the solid fill ---- */
@media (hover: hover) {
  .btn-solid { overflow: hidden; isolation: isolate }
  .btn-solid::before { content: ""; position: absolute; inset: -40% -30%; z-index: -1;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
    transform: translateX(-72%); transition: transform 650ms var(--ease-out) }
  .btn-solid:hover::before, .btn-solid:focus-visible::before { transform: translateX(72%) }
}

/* ---- section index: addressed like a log line ---- */
.section-index::before { content: "//"; color: var(--accent); letter-spacing: 0 }
.sec-head-center .section-index::before { content: none }

/* ---- compatibility marquee ---- */
.compatibility { overflow-x: clip }
.compatibility-inner { align-items: center }
.marquee { overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) }
.marquee-track { display: flex; width: max-content }
.marquee-track ul { display: flex; align-items: baseline; gap: 34px; padding-right: 34px }
.marquee-sep span { font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap }
html.js .marquee-track[data-spun] { animation: marquee 30s linear infinite }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused }
@keyframes marquee { to { transform: translateX(-50%) } }

/* ---- glyph dividers between acts ---- */
.glyph-divider { overflow: hidden; padding: 6px 0; user-select: none; -webkit-user-select: none }
.glyph-divider span { display: block; white-space: nowrap; text-align: center;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.32em; color: var(--fg-3); opacity: 0.8;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent) }

/* ---- terminals: scanlines + live LED ---- */
.term::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, var(--scanline) 3px 4px) }
.term-bar { position: relative }
.term-bar::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 2px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--beam); order: -1 }
.term-bar .term-title { margin-right: auto }

/* ---- spotlight tilt cards (pointer-fine only, JS arms .is-tilt) ---- */
html.is-tilt [data-tilt] { will-change: transform }
html.is-tilt [data-tilt] { --rx: 0deg; --ry: 0deg }
html.is-tilt [data-tilt] { transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 200ms ease-out, border-color var(--d-base) ease }
html.is-tilt.js .reveal.is-in[data-tilt] { transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) }
html.is-tilt [data-tilt]::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 65%);
  opacity: var(--spot-on, 0); transition: opacity var(--d-base) ease }
html.is-tilt [data-tilt]:hover { --spot-on: 1 }
/* The CTA card keeps its terminal scanlines under the spotlight. */
html.is-tilt .term[data-tilt]::after {
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 65%),
    repeating-linear-gradient(to bottom, transparent 0 3px, var(--scanline) 3px 4px) }
.plan-free, .artifact-inspector, .cta-card { position: relative }
.artifact-inspector { border-radius: var(--r-lg) }

/* ---- artifact atlas: the active route carries light ---- */
.artifact-atlas-routes path.is-active { filter: drop-shadow(0 0 5px currentColor) }
.artifact-node { transition: transform var(--d-spring) var(--spring), border-color var(--d-fast) ease, background-color var(--d-fast) ease }
.artifact-node.is-active { animation: node-settle 500ms var(--spring) }
@keyframes node-settle {
  0% { transform: translateY(3px) scale(0.99) }
  100% { transform: none }
}

/* ---- proof ledger: figures glow on entry ---- */
.js .proof-ledger article { position: relative }
.js .proof-ledger.is-in strong, .js .is-in .proof-ledger strong { animation: figure-glow 1.1s var(--ease-out) both }
@keyframes figure-glow {
  0% { text-shadow: 0 0 26px rgba(141, 240, 179, 0.55) }
  100% { text-shadow: 0 0 0 transparent }
}

/* ---- FAQ: the answer unfolds instead of popping ---- */
.faq-list details::details-content { height: 0; opacity: 0; overflow: clip;
  transition: height 340ms var(--ease-out), opacity 260ms ease, content-visibility 340ms }
.faq-list details[open]::details-content { height: auto; opacity: 1 }
.faq-list details[open] .q { color: var(--phosphor) }
.faq-list .q { transition: color var(--d-fast) ease }

/* ---- CTA card: a beam charges across on entry ---- */
.js .cta-card { position: relative }
.js .cta-card.is-in::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 3; width: 2px;
  background: linear-gradient(var(--accent-2), var(--accent)); box-shadow: 0 0 18px var(--beam);
  animation: beam-charge 1.2s var(--ease-out) both }
@keyframes beam-charge {
  from { transform: translateX(0); opacity: 1 }
  to { transform: translateX(calc(100vw)); opacity: 0 }
}

/* ---- footer wordmark: monumental close ---- */
.site-foot { position: relative; overflow: hidden }
.site-foot::after { content: "agentevo"; display: block; padding: 10px 0 0; text-align: center;
  font: 800 var(--t-wordmark)/0.8 var(--font-display); letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
  user-select: none; -webkit-user-select: none; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 95%) }

/* ---- responsive + access ---- */
@media (max-width: 1023px) {
  .compatibility-inner { grid-template-columns: 1fr; gap: 18px }
  .marquee-track ul { gap: 26px; padding-right: 26px }
}
@media (max-width: 767px) {
  .glyph-field canvas { opacity: 0.4 }
}
@media (prefers-reduced-motion: reduce) {
  html.js .hero-anim { animation: none !important; opacity: 1 !important; transform: none !important }
  html.js #hero-title .hl > span { animation: none !important; transform: none !important }
  html.js .marquee-track[data-spun] { animation: none; flex-wrap: wrap; width: auto }
  html.is-tilt [data-tilt], html.is-tilt.js .reveal.is-in[data-tilt] { transform: none }
  .js .reveal, .js [data-stagger] > * { clip-path: none }
  .faq-list details::details-content { transition: none; height: auto; opacity: 1 }
  .js .cta-card.is-in::before, .artifact-node.is-active, .js .proof-ledger.is-in strong { animation: none }
}
@media (scripting: none) {
  .hero-anim { opacity: 1 }
  #hero-title .hl > span { transform: none }
}
/* --------------------------------------------------------------------------
 * Quiet visual system
 * One sculptural fold in the hero, one editorial path in the architecture.
 * Negative space and material contrast carry the hierarchy.
 * ----------------------------------------------------------------------- */
body::before {
  background:
    radial-gradient(ellipse at 75% 8%, rgba(132, 157, 190, .052), transparent 46%),
    radial-gradient(ellipse at 12% 30%, rgba(115, 168, 136, .022), transparent 40%);
  background-size: auto;
  -webkit-mask-image: none;
  mask-image: none;
}

.section-index { gap: 12px; font-family: var(--font-sans); font-weight: 500; letter-spacing: .095em }
.section-index::before { content: none }
.section-index::after { width: 28px; background: currentColor; opacity: .65 }

.eyebrow {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg-2);
  letter-spacing: .13em;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent) }
.eyebrow .sq { display: none }

.hero {
  min-height: 880px;
  background:
    radial-gradient(ellipse 42% 58% at 79% 44%, rgba(72, 201, 164, .07), transparent 70%),
    radial-gradient(ellipse 31% 45% at 85% 58%, rgba(67, 143, 226, .07), transparent 73%),
    radial-gradient(ellipse 18% 24% at 91% 31%, rgba(226, 167, 86, .022), transparent 76%);
}
.hero::before { display: none }
.hero-grid { min-height: 640px }
.hero-copy { padding-top: 2px }
.hero .proof { margin-top: 28px; color: var(--fg-3) }

.hero-art {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-content: center;
  min-height: 680px;
  margin: -28px -76px -4px 0;
}
.hero-art-object {
  min-height: 680px;
  overflow: visible;
  background:
    radial-gradient(ellipse 48% 54% at 68% 56%, rgba(68, 154, 230, .075), transparent 72%),
    radial-gradient(ellipse 36% 42% at 62% 40%, rgba(78, 211, 169, .07), transparent 74%),
    radial-gradient(ellipse 20% 26% at 81% 29%, rgba(226, 167, 86, .02), transparent 76%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 98%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 98%, transparent);
}
.hero-art-object::before {
  inset: auto 8% 3% 27%;
  height: 20%;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .7), transparent 68%);
  filter: blur(18px);
  transform: none;
}
.hero-art-object::after {
  display: none;
}

.webgl-fallback { inset: 1% -3% 3% }
.webgl-fallback img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .97;
  filter: saturate(.92) contrast(1.06);
}

.trust-engine { margin-top: 56px }
.proof-path-stage {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, .075);
  background:
    radial-gradient(ellipse 54% 62% at 76% 32%, rgba(115, 164, 194, .07), transparent 72%),
    radial-gradient(ellipse 42% 48% at 24% 78%, rgba(104, 163, 128, .032), transparent 72%);
}
.proof-path-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bg-0), transparent 9%, transparent 91%, var(--bg-0));
}
.proof-path-line {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.proof-path-glow,
.proof-path-stroke {
  fill: none;
  stroke: url(#proof-path-gradient);
  stroke-linecap: round;
}
.proof-path-glow {
  stroke-width: 22;
  opacity: .13;
  filter: url(#proof-path-glow);
}
.proof-path-stroke { stroke-width: 2; opacity: .8 }
.proof-path-dots circle {
  fill: var(--bg-0);
  stroke: url(#proof-path-gradient);
  stroke-width: 2;
}

.proof-path-steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 500px;
  padding: 0 0;
}
.proof-path-steps li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
  padding-inline: clamp(12px, 2.1vw, 30px);
}
.proof-path-steps li:nth-child(1) { margin-top: 366px }
.proof-path-steps li:nth-child(2) { margin-top: 286px }
.proof-path-steps li:nth-child(3) { margin-top: 204px }
.proof-path-steps li:nth-child(4) { margin-top: 110px }
.proof-step-number {
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: rgba(9, 11, 14, .92);
  color: var(--fg-2);
  font: 500 9px/1 var(--font-sans);
  letter-spacing: .06em;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
}
.proof-path-steps div { min-width: 0; padding-top: 0; transform: translateY(24px) }
.proof-path-steps strong {
  display: block;
  color: var(--fg-0);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 520;
}
.proof-path-steps p {
  max-width: 21ch;
  margin-top: 7px;
  color: var(--fg-3);
  font-size: 11px;
  line-height: 1.5;
}

.trust-engine-caption {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}
.trust-engine-caption > p {
  display: grid;
  grid-template-columns: minmax(250px, .82fr) minmax(0, 1.18fr);
  gap: 64px;
  align-items: start;
  max-width: 940px;
  margin: 0 auto;
  padding: 31px 0 6px;
}
.trust-engine-caption > p strong {
  max-width: 19ch;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 480;
}
.trust-engine-caption > p span {
  padding-top: 2px;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 1023px) {
  .hero { min-height: auto }
  .hero-art {
    grid-column: 1 / -1;
    min-height: 660px;
    margin: 30px 0 0;
  }
  .hero-art-object { min-height: 660px }
}

@media (max-width: 767px) {
  .hero-art { min-height: 0; margin-top: 24px }
  .hero-art-object { height: min(118vw, 560px); min-height: 430px }

  .trust-engine { margin-top: 40px }
  .proof-path-stage {
    min-height: 0;
    overflow: visible;
    padding: 44px 0 8px;
    border-block: 1px solid rgba(255, 255, 255, .075);
    background: radial-gradient(ellipse 70% 45% at 0 50%, rgba(122, 157, 190, .065), transparent 76%);
  }
  .proof-path-stage::before {
    content: "";
    position: absolute;
    top: 48px;
    bottom: 36px;
    left: 19px;
    width: 1px;
    background: linear-gradient(#7c91aa, #a6b9d2 52%, #8bc6a3);
  }
  .proof-path-stage::after { display: none }
  .proof-path-line { display: none }
  .proof-path-steps {
    display: block;
    min-height: 0;
  }
  .proof-path-steps li,
  .proof-path-steps li:nth-child(n) {
    position: relative;
    gap: 16px;
    margin-top: 0;
    padding: 0 0 34px;
  }
  .proof-path-steps li:last-child { padding-bottom: 0 }
  .proof-step-number {
    position: relative;
    z-index: 2;
    flex-basis: 38px;
  }
  .proof-path-steps div { transform: none }
  .proof-path-steps p { max-width: 34ch; font-size: 12px }
  .trust-engine-caption > p {
    grid-template-columns: 1fr;
    gap: 15px;
    padding-top: 24px;
  }
  .trust-engine-caption > p span { font-size: 14px }
}

@media (max-width: 480px) {
  .hero-art-object { height: 116vw; min-height: 400px }
}

@media (prefers-reduced-transparency: reduce) {
  .proof-step-number { background: var(--panel-deep) }
}