:root {
  /* Sugo tokens (brand/TOKENS.md) */
  --ink: #0e0e0e;
  --body: #2b2b2b;
  --soft: #555;
  --paper: #fff;
  --dark-soft: #232323;
  --red: #FF3B1F;
  --red-deep: #B91C1C;
  --red-text: #E0280F;
  --green: #2B8156;
  /* Cool neutrals replace the site's warm lines on this form */
  --page: #fafafa;
  --wash: #f4f4f5;
  --line: #e4e4e7;
  --control: #71717a;

  --display: 'Inter Tight', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --toolbar: 0px;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--page); color: var(--body);
  font: 400 16px/1.5 var(--display);
}
img { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s3); top: calc(var(--toolbar) + var(--s2)); z-index: 60; background: var(--ink); color: #fff; padding: var(--s2) var(--s4); transform: translateY(-300%); }
.skip:focus { transform: none; }
/* Off-screen rather than display:none, so bots still see and fill it */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Masthead ---------- */
.top { background: var(--paper); border-bottom: 1px solid var(--ink); }
.top-in { max-width: 1180px; margin: 0 auto; padding: var(--s2) var(--s4); display: flex; align-items: center; justify-content: space-between; }
.logo { height: 48px; width: auto; margin-left: -6px; }
.marker { display: flex; align-items: center; gap: var(--s3); font: 500 12px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--soft); }
.marker i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }

/* ---------- Layout ---------- */
.shell { max-width: 1180px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); display: grid; gap: var(--s5); }
.intro h1, .done-head h1 {
  font-weight: 800; font-size: clamp(44px, 12vw, 80px); line-height: .95; letter-spacing: -.035em; color: var(--ink);
}
.dot { color: var(--red); }
.intro p { margin-top: var(--s3); max-width: 34ch; text-wrap: pretty; }
.handy { display: none; }

/* ---------- Banner ---------- */
.banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s4); padding: var(--s3) var(--s4); margin-bottom: var(--s4); font-size: 15px; }
.banner.guest { background: var(--wash); border: 1px solid var(--line); }
.banner.guest a { font-weight: 700; color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.banner.guest span { color: var(--soft); font-size: 14px; }
.banner.me { background: var(--ink); color: #fff; }
.banner.me button { background: none; border: 0; padding: var(--s1) 0; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.banner.me :focus-visible { outline-color: #fff; }

/* ---------- Card + progress ---------- */
.card { background: var(--paper); border: 1px solid var(--ink); }
.bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 8px; background: var(--paper); }
.bar i { background: var(--line); transition: background-color .2s; }
.bar i.on { background: var(--red); }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; border-bottom: 1px solid var(--line); }
.steps li > * { display: block; width: 100%; padding: var(--s2) var(--s2) var(--s3); background: none; border: 0; text-align: left; font-size: 13px; line-height: 1.2; color: var(--soft); }
.steps .num { display: none; font: 500 11px/1 var(--mono); margin-bottom: var(--s1); }
.steps li.is-now > * { color: var(--ink); font-weight: 800; }
.steps li.is-done button { color: var(--ink); text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; }
.steps li.is-done button:hover { text-decoration-color: var(--red); }
.steps li.is-done .tick { color: var(--green); font-weight: 800; text-decoration: none; display: inline-block; margin-right: 2px; }
.steps :focus-visible { outline-offset: -2px; }

.pane { padding: var(--s5) var(--s4) var(--s4); }
.step-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s2); }
.step-head h2 { font-weight: 800; font-size: 30px; line-height: 1.02; letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
.step-head h2:focus { outline: none; }
.count { font: 500 14px/1 var(--mono); color: var(--soft); white-space: nowrap; }
.count b { color: var(--red-text); font-weight: 800; }
.lead { color: var(--soft); margin-bottom: var(--s5); font-size: 15px; }

/* ---------- Fields ---------- */
.f { margin-bottom: var(--s4); min-width: 0; }
.f > label, .legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: var(--s1); }
.req { color: var(--red-text); }
.tag { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--soft); text-transform: uppercase; }
input[type=text], input[type=email], input[type=tel], select, textarea {
  display: block; width: 100%; min-height: 48px; padding: var(--s3); font: 400 16px/1.4 var(--display); color: var(--ink);
  background-color: var(--paper); border: 1px solid var(--control); border-radius: 2px; appearance: none;
}
select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%); background-size: 6px 6px; background-position: right 20px center, right 14px center; background-repeat: no-repeat; }
textarea { min-height: 136px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--ink); }
[aria-invalid=true] { border-color: var(--red-deep) !important; box-shadow: inset 0 0 0 1px var(--red-deep); }
.mono-in { font-family: var(--mono) !important; }
.hint { font-size: 14px; color: var(--soft); margin-top: var(--s1); }
.hint-row { display: flex; justify-content: space-between; gap: var(--s4); }
.err { display: flex; gap: var(--s2); align-items: flex-start; margin-top: var(--s2); font-size: 14px; font-weight: 600; color: var(--red-deep); }
.err:empty { display: none; }
.err::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; background: var(--red-deep); color: #fff; font: 800 12px/18px var(--mono); text-align: center; }
.group-title { font-weight: 800; font-size: 19px; letter-spacing: -.015em; color: var(--ink); }
.rule { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }
.addr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); margin-top: var(--s3); }
.addr .wide { grid-column: span 2; }

