@font-face { font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap; src:url(fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-style:normal; font-display:swap; src:url(fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-style:normal; font-display:swap; src:url(fonts/inter-700.woff2) format('woff2'); }
@font-face { font-family:'Martel Sans'; font-weight:400; font-style:normal; font-display:swap; src:url(fonts/martel-sans-400.woff2) format('woff2'); }
@font-face { font-family:'Martel Sans'; font-weight:600; font-style:normal; font-display:swap; src:url(fonts/martel-sans-600.woff2) format('woff2'); }
@font-face { font-family:'Martel Sans'; font-weight:700; font-style:normal; font-display:swap; src:url(fonts/martel-sans-700.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --navy:#0B2545; --navy-deep:#071A33;
  --ground:#F7F8FA; --surface:#fff; --ink:#14213A; --muted:#4F5E73; --line:#D3DAE3; --link:#1B4F9C; --stage:#E4E9F0;
  --mark:#FFE27A;
  --warn-bg:#FFF3D6; --warn-ink:#5A3B00; --err-bg:#fde8e8; --err-ink:#6b1010;
  --scrim:rgba(7,26,51,.6);
  --serif:'Inter','Martel Sans',system-ui,sans-serif; --sans:'Inter','Martel Sans','Nirmala UI',system-ui,sans-serif; --paper:'Times New Roman','Liberation Serif','Martel Sans',serif;
}
* { box-sizing: border-box; }
html { scroll-behavior:auto; }
body { margin:0; font-family:var(--sans); background:var(--ground); color:var(--ink); font-size:17px; line-height:1.6; }
::selection { background:var(--navy); color:var(--surface); }
input, select, button { caret-color:var(--navy); }
:focus-visible { outline:3px solid var(--link); outline-offset:2px; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
.narrow { max-width:760px; }

/* masthead */
.bar { display:flex; align-items:baseline; justify-content:space-between; padding-block:20px 0; }
.mark { font-family:var(--serif); font-weight:700; font-size:22px; color:var(--navy); text-decoration:none; }
.toplink { color:var(--muted); font-size:15px; }
.toplink:hover { color:var(--navy); }

/* hero: the order sheet is the page */
.hero-grid { display:grid; gap:32px; padding-block:28px 8px; }
@media (min-width:900px){ .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:64px; padding-block:56px 24px; align-items:start; } }
h1 { font-family:var(--serif); font-weight:700; font-size:clamp(34px,6.4vw,54px); line-height:1.06; letter-spacing:-.025em; margin:0 0 12px; text-wrap:balance; color:var(--navy); }
.hi { color:var(--muted); font-size:19px; margin:0 0 18px; }
.lede { font-size:19px; margin:0 0 26px; max-width:34em; }

/* controls */
.lbl, legend { display:block; font-weight:600; padding:0; margin:0 0 6px; }
fieldset { border:0; margin:0 0 18px; padding:0; }
.segs { display:flex; flex-wrap:wrap; gap:8px; }
.seg { position:relative; }
.seg input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg span { display:inline-flex; align-items:center; min-height:44px; padding:6px 18px; border:1px solid var(--navy); border-radius:4px; color:var(--navy); font-weight:600; background:var(--surface); }
.seg input:checked + span { background:var(--navy); color:#fff; }
.seg input:focus-visible + span { outline:3px solid var(--link); outline-offset:2px; }
.drop { display:block; width:100%; text-align:left; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--navy); border-radius:4px; padding:14px 16px; cursor:pointer; }
.drop:hover { background:#EEF2F8; }
.drop strong { display:block; font-size:19px; color:var(--navy); }
.drop .small { display:block; }
.drop.has { background:#EEF2F8; }
button.main { display:block; width:100%; margin-top:12px; min-height:52px; padding:12px; font:inherit; font-weight:700; color:#fff; background:var(--navy); border:0; border-radius:4px; cursor:pointer; }
button.main:hover:not([disabled]) { background:var(--navy-deep); }
button.main[disabled] { opacity:.45; cursor:default; }
button.main.inline { width:auto; margin:0; padding:12px 22px; }
button.ghost { min-height:44px; padding:8px 18px; font:inherit; font-weight:600; background:var(--surface); border:1px solid var(--navy); color:var(--navy); border-radius:4px; cursor:pointer; }
button.ghost:hover { background:#EEF2F8; }
select, input[type=text] { width:100%; min-height:48px; padding:12px; font:inherit; border:1px solid #9AA7B8; border-radius:4px; background:var(--surface); color:var(--ink); }
label { display:block; font-weight:600; margin:14px 0 4px; }
.small { font-size:15px; color:var(--muted); }
.tight { margin:14px 0 0; }
.flush { margin-top:0; }
.tool { max-width:34em; }

/* the specimen */
.stage { background:var(--stage); padding:22px 16px 20px; border-radius:4px; }
@media (min-width:900px){ .stage { padding:30px 28px 24px; } }
.sheet { margin:0; }
.scan { position:relative; background:#fff; box-shadow:0 1px 2px rgba(11,37,69,.18), 0 14px 28px -12px rgba(11,37,69,.28); }
.scan img { display:block; width:100%; height:auto; }
.pin { position:absolute; left:3.4%; transform:translate(-50%,-50%); display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--navy); color:#fff; font:700 12px/1 var(--sans); }
.pin.p1 { top:52.3%; }
.pin.p2 { top:56.4%; }
.notes { list-style:none; counter-reset:n; margin:18px 0 0; padding:0; display:grid; gap:10px; font-size:17px; }
.notes li { counter-increment:n; display:grid; grid-template-columns:24px 1fr; gap:10px; }
.notes li::before { content:counter(n); display:grid; place-items:center; width:21px; height:21px; margin-top:4px; border-radius:50%; background:var(--navy); color:#fff; font:700 12px/1 var(--sans); }
.sheet figcaption { margin-top:16px; font-size:14px; color:var(--muted); }

/* plain sections */
.plain { border-top:1px solid var(--line); margin:40px 0 0; padding:26px 0 0; }
.plain p { max-width:38em; margin:0; }
h2 { font-family:var(--serif); font-weight:600; font-size:23px; line-height:1.25; margin:0 0 10px; color:var(--navy); }
h2[tabindex="-1"]:focus { outline:none; }
.warn { background:var(--warn-bg); color:var(--warn-ink); border-radius:4px; padding:12px 14px; font-size:16px; margin:14px 0; }
.err { background:var(--err-bg); color:var(--err-ink); border-radius:4px; padding:12px 14px; margin:12px 0; }

/* result: ruled sections, not boxes */
#result { margin-top:36px; }
.card { border-top:1px solid var(--line); padding:24px 0; margin:0; }
.card.next { box-shadow:inset 0 4px 0 var(--navy); padding-top:30px; }
.item { margin:0 0 16px; }
.chip { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:2px; padding:4px 14px; font:inherit; font-size:15px; font-weight:600; border-radius:4px; background:var(--surface); color:var(--link); cursor:pointer; border:1px solid var(--line); }
.chip:hover { border-color:var(--link); }
.chip::after { content:""; width:7px; height:7px; border:solid currentColor; border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg); }
.chip[aria-expanded="true"]::after { transform:translateY(2px) rotate(-135deg); }
.quote { display:none; margin:8px 0 0; padding:12px 16px; background:#fff; font-family:var(--paper); font-size:18px; line-height:1.55; color:var(--ink); white-space:pre-wrap; box-shadow:0 1px 2px rgba(11,37,69,.18); }
.quote.open { display:block; }
.date { font-family:var(--serif); font-weight:600; font-size:clamp(34px,7.5vw,48px); line-height:1.1; color:var(--navy); font-variant-numeric:lining-nums tabular-nums; margin:2px 0 8px; }
.blur-wrap { position:relative; }
.blurred { filter:blur(5px); user-select:none; pointer-events:none; }
.lock { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.row.top { margin-top:12px; }
.row .grow { margin:0; flex:1; }

/* dialog */
dialog.modal { border:0; border-radius:6px; padding:0; max-width:460px; width:calc(100% - 36px); max-height:calc(100dvh - 36px); overflow:auto; color:var(--ink); background:var(--surface); }
dialog.modal::backdrop { background:var(--scrim); }
.modal-body { padding:24px; }
.modal-body p { margin:0 0 12px; }
.field-err { color:var(--err-ink); font-size:16px; margin:8px 0 0; }

footer { padding:28px 0 44px; font-size:14px; color:var(--muted); border-top:1px solid var(--line); margin-top:40px; }
footer a, .legal a { color:var(--link); }
.hidden { display:none; }
.spin { display:inline-block; width:16px; height:16px; border:3px solid var(--line); border-top-color:var(--navy); border-radius:50%; animation:s 1s linear infinite; vertical-align:-3px; margin-right:8px; }
@keyframes s { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation:none; border-color:var(--navy); } }

/* legal.html */
.legal { max-width:720px; margin:0 auto; padding:28px 20px 60px; line-height:1.6; }
.legal h1 { font-size:clamp(28px,5vw,38px); margin:8px 0 12px; }
.legal h2 { margin-top:30px; }