@font-face { font-family: "Archivo"; src: url("/fonts/archivo-wdth.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/fonts/martian-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --night: #0b0908;
  --night-2: #15110e;
  --ember: #e8743b;
  --ember-hi: #f29a76;
  --ember-deep: #9a4422;
  --cream: #f3ece4;
  --mist: #c9bfb4;
  --dust: #8e847a;
  --paper: #ebe4da;
  --paper-2: #e2d9cd;
  --ink: #17120e;
  --ink-2: #4a4038;
  --ember-ink: #a5441a;
  --m: clamp(24px, 5vw, 88px);
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--night); color: var(--cream); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
code, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ember); color: var(--night); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ember); color: var(--night); padding: 10px 16px; border-radius: 8px; font-weight: 650; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
.display, .headline { font-family: var(--display); font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 620; letter-spacing: -0.035em; line-height: 0.92; margin: 0; text-wrap: balance; }
.display { font-size: clamp(2.8rem, 5.9vw, 7.4rem); }
.headline { font-size: clamp(2.2rem, 4.6vw, 5.4rem); }
.headline--xl { font-size: clamp(3rem, 9.4vw, 11rem); letter-spacing: -0.045em; line-height: 0.86; }
.ln { display: block; }
.motion .ln { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ln__i { display: inline-block; will-change: transform; }
.lede { font-size: clamp(1.05rem, 1.3vw, 1.32rem); line-height: 1.45; color: var(--mist); max-width: 34ch; margin: 1.3em 0 0; text-wrap: pretty; }
.fig { font-family: var(--mono); font-weight: 600; color: var(--cream); letter-spacing: -0.02em; }
.fig small { font-size: 0.6em; font-weight: 500; margin-left: 0.1em; }
.req { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--dust); margin: 14px 0 0; }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border-radius: 999px; background: var(--ember); color: var(--night); font: 650 16px/1 var(--sans); text-decoration: none; letter-spacing: -0.005em; transition: background-color .16s ease-out, transform .16s ease-out; box-shadow: 0 10px 40px -10px rgb(232 116 59 / .55), inset 0 1px 0 rgb(255 255 255 / .35); }
.btn:hover { background: var(--ember-hi); }
.btn:active { transform: translateY(1px); }
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; box-shadow: none; }
.btn--ink { background: var(--ink); color: var(--paper); box-shadow: none; }
.btn--ink:hover { background: #2b231d; }

/* ---------- Header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 var(--m); background: linear-gradient(rgb(11 9 8 / .72), rgb(11 9 8 / 0)); transition: background .3s, color .3s; }
.hdr.is-solid { background: rgb(11 9 8 / .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgb(255 236 220 / .06); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--display); font-variation-settings: "wdth" 112; letter-spacing: -0.01em; }
.mark { width: 26px; height: 26px; }
.hdr > .brand { margin-right: auto; }
.hdr .header-sections { margin-left: auto; }
.hdr .header-sections ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.hdr .header-sections a { display: block; padding: 8px 12px; border-radius: 999px; font-size: 14.5px; text-decoration: none; opacity: .82; }
.hdr .header-sections a:hover, .hdr .header-sections a.is-on { opacity: 1; background: rgb(255 255 255 / .08); }

/* ---------- The sky: CSS first paint, WebGL after ---------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 46% at 58% 64%, rgb(232 116 59 / .42), rgb(154 68 34 / .16) 45%, transparent 75%),
    radial-gradient(120% 70% at 50% 110%, #2a160c, transparent 60%),
    linear-gradient(#0b0908, #120c09 60%, #1a0f09); }
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.sky.is-live canvas { opacity: 1; }
.grain { position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.motion .grain { animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

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

/* ---------- STORY (motion) ---------- */
.motion .story { height: 1000vh; }
.motion .story__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.motion .cam { position: absolute; inset: 0; z-index: 0; perspective: 1800px; perspective-origin: 50% 40%; }
.motion .win { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; opacity: 0; will-change: transform, opacity, filter; }
.win img { width: 100%; height: auto; }
/* The captures carry macOS's own window shadow; the frame adds light only on the window itself. */
.win { isolation: isolate; }
.win::before { content: ""; position: absolute; left: var(--wl, 1.7%); top: var(--wt, 1.8%); right: var(--wr, 1.7%); bottom: var(--wb, 3.5%); border-radius: 12px; pointer-events: none; z-index: -1;
  box-shadow: 0 60px 120px -30px rgb(0 0 0 / .9), 0 40px 90px -50px rgb(232 116 59 / .45); }
.win::after { content: ""; position: absolute; left: var(--wl, 1.7%); top: var(--wt, 1.8%); right: var(--wr, 1.7%); bottom: var(--wb, 3.5%); border-radius: 12px; pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / .06), transparent 30%, transparent 72%, rgb(232 116 59 / .06)); box-shadow: inset 0 1px 0 rgb(255 226 205 / .14); }
.motion .win { -webkit-box-reflect: below -6px linear-gradient(transparent 76%, rgb(0 0 0 / .14)); }

