/* Senditor /security. The landing's look (v8): the dark stage carries the top bar and the promise, the sheet slides over it
   with five sections, each one claim group beside one drawn panel. Colours are tokens (tokens.css); the only literals here
   are white or black at an alpha, for light and shade. The top bar, buttons, status icons and footer are copied from
   site.css (owned by the landing; never imported, so a landing change cannot move this page).
   Motion: each panel plays once, when it first comes into view (security.js adds .on). Everything that moves is transform
   or opacity, no blur, no scroll listener, no frame loop. Without JavaScript, and before .on, nothing is hidden unless
   html has .js, so every panel can read in its end state. Reduced motion keeps the fades and drops the movement. */

:root {
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-press: cubic-bezier(.23, 1, .32, 1);
  --e-move: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--stage); }
body { margin: 0; background: var(--stage); color: var(--s-ink); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: var(--s-light); }
.sheet ::selection { background: var(--selection); }
h1, h2, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--s-focus); outline-offset: 3px; }
.sheet :focus-visible { outline-color: var(--focus); }
.skip { position: fixed; z-index: 60; left: 16px; top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--s-chosen); color: var(--s-on-chosen); font: 600 14px/1 var(--font); }
.skip:not(:focus-visible) { clip-path: inset(50%); opacity: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mark { width: 24px; height: 24px; flex: none; }
.mk-up { fill: var(--s-mark-upper); }
.mk-lo { fill: var(--s-mark-lower); }
.foot .mk-up { fill: var(--mark-upper); }
.foot .mk-lo { fill: var(--mark-lower); }
/* the dashboard's status icons (site.css) */
.st { flex: none; display: inline-block; vertical-align: middle; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.st[data-hue="success"] { color: var(--s-icon-success); }
.st .disc { fill: currentColor; stroke: none; }
.st .cut { stroke: var(--s-icon-glyph); }
/* Maya's answer tag (site.css) */
.tag { height: 22px; padding: 0 10px 0 4px; display: inline-flex; align-items: center; gap: 5px; border-radius: 11px; font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.tag.yes { background: var(--s-yes); color: var(--s-on-yes); border-top-right-radius: 2px; }
.ai { width: 14px; height: 14px; flex: none; display: block; overflow: visible; }
.ai .gl { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ai.yi .lb { fill: var(--s-on-yes); }
.ai.yi .gl { stroke: var(--s-yes); }

/* ---------- buttons and the top bar (site.css, the plain page's bar: no glass) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 550 16px/1 var(--font); letter-spacing: -.01em; white-space: nowrap; transition: transform 160ms var(--e-press), background-color 200ms ease; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn-chosen { background: var(--s-chosen); color: var(--s-on-chosen); }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.nav { position: absolute; z-index: 50; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 6px 0 10px; border-radius: 999px; color: var(--s-ink); background: var(--s-veil); box-shadow: inset 0 0 0 .5px var(--s-hair); white-space: nowrap; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 8px; border-radius: 14px; font: 600 17px/1 var(--font); letter-spacing: -.02em; }
.nav .brand { margin-right: 6px; }
.links { display: flex; gap: 2px; }
.links a { height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; font: 500 14px/1 var(--font); color: var(--s-ink-2); transition: color 200ms ease, background-color 200ms ease; }
.nav .btn { margin-left: 6px; }
@media (hover: hover) and (pointer: fine) {
  .btn-chosen:hover { background: var(--s-chosen-hover); }
  .links a:hover { color: var(--s-ink); background: var(--s-veil-2); }
}

/* ---------- the promise, on the stage ---------- */
.hero { padding: 150px 20px 96px; text-align: center; background: var(--stage); }
.eyebrow { font: 500 16px/1.2 var(--font); color: var(--s-ink-2); }
h1 { margin: 22px auto 0; max-width: 18ch; font: 600 66px/1.04 var(--font); letter-spacing: -.04em; color: var(--s-ink); text-wrap: balance; }
.sub { margin: 22px auto 0; max-width: 40ch; font: 400 20px/1.45 var(--font); color: var(--s-ink-2); letter-spacing: -.01em; text-wrap: balance; }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 40px auto 0; }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--s-veil); box-shadow: inset 0 0 0 1px var(--s-hair); font: 500 14px/1 var(--font); color: var(--s-ink-2); transition: color 200ms ease, background-color 200ms ease, transform 160ms var(--e-press); -webkit-tap-highlight-color: transparent; }
.jump a:active { transform: scale(.97); }
.jump .i { width: 16px; height: 16px; color: var(--s-ink-3); }
@media (hover: hover) and (pointer: fine) { .jump a:hover { color: var(--s-ink); background: var(--s-veil-2); } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .jump a { transition: none; } .jump a:active { transform: none; } }

/* ---------- the sheet ---------- */
.sheet { position: relative; z-index: 10; margin-top: -48px; background: var(--sheet); color: var(--ink); border-radius: 40px 40px 0 0; box-shadow: 0 -40px 80px -20px var(--sheet-shadow); }
.sheet .sec { scroll-margin-top: 24px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 48px; }
.sec { max-width: 1200px; margin: 0 auto; padding: 120px 48px 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.sec:first-child { padding-top: 104px; }
.say h2 { font: 600 44px/1.06 var(--font); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.say p { margin-top: 16px; max-width: 40ch; font: 400 18px/1.55 var(--font); color: var(--ink-2); text-wrap: pretty; }
.say h2 + p { margin-top: 22px; }
.tlink { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* the cloud flag: rows true only after the move (M-184) show with <html data-cloud="on">; their today twins hide then */
html:not([data-cloud="on"]) .cloud-on { display: none !important; }
html[data-cloud="on"] .cloud-off { display: none !important; }

/* ---------- a panel: a small piece of the stage inside the sheet. 1px hairlines, 8px inner radius (upload.ad's frames) ---------- */
.pnl { position: relative; padding: 40px 36px; border-radius: 20px; color: var(--s-ink); background: radial-gradient(620px 300px at 50% 0, var(--s-light-2), transparent 70%), var(--stage); box-shadow: inset 0 0 0 1px var(--s-hair), 0 40px 80px -40px var(--lift-2); display: grid; align-content: center; overflow: hidden; }
.card, .rq, .rec, .node, .crumb { background: var(--s-veil); box-shadow: inset 0 0 0 1px var(--s-hair); border-radius: 8px; }
/* on the dark sheet the stage panel needs a brighter rim to keep its edge */
@media (prefers-color-scheme: dark) {
  .pnl { box-shadow: inset 0 0 0 1px var(--s-light), 0 40px 80px -40px var(--lift-2); }
}
.pnl .i { width: 16px; height: 16px; }

/* 1 · the write fence: five requests, one rule */
.gate-head, .rq { display: grid; grid-template-columns: minmax(0, 1fr) 112px 118px; gap: 16px; align-items: center; }
.gate-head { padding: 0 14px 10px 16px; font: 500 12px/1 var(--font); letter-spacing: .02em; color: var(--s-ink-3); }
.gate-head span:last-child { grid-column: 3; justify-self: end; }
.rqs { display: grid; gap: 8px; }
.rq { height: 54px; padding: 0 12px 0 16px; font: 500 15px/1.2 var(--font); }
.rq-l { position: relative; justify-self: start; white-space: nowrap; }
.rq.no .rq-l { opacity: .5; }
.rq.no .rq-l::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px; border-radius: 1px; background: currentColor; transform-origin: 0 50%; }
.trk { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--s-hair) 0 3px, transparent 3px 7px); }
.lit { position: absolute; left: 0; top: 0; height: 2px; width: 100%; border-radius: 1px; background: var(--s-ink-2); transform-origin: 0 50%; }
.rq.no .lit { width: calc(100% - 26px); background: var(--s-quiet); }
.rq.ok { background: var(--s-veil-2); }
.run { position: absolute; inset: 0; }
.rq.no .run { transform: translateX(calc(100% - 26px)); }
.rq.ok .run { transform: translateX(100%); }
.dot { position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--s-ink); opacity: 0; box-shadow: 0 0 0 3px var(--s-veil-2); }
.wall { position: absolute; right: 18px; top: -11px; width: 3px; height: 24px; border-radius: 2px; background: var(--s-ink); box-shadow: 0 0 0 3px var(--stage); }
.res { justify-self: end; }
.pz { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 6px; border-radius: 999px; background: var(--s-veil-2); box-shadow: inset 0 0 0 1px var(--s-hair); font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; transform-origin: 100% 50%; }
.rf { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--font); color: var(--s-ink-3); transform-origin: 100% 50%; }
.rf .i { width: 14px; height: 14px; }