/* ---------- Order picker ---------- */
.orders { display: grid; gap: var(--s2); margin-top: var(--s3); }
.order { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: var(--s1) var(--s3); padding: var(--s3); border: 1px solid var(--control); border-radius: 2px; background: var(--paper); cursor: pointer; }
.order:hover { border-color: var(--ink); }
.order input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.order .box { grid-row: span 2; width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--control); background: var(--paper); }
.order-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s3); font-family: var(--mono); font-size: 14px; color: var(--soft); }
.order-top b { color: var(--ink); font-size: 15px; font-weight: 800; }
.order-items { font-size: 15px; line-height: 1.35; grid-column: 2; }
.order-sel { display: none; grid-column: 2; font: 700 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red-deep); }
.order:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--wash); }
.order:has(input:checked) .box { border: 6px solid var(--red); }
.order:has(input:checked) .order-sel { display: block; }
.order:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.items { margin-top: var(--s4); padding: var(--s3) var(--s4) var(--s4); background: var(--wash); }
.items legend { float: left; width: 100%; }
#items-list { clear: both; }
.radio { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; cursor: pointer; font-size: 15px; }
.radio input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--red-deep); }
.linkbtn { background: none; border: 0; padding: var(--s2) 0; font-weight: 700; font-size: 14px; color: var(--ink); border-bottom: 2px solid var(--ink); line-height: 1.1; }
.linkbtn:hover { border-bottom-color: var(--red); }
.after-pick { margin-top: var(--s3); }
.or { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0 var(--s4); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---------- Check tiles ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.tile { position: relative; display: block; }
.tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tile span { display: flex; align-items: center; gap: var(--s2); height: 100%; min-height: 48px; padding: var(--s2) var(--s3); border: 1px solid var(--control); border-radius: 2px; background: var(--paper); font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.tile span::before { content: ""; flex: none; width: 16px; height: 16px; border: 1px solid var(--control); color: #fff; font: 800 12px/14px var(--mono); text-align: center; }
.tile:hover span { border-color: var(--ink); }
.tile input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.tile input:checked + span::before { content: "✓"; background: var(--red); border-color: var(--red); color: var(--ink); }
.tile input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Files ---------- */
.drop { position: relative; display: block; padding: var(--s4); border: 1px dashed var(--control); border-radius: 2px; background: var(--wash); text-align: left; cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--ink); border-style: solid; }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.drop strong { display: block; color: var(--ink); font-size: 16px; font-weight: 800; }
.drop small { display: block; margin-top: var(--s1); font: 400 12px/1.5 var(--mono); color: var(--soft); }
.files { list-style: none; padding: 0; margin-top: var(--s2); }
.files li { display: flex; align-items: center; gap: var(--s3); border-bottom: 1px solid var(--line); padding: var(--s1) 0; font-size: 14px; }
.files .fn { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.files .fs { font: 400 12px/1 var(--mono); color: var(--soft); white-space: nowrap; }
.files button { background: none; border: 0; min-height: 40px; padding: 0 var(--s1); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Review ---------- */
.rv { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.rv:first-child { border-top: 1px solid var(--ink); }
.rv-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s2); }
.rv-head h3 { font: 500 12px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.rv-head button { padding: var(--s1) 0 2px; }
dl.kv { display: grid; grid-template-columns: minmax(96px, 32%) 1fr; gap: var(--s2) var(--s3); font-size: 15px; }
dl.kv dt { color: var(--soft); }
dl.kv dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
dl.kv dd.is-mono { font-family: var(--mono); }
.check { margin-top: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--ink); }
.ts { min-height: 65px; }
.ts-note { font-size: 14px; color: var(--soft); padding: var(--s3); border: 1px dashed var(--control); }
.note { margin-top: var(--s2); font-size: 14px; color: var(--soft); }

/* ---------- Nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4); border-top: 1px solid var(--ink); }
.cta {
  min-height: 56px; padding: var(--s3) var(--s5); background: var(--red); color: #fff; border: 0; border-radius: 0;
  /* 19px bold counts as large text: white on brand red passes AA at this size (3.56:1) */
  font: 800 19px/1.1 var(--display); letter-spacing: -.01em;
  transition: background-color .12s;
}
.cta:hover { background: var(--red-deep); }
.cta[disabled] { background: var(--control); cursor: progress; }
.nav .cta { flex: 1; margin-left: auto; }
.back { background: none; border: 0; border-bottom: 2px solid var(--ink); padding: var(--s2) 0 var(--s1); font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.1; }
.back:hover { border-bottom-color: var(--red); }
.nav-err { padding: 0 var(--s4) var(--s4); margin-top: calc(-1 * var(--s1)); }
.nav-err:empty { display: none; }
.nav-err p { font-size: 14px; font-weight: 600; color: var(--red-deep); }

/* ---------- Success ---------- */
.done { display: grid; gap: var(--s6); }
.done-head h1:focus { outline: none; }
.done-head h1 { font-size: clamp(40px, 11vw, 72px); }
.done-head p { margin-top: var(--s3); max-width: 44ch; }
.ticket { position: relative; display: grid; margin-top: var(--s5); background: var(--ink); color: #fff; max-width: 560px; }
.t-main { padding: var(--s5) var(--s5) var(--s4); }
.t-main small { display: block; font: 500 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: var(--s3); }
.t-main small b { color: var(--red); font-weight: 500; }
.t-id { display: block; font: 800 clamp(44px, 14vw, 68px)/1 var(--mono); letter-spacing: -.03em; user-select: all; }
.t-stub { position: relative; display: grid; border-top: 2px dashed rgba(255,255,255,.4); }
/* Punched notches where the perforation meets the ticket edge */
.t-stub::before, .t-stub::after { content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--page); }
.t-stub::before { left: -9px; } .t-stub::after { right: -9px; }
.t-copy { background: none; border: 0; color: #fff; min-height: 52px; padding: var(--s3) var(--s5); font-weight: 800; font-size: 16px; text-align: left; }
.t-copy:hover { color: var(--red); }
.t-copy:focus-visible { outline-color: #fff; outline-offset: -6px; }
.done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); margin-top: var(--s5); }
.done-actions .cta { background: var(--ink); }
.done-actions .cta:hover { background: var(--dark-soft); }
.done-actions a { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
.done-actions a:hover { border-bottom-color: var(--red); }
.preview-note { margin-top: var(--s4); font: 400 12px/1.5 var(--mono); color: var(--soft); max-width: 60ch; }
.done-sum { background: var(--paper); border: 1px solid var(--ink); padding: var(--s4); align-self: start; }
.done-sum h2 { font: 500 12px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); margin-bottom: var(--s3); }

/* ---------- Wider screens ---------- */
@media (min-width: 560px) {
  .steps .num { display: block; }
  .steps li > * { padding: var(--s3) var(--s3) var(--s3); font-size: 14px; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .ticket { grid-template-columns: 1fr auto; }
  .t-stub { border-top: 0; border-left: 2px dashed rgba(255,255,255,.4); align-items: center; }
  .t-stub::before { top: -9px; left: -10px; } .t-stub::after { top: auto; bottom: -9px; left: -10px; right: auto; }
}
@media (min-width: 960px) {
  .top-in { padding: var(--s2) var(--s5); }
  .logo { height: 60px; margin-left: -8px; }
  .shell { grid-template-columns: 340px minmax(0, 1fr); gap: var(--s8); padding: var(--s7) var(--s5) var(--s8); align-items: start; }
  .intro { position: sticky; top: calc(var(--toolbar) + var(--s6)); }
  .intro p { margin-top: var(--s4); font-size: 18px; line-height: 1.4; }
  .handy { display: block; margin-top: var(--s6); }
  .handy h2 { font: 500 12px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--soft); padding-bottom: var(--s2); border-bottom: 1px solid var(--ink); }
  .handy ul { list-style: none; padding: 0; }
  .handy li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); }
  .pane { padding: var(--s6) var(--s6) var(--s4); }
  .step-head h2 { font-size: 38px; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
  .nav { padding: var(--s4) var(--s6); }
  .nav .cta { max-width: 300px; }
  .nav-err { padding: 0 var(--s6) var(--s4); text-align: right; }
  .done { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s8); }
  .done-sum { padding: var(--s5); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Build additions: inline styles from B2 moved here for the CSP ---------- */
.count-note { font-size: 12px; white-space: nowrap; }
.short-ta { min-height: 88px; }
.upload-status { margin-top: var(--s4); max-width: 60ch; font: 500 14px/1.5 var(--mono); color: var(--ink); }
.banner.me a { color: #fff; text-underline-offset: 3px; }
.upload-warn { margin-top: var(--s4); max-width: 60ch; font-size: 14px; font-weight: 600; color: var(--red-deep); }
.mock-list { display: grid; gap: var(--s3); margin-top: var(--s4); }
.mock-note { margin-top: var(--s4); font: 400 12px/1.5 var(--mono); color: var(--soft); }