/* A quiet area for the type: a warm scrim that rises only when a window reaches under the headline. */
.story__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: var(--scrim, 0);
  background: linear-gradient(90deg, rgb(11 9 8 / .9) 0%, rgb(11 9 8 / .74) 27%, rgb(11 9 8 / 0) 50%); }
.motion .beat { z-index: 2; }
.flare { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(40% 50% at var(--fx, 60%) 50%, rgb(255 214 170 / .95), rgb(232 116 59 / .5) 35%, transparent 70%); }

.motion .beat { position: absolute; left: var(--m); top: 50%; translate: 0 -50%; width: min(36vw, 600px); visibility: hidden; }
.motion .beat.is-on { visibility: visible; }
/* The h1 stays in the accessibility tree while the story plays (its lines are masked, not hidden). */
.motion .beat--hero { visibility: visible; }
.motion .beat--hero { top: auto; bottom: 7.5vh; translate: none; width: auto; right: var(--m); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.motion .beat--hero .display { font-size: clamp(2.6rem, 4.4vw, 6rem); }
.hero__cta { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.hero__cta .req { margin: 0; }
.motion .hero__cta { flex-direction: column; align-items: flex-end; gap: 14px; margin: 0 0 0.3em; flex: none; }
.motion .beat--docker { width: min(44vw, 720px); }
.term { margin: 30px 0 0; padding: 0; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.9; color: var(--cream); background: none; white-space: pre; }
.term .pr { color: var(--ember); margin-right: .6em; }

.rail { position: absolute; right: var(--m); top: 50%; translate: 0 -50%; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgb(243 236 228 / .3); text-align: right; }
.rail li { transition: color .3s; }
.rail li.is-on { color: var(--cream); }
.rail li.is-on::after { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--ember); margin-left: 10px; vertical-align: middle; }

/* ---------- PERFORMANCE: one pinned board (motion) ---------- */
.motion .perf { height: 660vh; }
.motion .perf__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.motion .perf__poster { display: none; }
.motion .pbeat { position: absolute; inset: 0; visibility: hidden; }
.motion .pbeat.is-on { visibility: visible; }
.motion .pbeat--intro { inset: auto var(--m) 12vh auto; width: min(62vw, 1100px); text-align: right; }
.motion .pbeat--intro .lede { margin-left: auto; }
.motion .board { position: absolute; inset: 0; pointer-events: none; }
.motion .board a, .motion .board code { pointer-events: auto; }
.board__legend { margin: 0; font: 500 clamp(11px, 0.8vw, 17px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); display: flex; align-items: center; gap: 12px; }
.motion .board__legend { position: absolute; left: var(--m); top: 12vh; }
.key::before { content: ""; display: inline-block; width: 26px; height: 8px; border-radius: 0 4px 4px 0; margin-right: 10px; vertical-align: 1px; }
.key--us { color: #ffd9b0; }
.key--us::before { background: linear-gradient(90deg, #9a4422, #e8743b, #fff1dc); box-shadow: 0 0 12px rgb(232 116 59 / .7); }
.key--them::before { background: linear-gradient(#9aa0a8, #4a4f57); }
.dot { color: var(--dust); }
.rows { list-style: none; margin: 0; padding: 0; }
.motion .row > * { position: absolute; left: 0; top: 0; margin: 0; will-change: transform, opacity; opacity: 0; }
.row__label { font: 600 clamp(12px, 0.95vw, 22px)/1.2 var(--mono); color: var(--cream); letter-spacing: -0.01em; white-space: nowrap; }
.row__label code { font: inherit; }
.motion .row__vals { opacity: 1; }
.motion .v { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity; }
.v .n, .v small { font-family: var(--mono); font-weight: 600; }
.v--us .n { font-size: clamp(1.05rem, 1.45vw, 1.8rem); letter-spacing: -0.04em; color: #fff3e6; text-shadow: 0 0 28px rgb(255 160 90 / .6); }
.v--us small { font-size: clamp(.7rem, .75vw, 1.05rem); color: var(--ember-hi); margin-left: .25em; }
.v--them .n { font-size: clamp(.95rem, 1.1vw, 1.3rem); color: var(--mist); letter-spacing: -0.03em; }
.v--them small { font-size: clamp(.65rem, .65vw, .95rem); color: var(--dust); margin-left: .25em; }
.row__x .x { display: block; font-family: var(--display); font-variation-settings: "wdth" 125; font-weight: 700; font-size: clamp(2.2rem, 4vw, 4.4rem); line-height: .9; letter-spacing: -0.05em;
  background: linear-gradient(180deg, #fff6ea 0%, #ffd2a1 35%, #f08a45 70%, #9a4422 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgb(232 116 59 / .35)); }
.motion .perf__method { position: absolute; left: var(--m); bottom: 5vh; margin: 0; font-size: 13px; color: var(--dust); max-width: 64ch; }

/* ---------- AGENTS ---------- */
.motion .agents__track { height: 320vh; }
.agents__stage { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 4vw; align-items: center; padding: 0 var(--m); }
.motion .agents__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.agents__copy .lede { max-width: 30ch; }
.tok { margin-top: 40px; display: grid; gap: 30px; }
.tok__q { margin: 0 0 10px; font: 600 13px/1.3 var(--mono); color: var(--cream); }
.tok__bar { position: relative; height: 26px; margin-top: 6px; }
.tok__fill { position: absolute; left: 0; top: 7px; height: 12px; width: calc(var(--f, 1) * var(--w, 1) * 62%); border-radius: 0 6px 6px 0; }
.tok__bar--us .tok__fill { background: linear-gradient(90deg, #9a4422, #e8743b, #ffd9a8); box-shadow: 0 0 16px rgb(232 116 59 / .55); }
.tok__bar--them .tok__fill { background: linear-gradient(#8a9099, #4a4f57); }
.tok__n { position: absolute; top: 3px; left: calc(var(--f, 1) * var(--w, 1) * 62% + 12px); font: 600 14px/1.3 var(--mono); color: var(--cream); white-space: nowrap; }
.tok__bar--them .tok__n { color: var(--mist); }
.tok__who { font: 500 12px/1 var(--sans); color: var(--dust); margin-left: 8px; }
.tok__who code { font: 500 11.5px/1 var(--mono); }
.tok__x { margin: 8px 0 0; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.tok__x span { font: 700 1.9rem/1 var(--display); font-variation-settings: "wdth" 125; letter-spacing: -0.04em; color: var(--ember-hi); text-transform: none; margin-right: 10px; vertical-align: -4px; }
.agents__shot { margin: 0; position: relative; }
.agents__cam { position: relative; transform-origin: 0 0; will-change: transform; }
.agents__cam img { width: 100%; height: auto; }
.hl { position: absolute; border-radius: 7px; border: 1.5px solid var(--ember); box-shadow: 0 0 0 4px rgb(232 116 59 / .16), 0 0 30px rgb(232 116 59 / .35); opacity: 0; }
.hl--diag { left: 20.3%; top: 52.4%; width: 76.9%; height: 3.2%; }
.hl--levels { left: 83.4%; top: 34.9%; width: 13.8%; height: 9.4%; }
.agents__cap { margin: 18px 0 0 3%; font-size: 14px; color: var(--dust); max-width: 70ch; }
.agents__cap code { font-size: .92em; color: var(--mist); }
.agents__facts { padding: clamp(80px, 12vh, 140px) var(--m) 0; max-width: 1640px; margin: 0 auto; }
.session { margin: 56px 0 0; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.45; color: var(--mist); max-width: 64ch; }
.session__k { font: 700 1.6em/1 var(--display); font-variation-settings: "wdth" 125; letter-spacing: -0.03em; color: var(--cream); margin-right: .2em; }
.session__fine { display: block; margin-top: 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.fine { font-size: 14px; color: var(--dust); margin: 20px 0 0; max-width: 72ch; }
.fine code, .card code, .limits code, .report code { font-size: .9em; color: var(--cream); background: rgb(255 255 255 / .06); padding: .06em .36em; border-radius: 5px; }

/* ---------- RELEASE: the same dark ground ---------- */
.rest { position: relative; z-index: 2; background: transparent; }
.rest a { text-decoration-color: var(--ember); text-underline-offset: 4px; }
.rest a:hover { text-decoration-thickness: 2px; }
.sec { padding: clamp(120px, 18vh, 200px) var(--m) 0; max-width: 1640px; margin: 0 auto; }
.sec .headline { max-width: 16ch; }
.sec__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px 6vw; align-items: end; }
.sec__head .lede { margin: 0; max-width: 46ch; }
.cards { list-style: none; margin: 64px 0 0; padding: 0; display: grid; gap: 14px; }
.cards--sec { grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: c; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.card { position: relative; padding: 30px 28px 32px; border-radius: 18px; background: linear-gradient(180deg, rgb(255 236 220 / .045), rgb(255 236 220 / .015)); border: 1px solid rgb(255 236 220 / .08); box-shadow: inset 0 1px 0 rgb(255 236 220 / .06); transition: border-color .2s, background .2s; }
.card:hover { border-color: rgb(232 116 59 / .45); background: linear-gradient(180deg, rgb(232 116 59 / .08), rgb(255 236 220 / .015)); }
.cards--sec .card { counter-increment: c; padding-top: 64px; }
.cards--sec .card::before { content: counter(c, decimal-leading-zero); position: absolute; left: 28px; top: 28px; font: 600 12px/1 var(--mono); letter-spacing: .12em; color: var(--ember); }
.card h3 { font: 700 clamp(1.15rem, 1.45vw, 1.5rem)/1.15 var(--display); font-variation-settings: "wdth" 112; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--cream); text-wrap: balance; }
.card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--mist); }
.tls { margin-top: 14px; padding: clamp(36px, 5vw, 72px); border-radius: 22px; position: relative; overflow: hidden;
  background: radial-gradient(80% 140% at 100% 0%, rgb(232 116 59 / .22), transparent 60%), linear-gradient(180deg, #1a120e, #110c0a); border: 1px solid rgb(232 116 59 / .3); }
.tls__h { margin: 0; font: 700 clamp(2rem, 4vw, 4.4rem)/.95 var(--display); font-variation-settings: "wdth" 125; letter-spacing: -0.035em; color: var(--cream); max-width: 16ch; }
.tls__b { margin: 24px 0 0; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.55; color: var(--mist); max-width: 62ch; }
.limits { margin-top: 14px; border-radius: 18px; border: 1px solid rgb(255 236 220 / .1); background: rgb(255 236 220 / .02); }
.limits summary { cursor: pointer; list-style: none; padding: 26px 64px 26px 28px; font: 700 clamp(1.1rem, 1.4vw, 1.4rem)/1.2 var(--display); font-variation-settings: "wdth" 112; color: var(--cream); position: relative; }
.limits summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.limits summary::after, .faq summary::after { content: ""; position: absolute; right: 30px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ember); border-bottom: 2px solid var(--ember); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.limits[open] summary::after, .faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.limits ul { margin: 0; padding: 0 28px 28px 48px; display: grid; gap: 12px; color: var(--mist); max-width: 90ch; }
.limits strong { color: var(--cream); }
.report { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 6vw; padding-top: 30px; border-top: 1px solid rgb(255 236 220 / .12); }
.report h3 { margin: 0; font: 700 1.3rem/1.2 var(--display); font-variation-settings: "wdth" 112; color: var(--cream); }
.report p { margin: 0; font-size: 17px; color: var(--mist); }
.report a { color: var(--cream); }
.report .fine { grid-column: 2; }
.sec--net .headline { max-width: 18ch; }
.sec--price { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: end; }
.price { margin: 0; font-family: var(--display); font-variation-settings: "wdth" 125; font-weight: 700; font-size: clamp(9rem, 26vw, 30rem); line-height: .78; letter-spacing: -0.07em;
  background: linear-gradient(180deg, #fff3e6 10%, #f2b88f 55%, #b8592c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price__body .headline { font-size: clamp(2rem, 3.4vw, 3.8rem); }
.terms { list-style: none; margin: 44px 0 0; padding: 0; }
.terms li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid rgb(255 236 220 / .12); color: var(--mist); }
.terms li:first-child { border-top: 1.5px solid rgb(255 236 220 / .4); color: var(--cream); font-weight: 600; }
.terms b { font: 600 15px/1.5 var(--mono); color: var(--cream); }
.price__cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.btn--ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgb(255 236 220 / .35); }
.btn--ghost:hover { background: rgb(255 236 220 / .08); }
.team { margin: 18px 0 0; color: var(--mist); }
.team a { color: var(--cream); }
.sec--faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; }
.faq details { border-top: 1px solid rgb(255 236 220 / .12); }
.faq details:last-child { border-bottom: 1px solid rgb(255 236 220 / .12); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font: 650 19px/1.3 var(--sans); position: relative; color: var(--cream); }
.faq summary::after { right: 6px; }
.faq p { margin: 0 0 24px; max-width: 60ch; color: var(--mist); }
.ftr { padding: 180px var(--m) 48px; max-width: 1640px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 40px; }
.ftr .languages { flex-basis: 100%; }
.ftr__mark { margin: 0; font: 700 clamp(4rem, 14vw, 16rem)/.8 var(--display); font-variation-settings: "wdth" 125; letter-spacing: -0.06em;
  background: linear-gradient(180deg, rgb(243 236 228 / .9), rgb(243 236 228 / .12)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ftr__contact ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; text-align: right; }
.ftr__contact li span { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dust); margin-right: 12px; }
.ftr__contact a { font: 500 14px/1.4 var(--mono); color: var(--cream); }
.ftr .req { margin: 0 0 .6em; text-align: right; }

/* ---------- Persistent cues ---------- */
.dock { position: fixed; right: var(--m); bottom: 28px; z-index: 45; display: grid; padding: 12px 20px; border-radius: 14px; background: var(--ember); color: var(--night); text-decoration: none; line-height: 1.15; box-shadow: 0 20px 50px -14px rgb(232 116 59 / .6); transition: opacity .35s, transform .35s; }
.dock span { font: 700 15px/1.2 var(--sans); }
.dock small { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; opacity: .75; }
.dock.is-hidden { opacity: 0; transform: translateY(14px); pointer-events: none; }
.readout { position: fixed; left: var(--m); bottom: 28px; z-index: 45; margin: 0; display: flex; gap: 14px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); transition: opacity .35s; }
.readout__k { color: var(--ember); }
.readout.is-hidden { opacity: 0; }

/* ---------- STATIC reading (reduced motion, no WebGL) ---------- */
.static .story__stage { display: flex; flex-direction: column; gap: 56px; padding: 140px var(--m) 80px; max-width: 1400px; margin: 0 auto; }
.static .cam { display: contents; }
.static .win { position: relative; margin: 0 0 40px; }
.static .flare, .static .rail, .static .readout { display: none; }
.static .beat--hero { order: 0; } .static #win-main { order: 1; }
.static [data-beat="1"] { order: 2; } .static #win-menubar { order: 3; }
.static [data-beat="2"] { order: 4; } .static #win-projects { order: 5; }
.static [data-beat="3"] { order: 6; } .static #win-ports { order: 7; }
.static [data-beat="4"] { order: 8; } .static #win-agents { order: 9; }
.static [data-beat="5"] { order: 10; } .static #win-docker { order: 11; max-width: 640px; }
.static #about { order: 1; }
.static .beat--hero { padding-top: 10vh; }
.static .hero__cta { margin-bottom: 40px; }
.static .perf__stage { padding: 120px var(--m) 60px; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.static .perf__poster { width: 100%; border-radius: 14px; order: -1; }
.static .board__legend { margin-bottom: 8px; }
.static .rows { display: grid; gap: 0; }
.static .row { display: grid; grid-template-columns: 1.1fr 2fr auto; gap: 12px 40px; align-items: center; border-top: 1px solid rgb(255 255 255 / .12); padding: 22px 0; }
.static .row__vals { margin: 0; display: grid; gap: 10px; }
.static .v { display: flex; align-items: center; gap: 12px; }
.static .v::before { content: ""; height: 12px; width: calc(var(--w, 0.5) * 70%); border-radius: 0 6px 6px 0; flex: none; }
.static .v--us::before { background: linear-gradient(90deg, #9a4422, #e8743b, #ffd9a8); box-shadow: 0 0 18px rgb(232 116 59 / .6); }
.static .v--them::before { background: linear-gradient(#8a9099, #4a4f57); }
.static .row__x { margin: 0; }
.static .perf__method { font-size: 14px; color: var(--dust); }
.static .agents__stage { padding-top: 120px; }
.static .dock { display: none; }
.static .grain { display: none; }

@media (max-width: 1100px) {
  .hdr .header-sections { display: none; }
}
@media (max-width: 900px) {

  .cards--sec, .cards--3, .cards--4 { grid-template-columns: 1fr 1fr; }
  .agents__stage, .sec__head, .report { grid-template-columns: 1fr; }
  .sec--price, .sec--faq { grid-template-columns: 1fr; }
}
/* Translated copy needs room to wrap, especially in the static mobile layout. */
.display, .headline, .tls__h { overflow-wrap: anywhere; hyphens: auto; }
:is(:lang(zh), :lang(ja), :lang(ko)) :is(.display, .headline, .tls__h) { line-height: 1.15; letter-spacing: 0; }
@media (max-width: 600px) {
  .hdr { gap: 12px; }
  .hdr .brand { gap: 8px; font-size: 18px; }
  .hdr > .btn--sm { padding-inline: 14px; }
  .cards--sec, .cards--3, .cards--4 { grid-template-columns: minmax(0, 1fr); }
  .static .row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .static .row__label { grid-column: 1 / -1; }
  .static .v { gap: 6px; }
  .static .v::before { width: calc(var(--w, 0.5) * 48%); }
  .ftr__contact { min-width: 0; }
  .ftr__contact ul, .ftr .req { text-align: left; }
  .btn { min-height: 52px; height: auto; padding-block: 12px; text-align: center; }
  .btn--sm { min-height: 36px; padding-block: 8px; }
  .hero__cta { flex-direction: column; align-items: flex-start; }
  .report > * { grid-column: 1; min-width: 0; }
  .report .fine { grid-column: 1; }
  .report p { overflow-wrap: anywhere; }
  .tok__bar { height: auto; padding-top: 22px; margin-top: 12px; }
  .tok__n { display: block; position: relative; top: auto; left: auto; right: auto; white-space: normal; }
  .tok__who { display: block; margin-left: 0; }
}
.rail { display: none !important; }

/* Glass: a slow light sweep across each window as its beat plays. */
.motion .win::after { background: linear-gradient(105deg, transparent 40%, rgb(255 236 220 / .09) 48%, rgb(255 236 220 / .02) 53%, transparent 60%) no-repeat, linear-gradient(118deg, rgb(255 255 255 / .05), transparent 30%, transparent 72%, rgb(232 116 59 / .06));
  background-size: 300% 100%, 100% 100%; background-position: calc(100% - var(--sweep, 0) * 100%) 0, 0 0; }
/* Terminal lines type in as you scroll. */
.motion .term .tl { display: inline-block; clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }

/* Deterministic capture: no CSS transitions between frames. */
.capture *, .capture *::before, .capture *::after { transition: none !important; }
.motion .row__x { left: auto; right: var(--m); transform-origin: 100% 50%; }
.motion .row__label { left: var(--m); text-shadow: 0 1px 10px rgb(11 9 8 / .95), 0 0 2px rgb(11 9 8 / .9); }
.motion .v { line-height: 1; }
.motion .v--them { width: 4.4em; text-align: right; text-shadow: 0 1px 10px rgb(11 9 8 / .9); }
.agents { position: relative; z-index: 2; background: radial-gradient(70% 50% at 80% 30%, rgb(232 116 59 / .07), transparent 70%), var(--night); }
.agents::before { content: ""; position: absolute; left: 0; right: 0; top: -120px; height: 120px; background: linear-gradient(transparent, var(--night)); pointer-events: none; }
.rest { background: radial-gradient(60% 40% at 10% 0%, rgb(232 116 59 / .05), transparent 70%), var(--night); }
.motion .tok__row { opacity: 0; }
.static .hl { opacity: 1; }
.static .win { max-width: 1326px; }
.static #win-menubar { max-width: 406px; }
.static #win-projects { display: none; }

/* Buying closed (CHECKOUT=off). */
.closed { margin: 22px 0 0; padding: 16px 18px; border-radius: 12px; border: 1px solid rgb(232 116 59 / .35); background: rgb(232 116 59 / .07); color: var(--cream); font-weight: 600; }
.home { position: relative; z-index: 1; }