.js .gate:not(.on) .rq { opacity: 0; transform: translateY(8px); }
.js .gate:not(.on) .run { transform: none; }
.js .gate:not(.on) .lit { transform: scaleX(0); }
.js .gate:not(.on) .dot { opacity: 1; }
.js .gate:not(.on) .wall { opacity: .4; }
.js .gate:not(.on) .rq.no .rq-l { opacity: 1; }
.js .gate:not(.on) .rq.no .rq-l::after { transform: scaleX(0); }
.js .gate:not(.on) .res { opacity: 0; transform: scale(.94); }
.gate.on .rq { --go: calc(520ms + var(--i) * 190ms); --hit: calc(var(--go) + 640ms); transition: opacity 480ms var(--e-out) calc(var(--i) * 70ms), transform 480ms var(--e-out) calc(var(--i) * 70ms); }
.gate.on .run, .gate.on .lit { transition: transform 640ms var(--e-move) var(--go); }
.gate.on .dot { transition: opacity 160ms linear calc(var(--hit) - 60ms); }
.gate.on .wall { transition: opacity 180ms linear var(--hit); }
.gate.on .rq.no .rq-l { transition: opacity 300ms var(--e-out) var(--hit); }
.gate.on .rq.no .rq-l::after { transition: transform 360ms var(--e-out) calc(var(--hit) + 40ms); }
.gate.on .res { transition: opacity 260ms var(--e-out) calc(var(--hit) + 60ms), transform 320ms var(--e-out) calc(var(--hit) + 60ms); }

