/* The merchant questionnaire — outside, on ink. Values only from identity v1 and DESIGN-CONTRACT.md. */
@font-face { font-family: 'Zilla Slab'; font-weight: 400; font-style: normal; font-display: swap; src: url('./fonts/ZillaSlab-400.woff2') format('woff2') }
@font-face { font-family: 'Zilla Slab'; font-weight: 600; font-style: normal; font-display: swap; src: url('./fonts/ZillaSlab-600.woff2') format('woff2') }
@font-face { font-family: 'Martian Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('./fonts/MartianMono-400.woff2') format('woff2') }
@font-face { font-family: 'Martian Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('./fonts/MartianMono-500.woff2') format('woff2') }

:root {
  color-scheme: dark;
  --ink: #0A0A0B; --ink-2: #131315; --paper: #F2EEE3; --acc: #B4BD00; --acc-hov: #BDC420; --acc-prs: #979F00;
  --steel: #B9BCC0; --muted: #A39E92; --hair: #2A2824; --hair-2: #3A3733; --err: #E5484D;
  --text: 'Zilla Slab', Rockwell, Georgia, serif;
  --mono: 'Martian Mono', ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4.4vw, 56px);
  --rail-w: 264px;
  --t: 180ms;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; min-height: 100svh }
img, svg, canvas, video { display: block; max-width: 100% }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px }
a:hover { text-decoration-color: var(--acc) }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px }
p { margin: 0 0 1em }
h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance }
h1 { font-size: 44px; line-height: 1.1; letter-spacing: -.01em }
h2 { font-size: 26px; line-height: 1.2 }
h3 { font-size: 19px; line-height: 1.3 }
.mono, code { font-family: var(--mono); font-size: 13px }
.muted { color: var(--muted) }
.steel { color: var(--steel) }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: absolute; left: -9999px; top: 0; min-height: 44px; display: inline-flex; align-items: center } .skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--paper); color: var(--ink); padding: 0 14px }
[hidden] { display: none !important }

/* ------------------------------------------------------------------ top bar */
.top { position: sticky; top: 0; z-index: 40; background: var(--ink); border-bottom: 1px solid var(--hair) }
.top-in { display: flex; align-items: center; gap: 16px; height: 64px; padding-inline: var(--gutter); max-width: 1600px; margin: 0 auto }
.home { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none }
.lockup { height: 24px; width: auto }
.top-meta { margin-left: auto; display: flex; align-items: center; gap: 18px; min-width: 0 }
.saved { font: 400 12px/1.4 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.saved.is-saving { color: var(--steel) }
.topbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; background: none; border: 0; color: var(--steel); font: 600 15px var(--text); cursor: pointer; text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 4px }
.topbtn:hover { color: var(--paper); text-decoration-color: var(--acc) }
@media (max-width: 560px) { .lockup { height: 20px } .saved { display: none } }

/* ------------------------------------------------------------------ layout */
/* The frame is rail · page; the page is the question and its notes ("Why we ask"): side by side from 1440 px, the notes after
   the question below that (they were hidden below 1440 until 2026-10-27; DESIGN-CONTRACT addendum of that date). */
.shell { max-width: 1600px; margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: 56px; padding-bottom: 120px }
.shell.is-bare { grid-template-columns: minmax(0, 1fr) }
.page { min-width: 0 }
.main { min-width: 0; max-width: 760px; padding-top: 48px }
.shell.is-bare .main { max-width: 640px }
.aside { max-width: 760px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair) }
.aside:empty { display: none }
@media (min-width: 1440px) {
  .shell { grid-template-columns: 296px minmax(0, 1fr) }
  .page { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 320px); column-gap: 56px; align-items: start }
  .aside { margin-top: 0; padding-top: 136px; border-top: 0; max-width: 320px }
}
@media (max-width: 1023px) { .shell { grid-template-columns: minmax(0, 1fr); gap: 0 } .main { padding-top: 28px; max-width: none } }

/* ------------------------------------------------------------------ the rail (signature component) */
.rail { position: sticky; top: 64px; align-self: start; padding: 48px 0 32px; max-height: calc(100svh - 64px); overflow-y: auto }
.rail ol { list-style: none; margin: 0; padding: 0; position: relative }
.rail li { position: relative; padding: 0 0 0 40px; min-height: 64px }
/* two rails and the sleepers between stations */
.rail li::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 10px; border-left: 2px solid var(--hair-2); border-right: 2px solid var(--hair-2);
  background: repeating-linear-gradient(to bottom, transparent 0 4px, var(--hair-2) 4px 6px); transition: background var(--t) ease, border-color var(--t) ease }
