@font-face { font-family: 'Doto'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/doto-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Doto'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/doto-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/host-grotesk-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/host-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'SUSE Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/suse-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'SUSE Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/suse-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --night: #07080a; --night-2: #0c0e11; --surface: #121418; --line: #23272e; --line-2: #313741;
  --ink: #eceff3; --soft: #b7bdc6; --muted: #8a919b; --faint: #5d646e;
  --ice: #d6e4ff; --amber: #ffb547;
  --paper: #eceef1; --sheet: #ffffff; --p-ink: #0e1116; --p-soft: #343a42; --p-muted: #5a616b; --p-line: #d3d7dd;
  --display: 'Host Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'SUSE Mono', ui-monospace, Menlo, Consolas, monospace;
  --matrix: 'Doto', 'SUSE Mono', ui-monospace, monospace;
  --cx: max(0px, calc((100vw - 1360px) / 2));
  color-scheme: dark;
}
* { box-sizing: border-box }
body { margin: 0 }
[hidden] { display: none !important }
img, video { max-width: 100% }
html { scroll-behavior: smooth }
html, body { background: var(--night); color: var(--ink) }
body { font: 16px/1.5 var(--display); -webkit-font-smoothing: antialiased }
a { color: inherit }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px }
.mono { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase }
.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-left: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right, 0px)) }
.band { padding-block: clamp(80px, 9.5vw, 144px) }
h2 { margin: 0; font-weight: 300; font-size: clamp(34px, 4.3vw, 64px); line-height: 1.02; letter-spacing: -.032em; text-wrap: balance }
h3 { margin: 0; font-weight: 400; font-size: 27px; line-height: 1.15; letter-spacing: -.018em; text-wrap: balance }
.lede { margin: 0; color: var(--soft); font-size: 18px; max-width: 46ch }
.eyebrow { margin: 0; color: var(--ice) }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 2px; text-decoration: none; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s, color .2s }
.btn.primary { background: var(--ice); color: var(--night); border: 0 }
.btn.primary:hover { background: #fff }
.btn.ghost { border: 1px solid #3a404a; color: var(--ink); background: none }
.btn.ghost:hover { border-color: var(--ice) }
.btn.ink { background: var(--p-ink); color: var(--paper); border: 0 }
.btn.ink:hover { background: #262c35 }
.seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--line); border-radius: 2px; background: rgba(18,20,24,.6); backdrop-filter: blur(6px) }
.seg button { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: none; border: 0; padding: 10px 14px; cursor: pointer; min-height: 40px; transition: color .2s, background .2s }
.seg button:hover { color: var(--ink) }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--night) }
dl.spec { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: 11px 18px; margin: 0; font-size: 15px }
dl.spec dt { font: 500 10.5px/1.75 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
dl.spec dd { margin: 0; min-width: 0 }

.hero { position: relative; height: clamp(600px, 100svh, 1320px); overflow: hidden; isolation: isolate }
.stage { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease }
.stage.lit { opacity: 1 }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ox, 50%) 50% }
#loop { opacity: 0 }
#loop.on { opacity: 1 }
.shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,8,10,.86) 0, rgba(7,8,10,.86) var(--cx), rgba(7,8,10,.55) calc(var(--cx) + min(34vw, 470px)), rgba(7,8,10,0) calc(var(--cx) + min(58vw, 800px))), linear-gradient(0deg, rgba(7,8,10,1) 0%, rgba(7,8,10,0) 26%) }
#leaders, #bubbles { position: absolute; inset: 0; pointer-events: none }
#leaders { width: 100%; height: 100% }
.nav { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px }
.wm { font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: .2em; margin-right: -.2em; text-transform: uppercase; text-decoration: none }
.links { display: flex; gap: 28px; color: var(--muted) }
.links a { text-decoration: none; transition: color .2s }
.links a:hover { color: var(--ink) }
.copy { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(48px, 10vh, 120px); max-width: 1360px; margin-inline: auto }
.copy-in { width: min(620px, 100%); display: flex; flex-direction: column; gap: 22px }
h1 { margin: 0; font-weight: 300; font-size: clamp(40px, 5.3vw, 84px); line-height: 1; letter-spacing: -.035em; text-wrap: balance }
.sub { margin: 0; color: var(--soft); font-size: 18px; max-width: 46ch }
.ctas { display: flex; flex-wrap: wrap; gap: 12px }
.tag { position: absolute; z-index: 3; right: max(calc(var(--cx) + clamp(16px, 4vw, 40px)), env(safe-area-inset-right, 0px)); bottom: 22px; color: #6f7680; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px }
.bub { position: absolute; left: 0; top: 0; width: max-content; max-width: 290px; will-change: transform, opacity; transform-origin: 100% 100%; padding: 8px; border-radius: 2px; background: #040506; border: 1px solid #2a3442; box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 0 1px #0d1117 }
.bub .scr { position: relative; padding: 9px 11px 10px; background: rgba(214,228,255,.045); border: 1px solid #151c26; display: flex; flex-direction: column; gap: 5px; overflow: hidden }
.bub .scr::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); pointer-events: none }
.bub .bh { display: flex; gap: 10px; align-items: center; font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #7f8fa8 }
.bub .led { width: 5px; height: 5px; background: var(--ice); box-shadow: 0 0 8px var(--ice) }
.bub[data-status="queued"] .led { background: var(--amber); box-shadow: 0 0 8px var(--amber) }
.bub .meta { margin-left: auto }
.bub .bt { font: 800 15px/1.25 var(--matrix); color: var(--ice); text-shadow: 0 0 7px rgba(214,228,255,.55); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere }
.bub[data-status="queued"] .bt { color: var(--amber); text-shadow: 0 0 7px rgba(255,181,71,.5) }
.bub .m2, .bub code { display: block; font: 500 11px/1.4 var(--mono); color: #8d9bb1; letter-spacing: .02em; white-space: pre-wrap; overflow-wrap: anywhere }
.bub .px { display: grid; grid-template-columns: repeat(12, 9px); grid-auto-rows: 9px; gap: 1px; margin-top: 2px }
.bub .px i { display: block; background: #20242b }
.caret { display: inline-block; width: 7px; height: 13px; margin-left: 2px; background: currentColor; vertical-align: -2px; animation: caret 1s steps(1) infinite }
@keyframes caret { 50% { opacity: 0 } }

.rm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head fig" "panel fig"; grid-template-rows: auto 1fr; column-gap: clamp(32px, 6vw, 104px); row-gap: 44px }
.rm-head { grid-area: head; display: flex; flex-direction: column; gap: 20px }
.rm-panel { grid-area: panel; align-self: start; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--line); padding-top: 26px }
.rm-panel.in { animation: rise .35s ease both }
@keyframes rise { from { opacity: .35; transform: translateY(6px) } }
.rm-panel .k { margin: 0; color: var(--ice) }
.rm-panel p.d { margin: 0; color: var(--soft); max-width: 50ch }
.rm-panel .btn { align-self: flex-start; margin-top: 6px }
.rm-fig { grid-area: fig; margin: 0; min-width: 0 }
.rm-stage { --rh: clamp(520px, 80vh, 880px); position: relative; height: var(--rh); display: flex }
.rm-scale { position: relative; flex: none; width: 34px }
.rm-tick { position: absolute; right: 5px; width: 5px; height: 1px; background: var(--line-2); transition: background .25s, width .25s }
.rm-tick.on { background: var(--ice); width: 9px }
.rm-num { position: absolute; right: 16px; transform: translateY(-50%); font: 500 9.5px/1 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums }
.rm-rack { position: relative; flex: none; height: 100%; aspect-ratio: 720 / 2480; max-width: 100% }
.rm-rack img { display: block; width: 100%; height: 100% }
.rm-turn { position: absolute; top: 0; left: -50%; width: 200%; height: 100%; pointer-events: none; opacity: 0; z-index: 3 }
.rm-stage.turning .rm-turn { opacity: 1 }
.rm-stage.turning .rm-rack img { opacity: 0 }
.rm-stage.turning .rm-hit, .rm-stage.turning .rm-frame, .rm-stage.turning .rm-static { visibility: hidden }
.rm-scale, .rm-calls, .rm-leads { transition: opacity .7s ease }
.rm-stage.turning .rm-scale, .rm-stage.turning .rm-calls, .rm-stage.turning .rm-leads { opacity: 0; transition-duration: .15s }
.rm-call::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--ice); transform-origin: left; transform: scaleX(0); opacity: 0 }
.rm-stage.cycling .rm-call.on::after { opacity: .8; transform: scaleX(var(--p, 0)) }
.rm-frame, .rm-hit { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 1px; transition: box-shadow .25s, background .3s }
.rm-frame { z-index: 1 }
.rm-hit, .rm-static { z-index: 2 }
.rm-static { position: absolute; pointer-events: none; transition: background .3s }
.rm-rack.spot .rm-hit:not(.on), .rm-rack.spot .rm-static { background: rgba(7,8,10,.55) }
.rm-hit.hov:not(.on), .rm-frame.hov:not(.on) { box-shadow: inset 0 0 0 1px rgba(214,228,255,.5) }
.rm-hit.on { box-shadow: inset 0 0 0 1px var(--ice), 0 0 0 1px rgba(214,228,255,.25), 0 0 30px rgba(214,228,255,.22) }
.rm-frame.on { box-shadow: inset 0 0 0 1px var(--ice), 0 0 40px rgba(214,228,255,.16) }
.rm-calls { position: relative; flex: 1 1 auto; min-width: 0 }
.rm-call { position: absolute; left: 30px; right: 0; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; padding: 4px 0; text-align: left; background: none; border: 0; font: inherit; color: var(--muted); transition: color .2s }
button.rm-call { cursor: pointer }
.rm-call .u { font: 500 9.5px/1.2 var(--mono); letter-spacing: .08em; color: var(--faint); font-variant-numeric: tabular-nums; transition: color .2s }
.rm-call .n { font-size: 14px; line-height: 1.25 }
.rm-call.static { color: var(--faint) }
button.rm-call:hover, .rm-call.hov { color: var(--ink) }
.rm-call.on { color: var(--ink) }
.rm-call.on .u { color: var(--ice) }
.rm-leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible }
.rm-leads polyline { fill: none; stroke: var(--line-2); stroke-width: 1; transition: stroke .2s }
.rm-leads rect { fill: var(--line-2); transition: fill .2s }
.rm-leads .on polyline, .rm-leads .hov polyline { stroke: var(--ice) }
.rm-leads .on rect, .rm-leads .hov rect { fill: var(--ice) }