/* 2 · signing in: Facebook, our server, your browser */
.flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px 28px; align-items: center; }
.fb { grid-row: 1 / span 2; }
.bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--s-hair); font: 500 12.5px/1 var(--font); color: var(--s-ink-2); }
.bar .i { width: 14px; height: 14px; color: var(--s-ink-3); }
.fb-in { padding: 18px 16px 16px; }
.lab { font: 500 12.5px/1.2 var(--font); color: var(--s-ink-3); }
.perms { display: grid; gap: 11px; margin-top: 14px; }
.perms li { display: flex; align-items: center; gap: 10px; font: 500 15px/1.2 var(--font); }
.pw { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 42px; margin-top: 20px; padding: 0 12px; border-radius: 8px; background: var(--s-veil); box-shadow: inset 0 0 0 1px var(--s-hair); font: 400 13px/1 var(--font); color: var(--s-ink-3); }
.dots { color: var(--s-ink-2); letter-spacing: .08em; }
.slot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 64px; padding: 14px; }
.key { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 10px; border-radius: 999px; background: var(--s-chosen); color: var(--s-on-chosen); font: 600 13px/1 var(--font); box-shadow: 0 10px 24px -10px var(--s-shadow); }
.key .i { width: 16px; height: 16px; }
.kept { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--font); color: var(--s-ink-3); white-space: nowrap; }
.kept .i { width: 14px; height: 14px; }
.empty span { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px dashed var(--s-quiet); font: 500 12.5px/1 var(--font); color: var(--s-ink-3); }