.rail li:last-child::before { display: none }
.rail li.is-done::before { border-color: var(--steel); background: repeating-linear-gradient(to bottom, transparent 0 4px, var(--acc) 4px 6px) }
.stn { position: absolute; left: 0; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); border: 2px solid var(--hair-2); display: grid; place-items: center; transition: border-color var(--t) ease, background var(--t) ease }
.stn::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--hair-2); transition: background var(--t) ease }
.is-done .stn { border-color: var(--steel) } .is-done .stn::after { background: var(--acc) }
.is-here .stn { border-color: var(--paper); background: var(--paper) } .is-here .stn::after { background: var(--ink) }
.is-here.is-arrived .stn { animation: breathe 900ms ease-out 1 }
@keyframes breathe { 0% { box-shadow: 0 0 0 0 rgba(180, 189, 0, .55) } 100% { box-shadow: 0 0 0 12px rgba(180, 189, 0, 0) } }
.rail a { display: flex; flex-direction: column; min-height: 44px; padding-top: 2px; text-decoration: none; color: var(--steel) }
.rail a:hover .rl { color: var(--paper) }
.rail .rl { font-weight: 600; font-size: 17px; line-height: 1.25 }
.rail .rs { font: 400 12px/1.5 var(--mono); color: var(--muted) }
.is-here .rl { color: var(--paper) }
.is-done .rs { color: var(--steel) }
.rail .ref { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--hair); font: 400 12px/1.6 var(--mono); color: var(--muted) }
.rail .ref b { display: block; color: var(--steel); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 11px }
@media (max-width: 1023px) {
  .rail { position: sticky; top: 64px; z-index: 30; max-height: none; overflow: visible; background: var(--ink); padding: 12px 0 10px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); border-bottom: 1px solid var(--hair) }
  .rail ol { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); align-items: start }
  .rail li { padding: 0; min-height: 0; display: flex; flex-direction: column; align-items: center }
  .rail li::before { left: 50%; right: -50%; width: auto; top: 9px; bottom: auto; height: 10px; border-left: 0; border-right: 0; border-top: 2px solid var(--hair-2); border-bottom: 2px solid var(--hair-2);
    background: repeating-linear-gradient(to right, transparent 0 4px, var(--hair-2) 4px 6px) }
  .rail li.is-done::before { background: repeating-linear-gradient(to right, transparent 0 4px, var(--acc) 4px 6px) }
  .stn { position: relative; left: auto; top: auto; width: 28px; height: 28px; z-index: 1 }
  .rail a { align-items: center; justify-content: flex-start; min-height: 44px; min-width: 44px; padding-top: 0 }
  .rail .rl, .rail .rs { display: none }
  .rail .ref { display: none }
  .rail-now { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font: 400 12px/1.4 var(--mono); color: var(--steel) }
  .rail-now b { font-family: var(--text); font-size: 15px; color: var(--paper); font-weight: 600 }
}
@media (min-width: 1024px) { .rail-now { display: none } }

/* ------------------------------------------------------------------ step head */
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel) }
.eyebrow::before { content: ''; flex: none; width: 22px; height: 4px; background: var(--acc) }
.step-h { margin-bottom: 12px }
.lede { font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 40em; margin-bottom: 36px }
.step { animation: enter var(--t) ease-out }
@keyframes enter { from { opacity: 0; transform: translateX(12px) } to { opacity: 1; transform: none } }
@media (max-width: 720px) { h1 { font-size: 30px; line-height: 1.15 } .lede { font-size: 17px; margin-bottom: 28px } }

/* ------------------------------------------------------------------ fields */
.fs { border: 0; margin: 0 0 36px; padding: 0; min-width: 0 }
.fs > legend, .fs-h { padding: 0; margin: 0 0 16px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel) }
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px }
.grid + .grid { margin-top: 20px } /* two rows of one group (sales "How much": the lead figure, then the pair) keep the grid's own row gap */
.c6 { grid-column: span 6 } .c4 { grid-column: span 4 } .c3 { grid-column: span 3 } .c2 { grid-column: span 2 }
@media (max-width: 720px) { .c4, .c3 { grid-column: span 6 } .c2 { grid-column: span 3 } }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.f > label, .lbl { font-weight: 600; font-size: 16px; line-height: 1.3 }
.opt { font: 400 12px var(--mono); color: var(--muted); margin-left: 6px }
.help { font-size: 14px; line-height: 1.45; color: var(--muted); margin: 0 }
.in, .sel, .ta { width: 100%; min-height: 48px; padding: 11px 14px; background: var(--ink-2); color: var(--paper); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1.5px var(--hair-2);
  font: 400 17px/1.4 var(--text); transition: box-shadow 120ms ease }
