/* Doorman landing: the security-print world. A submission is inspected like a note held to the light.
   One intaglio ink stepped over a security tint; red is the overprint, used only for the verdict being shown. */
@font-face { font-family: "Wittgenstein"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/wittgenstein-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: "Wittgenstein"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(/fonts/wittgenstein-italic-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: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/schibsted-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: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }

/* ---------- tokens: daylight ---------- */
:root {
  --tint: #E1EBE5;      /* security tint, the page ground (the average of the ground plate) */
  --iris-a: #E6F0EA;    /* rainbow-print wash, faint */
  --iris-b: #ECEAF4;
  --paper: #F8FAF7;     /* the note's face */
  --ink: #10342A;       /* intaglio green: type, rules, actions */
  --ink-2: #3D5C52;     /* secondary text */
  --ink-3: #6C877D;     /* engraving lines only, never text */
  --rule: color-mix(in srgb, var(--ink) 20%, transparent);
  --rule-2: color-mix(in srgb, var(--ink) 38%, transparent);
  --micro: color-mix(in srgb, var(--ink) 5%, transparent);
  --over: #C21F2A;      /* overprint red: the verdict being shown, and nothing else */
  --over-wash: color-mix(in srgb, var(--over) 11%, transparent);
  --on-ink: #EEF3EF;
  --code-bg: #0E241D; --code-ink: #E4E4E0; --code-dim: #8FAA9F;
  --display: "Wittgenstein", "Libre Bodoni", Didot, Georgia, serif;
  --text: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: 1320px; --gut: 20px;
  /* scene: daylight; the page ground is the security-tint paper tiled from the approved comp */
  --page-image: image-set(url(/assets/plates/ground.webp) type("image/webp"), url(/assets/plates/ground.png) type("image/png")); --page-size: 200px 120px; --page-attach: scroll;
  --glow-display: block; --note-bg: transparent; --note-halo: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 2px -1px rgba(16, 52, 42, .22), 0 14px 22px -16px rgba(16, 52, 42, .35); --lamp-light: none;
  --stamp: #355644; --stamp-hover: #2C4A39; --stamp-ink: #EEF3EF; --stamp-image: image-set(url(/assets/plates/stamp-grain.webp) type("image/webp"), url(/assets/plates/stamp-grain.png) type("image/png"));
  color-scheme: light;
}
/* ---------- tokens: the banknote at night, in deep intaglio green ----------
   Explicit dark and system-dark must render identically, so both selectors carry exactly this block. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint: #0A0A0B; --iris-a: #0B0B0C; --iris-b: #111113; --paper: #161618;
    --ink: #ECECE8; --ink-2: #A5A5A1; --ink-3: #6E6A96;
    --micro: color-mix(in srgb, #FFFFFF 3%, transparent);
    --over: #FF7B72; --on-ink: #0A0A0B;
    --code-bg: #050506; --code-ink: #E4E4E0; --code-dim: #90908C;
    color-scheme: dark;
    /* scene: the night plate replaces the daylight one (see the glow-night rules); these are the page's own night values */
    --page-image: repeating-linear-gradient(0deg, var(--micro) 0 1px, transparent 1px 4px), linear-gradient(105deg, var(--iris-a), var(--iris-b) 50%, var(--iris-a));
    --page-size: auto; --page-attach: fixed;
    --glow-display: none; --note-bg: var(--paper);
    --note-halo: 0 28px 60px -28px rgba(0, 0, 0, .7);
    --lamp-light: radial-gradient(closest-side, color-mix(in srgb, var(--ink) 7%, transparent), transparent);
    --stamp-image: none;
  }
}
:root[data-theme="dark"] {
    --tint: #0A0A0B; --iris-a: #0B0B0C; --iris-b: #111113; --paper: #161618;
    --ink: #ECECE8; --ink-2: #A5A5A1; --ink-3: #6E6A96;
    --micro: color-mix(in srgb, #FFFFFF 3%, transparent);
    --over: #FF7B72; --on-ink: #0A0A0B;
    --code-bg: #050506; --code-ink: #E4E4E0; --code-dim: #90908C;
    color-scheme: dark;
    /* scene: the night plate replaces the daylight one (see the glow-night rules); these are the page's own night values */
    --page-image: repeating-linear-gradient(0deg, var(--micro) 0 1px, transparent 1px 4px), linear-gradient(105deg, var(--iris-a), var(--iris-b) 50%, var(--iris-a));
    --page-size: auto; --page-attach: fixed;
    --glow-display: none; --note-bg: var(--paper);
    --note-halo: 0 28px 60px -28px rgba(0, 0, 0, .7);
    --lamp-light: radial-gradient(closest-side, color-mix(in srgb, var(--ink) 7%, transparent), transparent);
    --stamp-image: none;
}
@media (min-width: 760px) { :root { --gut: 40px; } }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-color: var(--rule-2) transparent; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--ink); font: 400 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-color: var(--tint); background-image: var(--page-image); background-size: var(--page-size); background-attachment: var(--page-attach);
}
::selection { background: color-mix(in srgb, var(--ink) 18%, transparent); }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
p a, li a, dd a, td a { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Wittgenstein: the face measured off the approved comp; sturdy enough that its hairlines hold at headline size */
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
code, pre, kbd { font-family: var(--mono); font-variant-ligatures: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--paper); color: var(--ink); padding: 10px 14px; border: 1px solid var(--ink); }
.skip:focus { left: 8px; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- actions: a perforated stub ---------- */
.stub { display: inline-flex; align-items: stretch; border: 1px solid var(--ink); max-width: 100%; }
.stub a, .stub button { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 26px; font: 600 17px/1.2 var(--text); text-decoration: none; cursor: pointer; border: 0; }
.stub .main { background: var(--ink); color: var(--on-ink); }
.stub .main:hover { background: color-mix(in srgb, var(--ink) 88%, var(--tint)); }
.stub .alt { background: transparent; color: var(--ink); border-left: 2px dashed var(--ink); }
.stub .alt:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.stub .arrow { flex: none; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.stub .main:hover .arrow { transform: translateX(3px); }

/* the verdict mark: one form at every scale (hero strip, route row) */
.mark { display: inline-flex; align-items: center; justify-content: center; min-width: 6.2em; padding: .45em .8em .4em; font: 700 13px/1 var(--text); letter-spacing: .24em; text-transform: uppercase; border: 2px solid currentColor; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px currentColor; white-space: nowrap; }
.mark.void { color: var(--over); }
.mark.genuine { color: var(--on-ink); background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3px var(--on-ink); }
.mark.held { color: var(--ink); border-style: dashed; box-shadow: none; }
.mark.wait { color: var(--ink-2); border-style: dotted; box-shadow: none; }
.mark.lg { font-size: 24px; letter-spacing: .26em; border-width: 3px; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px currentColor; }
.mark.lg.genuine { box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--on-ink); }

/* ---------- nav (shared partial, restyled) ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--tint) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--rule); }
.nav .wrap { display: flex; align-items: center; gap: 36px; height: 80px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 600 17px var(--text); letter-spacing: .3em; text-transform: uppercase; }
.brand i { position: relative; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--tint), inset 0 0 0 3px currentColor; flex: none; }
.brand i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 7px; height: 11px; margin-left: -3.5px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }
.nav .links { display: flex; align-items: center; gap: 28px; }
.nav .links > a, .dd-btn { color: var(--ink-2); font: 500 15px var(--text); text-decoration: none; background: none; border: 0; padding: 8px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav .links > a:hover, .dd-btn:hover, .dd-btn[aria-expanded="true"] { color: var(--ink); }
.dd { position: relative; }
.dd-panel { position: absolute; top: calc(100% + 12px); left: -18px; width: 320px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 1px 0 var(--rule), 0 24px 48px -24px color-mix(in srgb, var(--ink) 40%, transparent); padding: 8px; display: grid; }
.dd-panel[hidden] { display: none; }
.dd-panel a { display: grid; gap: 2px; padding: 10px 12px; text-decoration: none; color: var(--ink); }
.dd-panel a b { font-weight: 600; font-size: 15px; }
.dd-panel a span { font-size: 14px; color: var(--ink-2); }
.dd-panel a:hover, .dd-panel a:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav .login { color: var(--ink); font: 500 15px var(--text); text-decoration: none; padding: 10px 12px; }
.nav .btn.primary { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; background: transparent; color: var(--ink); font: 600 15px var(--text); text-decoration: none; border: 1px solid var(--ink); }
.nav .btn.primary:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.menu-btn { display: none; }
.mnav { border-top: 1px solid var(--rule); background: var(--paper); padding: 8px var(--gut) 20px; display: grid; }
.mnav[hidden] { display: none; }
.mnav a { display: flex; align-items: center; min-height: 46px; color: var(--ink); text-decoration: none; font-size: 17px; border-bottom: 1px solid var(--rule); }
.mnav-h { margin: 18px 0 4px; font: 600 12px var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 900px) { .nav .links, .nav .login { display: none; } .menu-btn { display: grid; } }
@media (pointer: coarse) { .icon-btn { width: 44px; height: 44px; } .nav .btn.primary { min-height: 44px; } }

/* the one guilloche band, drawn by home.js; it scales and never wraps */
.band-line { display: block; width: 100%; height: 26px; color: var(--ink-3); opacity: 1; }
.band-line path { fill: none; stroke: currentColor; stroke-width: .9; vector-effect: non-scaling-stroke; }

/* ---------- hero: the approved comp "Hold it to the light" ----------
   Measured in comp pixels at 1536 wide; --u is one comp pixel, scaled with the viewport (capped at 1600px) so the
   composition holds across desktop widths. Phones get a flowing version below. */
.hero { --u: calc(min(100vw, 1600px) / 1536); padding: calc(32 * var(--u)) 0 0; }
.hero h1 { position: relative; z-index: 2; font: 700 calc(101 * var(--u))/1.09 var(--display); letter-spacing: -0.012em; margin: 0; }
.hero h1 span { display: block; }
.lamp-field { position: relative; width: calc(1140 * var(--u)); height: calc(580 * var(--u)); margin: calc(-58 * var(--u)) auto 0; }
/* the plate carries its own paper ground; its edges dissolve into the page so only the lit sheet reads */
.glow { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: filter .6s cubic-bezier(.2,.8,.2,1); -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 100%); mask: radial-gradient(closest-side, #000 72%, transparent 100%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.lamp-field.inspecting .glow { filter: brightness(1.05) saturate(1.25); }
/* the note: the backlit sheet in the glow plate is its paper; code draws the double rule and everything on it */
.note { position: absolute; left: calc(103 * var(--u)); top: calc(80 * var(--u)); width: calc(928 * var(--u)); min-height: calc(416 * var(--u)); display: flex; flex-direction: column; padding: calc(28 * var(--u)) calc(37 * var(--u)) calc(14 * var(--u)) calc(40 * var(--u)); border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); outline: 1px solid color-mix(in srgb, var(--ink) 70%, transparent); outline-offset: calc(-8 * var(--u)); isolation: isolate; }
.note-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.note-head h2 { font: 600 calc(14.5 * var(--u))/1.2 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.serial { font: 600 calc(22 * var(--u))/1 var(--text); letter-spacing: .06em; color: var(--over); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* message: an editable textarea over a mirror that carries the overprint */
.msg { position: relative; margin-top: calc(26 * var(--u)); }
.msg-view, .msg textarea { display: block; width: 100%; margin: 0; padding: 0; font: 400 calc(22.5 * var(--u))/1.69 var(--text); letter-spacing: 0; white-space: pre-wrap; overflow-wrap: break-word; border: 0; min-height: 5.07em; }
.msg-view { position: relative; z-index: 1; color: var(--ink); pointer-events: none; }
.msg textarea { position: absolute; inset: 0; z-index: 1; height: 100%; resize: none; overflow: hidden; background: transparent; color: transparent; caret-color: var(--ink); outline: none; }
.msg textarea::selection { background: color-mix(in srgb, var(--ink) 22%, transparent); color: transparent; }
.msg:focus-within { box-shadow: 0 2px 0 var(--ink); }
.msg-view mark { background: var(--over-wash); color: var(--over); padding: 1px 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.msg-view mark.ok { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.msg-view mark.hold { background: transparent; color: var(--ink); text-decoration: underline dashed var(--ink-2); text-underline-offset: 4px; }
/* the watermark in the sheet: what the light shows behind the message */
.msg[data-mark]::before { content: attr(data-mark); position: absolute; left: 50%; top: 62%; z-index: 0; font: 600 calc(124 * var(--u))/1 var(--text); letter-spacing: .04em; transform: translate(-50%, -50%); pointer-events: none; animation: mark-rise .6s cubic-bezier(.2,.8,.2,1) both; }
.msg[data-mark="VOID"]::before { color: color-mix(in srgb, var(--over) 17%, transparent); }
.msg[data-mark="GENUINE"]::before { color: color-mix(in srgb, var(--ink) 9%, transparent); }
.msg[data-mark="HELD"]::before { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 22%, transparent); }
@keyframes mark-rise { from { opacity: 0; transform: translate(-50%, -42%) scale(1.06); } }
.reading-row { position: relative; margin-top: calc(44 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid color-mix(in srgb, var(--ink) 70%, transparent); width: calc(700 * var(--u)); }
.reading { font: 400 calc(17.5 * var(--u))/1.4 var(--text); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.reading b { color: var(--ink); font-weight: 700; }
.reading .err { color: var(--ink); }
/* the seal: live line work engraved by home.js (petals cut in turn while a message is read) */
.seal { position: absolute; right: calc(-169 * var(--u)); top: calc(-82 * var(--u)); width: calc(160 * var(--u)); height: calc(150 * var(--u)); overflow: visible; color: var(--ink-3); pointer-events: none; }
.seal path { fill: none; stroke: currentColor; stroke-width: .42; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-linejoin: round; }
.seal .edge { stroke-width: 1; }
.seal .guide { opacity: .16; }
/* examples and the honest small print appear once someone engages with the note */
.note-foot { display: none; margin-top: calc(14 * var(--u)); font-size: 14px; color: var(--ink-2); max-width: 62ch; }
.note.engaged .note-foot { display: block; }
.note-foot button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.note-foot button:hover, .note-foot button[aria-pressed="true"] { text-decoration-color: var(--ink); }
/* the stub along the note's lower edge, torn off a dotted perforation */
.note-stub { position: relative; display: flex; max-width: none; margin: auto calc(-22 * var(--u)) 0 calc(-25 * var(--u)); padding-top: calc(24 * var(--u)); border: 0; }
.note-stub::before { content: ""; position: absolute; left: calc(-14 * var(--u)); right: calc(-14 * var(--u)); top: calc(10 * var(--u)); border-top: 2px dotted color-mix(in srgb, var(--ink) 60%, transparent); }
.note-stub > a, .note-stub > button { flex: 1 1 0; min-height: calc(84 * var(--u)); padding: 0 calc(20 * var(--u)); justify-content: center; font: 600 calc(21 * var(--u))/1.2 var(--text); }
.note-stub .alt { gap: 14px; background: transparent; color: var(--ink); border: 1px solid var(--ink); border-left-width: 1px; }
.note-stub .alt .lamp { width: calc(26 * var(--u)); height: calc(26 * var(--u)); flex: none; }
.note-stub .main { margin-left: calc(6 * var(--u)); gap: 12px; }
.note-stub .alt:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.note-stub .alt:disabled { cursor: progress; }
.glow { display: var(--glow-display); }
/* a low, nearly colourless pool of lamp light on the ground behind the note where no plate draws one */
.lamp-field { background: var(--lamp-light); }
.note { background: var(--note-bg); box-shadow: var(--note-halo); }
/* the next section's heading opens at display scale, straight under the lamp */
.part.how { border-top: 0; padding-top: calc(20 * min(100vw, 1600px) / 1536); }
.part.how .big { font: 700 calc(98 * min(100vw, 1600px) / 1536)/1.05 var(--display); letter-spacing: -0.012em; max-width: none; margin-bottom: 56px; }
@media (max-width: 900px) {
  .hero { --u: 1px; padding-top: 28px; }
  .hero h1 { font-size: clamp(42px, 11vw, 72px); line-height: 1.08; }
  .lamp-field { width: auto; height: auto; margin: 28px var(--gut) 0; padding: 22px 0 26px; }
  .glow { inset: 0 -10px; width: calc(100% + 20px); }
  .note { position: relative; left: auto; top: auto; width: 100%; min-height: 0; padding: 20px 18px 12px; outline-offset: -6px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
  .note-head { flex-wrap: wrap; gap: 6px 12px; }
  .note-head h2 { font-size: 12px; }
  .serial { font-size: 16px; }
  .msg { margin-top: 16px; }
  .msg-view, .msg textarea { font-size: 17px; line-height: 1.6; }
  .msg[data-mark]::before { font-size: 84px; }
  .reading-row { width: auto; margin-top: 22px; padding-right: 92px; }
  .reading { font-size: 15px; }
  .seal { right: 0; top: 2px; width: 80px; height: 75px; }
  .note-stub { flex-direction: column; margin: 18px -6px 0; padding-top: 16px; }
  .note-stub > a, .note-stub > button { min-height: 52px; font-size: 17px; }
  .note-stub .main { margin: 6px 0 0; }
  .part.how .big { font-size: clamp(38px, 10vw, 60px); margin-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) { .msg[data-mark]::before { animation: none !important; } .glow { transition: none; } }

/* ---------- sections ---------- */
section.part { padding: 112px 0; border-top: 1px solid var(--rule); }
.part h2 { font-size: clamp(38px, 5vw, 68px); line-height: 1.1; letter-spacing: -0.015em; max-width: 16ch; }
.part .intro { margin-top: 24px; max-width: 58ch; font-size: clamp(18px, 1.45vw, 20px); color: var(--ink-2); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }

/* the question: three checks, one of them reads */
.checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.checks li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.checks li:last-child { border-bottom-color: var(--ink); }
.checks .who { font-weight: 600; }
.checks .asks { font-family: var(--display); font-size: clamp(21px, 2vw, 27px); line-height: 1.25; }
.checks .res { font-size: 15px; color: var(--ink-2); text-align: right; }
.checks li.us .asks { font-weight: 600; }
.checks li.us .res { color: var(--ink); font-weight: 600; }

/* the routes: one P(real) scale, three marks */
.scale { margin-top: 64px; }
.scale .band-line { height: 46px; opacity: .85; }
.scale-axis { position: relative; height: 26px; margin-top: 4px; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.scale-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.scale-axis span:first-child { transform: none; } .scale-axis span:last-child { transform: translateX(-100%); }
.scale-ticks { position: relative; height: 0; }
.scale-ticks i { position: absolute; bottom: 6px; width: 1px; height: 64px; background: var(--ink); }
.routes { display: grid; grid-template-columns: 20fr 60fr 20fr; border-top: 1px solid var(--ink); margin-top: 0; }
.routes > div { padding: 28px 28px 8px 0; display: grid; gap: 14px; align-content: start; }
.routes > div + div { padding-left: 28px; border-left: 1px solid var(--rule); }
.routes h3 { font-size: 26px; line-height: 1.15; }
.routes p { color: var(--ink-2); font-size: 16px; }
.safety { margin: 56px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.safety li { padding: 22px 28px 0 0; font-size: 16px; color: var(--ink-2); }
.safety li + li { padding-left: 28px; border-left: 1px solid var(--rule); }
.safety b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

/* install */
.code { margin-top: 0; background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--ink); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--rule-2); }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid color-mix(in srgb, var(--code-ink) 16%, transparent); font: 600 12px var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--code-dim); }
.code pre { margin: 0; padding: 22px 18px 24px; font-size: 14px; line-height: 1.75; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; white-space: pre; }
.code .del { color: #F2A19B; text-decoration: line-through; text-decoration-color: color-mix(in srgb, #F2A19B 60%, transparent); }
.code .add { color: #8FE0B4; }
.code .dim { color: var(--code-dim); }
.agent { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule); display: grid; gap: 16px; justify-items: start; }
.agent p { color: var(--ink-2); max-width: 46ch; }
.agent h3 { font-size: 28px; }
.copy-prompt { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px 0 16px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 600 16px var(--text); cursor: pointer; }
.copy-prompt:hover { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
.cp-icons { display: inline-flex; align-items: center; gap: 4px; }
.cp-i { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--ink); }
.cp-i svg, .cp-i svg * { fill: currentColor !important; stroke: none; }
.cp-done { display: none; }
.copy-prompt[data-copied="true"] .cp-label { display: none; }
.copy-prompt[data-copied="true"] .cp-done { display: inline; }
.stacks { margin-top: 28px; font-size: 15px; color: var(--ink-2); }
.stacks a { color: var(--ink); }

/* the register: measured numbers */
.register { margin: 56px 0 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--rule-2); padding: 0 32px; }
.register > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 8px 32px; align-items: baseline; padding: 26px 0; }
/* microprint rule between entries: a line of fine engraving rather than a plain border */
.register > div + div { background: repeating-linear-gradient(90deg, var(--rule-2) 0 2px, transparent 2px 4px) top / 100% 1px no-repeat; }
.register .ser { font: 600 13px var(--text); letter-spacing: .16em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.register dt { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.register dd { margin: 0; font-size: 17px; color: var(--ink-2); }
.footnote { margin-top: 22px; max-width: 92ch; font-size: 14px; color: var(--ink-2); }

/* pricing */
.plans { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--rule-2); }
.plan { padding: 32px 30px 30px; display: flex; flex-direction: column; gap: 6px; }
.plan + .plan { border-left: 1px solid var(--rule); }
.plan h3 { font: 600 13px var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 10px; align-items: center; }
.plan h3 .rec { color: var(--ink); letter-spacing: .16em; border: 1px solid var(--ink); padding: 3px 6px 2px; font-size: 11px; }
.price { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -0.02em; margin-top: 14px; }
.price small { font: 400 16px var(--text); letter-spacing: 0; color: var(--ink-2); }
.plan .founding { font-size: 14px; color: var(--ink); font-weight: 600; min-height: 1.5em; }
.plan .for { color: var(--ink-2); font-size: 16px; margin-top: 6px; }
.plan ul { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 0; }
.plan li { padding: 9px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.plan .stub { margin-top: auto; align-self: flex-start; }
.plan .stub a { min-height: 50px; padding: 0 20px; font-size: 16px; }
.plan .stub.quiet .main { background: transparent; color: var(--ink); }
.plan .stub.quiet .main:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.plans-note { margin-top: 22px; max-width: 80ch; font-size: 15px; color: var(--ink-2); }

/* faq */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding: 24px 0; font-family: var(--display); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 16px; height: 16px; flex: none; align-self: center; background: currentColor; color: var(--ink-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 26px; max-width: 64ch; color: var(--ink-2); }

/* close */
.close { padding: 136px 0 128px; border-top: 1px solid var(--rule); text-align: center; }
.close h2 { font-size: clamp(48px, 7vw, 104px); line-height: 1.1; letter-spacing: -0.02em; max-width: 14ch; margin: 0 auto; }
.close .intro { margin: 28px auto 0; max-width: 46ch; font-size: 20px; color: var(--ink-2); }
.close .stub { margin-top: 40px; }

/* ---------- footer (shared partial, restyled) with the ink legend ---------- */
footer { border-top: 1px solid var(--ink); background: var(--paper); padding: 64px 0 36px; font-size: 15px; }
footer .cols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); gap: 32px; }
footer .about { margin-top: 16px; color: var(--ink-2); max-width: 32ch; }
footer h2 { font: 600 12px var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); margin: 4px 0 14px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
footer ul a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); text-decoration: none; }
footer ul a:hover { text-decoration: underline; }
footer .legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 14px; }
footer .legal a { display: inline-flex; align-items: center; min-height: 32px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  footer .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  footer .cols > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hero { padding: 16px 0 72px; }
  .hero .stub, .close .stub { display: flex; flex-direction: column; width: 100%; }
  .hero .stub a, .close .stub a { justify-content: center; padding: 0 16px; font-size: 17px; }
  .stub .alt { border-left: 0; border-top: 2px dashed var(--ink); }
  .nav .wrap { gap: 12px; }
  .nav .btn.primary { padding: 0 14px; white-space: nowrap; }
  .brand { letter-spacing: .22em; }
  .note { padding: 20px 18px 18px; }
  .msg-view, .msg textarea { font-size: 17px; }
  section.part { padding: 80px 0; }
  .checks li { grid-template-columns: 1fr; gap: 6px; }
  .checks .res { text-align: left; }
  .routes { grid-template-columns: 1fr; }
  .routes > div, .routes > div + div { padding: 22px 0 18px; border-left: 0; border-top: 1px solid var(--rule); }
  .routes > div:first-child { border-top: 0; }
  .scale-axis span:nth-child(2), .scale-axis span:nth-child(3) { font-size: 13px; }
  .safety { grid-template-columns: 1fr; }
  .safety li, .safety li + li { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .register { padding: 0 18px; }
  .register > div { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
  .register dt { font-size: 44px; }
  .mark.lg { font-size: 19px; }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--rule); }
  .close { padding: 96px 0; }
  footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .stub .arrow { transition: none; }
}
/* the legend of marks is not a verdict: red stays with the submission being judged */
.routes .mark.void { color: var(--ink); }
.inspect { white-space: nowrap; }
/* phones: the hero carries the sign-up action, so the nav keeps only brand, theme and menu */
@media (max-width: 480px) { .nav .btn.primary { display: none; } }
.route-h { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }

/* the ink legend, printed above the footer like a note's colour key */
.mark.lg.wait { font-size: 15px; letter-spacing: .2em; }
/* the stub's two halves as the comp draws them: printed panels inset from the paper, torn apart along a scalloped edge */
.note-stub > .alt { flex: 452 1 0; margin: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(4 * var(--u)); }
.note-stub > .main { flex: 438 1 0; margin: calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)); background: color-mix(in srgb, var(--ink) 65%, #6B8F7A); color: var(--on-ink); border: 0; }
.note-stub > .main:hover { background: color-mix(in srgb, var(--ink) 92%, #6B8F7A); }
.note-stub > .alt, .note-stub > .main { position: relative; }
.note-stub > .alt::after, .note-stub > .main::before { content: ""; position: absolute; top: 0; bottom: 0; width: calc(5 * var(--u)); background: radial-gradient(circle at 50% 50%, var(--paper) calc(3 * var(--u)), transparent calc(3.4 * var(--u))) 0 0 / 100% calc(13 * var(--u)) repeat-y; }
.note-stub > .alt::after { right: calc(-3 * var(--u)); }
.note-stub > .main::before { left: calc(-3 * var(--u)); }
.note-stub .main .arrow { width: calc(24 * var(--u)); height: calc(16 * var(--u)); }
@media (max-width: 900px) { .note-stub > .alt, .note-stub > .main { margin: 0; flex: none; } .note-stub > .main { margin-top: 6px; } .note-stub > .alt::after, .note-stub > .main::before { display: none; } }
.note-stub { padding-top: calc(26 * var(--u)); }
.note-stub > .main { background: var(--stamp) var(--stamp-image) 0 0 / 200px 120px; background-blend-mode: multiply; color: var(--stamp-ink); }
.note-stub > .main:hover { background-color: var(--stamp-hover); }
.note-stub > .alt::after, .note-stub > .main::before { width: calc(9 * var(--u)); background: radial-gradient(circle at 50% 50%, var(--paper) calc(4.2 * var(--u)), transparent calc(4.7 * var(--u))) 0 calc(3 * var(--u)) / 100% calc(14 * var(--u)) repeat-y; }
.note-stub > .alt::after { right: calc(-5 * var(--u)); }
.note-stub > .main::before { left: calc(-5 * var(--u)); }
/* engaged: the examples and small print sit on the lit ground under the sheet, so the note keeps the sheet's shape */
.note-foot { position: absolute; left: 50%; top: calc(100% + 18 * var(--u)); width: calc(880 * var(--u)); max-width: none; margin: 0; transform: translateX(-50%); text-align: center; font-size: calc(15 * var(--u)); }
@media (max-width: 900px) { .note-foot { position: static; transform: none; width: auto; text-align: left; font-size: 14px; margin-top: 14px; } }
/* the nav runs wider than the content, as the comp sets it: brand at ~100px, actions ending ~1430px of 1536 */
@media (min-width: 901px) {
  .nav .wrap { max-width: none; padding: 0 calc(100 * min(100vw, 1600px) / 1536); gap: calc(40 * min(100vw, 1600px) / 1536); }
  .nav .links { gap: calc(30 * min(100vw, 1600px) / 1536); }
  .nav .links > a, .dd-btn, .nav .login { font-size: 16px; }
  .brand { font-size: 18px; gap: 14px; }
  .brand i { width: 30px; height: 30px; }
  .nav .btn.primary { min-height: 46px; padding: 0 20px; font-size: 16px; }
}

/* ---------- fit to the approved plate (glow v3): the plate's sheet is the note's paper, edge for edge ----------
   sheet in the plate: x 187-1849, y 102-862 of 2048x1024; note frame: x 303-1231, y 380-796 of the comp */
.glow { inset: auto; left: calc(-1.4 * var(--u)); top: calc(24.2 * var(--u)); width: calc(1143.6 * var(--u)); height: calc(560.5 * var(--u)); object-fit: fill; }
/* the sheet's own edge and its notches belong to the plate; code draws only the inner rule */
.note { border-color: transparent; outline-offset: calc(-9 * var(--u)); padding-bottom: calc(110 * var(--u)); }
/* the stub halves sit below the plate's printed perforation (page y 710) and inside the sheet */
.note-stub { position: absolute; left: calc(15 * var(--u)); right: calc(17 * var(--u)); bottom: calc(12 * var(--u)); margin: 0; padding: 0; }
.note-stub::before { display: none; }
.note-stub > a, .note-stub > button { min-height: calc(70 * var(--u)); }
@media (max-width: 900px) {
  .glow { left: -10px; top: 0; width: calc(100% + 20px); height: 100%; object-fit: cover; }
  .note { border-color: color-mix(in srgb, var(--ink) 55%, transparent); padding-bottom: 12px; }
  .note-stub { position: static; margin: 18px -6px 0; padding-top: 16px; }
  .note-stub::before { display: block; }
  .note-stub > a, .note-stub > button { min-height: 52px; }
}
/* the nav sits on the same security-tint paper as the page, as in the comp */
.nav { background-color: var(--tint); background-image: var(--page-image); background-size: var(--page-size); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* the inner engraved rule frames only the printed face; perforation, notches and stub lie outside it on bare paper */
.note { outline: 0; }
.note::before { content: ""; position: absolute; left: calc(9 * var(--u)); right: calc(9 * var(--u)); top: calc(9 * var(--u)); height: calc(281 * var(--u)); border: 1px solid color-mix(in srgb, var(--ink) 75%, transparent); pointer-events: none; z-index: -1; }
.note-stub > a, .note-stub > button { font-size: calc(23 * var(--u)); font-weight: 700; }
.note-stub > .alt { justify-content: flex-start; gap: calc(22 * var(--u)); padding-left: calc(32 * var(--u)); }
.note-stub .alt .lamp { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
@media (max-width: 900px) { .note { outline: 1px solid color-mix(in srgb, var(--ink) 70%, transparent); } .note::before { display: none; } .note-stub > .alt { justify-content: center; padding-left: 16px; } .note-stub > a, .note-stub > button { font-size: 17px; } .note-stub .alt .lamp { width: 24px; height: 24px; } }
.note-stub { bottom: calc(8 * var(--u)); }
.note-stub > a, .note-stub > button { min-height: calc(66 * var(--u)); }
.note-stub > .main { font-size: calc(20 * var(--u)); font-weight: 600; }
@media (max-width: 900px) { .note-stub > a, .note-stub > button { min-height: 52px; } .note-stub > .main { font-size: 17px; } }
/* fit to glow v4: sheet x 183-1840, y 128-870 of 2048x1024; perforation at page y 701 */
.glow { left: calc(0.5 * var(--u)); top: calc(8.2 * var(--u)); width: calc(1146.9 * var(--u)); height: calc(574.1 * var(--u)); }
.note::before { height: calc(284 * var(--u)); }
.note-stub { bottom: calc(8 * var(--u)); }
.note-stub > a, .note-stub > button { min-height: calc(82 * var(--u)); }
@media (max-width: 900px) { .note-stub > a, .note-stub > button { min-height: 52px; } }
/* the Start free stamp is printed with the comp's own surface grain, tiled at comp scale */
.note-stub > .main { background: var(--stamp) var(--stamp-image) 0 0 / calc(200 * var(--u)) calc(128 * var(--u)); background-blend-mode: normal; }
.note-stub > .main:hover { background-color: var(--stamp-hover); filter: brightness(.93); }
/* lift: keep the lamp's halo (the mask only feathers the plate's outermost edge) and let the sheet cast a soft shadow onto the ground */
.glow { -webkit-mask: radial-gradient(closest-side, #000 88%, transparent 100%); mask: radial-gradient(closest-side, #000 88%, transparent 100%); filter: saturate(1.15); }
.lamp-field.inspecting .glow { filter: saturate(1.35) brightness(1.04); }
.lamp-field::after { content: ""; position: absolute; left: calc(110 * var(--u)); right: calc(110 * var(--u)); top: calc(110 * var(--u)); bottom: calc(80 * var(--u)); z-index: -1; box-shadow: 0 calc(26 * var(--u)) calc(60 * var(--u)) calc(-18 * var(--u)) rgba(16, 52, 42, .32); pointer-events: none; }
.lamp-field { isolation: isolate; }
@media (max-width: 900px) { .lamp-field::after { display: none; } }
/* lift, take two: feather only the plate's rectangular outer edge so the halo stays tight to the sheet as in the comp */
.glow { -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); mask-composite: intersect; filter: saturate(1.15) brightness(1.03) contrast(1.04); }
.lamp-field.inspecting .glow { filter: saturate(1.35) brightness(1.07) contrast(1.04); }
.lamp-field::after { display: none; }
/* the sheet: a lit rim along its top edge and a thin, tight contact shadow under its lower edge */
/* every primary stub is the same printed stamp as the hero's Start free */
.stub .main { background: var(--stamp) var(--stamp-image) 0 0 / 200px 128px; color: var(--stamp-ink); }
.stub .main:hover { background-color: var(--stamp-hover); filter: brightness(.93); }
.plan .stub.quiet .main { background: transparent; color: var(--ink); filter: none; }
/* phones, last so it wins over the desktop plate fit above */
@media (max-width: 900px) {
  .glow { left: -10px; top: 0; width: calc(100% + 20px); height: 100%; object-fit: cover; }
  .note-stub { position: relative; }
  .note-stub::before { left: 0; right: 0; top: 4px; }
  .note-stub > .alt { border: 1px solid var(--ink); }
}
/* backlight drawn in the paper itself: a warm bloom over the lamp plus warmth rising toward the sheet's edges (no glow shadow) */
:root { --through: radial-gradient(ellipse 70% 80% at 50% 58%, rgba(255, 226, 150, .30), rgba(255, 226, 150, .10) 55%, transparent 80%), radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(255, 214, 120, .26) 100%); }
.lamp-field.inspecting .note { --through: radial-gradient(ellipse 70% 80% at 50% 58%, rgba(255, 226, 150, .42), rgba(255, 226, 150, .16) 55%, transparent 80%), radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(255, 214, 120, .34) 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --through: none; } }
:root[data-theme="dark"] { --through: none; }
.note { background-image: var(--through); }

/* ---------- finish review fixes ---------- */
/* 1. light through the paper only where the lamp sits: no warm wash over the whole sheet */
:root { --through: radial-gradient(ellipse 46% 52% at 50% 52%, rgba(255, 232, 170, .26), transparent 75%); }
.lamp-field.inspecting .note { --through: radial-gradient(ellipse 52% 58% at 50% 52%, rgba(255, 232, 170, .38), transparent 78%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --through: none; } }
:root[data-theme="dark"] { --through: none; }
/* 2. the face's frame ends in the dashed tear line across the sheet, as in the comp */
.note::before { border-bottom: 1.5px dashed color-mix(in srgb, var(--ink) 70%, transparent); }
/* 3. reading: proportional figures (tight decimals), comp-width separators, probability and latency never split */
.reading { font-variant-numeric: proportional-nums lining-nums; }
.reading .sep { font-style: normal; display: inline-block; margin: 0 .7em; color: var(--ink-3); }
.reading .keep { white-space: nowrap; }
/* 4. the microprint ground at its native tile size, so the engraved lines stay crisp */
:root { --page-size: 400px 240px; }
/* 5. VOID as an engraved line pattern in the sheet, set lower behind the end of the deciding sentence */
/* VOID as the comp has it: a soft filled watermark in the paper, under the ink, with only a fine paper texture through it */
.msg[data-mark]::before { top: 80%; left: 54%; -webkit-mask: repeating-linear-gradient(0deg, #000 0 1px, rgba(0, 0, 0, .78) 1px 2px); mask: repeating-linear-gradient(0deg, #000 0 1px, rgba(0, 0, 0, .78) 1px 2px); }
.msg[data-mark="VOID"]::before { color: color-mix(in srgb, var(--over) 15%, transparent); }
.msg[data-mark="GENUINE"]::before { color: color-mix(in srgb, var(--ink) 9%, transparent); }
.msg[data-mark="HELD"]::before { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 20%, transparent); }
/* 6. display ink at the comp's near-black green */
:root { --ink-deep: #0B2A1A; }
.hero h1, .part h2, .close h2, .part.how .big { color: var(--ink-deep); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink-deep: var(--ink); } }
:root[data-theme="dark"] { --ink-deep: var(--ink); }
/* the comp's first view must fit the screen it is on: scale by width or height, whichever runs out first
   (a 1440x800 laptop window is shorter than the comp's 1536x1024 frame), and centre the composition */
:root { --uh: min(calc(min(100vw, 1600px) / 1536), calc((100svh - 106px) / 918)); } /* nav + band stay a fixed 106px of the comp's 1024 */
@media (min-width: 901px) {
  .hero { --u: var(--uh); }
  .hero > .wrap { max-width: none; width: calc(1256 * var(--u)); padding: 0; margin: 0 auto; }
  .part.how { padding-top: calc(20 * var(--uh)); }
  .part.how > .wrap:first-child { max-width: none; width: calc(1256 * var(--uh)); padding: 0; margin: 0 auto; }
  .part.how .big { font-size: calc(98 * var(--uh)); }
}
/* the composition hangs from the nav's left edge at every height: headline 46 comp-px inside the wordmark (nav pads 100) */
:root { --uw: calc(min(100vw, 1600px) / 1536); }
@media (min-width: 901px) {
  .hero > .wrap, .part.how > .wrap:first-child { width: auto; margin: 0 0 0 calc(146 * var(--uw)); }
}
/* ---------- dark: the banknote at night. The lamp stays on: the lit sheet keeps daylight ink on glowing paper,
   while the page around it goes deep intaglio green. ---------- */
.glow-day { display: var(--glow-display); }
.glow-night { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .glow-night { display: block; } }
:root[data-theme="dark"] .glow-night { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lamp-field {
    --ink: #10342A; --ink-2: #3D5C52; --ink-3: #6C877D; --paper: #F8FAF7; --on-ink: #EEF3EF;
    --over: #C21F2A; --over-wash: color-mix(in srgb, #C21F2A 11%, transparent);
    --rule: color-mix(in srgb, #10342A 20%, transparent); --rule-2: color-mix(in srgb, #10342A 38%, transparent);
    --note-bg: transparent; --note-halo: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 4px -1px rgba(0, 0, 0, .45), 0 18px 30px -18px rgba(0, 0, 0, .6); --lamp-light: none;
    --through: radial-gradient(ellipse 46% 52% at 50% 52%, rgba(255, 232, 170, .22), transparent 75%);
    color-scheme: light;
  }
  :root:not([data-theme="light"]) .lamp-field .note { border-color: transparent; }
  :root:not([data-theme="light"]) .lamp-field .note-foot { color: #A5A5A1; }
  :root:not([data-theme="light"]) .lamp-field .note-foot button { color: #ECECE8; }
}
:root[data-theme="dark"] .lamp-field {
  --ink: #10342A; --ink-2: #3D5C52; --ink-3: #6C877D; --paper: #F8FAF7; --on-ink: #EEF3EF;
  --over: #C21F2A; --over-wash: color-mix(in srgb, #C21F2A 11%, transparent);
  --rule: color-mix(in srgb, #10342A 20%, transparent); --rule-2: color-mix(in srgb, #10342A 38%, transparent);
  --note-bg: transparent; --note-halo: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 4px -1px rgba(0, 0, 0, .45), 0 18px 30px -18px rgba(0, 0, 0, .6); --lamp-light: none;
  --through: radial-gradient(ellipse 46% 52% at 50% 52%, rgba(255, 232, 170, .22), transparent 75%);
  color-scheme: light;
}
:root[data-theme="dark"] .lamp-field .note { border-color: transparent; }
:root[data-theme="dark"] .lamp-field .note-foot { color: #A5A5A1; }
:root[data-theme="dark"] .lamp-field .note-foot button { color: #ECECE8; }

@media (prefers-reduced-motion: reduce) { .faq summary::after, .nav { transition: none; } }
/* phones: a tall note can't take the wide plate whole, so its paper is the plate cropped to exactly the sheet
   (sheet x 183-1840, y 128-870 of 2048x1024), with no stray ground or halo bands; at night a painted pool of lamp light sits behind it */
:root { --sheet-image: image-set(url(/assets/plates/glow.webp) type("image/webp"), url(/assets/plates/glow.png) type("image/png")); --phone-lamp: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sheet-image: image-set(url(/assets/plates/glow-dark.webp) type("image/webp"), url(/assets/plates/glow-dark.png) type("image/png")); --phone-lamp: radial-gradient(closest-side, rgba(255, 214, 130, .2), transparent); } }
:root[data-theme="dark"] { --sheet-image: image-set(url(/assets/plates/glow-dark.webp) type("image/webp"), url(/assets/plates/glow-dark.png) type("image/png")); --phone-lamp: radial-gradient(closest-side, rgba(255, 214, 130, .2), transparent); }
@media (max-width: 900px) {
  .glow { display: none !important; }
  .lamp-field { background: var(--phone-lamp); padding: 22px 0 26px; }
  .note { background: var(--through), var(--sheet-image) 46.8% 45.4% / 123.6% 138% no-repeat; }
}
/* phones: use only the sheet above its printed perforation (plate y 128-650), so no tear line runs behind the stacked buttons */
@media (max-width: 900px) { .note { background-position: center, 46.8% 25.5%; background-size: auto, 123.6% 196%; } }

/* ---------- syntax highlighting (highlight.js tokens) on the code plate, in the world's inks ---------- */
:root { --tk-k: #9FE3C1; --tk-s: #F2C98B; --tk-c: #8FB3A3; --tk-n: #F5A38E; --tk-f: #B9D9F2; --tk-v: #EAD9A0; --tk-a: #9DD7E6; --tk-t: #F0A6A0; --tk-p: #A9C4B8; }
pre .tk-k { color: var(--tk-k); } pre .tk-s { color: var(--tk-s); } pre .tk-c { color: var(--tk-c); font-style: italic; } pre .tk-n { color: var(--tk-n); }
pre .tk-f { color: var(--tk-f); } pre .tk-v { color: var(--tk-v); } pre .tk-a { color: var(--tk-a); } pre .tk-t { color: var(--tk-t); } pre .tk-p { color: var(--tk-p); }
pre .ln-del { color: #F2A19B; text-decoration: line-through; text-decoration-color: color-mix(in srgb, #F2A19B 60%, transparent); }
pre .ln-add { color: #8FE0B4; font-weight: 600; }

/* where Doorman sits: your form → Doorman → your inbox, as three ruled cells joined by engraved arrows */
.flow { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.flow li { position: relative; display: grid; gap: 6px; align-content: start; padding: 22px 28px 24px; }
.flow li + li { border-left: 1px solid var(--rule); }
.flow li + li::before { content: ""; position: absolute; left: -9px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--tint); border: solid var(--ink); border-width: 1px 1px 0 0; transform: rotate(45deg); }
.flow b { font: 700 24px/1.15 var(--display); color: var(--ink); }
.flow span { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.flow .us { background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 4px var(--tint), inset 0 0 0 5px var(--ink); }
.flow .us b { color: var(--ink-deep, var(--ink)); }
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; margin-bottom: 40px; }
  .flow li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .flow li + li::before { left: 50%; top: -9px; margin: 0 0 0 -8px; transform: rotate(135deg); }
}
/* as in the comp: Start free is a stamp torn from the sheet, its edges perforated, butting straight onto the outlined stub */
.note-stub > .alt::after, .note-stub > .main::before { display: none; }
@media (min-width: 901px) {
  .note-stub > .alt { border-right: 0; margin-right: 0; }
  .note-stub > .main { --bite: calc(4.5 * var(--u)); --pitch: calc(15 * var(--u)); margin-left: calc(-1 * var(--bite)); padding-left: calc(20 * var(--u) + var(--bite));
    -webkit-mask: radial-gradient(circle at 0 50%, #0000 var(--bite), #000 calc(var(--bite) + .5px)) left / 51% var(--pitch), radial-gradient(circle at 100% 50%, #0000 var(--bite), #000 calc(var(--bite) + .5px)) right / 51% var(--pitch);
    -webkit-mask-repeat: no-repeat round; mask: radial-gradient(circle at 0 50%, #0000 var(--bite), #000 calc(var(--bite) + .5px)) left / 51% var(--pitch), radial-gradient(circle at 100% 50%, #0000 var(--bite), #000 calc(var(--bite) + .5px)) right / 51% var(--pitch); mask-repeat: no-repeat round; }
  .note-stub > .main:focus-visible { outline: 2px solid var(--stamp-ink); outline-offset: calc(-3 * var(--bite)); }
}
/* night is black and white; the engraving glows faintly, like UV ink under a lamp */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band-line { opacity: .55; } :root:not([data-theme="light"]) ::selection { background: rgba(144, 137, 216, .35); } }
:root[data-theme="dark"] .band-line { opacity: .55; }
:root[data-theme="dark"] ::selection { background: rgba(144, 137, 216, .35); }

/* ---------- the note floats: lifted off the page, a still light behind it, hovering almost perfectly still ----------
   The plate and the form move as one sheet; the light (::before) stays put, and the cast shadow (::after) tightens as
   the sheet dips and softens as it rises, so the gap between note and page reads as real. Holds still while you type. */
@media (min-width: 901px) {
  .lamp-field::before { content: ""; position: absolute; left: 6%; right: 6%; top: 2%; bottom: 4%; z-index: -2; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 226, 160, .30), rgba(255, 210, 130, .10) 55%, transparent); filter: blur(18px); }
  .lamp-field::after { left: calc(150 * var(--u)); right: calc(150 * var(--u)); top: calc(140 * var(--u)); bottom: calc(46 * var(--u));
    box-shadow: 0 calc(46 * var(--u)) calc(70 * var(--u)) calc(-22 * var(--u)) rgba(16, 52, 42, .38); }
  .lamp-field > picture .glow, .lamp-field > .note { will-change: transform; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .lamp-field > picture .glow, .lamp-field > .note { animation: hover-sheet 8s cubic-bezier(.45, 0, .55, 1) infinite; }
  .lamp-field::after { animation: hover-shadow 8s cubic-bezier(.45, 0, .55, 1) infinite; }
  .lamp-field:focus-within > picture .glow, .lamp-field:focus-within > .note, .lamp-field:focus-within::after,
  .lamp-field.inspecting > picture .glow, .lamp-field.inspecting > .note, .lamp-field.inspecting::after { animation-play-state: paused; }
}
@keyframes hover-sheet {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, calc(-3 * var(--u)), 0) rotate(-.12deg); }
}
@keyframes hover-shadow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .78; transform: scale(1.025); }
}
/* night: the shadow is plain black, the light a little warmer against the dark */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lamp-field::after { box-shadow: 0 calc(46 * var(--u)) calc(80 * var(--u)) calc(-18 * var(--u)) rgba(0, 0, 0, .75); } }
:root[data-theme="dark"] .lamp-field::after { box-shadow: 0 calc(46 * var(--u)) calc(80 * var(--u)) calc(-18 * var(--u)) rgba(0, 0, 0, .75); }
/* the contact shadow sits just under the sheet's bottom edge, over the plate's own halo, so the gap reads in daylight too */
@media (min-width: 901px) {
  .lamp-field::after { z-index: 1; left: calc(140 * var(--u)); right: calc(146 * var(--u)); top: calc(498 * var(--u)); bottom: auto; height: calc(34 * var(--u)); box-shadow: none;
    background: radial-gradient(50% 50% at 50% 30%, rgba(16, 52, 42, .34), rgba(16, 52, 42, .12) 55%, transparent); filter: blur(calc(6 * var(--u))); mix-blend-mode: multiply; transform-origin: 50% 0; }
}
@media (min-width: 901px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lamp-field::after { background: radial-gradient(50% 50% at 50% 30%, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25) 55%, transparent); box-shadow: none; mix-blend-mode: normal; } }
@media (min-width: 901px) { :root[data-theme="dark"] .lamp-field::after { background: radial-gradient(50% 50% at 50% 30%, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25) 55%, transparent); box-shadow: none; mix-blend-mode: normal; } }
@keyframes hover-shadow {
  0%, 100% { opacity: 1; transform: scaleX(1); }
  50% { opacity: .7; transform: scaleX(1.03) translateY(calc(2 * var(--u))); }
}

/* ---------- night grade for the lit papers ----------
   At night a cream sheet at full brightness is the brightest thing on the screen and reads like a flashbang. The papers
   keep every plate, line and colour, graded down like a sheet under a dim lamp: the ink darkens with the paper, so
   contrast holds, and the warm halo shrinks to a faint rim. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.lamp-field, .sheet, .ledger, .cables, .slip, main.auth .card) { filter: brightness(.74) saturate(.8) contrast(1.05); }
  :root:not([data-theme="light"]) :is(.slip, main.auth .card) { filter: brightness(.74) saturate(.8) contrast(1.05) drop-shadow(0 0 18px rgba(255, 214, 140, .10)); }
}
:root[data-theme="dark"] :is(.lamp-field, .sheet, .ledger, .cables, .slip, main.auth .card) { filter: brightness(.74) saturate(.8) contrast(1.05); }
:root[data-theme="dark"] :is(.slip, main.auth .card) { filter: brightness(.74) saturate(.8) contrast(1.05) drop-shadow(0 0 18px rgba(255, 214, 140, .10)); }

/* ---------- the float, take two: enough movement to read, and the light answers it ----------
   Plate and form tilt as one sheet around the lamp's centre (both origins pinned there, under one perspective), drift
   about 9px, and lean a fraction of a degree. A sheen slides across the paper with the tilt, the lamp brightens as the
   sheet rises toward it, and the shadow on the page loosens as the gap grows. Still while you type; off for reduced motion. */
@media (min-width: 901px) {
  .lamp-field { perspective: calc(2400 * var(--u)); perspective-origin: 50% 40%; }
  .lamp-field > picture .glow { transform-origin: calc(569.5 * var(--u)) calc(281.8 * var(--u)); }
  .lamp-field > .note { transform-origin: calc(467 * var(--u)) calc(210 * var(--u)); }
  .note::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .55; mix-blend-mode: soft-light;
    background: linear-gradient(112deg, transparent 30%, rgba(255, 250, 230, .9) 46%, rgba(255, 250, 230, .2) 54%, transparent 66%) 0 0 / 260% 100% no-repeat;
    background-position: 100% 0; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .lamp-field > picture .glow, .lamp-field > .note { animation: hover-sheet 9s cubic-bezier(.45, 0, .55, 1) infinite; }
  .note::after { animation: hover-sheen 9s cubic-bezier(.45, 0, .55, 1) infinite; }
  .lamp-field::before { animation: hover-lamp 9s cubic-bezier(.45, 0, .55, 1) infinite; }
  .lamp-field::after { animation: hover-shadow 9s cubic-bezier(.45, 0, .55, 1) infinite; }
  .lamp-field:focus-within :is(picture .glow, .note, .note::after), .lamp-field.inspecting :is(picture .glow, .note),
  .lamp-field:focus-within::before, .lamp-field:focus-within::after, .lamp-field.inspecting::before, .lamp-field.inspecting::after { animation-play-state: paused; }
  .lamp-field:focus-within .note::after, .lamp-field.inspecting .note::after { animation-play-state: paused; }
}
@keyframes hover-sheet {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotate(0deg); }
  25% { transform: translate3d(calc(2 * var(--u)), calc(-5 * var(--u)), 0) rotateX(.9deg) rotateY(-1.1deg) rotate(-.22deg); }
  50% { transform: translate3d(0, calc(-9 * var(--u)), 0) rotateX(.3deg) rotateY(.2deg) rotate(.06deg); }
  75% { transform: translate3d(calc(-2 * var(--u)), calc(-4 * var(--u)), 0) rotateX(-.6deg) rotateY(1.1deg) rotate(.2deg); }
}
@keyframes hover-sheen {
  0%, 100% { background-position: 100% 0; opacity: .35; }
  25% { background-position: 20% 0; opacity: .7; }
  50% { background-position: 55% 0; opacity: .45; }
  75% { background-position: 0% 0; opacity: .6; }
}
@keyframes hover-lamp {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes hover-shadow {
  0%, 100% { opacity: 1; transform: scaleX(1) translateY(0); }
  50% { opacity: .55; transform: scaleX(1.06) translateY(calc(5 * var(--u))); }
}
/* the float is driven by home.js through these variables; the keyframe versions above are retired */
@media (min-width: 901px) {
  .lamp-field > picture .glow, .lamp-field > .note, .note::after, .lamp-field::before, .lamp-field::after { animation: none !important; }
  .lamp-field > picture .glow, .lamp-field > .note { transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--rz, 0deg)); }
  .note::after { background-position: var(--sheen, 100%) 0; opacity: var(--sheen-o, .35); }
  .lamp-field::before { opacity: var(--lamp-o, .8); transform: scale(var(--lamp-s, 1)); }
  .lamp-field::after { opacity: var(--shadow-o, 1); transform: scaleX(var(--shadow-s, 1)) translateY(var(--shadow-y, 0px)); }
}
/* the transform is now written straight onto the plate and form by home.js; no promoted layer, so text re-rasters crisp */
@media (min-width: 901px) {
  .lamp-field > picture .glow, .lamp-field > .note { will-change: auto; }
  .note::after { opacity: var(--sheen-o, 0); }
}