.js .flow:not(.on) .perms li { opacity: 0; transform: translateY(4px); }
.js .flow:not(.on) .key, .js .flow:not(.on) .kept { opacity: 0; }
.flow.on .perms li { transition: opacity 360ms var(--e-out) calc(260ms + var(--i) * 110ms), transform 360ms var(--e-out) calc(260ms + var(--i) * 110ms); }
.flow.on .kept { transition: opacity 320ms var(--e-out) 1900ms; }

/* 3 · the client's yes, and what an edit does to it */
.appr { place-items: center; min-height: 500px; }
.sample { position: absolute; left: 22px; top: 18px; font: 500 12px/1 var(--font); color: var(--s-ink-3); }
.post { width: 300px; border-radius: 12px; overflow: hidden; background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--s-hair), 0 30px 60px -24px var(--s-deep); }
.post-h { display: flex; align-items: center; gap: 9px; padding: 12px 12px 8px; }
.av { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.who { display: grid; font: 600 13.5px/1.2 var(--font); }
.who small { font: 400 11.5px/1.3 var(--font); color: var(--ink-3); }
.copy { display: grid; padding: 0 12px 10px; font: 400 13.5px/1.4 var(--font); }
.copy > span { grid-area: 1 / 1; }
.copy .v1 { opacity: 0; }
.post img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 0; }
.post-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 12px; }
.ans { display: grid; justify-items: start; }
.ans > .tag { grid-area: 1 / 1; transform-origin: 0 50%; }
.ans .yes { opacity: 0; }
.tag.ood { padding: 0 10px 0 7px; background: var(--sunk); color: var(--ink-2); letter-spacing: .1em; }
.tag.ood .i { width: 13px; height: 13px; }
.edited { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 var(--font); color: var(--ink-3); }
.edited .i { width: 13px; height: 13px; }
.wd { position: absolute; right: 18px; top: 14px; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 10px; border-radius: 999px; background: var(--s-veil); box-shadow: inset 0 0 0 1px var(--s-hair); font: 500 13px/1 var(--font); color: var(--s-ink-2); }

.js .appr:not(.on) .copy .v1 { opacity: 1; }
.js .appr:not(.on) .copy .v2 { opacity: 0; transform: translateY(5px); }
.js .appr:not(.on) .edited { opacity: 0; transform: translateX(-4px); }
.js .appr:not(.on) .ood { opacity: 0; transform: scale(.94); }
.appr.on .ans .yes { animation: yes-life 2100ms linear 300ms both; }
.appr.on .copy .v1 { transition: opacity 260ms var(--e-out) 1500ms; }
.appr.on .copy .v2 { transition: opacity 360ms var(--e-out) 1560ms, transform 420ms var(--e-out) 1560ms; }
.appr.on .edited { transition: opacity 320ms var(--e-out) 1600ms, transform 380ms var(--e-out) 1600ms; }
.appr.on .ood { transition: opacity 300ms var(--e-out) 2380ms, transform 360ms var(--e-out) 2380ms; }
@keyframes yes-life {
  0% { opacity: 0; transform: scale(.92); animation-timing-function: var(--e-out); }
  16% { opacity: 1; transform: none; }
  88% { opacity: 1; transform: none; animation-timing-function: var(--e-out); }
  100% { opacity: 0; transform: scale(.96); }
}