.in:hover, .sel:hover, .ta:hover { box-shadow: inset 0 0 0 1.5px var(--steel) }
.in:focus, .sel:focus, .ta:focus { outline: none; box-shadow: inset 0 0 0 2px var(--acc) }
.in.mono-in { font: 400 16px/1.4 var(--mono); letter-spacing: .02em }
.ta { min-height: 112px; resize: vertical }
.sel { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%), linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat }
.sel option, .sel optgroup { background: var(--ink); color: var(--paper) }
.in::placeholder, .ta::placeholder { color: #6E6A62 }
.money { position: relative } .money .in { padding-left: 30px } .money::before { content: '$'; position: absolute; left: 14px; top: 12px; color: var(--steel); pointer-events: none }
.is-bad .in, .is-bad .sel, .is-bad .ta { box-shadow: inset 0 0 0 2px var(--err) }
.err { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; padding-left: 10px; border-left: 2px solid var(--err); font-size: 15px; line-height: 1.4; color: var(--paper) }
.err::before { content: '!'; flex: none; width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center; background: var(--err); color: var(--ink); font: 600 12px var(--mono) }
.onfile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; box-shadow: inset 0 0 0 1.5px var(--hair); background: var(--ink-2) }
.onfile .mono { font-size: 15px; color: var(--paper) }
.sealed { display: inline-flex; align-items: center; gap: 6px; font: 400 12px var(--mono); color: var(--steel) }
.sealed svg { width: 14px; height: 14px }

/* choice controls: radios and checkboxes as ruled rows */
.choices { display: grid; gap: 0; border-top: 1px solid var(--hair) }
.choice { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 4px; border-bottom: 1px solid var(--hair); cursor: pointer; min-height: 56px }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px }
.choice .box { width: 22px; height: 22px; margin-top: 2px; box-shadow: inset 0 0 0 2px var(--steel); display: grid; place-items: center; transition: background 120ms ease, box-shadow 120ms ease }
.choice input[type=radio] + .box { border-radius: 50% }
.choice .box svg { width: 14px; height: 14px; opacity: 0; transition: opacity 120ms ease; color: var(--ink) }
.choice input:checked + .box { background: var(--acc); box-shadow: inset 0 0 0 2px var(--acc) }
.choice input:checked + .box svg { opacity: 1 }
.choice input[type=radio]:checked + .box::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink) }
.choice input:focus-visible + .box { outline: 2px solid var(--acc); outline-offset: 3px }
.choice .ct { font-weight: 600 } .choice .cn { display: block; font-weight: 400; font-size: 15px; color: var(--muted) }
.choice:hover .box { box-shadow: inset 0 0 0 2px var(--paper) }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, auto); box-shadow: inset 0 0 0 1.5px var(--hair-2) }
.seg label { position: relative; display: grid; place-items: center; min-height: 48px; padding: 0 20px; cursor: pointer; font-weight: 600; color: var(--steel) }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px }
.seg label:has(input:checked) { background: var(--paper); color: var(--ink) }
.seg label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 0; font-family: var(--text); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease; min-height: 48px; padding: 0 22px; font-size: 16px }
.btn-L { min-height: 56px; padding: 0 26px; font-size: 19px }
.btn-S { min-height: 44px; padding: 0 16px; font-size: 15px }
.btn-acc { background: var(--acc); color: var(--ink) }
.btn-acc:hover { background: var(--acc-hov) }
.btn-acc:active { background: var(--acc-prs); transform: scale(.97) }
.btn-acc[disabled], .btn-acc[aria-disabled=true] { background: #3A3D1A; color: var(--steel); cursor: not-allowed; transform: none }
.btn-ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--steel) }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--paper) }
.btn-ghost:active { transform: scale(.97) }
.btn-paper { background: var(--paper); color: var(--ink) } .btn-paper:hover { background: #fff }
.linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; color: var(--paper); font: 600 16px var(--text); cursor: pointer; text-decoration: underline; text-decoration-color: var(--steel); text-underline-offset: 4px }
.linkbtn:hover { text-decoration-color: var(--acc) }
.linkbtn.danger { color: var(--steel) }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px }
.next-bar { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center }
.next-bar .count { font: 400 13px/1.4 var(--mono); color: var(--muted) }
/* The start and code forms use the stations' bar only for its phone behaviour (sticky at the bottom); above 720 px they keep
   their own spacing, so the start page's button stays inside the first screen at 1440 too. */