.bd-band { padding-bottom: 0 }
.bd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 56px }
.bd-head .txt { display: flex; flex-direction: column; gap: 20px; max-width: 660px }
.bd-head .seg button { padding: 12px 18px; min-height: 44px }
.bd-svgwrap { margin-top: clamp(36px, 5vw, 64px) }
.bd-svg { display: block; width: 100%; height: auto; overflow: visible }
.bd-svg.narrow { max-width: 480px; margin-inline: auto }
.bd-svg text { font-family: var(--display); fill: var(--ink) }
.bd-svg .m { font-family: var(--mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase }
.bd-svg .plate { fill: var(--night) }
.bd-svg .plate.in { fill: var(--night-2) }
.bd-lines { transition: opacity .2s }
.sheet-wrap { position: relative; z-index: 2; margin-top: clamp(36px, 5vw, 64px); margin-bottom: -150px; display: flex; justify-content: flex-end }
.sheet { --pad: clamp(22px, 3.2vw, 38px); width: min(780px, 100%); background: var(--sheet); color: var(--p-ink); border: 1px solid var(--p-line); box-shadow: 0 30px 70px rgba(0,0,0,.5); padding: 0 var(--pad) var(--pad); display: flex; flex-direction: column; gap: 22px; overflow: hidden }
.sh-tabs { display: flex; align-items: stretch; flex-wrap: wrap; margin-inline: calc(-1 * var(--pad)); padding-inline: calc(var(--pad) - 14px) var(--pad); border-bottom: 1px solid var(--p-line) }
.sh-tabs button { position: relative; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p-muted); background: none; border: 0; padding: 18px 14px 16px; min-height: 48px; cursor: pointer; transition: color .2s }
.sh-tabs button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--p-ink); transform: scaleX(0); transition: transform .3s cubic-bezier(.2,.7,.2,1) }
.sh-tabs button:hover { color: var(--p-ink) }
.sh-tabs button[aria-pressed="true"] { color: var(--p-ink) }
.sh-tabs button[aria-pressed="true"]::after { transform: scaleX(1) }
.sh-tabs span { margin-left: auto; align-self: center; color: var(--p-muted); padding-block: 8px }
.sh-body { display: flex; flex-direction: column; gap: 18px }
.sh-mode { margin: 0; font-weight: 300; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -.03em }
.sheet dl.spec dt { color: var(--p-muted) }
.sheet dl.spec dd { color: var(--p-soft) }