/* 4 · encryption (after the move) */
.rec-h { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-bottom: 1px solid var(--s-hair); font: 600 15px/1 var(--font); }
.seal { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--s-veil-2); color: var(--s-ink); }
.seal .i { width: 15px; height: 15px; }
.rec dl > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 0 14px; }
.rec dl > div + div { border-top: 1px solid var(--s-hair); }
.rec dt { font: 400 13px/1.3 var(--font); color: var(--s-ink-3); }
.rec dd { display: grid; overflow: hidden; }
.rec dd > span { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl { font: 500 14.5px/1.3 var(--font); opacity: 0; }
.cx { font: 400 13.5px/1.3 var(--font); letter-spacing: .03em; color: var(--s-ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--s-veil); box-shadow: inset 0 0 0 1px var(--s-hair); font: 500 13px/1 var(--font); color: var(--s-ink-2); }
.chips .i { width: 14px; height: 14px; }

.js .vault:not(.on) .pl { opacity: 1; }
.js .vault:not(.on) .cx { opacity: 0; transform: translateY(6px); }
.js .vault:not(.on) .seal { opacity: 0; transform: scale(.9); }
.vault.on .pl { transition: opacity 280ms var(--e-out) calc(620ms + var(--i) * 170ms); }
.vault.on .cx { transition: opacity 380ms var(--e-out) calc(680ms + var(--i) * 170ms), transform 420ms var(--e-out) calc(680ms + var(--i) * 170ms); }
.vault.on .seal { transition: opacity 300ms var(--e-out) 300ms, transform 360ms var(--e-out) 300ms; }

/* 5 · cutting us off */
.cut { gap: 22px; }
.link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.node { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; font: 500 15px/1 var(--font); white-space: nowrap; }
.node .mark { width: 22px; height: 22px; }
.node .i { width: 18px; height: 18px; color: var(--s-ink-2); }
.wire { position: relative; height: 56px; display: grid; place-items: center; }
.half { position: absolute; top: 50%; height: 2px; margin-top: -1px; width: 50%; background: var(--s-ink-2); }
.half.l { left: 0; transform-origin: 0 50%; }
.half.r { right: 0; transform-origin: 100% 50%; }
.half { transform: scaleX(.3); }
.state { position: relative; display: grid; }
.state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--stage); box-shadow: inset 0 0 0 1px var(--s-hair); font: 500 12.5px/1 var(--font); white-space: nowrap; }
.on-s { opacity: 0; }
.on-s i { width: 8px; height: 8px; border-radius: 50%; background: var(--s-icon-success); }
.off-s { color: var(--s-ink-2); }
.off-s .i { width: 14px; height: 14px; }
.btn-d { justify-self: center; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--s-veil-2); box-shadow: inset 0 0 0 1px var(--s-hair); font: 500 14px/1 var(--font); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 52px; padding: 10px 10px 10px 14px; font: 400 13px/1.3 var(--font); color: var(--s-ink-3); }
.crumb .i { width: 13px; height: 13px; }
.crumb span:nth-last-child(2) { color: var(--s-ink); font-weight: 500; }
.rm { margin-left: auto; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--s-veil-2); color: var(--s-ink); font: 500 12.5px/1 var(--font); }

.js .cut:not(.on) .half { transform: none; }
.js .cut:not(.on) .on-s { opacity: 1; }
.js .cut:not(.on) .off-s { opacity: 0; transform: scale(.94); }
.cut.on .btn-d { animation: press 300ms var(--e-press) 620ms both; }
.cut.on .half { transition: transform 560ms var(--e-move) 960ms; }
.cut.on .on-s { transition: opacity 200ms var(--e-out) 960ms; }
.cut.on .off-s { transition: opacity 300ms var(--e-out) 1380ms, transform 360ms var(--e-out) 1380ms; }
@keyframes press { 0%, 100% { transform: none; } 45% { transform: scale(.95); } }