@media (min-width: 721px) { .acts.next-bar { margin-top: 8px; padding-top: 0; border-top: 0 } }
@media (max-width: 720px) {
  .next-bar { position: sticky; bottom: 0; z-index: 20; margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--ink); border-top: 1px solid var(--hair-2) }
  .next-bar .btn-acc { flex: 1 1 auto }
}

/* ------------------------------------------------------------------ problems (what is still missing) */
.todo { margin: 0 0 32px; padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--hair-2) }
.todo h2 { font-size: 17px; margin-bottom: 8px }
.todo ul { margin: 0; padding: 0; list-style: none }
.todo li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.45 }
.todo li:first-child { border-top: 0 }
.todo .k { font: 500 12px/1.6 var(--mono); color: var(--steel) }
.todo a { color: var(--paper); display: inline-flex; align-items: center; min-height: 44px } /* a whole tap target, one line or two (Gate A: 40 px) */

/* ------------------------------------------------------------------ owners ledger */
.ledger { border-top: 1px solid var(--hair); margin-bottom: 20px }
.person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; padding: 16px 0; border-bottom: 1px solid var(--hair) }
.person .pn { font-weight: 600; font-size: 19px }
.person .pd { font: 400 13px/1.6 var(--mono); color: var(--muted) }
.person .pa { display: flex; gap: 20px; align-items: center }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 8px; font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--steel); color: var(--paper) }
.tag.acc { box-shadow: none; background: var(--acc); color: var(--ink) }
.total { display: flex; align-items: center; gap: 16px; margin: 8px 0 28px; font: 400 13px var(--mono); color: var(--steel) }
.total .bar { flex: 1; height: 6px; background: var(--hair); position: relative; max-width: 320px }
.total .bar i { position: absolute; inset: 0 auto 0 0; background: var(--acc); transition: width 300ms ease }
.drawer { overflow: hidden; transition: height 280ms ease }
.form-panel { padding: 24px 0 8px; border-bottom: 1px solid var(--hair) }

/* ------------------------------------------------------------------ capture slots (ID + selfie) */
.idp { padding: 24px 0 28px; border-top: 1px solid var(--hair) }
.idp-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px }
.notice { padding: 18px 18px 6px; margin-bottom: 18px; background: var(--ink-2); box-shadow: inset 3px 0 0 var(--acc) }
.notice p { font-size: 15px; line-height: 1.55 }
.notice .acts { margin: 0 0 12px }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
@media (max-width: 720px) { .slots { grid-template-columns: minmax(0, 1fr) } }
.slot { display: flex; flex-direction: column; gap: 10px }
.slot .frame { position: relative; aspect-ratio: 1.586 / 1; display: grid; place-items: center; background: var(--ink-2); outline: 1.5px dashed var(--hair-2); outline-offset: -1.5px; overflow: hidden }
.slot.selfie .frame { aspect-ratio: 3 / 4 }
.slot .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.slot .frame .ph { font: 400 12px/1.5 var(--mono); color: var(--muted); text-align: center; padding: 12px }
.slot.is-sealed .frame { outline-style: solid; outline-color: var(--steel) }
.slot .seal { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--ink); font: 500 11px var(--mono); color: var(--paper); transform: translateY(6px); opacity: 0; transition: opacity 320ms ease, transform 320ms ease }
.slot.is-sealed .seal { opacity: 1; transform: none }
.slot .prog { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--acc); width: 0; transition: width 120ms linear }
.slot .sl { font-weight: 600 }
.slot .sa { display: flex; flex-wrap: wrap; gap: 10px }
.guide { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--steel) }
.guide li::before { content: ''; display: inline-block; width: 10px; height: 4px; margin-right: 8px; vertical-align: middle; background: var(--acc) }
.result { margin-top: 14px; font-size: 15px; color: var(--steel) }

