/* InputInfinity: tokens first, then the room, then the page's own markup. */
:root {
  --sc-canvas: #101114;
  --sc-surface: #181a1f;
  --sc-ink: #f5f5f7;
  --sc-ink-soft: #b9bbc6;
  --sc-accent: #ff6333;
  --sc-accent-ink: #130800;
  --sc-font-display: "Space Grotesk", "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-text: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  --room: #060504;
  --ok: #57d68d;
  --bar-h: 64px;
}
html { background: var(--room); }
body { background: transparent; }
main { position: relative; z-index: 1; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 90; padding: 10px 14px; background: var(--sc-ink); color: var(--sc-canvas); border-radius: 8px; }
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------------------------------------------------------------- the room */
#world { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--room); contain: strict; }
#cam { position: absolute; left: 0; top: 0; width: 1792px; height: 960px; transform-origin: 0 0; }
.plate { position: absolute; left: 0; top: 0; width: 1792px; height: 960px; max-width: none; pointer-events: none; }
#cam::before { content: ""; position: absolute; left: 0; top: 0; width: 1792px; height: 960px; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, var(--room) 0, rgba(6, 5, 4, .9) 8%, transparent 26%), linear-gradient(180deg, var(--room) 0, transparent 14%), linear-gradient(90deg, var(--room) 0, transparent 14%); }
#cam > :not(.plate) { z-index: 2; }
#cam > #occlude { z-index: 3; }
#lift { opacity: 0; }
#occlude { clip-path: polygon(1480px 459px, 1484px 441px, 1496px 429px, 1512px 425px, 1528px 430px, 1542px 444px, 1552px 463px, 1540px 469px, 1510px 471px, 1490px 467px); }
.glow { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g, #ffb48a) 62%, transparent), color-mix(in srgb, var(--g, #ffb48a) 18%, transparent) 46%, transparent); }
.scr { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #050506; opacity: 0;
  font-family: var(--sc-font-mono); color: #e7e8ee; backface-visibility: hidden; }
.scr > img { width: 100%; height: 100%; object-fit: cover; object-position: left top; max-width: none; }
#trace { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; max-width: none; }
#trace path { fill: none; stroke: var(--sc-accent); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
#haze { position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(38% 42% at 80% 58%, rgba(255, 126, 60, .10), transparent 70%), radial-gradient(60% 34% at 40% 88%, rgba(255, 99, 51, .05), transparent 70%); }
#scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(75deg, rgba(6, 5, 4, .95) 0, rgba(6, 5, 4, .86) 30%, rgba(6, 5, 4, .55) 46%, transparent 64%); }
#bench { position: absolute; inset: 0; clip-path: circle(0 at 72% 50%); visibility: hidden; }
#bench img { width: 100%; height: 100%; object-fit: cover; max-width: none; filter: brightness(.78); }
#bench::after { content: ""; position: absolute; inset: 0; background: radial-gradient(24% 17% at 50% 78%, rgba(6, 5, 4, .92) 45%, transparent), linear-gradient(180deg, rgba(6, 5, 4, .9) 0, rgba(6, 5, 4, .72) 28%, transparent 52%), linear-gradient(90deg, rgba(6, 5, 4, .92) 0, rgba(6, 5, 4, .7) 38%, transparent 62%), linear-gradient(0deg, rgba(6, 5, 4, .72) 0, transparent 26%); }
@media (max-width: 860px) { #bench img { height: 80%; object-position: 40% 100%; transform: translateY(-28%); } #bench::after { background: linear-gradient(180deg, rgba(6, 5, 4, .92) 0, rgba(6, 5, 4, .84) 13%, transparent 27%, transparent 34%, rgba(6, 5, 4, .9) 50%, rgba(6, 5, 4, .94) 100%); } }
#keys { position: absolute; right: -7vw; bottom: -5vh; width: min(68vw, 1180px); max-width: none; pointer-events: none; transform-origin: 50% 100%;
  filter: brightness(.62) saturate(.7) sepia(.32) blur(1.2px); -webkit-mask-image: linear-gradient(190deg, transparent 2%, #000 22%); mask-image: linear-gradient(190deg, transparent 2%, #000 22%); }

/* what the screens show */
.term { padding: 34px 38px; font-size: 40px; line-height: 1.32; overflow-wrap: anywhere; color: #f0ece6; }
.term p { margin: 0 0 14px; }
.term .pr { color: var(--sc-accent); }
.term .out { color: var(--ok); opacity: 0; }
.term.sent .out { display: none; }
.caret { display: inline-block; width: .55em; height: 1em; vertical-align: -.14em; background: currentColor; opacity: .85; }
#s-B { background: #101114; }
.blank { position: absolute; inset: 0; background: var(--sc-canvas); opacity: 0; }
#s-C { background: #0a1a6a; color: #d6dcff; font-size: 56px; border-radius: 7%/8%; }
.post { padding: 80px 70px; line-height: 1.5; }
.post p { margin: 0 0 18px; }
.post b { background: #d6dcff; color: #0a1a6a; padding: 0 12px; }
.bios { position: absolute; inset: 0; background: #0a1a6a; padding: 56px 54px; display: none; }
.bios h6 { font: inherit; margin: 0 0 30px; color: #fff; border-bottom: 3px solid #d6dcff; padding-bottom: 16px; }
.bios ul { list-style: none; margin: 0; padding: 0; }
.bios li { display: flex; justify-content: space-between; gap: 18px; padding: 14px 16px; font-size: 46px; }
.bios li span { color: #fff; }
.bios li.on { background: #d6dcff; color: #0a1a6a; }
.bios li.on span { color: #0a1a6a; }
#s-C.is-setup .bios { display: block; }
#s-C::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 3px, transparent 3px 7px), radial-gradient(90% 90% at 50% 50%, transparent 60%, rgba(0, 0, 0, .45)); }
#s-L { background: radial-gradient(90% 120% at 30% 10%, #3a2a2a, #17141c 70%); font-family: var(--sc-font-text); }
.login { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; font-size: 44px; }
.login svg { width: 130px; height: 130px; padding: 18px; border-radius: 50%; background: rgba(255, 255, 255, .12); fill: none; stroke: #f5f5f7; stroke-width: 1.5; stroke-linecap: round; }
.login b { font-weight: 500; }
.pw { display: flex; gap: 14px; min-height: 76px; min-width: 380px; align-items: center; justify-content: center; padding: 0 22px; border-radius: 40px; background: rgba(255, 255, 255, .14); }
.pw i { width: 20px; height: 20px; border-radius: 50%; background: #f5f5f7; opacity: 0; }
.desk { position: absolute; inset: 0; display: none; align-items: flex-end; padding: 44px 50px; font-size: 44px;
  background: linear-gradient(160deg, #2a1208, #ff6333 130%); color: #fff; }
.desk b { font-weight: 500; }
#s-L.is-open .desk { display: flex; }
#s-L.is-open .login { display: none; }
#s-E { background: linear-gradient(170deg, #1b2a3a, #0f1720); font-family: var(--sc-font-text); }
.runbox { position: absolute; left: 7%; right: 7%; bottom: 12%; padding: 34px 38px; background: #eceef2; color: #16181d; font-size: 50px; border-radius: 10px; opacity: 0; }
.runbox b { display: block; font-weight: 600; margin-bottom: 18px; }
.runbox .f { display: block; min-height: 78px; padding: 8px 18px; border: 3px solid #5a6270; background: #fff; font-family: var(--sc-font-mono); }
#s-E.is-run .runbox { opacity: 1; }
.cmdwin { position: absolute; left: 6%; right: 6%; top: 8%; bottom: 8%; background: #0a0a0c; color: #eee; padding: 36px; font: 50px var(--sc-font-mono); display: none; border: 3px solid #4b5563; }
.cmdwin p { margin: 0; }
#s-E.is-cmd .cmdwin { display: block; }
.sink { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 28px; background: rgba(0, 0, 0, .72); color: #fff; font: 44px/1.2 var(--sc-font-mono); word-break: break-all; display: none; }
.sink.on { display: block; }
.toast { position: absolute; top: 26px; right: 26px; padding: 12px 24px; border-radius: 12px; background: var(--sc-accent); color: var(--sc-accent-ink); font: 600 50px var(--sc-font-text); opacity: 0; transition: opacity 180ms var(--sc-ease-out); }
.toast.on { opacity: 1; }

/* ------------------------------------------------------------- the cursor */
#cursor { position: fixed; left: 0; top: 0; z-index: 40; width: 32px; height: 32px; pointer-events: none; transform-origin: 0 0; will-change: transform; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)); }
#cursor svg { display: block; }
#cursor .ring { position: absolute; left: 5.3px; top: 3.3px; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid var(--sc-accent); border-radius: 50%; opacity: 0; }
#cursor.click .ring { animation: ring 520ms var(--sc-ease-out); }
@keyframes ring { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* --------------------------------------------------------------- the bar */
.bar { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sc-gutter); pointer-events: none; }
.bar > * { pointer-events: auto; position: relative; }
.bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--bar-h) + 26px); opacity: var(--b, 0); background: linear-gradient(180deg, var(--sc-canvas) 62%, transparent); }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sc-accent); font: 600 1.25rem var(--sc-font-display); letter-spacing: -.02em; }
.mark span { color: var(--sc-ink); }
.mark em { font-style: normal; color: var(--sc-accent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 24px; border: 0; border-radius: 12px; white-space: nowrap; text-decoration: none; cursor: pointer;
  background: var(--sc-accent); color: var(--sc-accent-ink); font: 600 1.05rem var(--sc-font-text);
  box-shadow: 0 2px 0 #b53a14, 0 12px 26px -10px rgba(255, 99, 51, .55);
  transition: background-color 150ms var(--sc-ease-out), translate 150ms var(--sc-ease-out); }
.btn:active { translate: 0 1px; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #ff7a50; } }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .95rem; box-shadow: 0 2px 0 #b53a14; }
.btn--lg { min-height: 66px; padding: 0 34px; font-size: 1.25rem; border-radius: 14px; }
.btn.is-arrived { background: #ff7a50; }

/* --------------------------------------------------------------- type */
.h2 { font-size: clamp(2.05rem, 1.3rem + 3vw, 4rem); line-height: 1.02; }
.h3 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.75rem); line-height: 1.05; letter-spacing: -.025em; }
.h4 { font-size: clamp(1.55rem, 1.3rem + .9vw, 2rem); line-height: 1.05; letter-spacing: -.02em; }
.body { margin: 0; color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; }
.body small { display: block; margin-top: .6em; font-size: .86em; }

/* --------------------------------------------------------------- hook */
.hook { position: absolute; left: var(--sc-gutter); top: 50%; translate: 0 -46%; width: min(44rem, 50vw); }
.eyebrow { margin: 0 0 var(--sc-4); color: var(--sc-accent); font: 600 var(--sc-t-sm) var(--sc-font-text); letter-spacing: .01em; }
.hook__h { font-size: clamp(2.5rem, 1.1rem + 3.5vw, 4.9rem); line-height: 1; }
.hook__p { margin: var(--sc-5) 0 0; max-width: 38ch; color: #d5d6de; font-size: var(--sc-t-lg); line-height: 1.42; letter-spacing: -.01em; text-wrap: pretty; }
.hook__cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sc-3) var(--sc-5); margin-top: var(--sc-6); }
.hook__cta span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* --------------------------------------------------------------- edge */
.lines { position: absolute; left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(36rem, 38vw); min-height: 16rem; }
.line { position: absolute; left: 0; top: 0; margin: 0; font-size: clamp(2.05rem, 1.3rem + 2.6vw, 3.7rem); line-height: 1.04; }
.line--hot { color: var(--sc-accent); }

/* --------------------------------------------------------------- board */
.board { position: absolute; margin: 0; left: 52%; top: 50%; translate: 0 -50%; width: min(36vw, 62vh, 560px); }
.board img { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .7)) drop-shadow(0 4px 5px rgba(0, 0, 0, .6)); }
.co { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.co path { fill: none; stroke: var(--sc-ink); stroke-width: .28; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.co-l { position: absolute; margin: 0; width: 15.5rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.32; }
.co-l b { display: block; color: var(--sc-ink); font: 600 var(--sc-t-base) var(--sc-font-display); }
.co-l--a { left: -26%; top: calc(100% + 8px); width: 13.5rem; }
.co-l--b { right: -6%; bottom: calc(100% + 26px); width: 13.5rem; }
.pt { position: absolute; width: 2px; height: 2px; }
.bcopy { position: absolute; left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(32rem, 40vw); height: 24rem; }
.bcopy > div { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; }
.bcopy .body { margin-top: var(--sc-4); }
.steps { list-style: none; margin: var(--sc-5) 0 0; padding: 0; color: var(--sc-ink-soft); }
.steps li { padding: var(--sc-3) 0; border-top: 1px solid var(--sc-hairline-strong); }
.steps b { color: var(--sc-ink); font-weight: 600; }
.cable { display: flex; align-items: center; gap: var(--sc-4); margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.4; }
.cable img { width: 64px; height: auto; flex: none; }

/* --------------------------------------------------------------- room */
.cap { position: absolute; left: var(--sc-gutter); bottom: clamp(5.5rem, 15vh, 10rem); width: min(32rem, 38vw); }
.cap .body { margin-top: var(--sc-3); }
.cap--end { width: auto; right: var(--sc-gutter); bottom: clamp(5.5rem, 11vh, 8rem); }
.cap--end .h2 { max-width: 15em; }

/* --------------------------------------------------------------- try */
.panel { --line: color-mix(in srgb, var(--sc-ink) 16%, transparent); position: absolute; left: var(--sc-gutter); top: calc(50% - 4px); translate: 0 -50%; width: min(29rem, 40vw); display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 18px; background: var(--sc-canvas); box-shadow: var(--sc-e3), inset 0 0 0 1px var(--line); }
.panel__head p { margin: 6px 0 0; color: var(--sc-ink-soft); }
.pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--sc-surface); box-shadow: inset 0 0 0 1px var(--line); }
.pick button { min-height: 44px; padding: 0 4px; border: 0; border-radius: 9px; background: none; color: var(--sc-ink-soft); font-size: .88rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out); }
.pick button[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-canvas); }
.pad { position: relative; flex: none; height: clamp(84px, 15vh, 140px); border-radius: 12px; cursor: crosshair; touch-action: none; box-shadow: inset 0 0 0 1px var(--line);
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 100%, var(--sc-surface); }
.pad span { position: absolute; left: 14px; top: 10px; font-size: .86rem; color: var(--sc-ink-soft); }
.pad code { position: absolute; right: 14px; bottom: 10px; font: .8rem var(--sc-font-mono); color: var(--sc-ink-soft); }
.send { padding: 10px 12px 12px; border-radius: 12px; background: var(--sc-surface); box-shadow: inset 0 0 0 1px var(--line); }
.send label { display: block; margin-bottom: 6px; font-size: .86rem; color: var(--sc-ink-soft); }
.send > div { display: flex; gap: 8px; }
.send input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--sc-canvas); font: 1rem var(--sc-font-mono); }
.keysrow { display: flex; flex-wrap: wrap; gap: 6px; }
.keysrow button { flex: 1 1 auto; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--sc-surface); font: .84rem var(--sc-font-mono); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color 150ms var(--sc-ease-out); }
.keysrow button:active { translate: 0 1px; }
@media (hover: hover) and (pointer: fine) { .keysrow button:hover, .pick button:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--sc-ink) 12%, var(--sc-surface)); } }
.keysrow .ico { fill: currentColor; stroke: none; width: 1em; height: 1em; }
.ack { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; color: var(--sc-ink-soft); }
.ack span { display: inline-flex; align-items: center; gap: 6px; }
.ack span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.ack span.on { color: var(--sc-ink); }
.ack span.on::before { background: currentColor; }
.ack span[data-s="ok"].on { color: var(--ok); }
.ack em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; }
.panel__note { margin: 0; font-size: .84rem; color: var(--sc-ink-soft); }

/* --------------------------------------------------------------- flow */
.flowsec { position: relative; }
#honest { padding: 34vh 0 var(--sc-8); }
.honest__top { display: grid; gap: var(--sc-5); }
.honest__top .h2 { max-width: 17em; }
.route { display: flex; align-items: stretch; margin: var(--sc-8) 0 var(--sc-8); }
.node { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-right: var(--sc-4); }
.node .ico { width: 34px; height: 34px; color: var(--sc-accent); stroke-width: 1.5; margin-bottom: 6px; }
.node b { font: 500 var(--sc-t-lg) var(--sc-font-display); letter-spacing: -.015em; }
.node span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.4; }
.wire { position: relative; flex: 0 0 clamp(36px, 7vw, 110px); height: 34px; margin-right: var(--sc-4); }
.wire u, .wire s { position: absolute; left: 0; right: 0; height: 2px; transform-origin: 0 50%; transform: scaleX(0); text-decoration: none; }
.wire u { top: 12px; background: var(--sc-accent); }
.wire s { top: 22px; background: var(--ok); transform-origin: 100% 50%; }
.trust { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: var(--sc-6); margin: 0; }
.trust > div { border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-4); }
.trust dt { font: 500 var(--sc-t-lg) var(--sc-font-display); letter-spacing: -.015em; }
.trust dd { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); }
#plans { padding: var(--sc-8) 0 42vh; }
.plans__head { display: grid; gap: var(--sc-4); }
.ledger { margin-top: var(--sc-7); }
.ledger table { width: 100%; border-collapse: collapse; }
.ledger th, .ledger td { padding: 13px 12px; text-align: right; border-bottom: 1px solid var(--sc-hairline); font-weight: 400; }
.ledger tbody th { text-align: left; color: var(--sc-ink-soft); padding-left: 0; }
.ledger thead th { font: 500 var(--sc-t-lg) var(--sc-font-display); }
.ledger .hot { color: var(--sc-accent); }
.ledger .price td { font: 500 var(--sc-t-2xl) var(--sc-font-display); letter-spacing: -.03em; }
.ledger .price th { vertical-align: bottom; }
.fine { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 70ch; }