/* ---------- the close and the footer (site.css) ---------- */
/* one quiet line, not a second headline: the five sections carry the page */
.close { padding: 112px 20px 96px; text-align: center; }
.close p { font: 400 14px/1.5 var(--font); color: var(--ink-2); }
.foot { border-top: 1px solid var(--line); padding-block: 48px 56px; }
.foot-in { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot .brand { margin-left: -8px; color: var(--ink); }
.foot-brand p { margin-top: 10px; max-width: 34ch; font: 400 14px/1.5 var(--font); color: var(--ink-2); }
.foot-h { margin-bottom: 4px; font: 600 13px/1.3 var(--font); letter-spacing: .02em; color: var(--ink); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-col a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; font: 400 15px/1.3 var(--font); color: var(--ink-2); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .foot-col a:hover, .tlink:hover { color: var(--ink); }
}

/* ---------- phones and narrow windows ---------- */
@media (max-width: 860px) {
  .nav .links { display: none; }
  .hero { padding: 116px 20px 120px; }
  .eyebrow { font-size: 14px; }
  h1 { margin-top: 14px; max-width: 12ch; font-size: clamp(36px, 11vw, 46px); line-height: 1.04; }
  .sub { margin-top: 16px; max-width: 30ch; font-size: 17px; }
  .jump { margin-top: 28px; gap: 6px; }
  .jump a { padding: 0 13px 0 10px; font-size: 13px; }
  .sheet { margin-top: -36px; border-radius: 28px 28px 0 0; }
  .wrap { padding-inline: 20px; }
  .sec { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 72px 16px 0; }
  .sec:first-child { padding-top: 56px; }
  .say { padding-inline: 4px; }
  .say h2 { font-size: clamp(30px, 8.6vw, 38px); line-height: 1.08; }
  .say p { font-size: 17px; }
  .pnl { min-height: 0; padding: 18px; border-radius: 18px; }
  .gate-head, .rq { grid-template-columns: minmax(0, 1fr) 40px 92px; gap: 10px; }
  .gate-head { padding: 0 10px 10px 12px; }
  .rq { height: 50px; padding: 0 10px 0 12px; font-size: 14px; }
  .rq.no .run { transform: translateX(calc(100% - 16px)); }
  .rq.no .lit { width: calc(100% - 16px); }
  .wall { right: 10px; }
  .pz { padding: 0 9px 0 5px; letter-spacing: .08em; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fb { grid-row: auto; }
  .appr { min-height: 0; padding-block: 64px 28px; }
  .post { width: min(280px, 100%); }
  .rec dl > div { grid-template-columns: 104px minmax(0, 1fr); }
  .link { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .wire { width: 100%; height: 72px; }
  .half { left: 50% !important; right: auto !important; width: 2px; height: 50%; margin: 0 0 0 -1px; }
  .half.l { top: 0; transform-origin: 50% 0; }
  .half.r { top: 50%; transform-origin: 50% 100%; }
  .half { transform: scaleY(.3); }
  .js .cut:not(.on) .half { transform: none; }
  .close { padding: 72px 20px 64px; }
  .foot { padding-block: 40px 48px; }
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .foot-brand { grid-column: 1 / -1; }
}

/* reduced motion: the panels still change state, by fading only; nothing travels, scales or slides */
@media (prefers-reduced-motion: reduce) {
  .btn, .links a, .foot-col a { transition: none; }
  .btn:active { transform: none; }
  .js .pnl:not(.on) .rq, .js .pnl:not(.on) .perms li, .js .pnl:not(.on) .res, .js .pnl:not(.on) .copy .v2, .js .pnl:not(.on) .edited,
  .js .pnl:not(.on) .ood, .js .pnl:not(.on) .cx, .js .pnl:not(.on) .seal, .js .pnl:not(.on) .off-s { transform: none; }
  .js .gate:not(.on) .run { transform: translateX(100%); }
  .js .gate:not(.on) .rq.no .run { transform: translateX(calc(100% - 26px)); }
  .js .gate:not(.on) .lit { transform: none; }
  .gate.on .lit { transition: none; }
  .js .gate:not(.on) .dot { opacity: 0; }
  .js .gate:not(.on) .rq.no .rq-l::after { transform: none; }
  .gate.on .run, .gate.on .rq.no .rq-l::after { transition: none; }
  .appr.on .ans .yes { animation-name: yes-fade; }
  .cut.on .btn-d { animation: none; }
  .js .cut:not(.on) .half { opacity: 1; transform: none; }
  .half { opacity: 0; }
  .cut.on .half { transform: none; transition: opacity 400ms var(--e-out) 700ms; }
}
@keyframes yes-fade { 0% { opacity: 0; } 16%, 88% { opacity: 1; } 100% { opacity: 0; } }