/* the biometric notice and the person's own release */
.notice-long { margin: 0 0 16px; border-top: 1px solid var(--hair) }
.notice-long > summary { display: flex; align-items: center; min-height: 44px; padding: 0 2px; cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; text-decoration: underline; text-decoration-color: var(--steel); text-underline-offset: 4px }
.notice-long > summary::-webkit-details-marker { display: none }
.notice-long > summary::after { content: ''; width: 8px; height: 8px; margin-left: 12px; border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel); transform: rotate(45deg) translateY(-2px); transition: transform 180ms ease }
.notice-long[open] > summary::after { transform: rotate(-135deg) translate(-2px, 0) }
.notice-long > summary:hover { text-decoration-color: var(--acc) }
.notice-long .stamp { margin: 6px 0 14px; color: var(--steel); text-transform: none }
.notice-long .ns { margin: 0 0 14px }
.notice-long h4 { font-size: 16px; font-weight: 600; margin: 0 0 6px }
.notice-long ul { margin: 0 0 1em; padding-left: 20px; font-size: 15px; line-height: 1.55 }
.blank { font-family: var(--mono); font-size: 13px; padding: 1px 6px; color: var(--paper); box-shadow: inset 0 -1.5px 0 var(--acc); background: rgba(180, 189, 0, .08); overflow-wrap: anywhere }
.notice .choices { margin: 4px 0 10px; border-top: 0 }
.release { border-bottom: 0; padding-inline: 0 }
.release .ct { font-weight: 400; font-size: 16px; line-height: 1.5 }
.release .ct b { font-weight: 600 }
.notice.other { box-shadow: inset 3px 0 0 var(--steel) }
.notice .help { margin-bottom: 12px }
.notice .err { margin: 0 0 12px }

/* camera */
.cam { position: fixed; inset: 0; z-index: 80; background: rgba(10, 10, 11, .96); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom)) }
.cam-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px }
.cam-v { position: relative; display: grid; place-items: center; min-height: 0 }
.cam video, .cam canvas { max-width: 100%; max-height: 100%; background: #000 }
.cam .guide-box { position: absolute; width: min(88%, 720px); aspect-ratio: 1.586 / 1; outline: 2px solid var(--acc); outline-offset: 0; pointer-events: none }
.cam.selfie .guide-box { width: min(60%, 420px); aspect-ratio: 3 / 4; border-radius: 50% / 40% }
.cam-a { display: flex; justify-content: center; gap: 16px; padding-top: 16px; flex-wrap: wrap }

/* ------------------------------------------------------------------ documents checklist */
.docs { border-top: 1px solid var(--hair) }
.doc { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--hair) }
.doc .mark { width: 22px; height: 22px; margin-top: 2px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--hair-2) }
.doc.is-in .mark { background: var(--acc); box-shadow: none; color: var(--ink) } .doc .mark svg { width: 14px; height: 14px }
.doc .dn { font-weight: 600 } .doc .dh { display: block; font-size: 15px; color: var(--muted) }
.doc .files { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 6px; font: 400 13px/1.5 var(--mono); color: var(--steel) }
.doc .file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px }
.doc .file .linkbtn { font-size: 14px; min-height: 44px }
.drop { position: relative; display: inline-flex }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100% }
.drop:focus-within { outline: 2px solid var(--acc); outline-offset: 3px }
.months { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px }
.month { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--hair-2); min-height: 92px }
.month.is-in { box-shadow: inset 0 0 0 1.5px var(--steel) }
.month .mm { font: 500 13px var(--mono); color: var(--paper) }

/* ------------------------------------------------------------------ bank */
.bankbox { padding: 20px; box-shadow: inset 0 0 0 1px var(--hair-2); margin-bottom: 24px }
.bankbox dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; margin: 0 0 12px }
.bankbox dt { font: 400 12px/1.8 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em }
.bankbox dd { margin: 0; font: 400 15px/1.6 var(--mono) }
.match { display: inline-flex; align-items: center; gap: 8px; font-weight: 600 }
.match i { width: 10px; height: 10px; display: inline-block }
.match.ok i { background: var(--acc) } .match.review i { box-shadow: inset 0 0 0 2px var(--acc) } .match.bad i { background: var(--err) }