.paper { background: var(--paper); color: var(--p-ink) }
.paper .eyebrow { color: var(--p-ink) }
.paper .lede { color: var(--p-soft) }
.after-sheet { padding-top: calc(150px + clamp(72px, 9vw, 128px)) }
.ev { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 104px); row-gap: 40px; align-items: start }
.ev-head { display: flex; flex-direction: column; gap: 20px }
.ev-list { display: flex; flex-direction: column; border-top: 1px solid var(--p-line); margin-top: 16px }
.ev-list button { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: baseline; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--p-line); padding: 14px 0; min-height: 50px; color: var(--p-muted); font: inherit; cursor: pointer }
.ev-list button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--p-ink); transform-origin: left; transform: scaleX(0); opacity: 0 }
.ev-list.cycling button[aria-pressed="true"]::after { opacity: .6; transform: scaleX(var(--p, 0)) }
.ev-list .f { font: 500 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase }
.ev-list .t { font-size: 15.5px; color: var(--p-soft) }
.ev-list button:hover .t { color: var(--p-ink) }
.ev-list button[aria-pressed="true"] .f, .ev-list button[aria-pressed="true"] .t { color: var(--p-ink) }
.ev-list button[aria-pressed="true"] .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px }
.ev-note { margin: 4px 0 0; color: var(--p-muted) }
.ev-doc { display: grid; background: var(--sheet); border: 1px solid var(--p-line); box-shadow: 0 1px 0 var(--p-line), 0 10px 24px rgba(14,17,22,.06); padding: clamp(20px, 2.6vw, 32px) }
.ev-body { grid-area: 1 / 1; min-height: var(--doc-h, 0); min-width: 0; display: flex; flex-direction: column; gap: 14px; transition: opacity .38s cubic-bezier(.2,.6,.3,1) .05s }
.ev-body.leaving { opacity: 0; transition: opacity .24s cubic-bezier(.5,0,.9,.6); pointer-events: none }
.d-top { display: flex; justify-content: space-between; gap: 12px; color: var(--p-muted); border-bottom: 1px solid var(--p-line); padding-bottom: 12px }
.d-f { color: var(--p-ink) }
.ev-doc h3 { font-size: 24px }
.d-meta { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px }
.d-meta dt { font: 500 10px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p-muted) }
.d-meta dd { margin: 0; color: var(--p-soft) }
.d-toc { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--p-line); display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; color: var(--p-soft) }
.d-toc li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px }
.d-toc span { font: 500 11px/1.6 var(--mono); color: var(--p-muted); font-variant-numeric: tabular-nums }
.d-ft { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; color: var(--p-muted) }
.pilot-band { border-top: 1px solid var(--p-line) }
.pilot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 104px); row-gap: 40px; align-items: start }
.pilot-head { display: flex; flex-direction: column; gap: 20px }
.pilot-head dl.spec { margin-top: 12px; border-top: 1.5px solid var(--p-ink); padding-top: 18px }
.pilot-head dl.spec dt { color: var(--p-muted) }
.pilot-head dl.spec dd { color: var(--p-soft) }
.pilot-contact { display: flex; flex-direction: column; gap: 22px; min-width: 0 }
.pf { color-scheme: light; background: var(--sheet); border: 1px solid var(--p-line); box-shadow: 0 1px 0 var(--p-line), 0 18px 40px rgba(14,17,22,.07); padding: clamp(20px, 2.8vw, 32px); display: flex; flex-direction: column; gap: 20px }
.pf-top { color: var(--p-muted); border-bottom: 1px solid var(--p-line); padding-bottom: 12px }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.fld { display: flex; flex-direction: column; gap: 7px; min-width: 0 }
.fld.wide { grid-column: 1 / -1 }
.fld > span { font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p-muted) }
.fld input, .fld select, .fld textarea { font: 16px/1.4 var(--display); color: var(--p-ink); background: var(--paper); border: 1px solid var(--p-line); border-radius: 2px; padding: 11px 12px; min-height: 46px; width: 100%; transition: border-color .2s, background .2s }
.fld textarea { resize: vertical; min-height: 110px }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: #b9bec6 }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--p-ink); background: var(--sheet) }
.pf ::placeholder { color: #8a9099 }
.pf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px }
.pf-foot p { margin: 0; color: var(--p-muted); font-size: 14px }
.pf-status { margin: 0; padding: 12px 14px; border: 1px solid var(--p-line); background: var(--paper); color: var(--p-soft); font-size: 14.5px }
.pf .btn.ink:focus-visible, .mail .btn:focus-visible { outline-color: var(--p-ink) }
.mail { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; color: var(--p-muted) }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; color: var(--p-ink) }
.addr { position: relative; display: inline-grid; background: none; border: 0; padding: 2px 0 8px; color: var(--p-ink); cursor: pointer; font: 300 clamp(26px, 3vw, 36px)/1.2 var(--display); letter-spacing: -.02em; text-align: left; min-width: 0; transition: transform .12s ease }
.addr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor; transform-origin: left; transition: height .2s, transform .45s cubic-bezier(.2,.7,.2,1) }
.addr:hover::after { height: 3px }
.addr:active { transform: translateY(1px) }
.addr-t, .addr-ok { grid-area: 1 / 1; transition: opacity .25s, transform .35s cubic-bezier(.2,.7,.2,1); overflow-wrap: anywhere }
.addr-ok { opacity: 0; transform: translateY(6px) }
.addr.done .addr-t { opacity: 0; transform: translateY(-6px) }
.addr.done .addr-ok { opacity: 1; transform: none }
.addr.done::after { transform: scaleX(.35) }
.addr:focus-visible { outline-color: var(--p-ink); outline-offset: 6px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.foot { background: var(--night); border-top: 1px solid var(--line) }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px 40px; padding-block: 44px }
.foot-links { display: flex; flex-wrap: wrap; gap: 24px; color: var(--muted) }
.foot-links a { text-decoration: none }
.foot-links a:hover { color: var(--ink) }
.foot small { color: var(--faint); font: 500 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase }

.pf-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.pf-check:empty { display: none }
.pf-foot a { color: inherit; text-underline-offset: 3px }
.pf-foot a:hover { color: var(--p-ink) }
.pf-status.ok { border-color: #9bc6a8; background: #eef7f0; color: #1f4a2c }
.btn:disabled { opacity: .6; cursor: progress }

.page { min-height: 100svh; display: flex; flex-direction: column }
.page > main { flex: 1 }
.page .nav { padding-block: 22px }
.nf { display: flex; flex-direction: column; gap: 24px; padding-block: clamp(72px, 14vh, 160px) }
.nf h1 { max-width: 14ch }
.nf .lede { max-width: 44ch }
.nf-slot { width: min(420px, 100%); height: 44px; border: 1px dashed var(--line-2); border-radius: 2px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: var(--faint) }
.nf-slot i { width: 46%; height: 2px; background: var(--line-2) }
.doc-band { background: var(--paper); color: var(--p-ink); flex: 1 }
.doc { max-width: 760px; padding-block: clamp(56px, 8vw, 104px) }
.doc .eyebrow { color: var(--p-ink) }
.doc h1 { font-size: clamp(36px, 4.6vw, 60px); margin: 14px 0 12px }
.doc .meta { color: var(--p-muted); margin: 0 0 40px }
.doc h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; letter-spacing: -.015em; margin: 44px 0 12px }
.doc p, .doc li { color: var(--p-soft); font-size: 16.5px; line-height: 1.65; max-width: 66ch }
.doc p { margin: 0 0 14px }
.doc ul { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px }
.doc a { color: var(--p-ink); text-underline-offset: 3px }
.doc table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15px }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-top: 1px solid var(--p-line); color: var(--p-soft) }
.doc th { font: 500 10.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p-muted); width: 30% }
.doc .table { overflow-x: auto }