/* --------------------------------------------------------------- close */
.close__in { position: absolute; left: var(--sc-gutter); bottom: clamp(6rem, 13vh, 9rem); }
.close__h { font-size: clamp(2.4rem, 1.2rem + 4.2vw, 5.4rem); line-height: 1; max-width: 13em; }
.close__p { margin: var(--sc-4) 0 var(--sc-5); color: var(--sc-ink-soft); font-size: var(--sc-t-lg); }
.foot { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 22px; display: flex; justify-content: space-between; gap: var(--sc-4); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }

/* ---------------------------------------------------------- short laptops */
@media (max-height: 760px) and (min-width: 861px) {
  .pad { display: none; }
  .hook__p { font-size: var(--sc-t-base); }
  .steps li { padding: var(--sc-2) 0; }
  .cable { display: none; }
}

/* -------------------------------------------------------------------- phone */
@media (max-width: 860px) {
  :root { --bar-h: 56px; --sc-gutter: 16px; }
  .mark { font-size: 1.1rem; }
  #keys { right: -30vw; bottom: 0; width: 150vw; }
  #scrim { background: linear-gradient(180deg, transparent 38%, rgba(6, 5, 4, .88) 50%, rgba(6, 5, 4, .94) 100%); }
  .hook { left: 16px; right: 16px; top: calc(var(--bar-h) + 10px); translate: none; width: auto; }
  .eyebrow { margin-bottom: var(--sc-2); }
  .hook__h { font-size: clamp(2.1rem, 10.2vw, 3.4rem); }
  .hook__p { margin-top: var(--sc-3); font-size: 1.04rem; }
  .hook__cta { margin-top: var(--sc-4); gap: 8px 14px; }
  .hook__cta span { font-size: .9rem; }
  .lines { left: 16px; right: 16px; width: auto; top: 50vh; translate: none; min-height: 10rem; }
  .line { font-size: clamp(1.8rem, 8.4vw, 2.6rem); }
  .board { left: 50%; top: calc(var(--bar-h) + 7vh); translate: -50% 0; width: min(58vw, 30vh); }
  .co-l { width: 9.5rem; font-size: .8rem; }
  .co-l--a { left: -24%; width: 9.5rem; }
  .co-l--b { right: -10%; bottom: calc(100% + 8px); width: 9.5rem; }
  .bcopy { left: 16px; right: 16px; width: auto; top: 50vh; translate: none; height: auto; }
  .bcopy > div { top: 0; translate: none; }
  .steps { margin-top: var(--sc-3); font-size: .94rem; line-height: 1.4; }
  .steps li { padding: 7px 0; }
  .cable { display: none; }
  .cap { left: 16px; right: 16px; width: auto; bottom: auto; top: 49vh; }
  .cap--end { top: 44vh; bottom: auto; right: 16px; }
  .panel { left: 8px; right: 8px; width: auto; top: 39vh; translate: none; gap: 8px; padding: 10px; border-radius: 14px; }
  .panel__head { display: none; }
  .pick button { font-size: .82rem; }
  .pad { display: none; }
  .send { padding: 8px 10px 10px; }
  .send label { margin-bottom: 4px; }
  .keysrow button { min-height: 44px; }
  .ack { font-size: .82rem; gap: 4px 10px; }
  #honest { padding-top: 30vh; }
  .route { flex-direction: column; margin: var(--sc-6) 0; }
  .node { padding: 0; flex: none; }
  .wire { flex: 0 0 44px; width: 34px; height: 44px; margin: 4px 0 4px 0; }
  .wire u, .wire s { left: auto; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: scaleY(0); }
  .wire u { left: 11px; transform-origin: 50% 0; }
  .wire s { left: 21px; transform-origin: 50% 100%; }
  .trust { grid-template-columns: 1fr; gap: var(--sc-5); }
  .ledger th, .ledger td { padding: 11px 5px; font-size: .9rem; }
  .ledger tbody th { font-size: .84rem; line-height: 1.25; }
  .ledger thead th { font-size: .98rem; }
  .ledger .price td { font-size: 1.45rem; }
  .close__in { left: 16px; right: 16px; bottom: 196px; }
  .close__p { margin: var(--sc-3) 0 var(--sc-4); font-size: 1.05rem; }
  .foot { left: 16px; right: 16px; bottom: 88px; flex-direction: row; font-size: .72rem; }
  .btn--lg { min-height: 60px; font-size: 1.15rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .hook__h { font-size: 1.95rem; }
  .hook__p { font-size: .96rem; line-height: 1.34; }
  .hook__cta span { display: none; }
  .ack em, .panel__note { display: none; }
  .keysrow button.wide { display: none; }
  .board { width: min(46vw, 25vh); }
  .co-l { display: none; }
}

/* ----------------------------------------------------------- reduced motion:
   no pinning, no travel. The same content reads top to bottom over a still room. */
.rm #cursor { display: none; }
.rm #scrim { opacity: 0; }
.rm main > section { position: relative; padding: 0; min-height: 0; }
.rm main > section > [data-sc-stage] { position: relative; height: auto; overflow: visible; padding: 34vh var(--sc-gutter) 14vh; background: linear-gradient(180deg, transparent 0, rgba(6, 5, 4, .92) 32vh, rgba(6, 5, 4, .92) calc(100% - 12vh), transparent 100%); }
.rm .bar::before { opacity: 1; }
.rm .hook, .rm .lines, .rm .line, .rm .board, .rm .bcopy, .rm .bcopy > div, .rm .cap, .rm .panel, .rm .close__in, .rm .foot { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; translate: none; width: auto; min-height: 0; height: auto; }
.rm .line { margin-bottom: var(--sc-4); }
.rm .bcopy > div, .rm .cap { margin-bottom: var(--sc-6); }
.rm .board { width: min(80vw, 420px); margin: 0 0 8rem 4rem; }
.rm .co, .rm .pad { display: none; }
.rm .co-l { position: static; width: auto; margin: 8px 0 0; }
.rm #hook > [data-sc-stage] { padding-top: 22vh; background: linear-gradient(180deg, rgba(6, 5, 4, .35), rgba(6, 5, 4, .92) 30vh, rgba(6, 5, 4, .92) calc(100% - 12vh), transparent 100%); }
.rm .panel { max-width: 30rem; }
.rm .flowsec { background: linear-gradient(180deg, transparent, var(--sc-canvas) 10vh, var(--sc-canvas) calc(100% - 10vh), transparent); padding-top: 16vh; padding-bottom: 16vh; }
.rm .wire u, .rm .wire s { transform: none !important; }
.rm .close__in { margin-bottom: var(--sc-7); }
@media (max-width: 860px) { .rm .board { margin: 0 0 2rem; } }
@media (max-width: 860px) and (max-height: 700px) { .close__in { bottom: 128px; } .close__h { font-size: 2.1rem; } }