/* ------------------------------------------------------------------ statement line (descriptor) */
.stmt { margin-top: 10px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px; background: var(--paper); color: var(--ink); font: 400 13px/1.4 var(--mono) }
.stmt .d { color: #5E5A52 } .stmt .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* ------------------------------------------------------------------ review + signing */
.review { border-top: 1px solid var(--hair); margin-bottom: 40px }
.rv { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--hair) }
.rv h3 { font-size: 17px } .rv dl { margin: 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px 16px; font-size: 15px }
.rv dt { color: var(--muted); overflow-wrap: anywhere } .rv dd { margin: 0; overflow-wrap: anywhere }
@media (max-width: 860px) { .rv { grid-template-columns: minmax(0, 1fr) auto } .rv dl { grid-column: 1 / -1 } }
@media (max-width: 560px) { .rv dl { grid-template-columns: minmax(0, 1fr); gap: 0 } .rv dd { margin-bottom: 8px } }
.sign { padding: 28px 0 0; border-top: 2px solid var(--acc) }
.ticks { display: grid; gap: 0; margin: 20px 0 8px; border-top: 1px solid var(--hair) }
.tick .ct { font-weight: 400; font-size: 17px } .tick .ct b { font-weight: 600 }
.doclink { padding: 12px 2px; margin: -12px -2px; background: none; border: 0; color: var(--paper); font: 600 17px var(--text); text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer }
.doclink[aria-expanded=true] { text-decoration-style: double }
.tick .signer-slot { font-weight: 600; border-bottom: 1px solid var(--steel); padding: 0 2px } .tick .signer-slot.is-empty { font-weight: 400; color: var(--muted); border-bottom-style: dashed }
.ticks .panel { grid-column: 1 / -1 }
.panel { overflow: hidden; height: 0; visibility: hidden; transition: height 280ms ease, visibility 0s linear 280ms }
.panel.is-open { height: auto; visibility: visible; transition: height 280ms ease, visibility 0s }
.panel-in { margin: 12px 0 20px; max-height: min(78svh, 960px); overflow-y: auto; overscroll-behavior: contain; background: var(--ink-2); padding: 0 0 8px; box-shadow: inset 0 0 0 1px var(--hair-2) }
.panel-in:focus-visible { outline-offset: 2px }
.docindex { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 2px 18px; padding: 10px 16px; background: var(--ink-2); border-bottom: 1px solid var(--hair-2) }
.docindex .linkbtn { font-size: 14px; min-height: 44px; text-align: left; white-space: nowrap }
@media (max-width: 720px) { .docindex { position: static; flex-wrap: nowrap; overflow-x: auto; gap: 0 20px } }
.sheet { background: var(--paper); color: var(--ink); padding: clamp(20px, 5vw, 56px); margin: 16px; font-size: 16px; line-height: 1.6; overflow-wrap: break-word }
.sheet:focus-visible { outline-offset: -4px }
.sheet .sh-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; margin-bottom: 24px; padding-bottom: 10px; border-bottom: 2px solid var(--acc) }
.sheet .sh-top .mono { color: #4D4F53; font-size: 11px }
.draftchip { font: 500 11px/1 var(--mono); letter-spacing: .04em; background: var(--ink); color: var(--paper); padding: 6px 9px }
.sheet h3 { font-size: 26px; margin: 0 0 6px } .sheet h4 { font-size: 17px; margin: 24px 0 6px } .sheet h5 { font-size: 16px; margin: 18px 0 4px } .sheet h6 { font-size: 15px; margin: 14px 0 4px }
.sheet .aka { margin: 0 0 6px; color: #4D4F53; font-size: 15px }
.sheet .hashes { display: grid; gap: 2px; margin: 0 0 18px; color: #4D4F53; font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere }
.sheet p { margin: 0 0 .85em }
.sheet ul, .sheet ol { padding-left: 24px; margin: 0 0 12px } .sheet li { margin-bottom: 6px }
.sheet hr { border: 0; border-top: 1px solid #B9BCC0; margin: 22px 0 }
.sheet blockquote { margin: 0 0 14px; padding: 2px 0 2px 16px; box-shadow: inset 3px 0 0 var(--acc) } .sheet blockquote p { margin: 0 0 .5em }
.sheet code.ic { font: 400 .84em var(--mono); background: rgba(10, 10, 11, .07); padding: 1px 4px }
.sheet .blank { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; background: rgba(10, 10, 11, .06); padding: 0 2px }
.sheet sup { line-height: 0 } .fnref { padding: 16px 18px; margin: -16px -18px; min-width: 0; background: none; border: 0; color: #4D4F53; font: 500 .75em var(--mono); text-decoration: underline; cursor: pointer }
.sheet .banner { margin: 0 0 22px; padding: 12px 16px; background: #E6E1D2; box-shadow: inset 3px 0 0 var(--acc); font-size: 14px; line-height: 1.5; color: #2A2824 } .sheet .banner p { margin: 0 0 6px } .sheet .banner p:last-child { margin: 0 }
.sheet .tw { overflow-x: auto; margin: 0 0 14px }
.sheet .dt { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45 }
.sheet .dt th { text-align: left; font-weight: 600; border-bottom: 2px solid var(--ink); padding: 6px 8px 6px 0 }
.sheet .dt td { vertical-align: top; border-bottom: 1px solid #B9BCC0; padding: 6px 10px 6px 0; overflow-wrap: anywhere }
.sheet .notes { margin-top: 26px; padding-top: 6px; border-top: 1px solid #B9BCC0; font-size: 13px; line-height: 1.5; color: #2A2824 }
.sheet .notes h4 { font-size: 15px; margin: 8px 0 6px } .sheet .fnl { margin: 0; padding-left: 28px } .sheet .fnl li { margin-bottom: 5px; overflow-wrap: anywhere }
.sheet .sigsentence { margin: 0 0 14px; color: #2A2824 }
.sheet .linkbtn { color: var(--ink); text-decoration-color: var(--acc); text-decoration-thickness: 2px }
.sigblock { margin-top: 28px; padding: 16px; box-shadow: inset 0 0 0 1px #B9BCC0 }
.sigblock .sl { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #4D4F53 }
.sigline { position: relative; height: 54px; border-bottom: 1.5px solid var(--ink); margin: 10px 0 6px }
.signame { position: absolute; left: 4px; bottom: 6px; font: 600 28px/1 var(--text); white-space: nowrap; clip-path: inset(0 100% 0 0); transition: clip-path 520ms cubic-bezier(.2, .7, .1, 1) }
.signame.is-on { clip-path: inset(0 0 0 0) }
.sigmeta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; font: 400 12px/1.5 var(--mono); color: #4D4F53 }
.sigmeta b { display: block; color: var(--ink); font: 400 13px var(--text); min-height: 1.5em }
@media (max-width: 560px) { .sigmeta { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.pdfrow { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 15px }

/* ------------------------------------------------------------------ start, code, done */
.need { margin: 0 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--hair) }
.need li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); color: var(--steel) }
.need li::before { content: ''; width: 16px; height: 4px; margin-top: 12px; background: var(--acc) }
.codein { font: 500 30px/1 var(--mono) !important; letter-spacing: .4em; text-align: left; max-width: 280px }
.line-done { margin: 8px 0 32px }
.line-done .trk { height: 14px; border-top: 2px solid var(--steel); border-bottom: 2px solid var(--steel); background: repeating-linear-gradient(to right, transparent 0 5px, var(--acc) 5px 8px); transform-origin: left; animation: lay 900ms ease-out 1 }
@keyframes lay { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.signed { border-top: 1px solid var(--hair); margin: 16px 0 32px }
.signed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--hair) }
.signed ul { list-style: none; margin: 0; padding: 0 }
.signed .hash { grid-column: 1 / -1; font: 400 11px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translateX(-50%); background: var(--paper); color: var(--ink); padding: 12px 16px; font-size: 15px; max-width: calc(100vw - 32px) }

/* ------------------------------------------------------------------ start: the whole route before the ride */
.start h1 { max-width: 15em }
.route { list-style: none; margin: 8px 0 44px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative }
.route::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 10px; border-top: 2px solid var(--steel); border-bottom: 2px solid var(--steel);
  background: repeating-linear-gradient(to right, transparent 0 5px, var(--acc) 5px 8px); transform-origin: left; animation: lay 900ms ease-out 1 }
.route li { position: relative; padding: 36px 8px 0 0; display: grid; gap: 2px; align-content: start }
.route li::before { content: ''; position: absolute; top: 1px; left: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 2px var(--paper) }
.route .rn { font: 500 12px/1.4 var(--mono); color: var(--acc) }
.route .rt { font-weight: 600; font-size: 15px; line-height: 1.25 }
@keyframes layv { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@media (max-width: 860px) {
  .route { grid-template-columns: minmax(0, 1fr) }
  .route::before { left: 7px; right: auto; top: 10px; bottom: 10px; width: 10px; height: auto; border: 0; border-left: 2px solid var(--steel); border-right: 2px solid var(--steel);
    background: repeating-linear-gradient(to bottom, transparent 0 5px, var(--acc) 5px 8px); transform-origin: top; animation-name: layv }
  .route li { padding: 0 0 14px 40px; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; min-height: 38px }
  .route li::before { top: 0; left: 0 }
}
/* A phone keeps the stations as one compact rail (numbers on the line; each name stays for screen readers), so the email form
   and "Email me a code" are on the first screen (Gate A BLOCKER 2026-10-26: the button sat at 1,166 px on a 390 x 844 phone). */
@media (max-width: 640px) {
  .route { grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 4px 0 24px }
  .route::before { left: 0; right: 0; top: 8px; bottom: auto; width: auto; height: 10px; border: 0; border-top: 2px solid var(--steel);
    border-bottom: 2px solid var(--steel); background: repeating-linear-gradient(to right, transparent 0 5px, var(--acc) 5px 8px); transform-origin: left; animation-name: none }
  .route li { padding: 32px 0 0 0; grid-template-columns: minmax(0, 1fr); min-height: 0 }
  .route .rt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap }
}
.note { margin: 0 0 28px; padding: 14px 16px; background: var(--ink-2); box-shadow: inset 3px 0 0 var(--acc); font-size: 16px }
.need-h { margin-top: 48px }
.sealnote { max-width: 40em }

/* ------------------------------------------------------------------ station pieces */
.never { display: flex; flex-direction: column; gap: 6px }
.never ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px }
.never li { font: 400 13px/1.6 var(--mono); color: var(--muted); text-decoration: line-through; text-decoration-color: var(--err); text-decoration-thickness: 1.5px }
.pct-in { max-width: 160px }
.person .pt { font-weight: 400; color: var(--muted); font-size: 16px }
.person .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 }
.person .tags:empty { display: none }
.person p { margin: 0 }
.ledger .empty { padding: 18px 0; margin: 0 }
.attest { margin-top: 28px }
.choice.inline { border: 0; padding: 10px 0 0; min-height: 44px }
.tag.bad { box-shadow: none; background: var(--err); color: var(--ink) }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hair); margin-bottom: 8px }
.way { padding: 22px 24px 24px 0; min-width: 0 }
.way + .way { padding-left: 24px; border-left: 1px solid var(--hair) }
.way h3 { margin-bottom: 6px } .way .help { margin-bottom: 18px }
@media (max-width: 720px) { .ways { grid-template-columns: minmax(0, 1fr) } .way + .way { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair) } }
.notice h3 { font-size: 17px; margin-bottom: 10px }
.plaid { padding-top: 4px }
.next-bar .back { margin-left: auto; min-width: 44px; justify-content: center } /* "Back" is one short word: 44 px wide all the same */
.next-bar .err { flex-basis: 100% }
.doc .opt { margin-left: 8px }
.prog-note:empty { display: none }
.prog-note { grid-column: 2 / -1; margin: 6px 0 0 }
.doc > .err { grid-column: 2 / -1 }
.sigstrips { display: grid; gap: 22px; margin: 24px 0 4px }
.sigstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 28px }
.sigstrip-h { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase }
.sigmini .sl { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel) }
.sigmini .sigline { height: 46px; border-bottom-color: var(--steel); margin: 6px 0 0 }
.sigmini .signame { color: var(--paper); font-size: 24px }
.sh-mark { width: 28px; height: 28px; background: url('./brand/smp-icon-small-ink.svg') center / contain no-repeat }
.signed li[data-box=consents] { border-left: 0 }
.done .signed b { font-weight: 600 }

@media (max-width: 560px) { .sign-bar .count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  .signame { clip-path: none; opacity: 0 } .signame.is-on { opacity: 1 }
}

/* ---------------------------------------------------------------------------------------------------------------------
   The developer program (docs/DEVELOPER-PROGRAM.md): the sandbox key, shown once; Go live (the cases, the review)
   --------------------------------------------------------------------------------------------------------------------- */
.keypanel { position: fixed; inset: 0; z-index: 80; background: rgba(10, 10, 11, .96); display: grid; place-items: center; padding: 16px var(--gutter); overflow-y: auto }
.keypanel-in { width: min(100%, 560px); background: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--hair-2); border-top: 4px solid var(--acc); padding: 24px }
.keypanel-in h2 { margin: 0 0 12px }
.keypanel-in .acts { margin-top: 16px }
.keyval { font: 500 15px/1.5 var(--mono); letter-spacing: .02em; color: var(--paper) }
.gl-status h2 { margin-top: 0 }
.gl-quote { margin: 16px 0 0; padding: 12px 16px; border-left: 4px solid var(--acc); background: var(--ink) }
.gl-quote .lbl { display: block; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel); margin-bottom: 6px }
.gl-quote p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere }
.gl-cases { list-style: none; margin: 12px 0 16px; padding: 0; border-top: 1px solid var(--hair) }
.gl-case { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--hair) }
.gl-case b { font-weight: 600 }
.gl-case p { margin: 4px 0 0 }
.gl-mark { width: 22px; height: 22px; margin-top: 2px; box-shadow: inset 0 0 0 2px var(--hair-2); display: grid; place-items: center }
.gl-case.is-ok .gl-mark { background: var(--acc); box-shadow: none; color: var(--ink) }
.gl-mark svg { width: 14px; height: 14px }
.gl-case .hash { margin-top: 6px; font: 400 12px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere }
.gl-checks { margin: 8px 0 24px; padding-left: 20px }
.gl-checks li { margin: 6px 0 }
.gl-submit { margin-top: 8px }
.golive .acts .btn { min-height: 46px }