@media (max-width: 900px) {
  .rm { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "panel"; grid-template-rows: auto; row-gap: 36px }
  .rm-stage { --rh: clamp(470px, 128vw, 660px) }
  .rm-scale { width: 28px }
  .rm-num { right: 12px }
  .rm-call { left: 22px }
  .rm-call .n { font-size: 13px }
  .ev, .pilot { grid-template-columns: minmax(0, 1fr) }
  .ev-list button { grid-template-columns: 96px minmax(0, 1fr) }
  .sheet-wrap { margin-bottom: -120px }
  .after-sheet { padding-top: calc(120px + 72px) }
}
@media (max-width: 860px) { .links { display: none } }
@media (max-width: 760px) { .copy { bottom: 40px } .copy-in { gap: 16px } .sub { font-size: 16px } .bub { max-width: 220px } .tag { display: none } }
@media (max-width: 380px) { .rm-call .n { font-size: 12px } .rm-call { left: 18px } }
@media (max-width: 560px) {
  .doc th { width: 40% }
  .wm { font-size: 17px; letter-spacing: .17em }
  .sh-tabs span { display: none }
  .sh-tabs button { padding-inline: 10px }
  .pf-grid { grid-template-columns: minmax(0, 1fr) }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .stage, .ev-body, .ev-body.leaving, .rm-hit, .rm-frame, .rm-static { transition: none }
  .caret, .rm-panel.in { animation: none }
}