:root{
  --ground:#EDEBE3; --surface:#FFFFFF; --surface-2:#F6F4EE;
  --ink:#16180F; --ink-2:#4B4E3F; --ink-3:#63675A;
  --line:#D9D6C8; --line-2:#C4C0AE;
  --sear:#C2410C; --sear-ink:#FFFFFF; --sear-tint:#FAE5D9;
  --go:#2E6B45; --go-tint:#DCEAE0;
  --wait:#8A6100; --wait-tint:#F5E8C9;
  --gone:#5E6254; --gone-tint:#E3E1D6;
  --gold:#D19A0B; --gold-ink:#1B1400;
  --bad:#B3261E;
  --shadow:0 1px 2px rgb(22 24 15 / .06), 0 10px 26px -14px rgb(22 24 15 / .30);
  --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#131510; --surface:#1C1F17; --surface-2:#22261B;
    --ink:#EFEEE3; --ink-2:#B3B6A4; --ink-3:#868A76;
    --line:#2E3225; --line-2:#3E4331;
    --sear:#F9835A; --sear-ink:#1B0F05; --sear-tint:#3A2013;
    --go:#79C494; --go-tint:#1C3325;
    --wait:#E3B75E; --wait-tint:#362C11;
    --gone:#8D917E; --gone-tint:#262A1E;
    --gold:#F5C542; --gold-ink:#1B1400;
    --bad:#D93F3F;
    --shadow:0 1px 2px rgb(0 0 0 / .45), 0 12px 30px -16px rgb(0 0 0 / .85);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#131510; --surface:#1C1F17; --surface-2:#22261B;
  --ink:#EFEEE3; --ink-2:#B3B6A4; --ink-3:#868A76;
  --line:#2E3225; --line-2:#3E4331;
  --sear:#F9835A; --sear-ink:#1B0F05; --sear-tint:#3A2013;
  --go:#79C494; --go-tint:#1C3325;
  --wait:#E3B75E; --wait-tint:#362C11;
  --gone:#8D917E; --gone-tint:#262A1E;
  --gold:#F5C542; --gold-ink:#1B1400;
  --bad:#D93F3F;
  --shadow:0 1px 2px rgb(0 0 0 / .45), 0 12px 30px -16px rgb(0 0 0 / .85);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink); font-family:"Archivo","Helvetica Neue",Arial,sans-serif; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:400}
p{margin:0; text-wrap:pretty}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; text-align:left}
a{color:var(--sear)}
:focus-visible{outline:2px solid var(--sear); outline-offset:2px; border-radius:5px}
section{scroll-margin-top:76px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}

.display{font-family:"Archivo Black","Archivo",Arial,sans-serif; letter-spacing:-.015em}
.mono{font-family:"DM Mono",ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-family:"DM Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.tiny{font-family:"DM Mono",ui-monospace,monospace; font-size:11.5px; color:var(--ink-3)}
.hide{display:none !important}
[hidden]{display:none !important} /* hidden wins over any class that sets display, such as .src{display:flex} */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.wrap{max-width:1180px; margin:0 auto; padding:0 18px}

/* header */
.top{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:8px 12px; min-height:60px; flex-wrap:wrap; padding-block:8px} /* the buttons wrap under the name on a phone; the name never breaks */
.mark{display:flex; align-items:baseline; gap:8px; min-width:0}
.mark .n{font-size:19px; line-height:1; white-space:nowrap; display:inline-flex; flex-wrap:nowrap; align-items:center; gap:7px; width:max-content}
.mark .n .logo{flex:none; display:block}
.mark .word{display:inline-block; white-space:nowrap}
/* The mark: in reading order (left to right, the top row, the middle, the bottom), three waves each a row behind the last: a
   gold outline runs a row, then the green fill runs it while the outline runs the next, then the gold fill runs it while the
   green runs the next and the outline the one after. Then the middle square turns orange, swells once and holds for the rest
   of the loop. Nine seconds a loop; each square has its own keyframes. Still under reduced motion, the middle one orange. */
.logo rect{fill:var(--ink-3); stroke:transparent; stroke-width:1.3; animation:slot0 9s linear infinite; transform-box:fill-box; transform-origin:center}
@keyframes slot0{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} -1.33%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 0.00%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 9.78%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 11.11%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 20.89%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 22.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c0{animation-name:slot0}
@keyframes slot1{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 1.78%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 3.11%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 12.89%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 14.22%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 24.00%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 25.33%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c1{animation-name:slot1}
@keyframes slot2{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 4.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 6.22%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 16.00%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 17.33%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 27.11%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 28.44%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c2{animation-name:slot2}
@keyframes slot3{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 9.78%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 11.11%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 20.89%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 22.22%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 32.00%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 33.33%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c3{animation-name:slot3}
@keyframes slot4{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 12.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 14.22%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 24.00%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 25.33%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 35.11%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 36.44%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 58.33%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 60.00%{fill:var(--sear); stroke:var(--sear); transform:scale(1.3)} 63.89%{fill:var(--sear); stroke:var(--sear); transform:scale(1)} 97.22%{fill:var(--sear); stroke:var(--sear); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c4{animation-name:slot4}
@keyframes slot5{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 16.00%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 17.33%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 27.11%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 28.44%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 38.22%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 39.56%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c5{animation-name:slot5}
@keyframes slot6{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 20.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 22.22%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 32.00%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 33.33%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 43.11%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 44.44%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c6{animation-name:slot6}
@keyframes slot7{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 24.00%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 25.33%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 35.11%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 36.44%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 46.22%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 47.56%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c7{animation-name:slot7}
@keyframes slot8{0%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 27.11%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 28.44%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 38.22%{fill:var(--ink-3); stroke:var(--gold); transform:scale(1)} 39.56%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 49.33%{fill:var(--go); stroke:var(--gold); transform:scale(1)} 50.67%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 97.22%{fill:var(--gold); stroke:var(--gold); transform:scale(1)} 98.89%{fill:var(--ink-3); stroke:transparent; transform:scale(1)} 100%{fill:var(--ink-3); stroke:transparent; transform:scale(1)}}
.logo .c8{animation-name:slot8}
@media (prefers-reduced-motion:reduce){.logo rect{animation:none} .logo .c4{fill:var(--sear)}}
.mark .n em{font-style:normal; color:var(--sear)}
.mark .loc{font-size:11px; color:var(--ink-3); white-space:nowrap}
.mark{flex:none} /* the name never shrinks or wraps; the line beside it goes first, then the header's buttons wrap */
/* A phone: the name and the account sit on the first row, the buttons and the pill on the second, so the two rows are a shape
   rather than an accident (the mobile fit pass, 2026-09-22). The account is the avatar alone. */
@media (max-width:640px){.top-in .top-sp{display:none} #acctSlot .acct .meta{display:none} #acctSlot .acct{padding:4px}
  .top-in{row-gap:7px; column-gap:6px} .top-in .mark{order:1} #acctSlot{order:2; margin-left:auto} .top-in::after{content:""; order:3; flex-basis:100%; height:0} #dropPill{order:4} #howBtn{order:5} #ordersBtn{order:6}}
@media (max-width:760px){.mark .loc{display:none}}
@media (max-width:360px){.top-in{column-gap:4px} #howBtn, #ordersBtn, #dropPill{padding-inline:8px}} /* 320 px: the pill, How it works and Orders (4) still share the second row (measured 2026-09-23) */
.top-sp{flex:1}

.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid transparent; white-space:nowrap}
button.pill{font:inherit; font-size:12px; font-weight:600; cursor:pointer} button.pill:hover{filter:brightness(1.08)}
button.pill:disabled{cursor:default; filter:none}
.pill.live{background:var(--go-tint); color:var(--go); border-color:color-mix(in srgb,var(--go) 30%,transparent)}
.pill.wait{background:var(--wait-tint); color:var(--wait); border-color:color-mix(in srgb,var(--wait) 32%,transparent)}
.pill.gone{background:var(--gone-tint); color:var(--gone); border-color:color-mix(in srgb,var(--gone) 30%,transparent)}
.pill.sear{background:var(--sear-tint); color:var(--sear); border-color:color-mix(in srgb,var(--sear) 30%,transparent)}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.pill.live .dot{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 15px; border-radius:var(--r); font-weight:600; font-size:14px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); transition:transform .08s ease, background .15s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--sear); color:var(--sear-ink); border-color:transparent}
.btn.ghost{background:transparent}
.btn.soft{background:var(--sear-tint); color:var(--sear); border-color:color-mix(in srgb,var(--sear) 35%,transparent)}
.btn.sm{padding:7px 11px; font-size:13px}
.btn.block{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* The signed in chip (the founder, 2026-09-19: the phone inside a box with the name looked wrong): no box, an avatar with a
   seared ring, the name in bold, and the phone's last four as a small mono tag beside it. */
.acct{display:flex; align-items:center; gap:10px; padding:2px 4px 2px 2px; background:none; border:1px solid transparent; border-radius:10px; color:inherit; font:inherit; cursor:pointer; text-align:left}
.acct:hover{border-color:var(--line-2)} .acct:focus-visible{border-color:var(--line-2); outline:2px solid var(--sear); outline-offset:2px}
.av{width:30px; height:30px; border-radius:50%; background:var(--sear); color:var(--sear-ink); display:grid; place-items:center; font-size:12px; font-weight:700; flex:none; box-shadow:0 0 0 2px var(--ground), 0 0 0 3.5px color-mix(in srgb,var(--sear) 55%,transparent)}
.acct .meta{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.acct .who{font-size:14px; font-weight:700; line-height:1.15; letter-spacing:-.01em}
.ptag{display:inline-flex; align-items:center; gap:4px; font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.06em; color:var(--ink-2); padding:2px 7px 2px 5px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line-2); line-height:1.3}
.ptag svg{width:11px; height:11px; display:block}
.ptag:empty{display:none}
@media (max-width:560px){.acct .meta{display:none}}
#acctSlot .btn{white-space:nowrap} /* "Sign in" stays one line: the header row shrinks the brand (which may stack) instead of breaking the button */

/* the showcase: one card per vendor under the header, moving right to left (Decision 008).
   data-mode on the view: marquee (700 px and up with a pointer that hovers: a CSS keyframe at 30 px per second, paused on hover and
   focus, clones cover the view), snap (the phone rule, under 700 px or no hover, the same rule as Web/launch/index.html, so a touch
   tablet swipes too: a horizontal snap scroller, one copy, the card in view centered with a sliver of each neighbour, dots under
   the row, advanced one card every 2.5 s by script when the row has not been touched for 10 s), scroll (reduced motion: the same
   scroller, nothing moves by itself), still (everything fits: nothing moves, no clones).
   data-paused on the view: the customer pressed Pause (the button in the head, visible in marquee and snap mode); the marquee holds
   and the phone scroller stops advancing until Play. The choice is kept in localStorage 'fs.scPaused'.
   The phone geometry: the card is 78 percent of the viewport (260 to 340 px); --sc-pad, the track's side padding, is half of what
   is left, so the first and the last card center like the others and the gutters are equal; the gap is that gutter less 24 px, so
   24 px of the previous and of the next card show on either side of the one in view (the gap never goes under 12 px). */
.showcase{border-bottom:1px solid var(--line); background:var(--surface); padding:10px 0 6px; --sc-w:clamp(260px, 78vw, 340px); --sc-gap:clamp(12px, calc((100vw - var(--sc-w)) / 2 - 24px), 48px); --sc-pad:calc((100% - var(--sc-w)) / 2)}
@media (min-width:700px) and (hover:hover){.showcase{padding:12px 0 14px; --sc-w:280px; --sc-gap:14px; --sc-pad:max(18px, calc((100% - 1180px) / 2 + 18px))}}
.sc-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.sc-head .tiny{flex:1; min-width:200px}
.sc-pause{margin-left:auto; min-height:44px; padding:0 14px; font-size:13px; border-radius:999px} /* 44 px tall: a tap target on a phone; the head is aligned to its middle */
@media (min-width:700px) and (hover:hover){.sc-head{align-items:baseline; margin-bottom:10px} .sc-pause{min-height:0; padding:3px 10px; font-size:12px}}
.sc-pause.off{visibility:hidden} /* nothing moves (still, scroll): the button keeps its place so the head never changes height, and is neither focusable nor read */
/* Pause is back (the founder's answer to Q19, 2026-09-24): small, and it holds the vendor row and the ticker line together */
.still .vtick-track{animation-play-state:paused}
.sc-foot{font-size:11.5px; color:var(--ink-3); margin:4px auto 2px; text-align:center}
.sc-card .sc-follow:not([aria-pressed="true"])::after{content:"*"; margin-left:1px} /* points to the line under the row */
@media (max-width:479px){.sc-head .tiny{flex-basis:100%; order:2}} /* the consent sentence is on the sign in form and in Your details; on a phone the eyebrow and Pause share the first line and the note takes the second */
.showcase{position:relative}
.sc-view{position:relative; overflow:clip}
.sc-arrow{position:absolute; top:50%; z-index:3; width:44px; height:44px; margin-top:-8px; border-radius:50%; border:1px solid var(--line-2); background:color-mix(in srgb,var(--surface) 92%,transparent); color:var(--ink); font-size:30px; line-height:1; font-family:"Archivo Black",Arial,sans-serif; display:none; align-items:center; justify-content:center; box-shadow:var(--shadow); cursor:pointer; padding:0 0 4px}
.sc-arrow:hover{background:var(--surface); border-color:var(--sear); color:var(--sear)}
.sc-arrow.prev{left:calc(var(--sc-pad, 18px) - 22px)} .sc-arrow.next{right:calc(var(--sc-pad, 18px) - 22px)} /* centered on the column's edge, where the cards fade */
@media (min-width:700px) and (hover:hover){.sc-arrow:not([hidden]){display:flex}}
/* The marquee fades the cards out at the left edge of the page column and in at the right one. The fade must start left of the first
   card's place (the track keeps its left padding, --sc-pad, while it moves): at the end of a loop the tail of the first copy sits in that
   padding, and at the restart nothing does, so anything visible there would vanish at every loop. */
.sc-view[data-mode="marquee"]{-webkit-mask-image:linear-gradient(to right,transparent calc(var(--sc-pad) - var(--sc-gap)),#000 calc(var(--sc-pad) + 24px),#000 calc(100% - var(--sc-pad) - 24px),transparent calc(100% - var(--sc-pad) + var(--sc-gap))); mask-image:linear-gradient(to right,transparent calc(var(--sc-pad) - var(--sc-gap)),#000 calc(var(--sc-pad) + 24px),#000 calc(100% - var(--sc-pad) - 24px),transparent calc(100% - var(--sc-pad) + var(--sc-gap)))}
.sc-view[data-mode="snap"], .sc-view[data-mode="scroll"], .sc-view[data-mode="still"]{overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline:var(--sc-pad); scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch}
.sc-view::-webkit-scrollbar{display:none}
/* A mouse drag of a scroller turns the snapping off until the mouse lets go: with it on, the browser pulled the row back to the
   nearest card on every move and the drag stuttered (a drop's page, where the row is a scroller, not the marquee: 2026-09-19). */
.sc-view{user-select:none; -webkit-user-select:none} .sc-view.dragging{cursor:grabbing; scroll-snap-type:none} .sc-view.dragging *{cursor:grabbing} @media (hover:hover){.sc-view[data-mode="marquee"] .sc-link, .sc-view[data-mode="scroll"] .sc-link{cursor:grab}}
.sc-track{display:flex; width:max-content; padding:4px var(--sc-pad)} /* 4 px above and below: room for the focus ring around a card */
.sc-view[data-mode="marquee"] .sc-track{animation:sc-scroll var(--sc-dur,60s) linear infinite; will-change:transform}
.sc-view[data-mode="marquee"]:hover .sc-track, .sc-view[data-mode="marquee"]:focus-within .sc-track, .sc-view[data-paused] .sc-track{animation-play-state:paused}
@keyframes sc-scroll{from{transform:translateX(0)}to{transform:translateX(var(--sc-shift,-50%))}}
.sc-copy{display:flex; gap:var(--sc-gap); padding-right:var(--sc-gap); flex:none; align-items:stretch}
.findwrap{padding-top:16px}
.sc-skel{visibility:hidden} /* the blank card in the markup: it holds the row's height from the first paint until the vendors arrive */
.sc-card{width:var(--sc-w); flex:none; scroll-snap-align:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s ease, box-shadow .15s ease}
.sc-card.cur{border-color:var(--sear); box-shadow:inset 0 0 0 1px var(--sear)}
.sc-card:has(:focus-visible){border-color:var(--sear); box-shadow:0 0 0 2px var(--sear)} /* the whole card shows a ring when its link or its button has keyboard focus */
.sc-card.cur:has(:focus-visible){box-shadow:0 0 0 2px var(--sear), inset 0 0 0 1px var(--sear)}
.sc-link{display:block; color:inherit; text-decoration:none; flex:1}
a.sc-link:hover .sc-name{color:var(--sear)}
a.sc-link:focus-visible{outline-offset:-3px}
.sc-photo{position:relative; aspect-ratio:4 / 3; background:var(--surface-2)}
.sc-photo > img, .sc-photo > .sc-ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.sc-photo > img.sc-logo{inset:12%; width:76%; height:76%; object-fit:contain} /* the logo sits in the middle of the plate, whole, never cropped */
.sc-ph text{font-family:"Archivo Black","Archivo",Arial,sans-serif; letter-spacing:-.02em}
.sc-rib{position:absolute; top:10px; right:0; padding:3px 9px 3px 10px; border-radius:4px 0 0 4px; background:var(--sear); color:var(--sear-ink); font-family:"DM Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:500}
.sc-item{position:absolute; left:12px; bottom:-20px; width:60px; height:60px; border-radius:50%; border:3px solid var(--surface); background:var(--surface-2); overflow:hidden; box-shadow:var(--shadow)}
.sc-item > img, .sc-item > svg{width:100%; height:100%; object-fit:cover; display:block}
.sc-body{padding:26px 12px 6px; display:grid; grid-template-columns:minmax(0,1fr); gap:3px} /* minmax(0,…) so a long word in the name never widens the column past the card */
.sc-name{font-size:16px; line-height:1.15; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; transition:color .15s ease} /* two lines at most, a long word wraps */
.sc-tag{font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sc-ig, .hero-ig{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--sear); text-decoration:none; font-weight:600; border:1px solid color-mix(in srgb,var(--sear) 40%,transparent); border-radius:999px; padding:4px 10px; background:var(--sear-tint); width:max-content; max-width:100%}
.sc-ig::before, .hero-ig::before{content:""; width:12px; height:12px; border:2px solid currentColor; border-radius:4px; box-shadow:inset 0 0 0 1.5px var(--sear-tint), inset 0 0 0 3.5px currentColor; flex:none}
.sc-ig:hover, .hero-ig:hover{background:var(--sear); color:var(--sear-ink)}
.hero-ig{margin:2px 0 10px; font-size:13.5px; padding:6px 13px}
/* The area and the follower count wrap to a second line rather than losing the count to an ellipsis. --ink-2, not --ink-3: the small text
   needs 4.5:1 on the card in the light theme. */
.sc-meta{font-family:"DM Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
.sc-next{font-size:13px; color:var(--ink-2); margin-top:3px}
.sc-next b{color:var(--ink); font-weight:600}
.sc-sub{font-size:12px; color:var(--ink-2)}
.sc-act{padding:6px 12px 12px; margin-top:auto}
.sc-follow, .btn.sm.sc-follow{width:100%; border-radius:8px; white-space:nowrap; min-height:48px; font-size:15px}
.sc-follow[aria-pressed="true"]{background:var(--go-tint); color:var(--go); border-color:color-mix(in srgb,var(--go) 35%,transparent)}
/* The chef finder (testing notes, 2026-09-19): a search box, the category chips, one row per vendor with the logo or the
   FOODSlot mark, the name, the tagline and a status tag; a tap opens the vendor's page. */
/* The finder (Decision 027, the founder's notes 2026-09-20): the head lines up with the box, the note is bigger with the count in
   colour, typed matches drop down from the box, the top five or a chip's list sit under the chips, Search opens the grid page. */
/* The founder's notes, 2026-09-20: the head sits on the bar's left edge and close to it with the note on the same line ending at
   the bar's right edge; Search sits inside the bar; the chips run in one line under the bar (they scroll sideways on a phone);
   a row's picture fills its whole left edge top to bottom and Follow sits inside the row. */
/* The finder is as wide as the vendor display's column (the founder, 2026-09-21): the ticker, the search bar, the chips and the Tabs share one width, .wrap's. */
.vtick{overflow:hidden; border:1px solid var(--line); border-radius:999px; background:var(--surface); margin-bottom:10px; height:36px; display:flex; align-items:center; -webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.vtick-track{display:flex; gap:28px; width:max-content; padding:0 18px; animation:vt-scroll var(--vt-dur,20s) linear infinite}
.vtick-track.still{animation:none; width:100%; justify-content:center; padding:0 12px}
.vtick:hover .vtick-track, .vtick:focus-within .vtick-track{animation-play-state:paused}
@keyframes vt-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.vt-item{white-space:nowrap; font-size:13px; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:8px}
.vt-item b{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.14em; padding:2px 7px; border-radius:4px}
.vt-item.open b{background:var(--go-tint); color:var(--go)} .vt-item.soon b{background:var(--wait-tint); color:var(--wait)} .vt-item.new b{background:var(--sear-tint); color:var(--sear)}
.vt-item.invite{color:var(--ink-3); font-style:italic; gap:6px} .vt-item.invite .vt-go{font-style:normal; color:var(--sear); opacity:.7; font-size:12px; transition:transform .2s, opacity .2s} .vt-item.invite:hover .vt-go{opacity:1; transform:translateX(2px)}
.vt-item:hover{color:var(--sear)} .vt-ask{gap:12px; color:var(--ink-2)} .vt-ask .btn{min-height:0; padding:5px 12px; font-size:12.5px}
@media (prefers-reduced-motion:reduce){.vtick-track{animation:none}}
#findSec .sec-head{margin-bottom:6px; flex-wrap:nowrap; align-items:baseline}
#findSec .note{font-size:15px; color:var(--ink-2); text-align:right} #findSec .note b{color:var(--sear); font-size:17px}
@media (max-width:640px){#findSec .sec-head{flex-wrap:wrap} #findSec .note{text-align:left; margin-left:0}}
.find{display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
.find-row{display:flex; gap:8px; align-items:stretch}
.find-box{position:relative; flex:1}
.find-box .btn{position:absolute; right:5px; top:5px; bottom:5px; min-height:0; padding:0 16px; white-space:nowrap; border-radius:9px}
.find-drop{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; list-style:none; margin:0; padding:6px; background:var(--surface); border:1px solid var(--sear); border-radius:12px; box-shadow:var(--shadow); display:grid; gap:2px; max-height:320px; overflow:auto}
.find-drop li a{display:grid; grid-template-columns:36px 1fr auto; gap:10px; align-items:center; padding:8px 10px; border-radius:8px; color:inherit; text-decoration:none}
.find-drop li a:hover, .find-drop li a:focus-visible{background:var(--surface-2); outline:none}
.find-drop .fl-logo{width:36px; height:36px; border-radius:50%; overflow:hidden; background:var(--surface-2); border:1px solid var(--line-2); display:grid; place-items:center}
.find-drop .fl-logo img, .find-drop .fl-logo svg{width:100%; height:100%; object-fit:cover} .find-drop .fl-logo svg{padding:7px}
.find-drop .fl-name{font-weight:700; font-size:14px} .find-drop .fl-sub{font-size:12px; color:var(--ink-2)}
.find-drop .none{color:var(--ink-3); font-size:13px; padding:8px 10px}
.find-sort{font-size:13.5px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:8px; align-items:center} /* wraps: at 320 px Use my location goes under the sort */
.find-sort select{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:6px 10px}
.findlist li{display:flex; gap:0; align-items:stretch; border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden; flex-wrap:wrap}
.findlist li:hover{border-color:var(--sear)}
.findlist li a{flex:1; min-width:0}
.findlist li .btn.sc-follow{width:88px; min-height:0; align-self:stretch; font-size:12.5px; line-height:1.15; padding:0 6px; margin:0; border-radius:0; border:0; border-left:1px solid var(--line); flex:none; white-space:normal; text-align:center; overflow-wrap:normal} /* the words fit on two lines, never cut (batch J 6) */
.findlist .fl-tag{display:block; margin-top:1px; overflow:hidden; text-overflow:ellipsis}
.findlist li.feat{border-color:color-mix(in srgb,var(--sear) 60%,var(--line))}
/* The grid page: every chef as one square, all the same size: the logo, the name, the category and area, the state. */
.findgrid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); grid-auto-rows:1fr; gap:10px}
.findgrid a{display:grid; grid-template-rows:auto auto 1fr auto; justify-items:center; gap:6px; height:100%; padding:14px 8px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); color:inherit; text-decoration:none}
.findgrid a:hover{border-color:var(--sear)}
.findgrid .ft-logo{width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--surface-2); display:grid; place-items:center; border:2px solid var(--line)}
.findgrid .ft-logo img, .findgrid .ft-logo svg{width:100%; height:100%; object-fit:cover} .findgrid .ft-logo svg{padding:14px}
.findgrid .ft-name{font-weight:700; font-size:14px; line-height:1.2} .findgrid .ft-sub{font-size:12px; color:var(--ink-3); align-self:start}
.findgrid .fl-tag{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.findgrid .fl-tag.paid{color:var(--sear)} .findgrid .fl-tag.open{color:var(--go)} .findgrid .fl-tag.soon{color:var(--wait)} .findgrid .fl-tag.none{color:var(--ink-3)}
.findgrid .none{color:var(--ink-3); font-size:13.5px; padding:8px 2px; grid-column:1 / -1}
.find input[type=search]{width:100%; padding:12px 104px 12px 14px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-size:16px}
.find input[type=search]:focus{outline:2px solid var(--sear); border-color:var(--sear)}
.find-box:has(> #findGo.hide) input[type=search]{padding-right:14px}
.chips{display:flex; gap:5px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chips button{padding:5px 10px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; flex:none}
.chips button[aria-pressed="true"]{background:var(--sear); color:var(--sear-ink); border-color:var(--sear)}
/* A desk: the chips spread to the search bar's full length (the founder, 2026-09-21); a phone keeps the sliding line. */
@media (min-width:700px){.chips button{flex:1 1 auto; text-align:center}} /* the row still slides wherever it does not fit */
.findlist{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start} /* the Tabs start at the left and fill the row to the right (the founder, 2026-09-21) */
/* The finder keeps its space from the first paint (Decision 048: no layout shift): one row of chips, the three Tabs (one, two or
   three to a row by width) and the Sign in button, measured 2026-09-23 at 375, 800 and 1200 px. */
.chips{min-height:33px}
html[data-boot="front"] #findList:empty{min-height:208px}
@media (min-width:724px){html[data-boot="front"] #findList:empty{min-height:136px}}
@media (min-width:1080px){html[data-boot="front"] #findList:empty{min-height:64px}}
#acctSlot{min-width:66px; min-height:36px; justify-content:flex-end} /* the Sign in button's box before it is drawn: on a phone it sets the height of the header's first row */
/* A Tab is one fixed size on every screen (the founder's notes, 2026-09-20): 64 px tall, the picture 64 wide, Follow 88 wide, the
   words on one line each and cut with an ellipsis when long. Only the words change, never the box. */
.findlist li{height:64px; flex:1 1 340px; min-width:min(340px, 100%); max-width:100%; flex-wrap:nowrap; box-sizing:border-box} /* 340 wide at least; the Tabs on a row share its full width, the height and the pieces never change */
@media (min-width:724px){.findlist li{max-width:calc((100% - 8px) / 2)}} @media (min-width:1080px){.findlist li{max-width:calc((100% - 16px) / 3)}} /* a last Tab alone on its row keeps its share, it does not stretch across */
.findlist li a{display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; align-items:center; padding:0 10px 0 0; height:64px; color:inherit; text-decoration:none}
.findlist li a > span{min-width:0; display:grid; gap:1px}
.findlist li a > span > br{display:none}
.findlist .fl-name, .findlist .fl-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; line-height:1.25}
.findlist .fl-logo{align-self:stretch; margin:0; width:64px; height:64px; overflow:hidden; background:var(--surface-2); border-right:1px solid var(--line); display:grid; place-items:center}
.findlist .fl-logo img,.findlist .fl-logo svg{width:100%; height:100%; display:block; object-fit:cover}
.findlist .fl-logo svg{padding:13px}
.findlist .fl-name{font-weight:700; font-size:14px} .findlist .fl-sub{font-size:12px; color:var(--ink-2)}
.findlist .fl-tag{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.findlist .fl-tag.paid{color:var(--sear)} .findlist .fl-tag.open{color:var(--go)} .findlist .fl-tag.soon{color:var(--wait)} .findlist .fl-tag.none{color:var(--ink-3)}
.findlist .none{color:var(--ink-3); font-size:13.5px; padding:8px 2px}
/* The invite cards: the same shape as a vendor card, the photo is a bold "your business here" plate and the button is a mail link. */
.sc-invite{border-style:dashed; border-color:var(--line-2)}
.sc-invite .sc-ph text{font-size:46px; letter-spacing:-.01em}
.sc-invite .sc-item{background:var(--sear); border-color:var(--surface)}
.sc-invite .sc-item svg{width:100%; height:100%; display:block}
.sc-invite .sc-name{color:var(--ink)}
/* The dialogs: the request form and the flow sheet. One shell; the sheet slides up on a phone. */
dialog.dlg{border:0; padding:0; background:transparent; color:inherit; width:min(560px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); margin:auto}
dialog.dlg::backdrop{background:rgb(0 0 0 / .62); backdrop-filter:blur(3px)}
dialog.dlg:not([open]){display:none}
/* Every dialog has a close button pinned to its top right, so a long sheet never hides the way out below the fold. */
.dlg-x{position:sticky; top:2px; z-index:5; display:block; width:36px; height:36px; margin:0 0 -36px auto; justify-self:end; border-radius:50%; border:1px solid var(--bad); background:var(--bad); color:#fff; font-size:22px; line-height:1; padding:0 0 3px; display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow)}
.dlg-x:hover{filter:brightness(1.12)} /* a red circle, a white x: the one way to close a box (the founder, 2026-09-24) */
.flowbox > .dlg-x{margin-right:4px}
.dlgbox{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px; max-height:calc(100dvh - 24px); overflow:auto}
.dlgbox h3{font-size:18px; font-family:"Archivo Black",Arial,sans-serif}
.dlgbox .lede{color:var(--ink-2); font-size:13.5px; margin:6px 0 12px}
.dlgbox form{display:grid; gap:10px}
.field textarea{font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%; min-height:70px; resize:vertical}
.field textarea:focus-visible{outline:2px solid var(--sear); outline-offset:1px; border-color:transparent}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.dlgrow{display:flex; gap:8px; justify-content:flex-end; margin-top:4px}
/* The waiting list screen (Decision 034): the vendor's logo and name up top, three rules under it, Leave the waiting list beside Got it. */
.fw-head{display:flex; gap:14px; align-items:center; margin-bottom:14px}
.fw-logo{width:64px; height:64px; border-radius:16px; overflow:hidden; flex:none; background:var(--surface-2); border:1px solid var(--line-2); display:grid; place-items:center}
.fw-logo img{width:100%; height:100%; object-fit:cover; display:block}
.fw-av{width:44px; height:44px; font-size:16px; box-shadow:none}
.fw-titles{display:grid; gap:4px; justify-items:start} .fw-titles h3{margin:0} .fw-tag{margin:0; color:var(--ink-2); font-size:13px}
.fw-rules{border:1px solid var(--line); border-radius:12px; background:var(--surface-2); margin-bottom:10px}
.fw-rules .rule .v{display:flex; flex-wrap:wrap; align-items:center; gap:4px}
.fw-rules .fw-warn{color:var(--bad)}
.fw-row{flex-wrap:wrap} .fw-row .sp{flex:1}
/* The Orders dialog: one block per drop, one row per order with its QR while it is live. */
.orders{display:grid; gap:12px}
.orders .drop{border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.orders .dh{padding:10px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.orders .dh b{font-family:"Archivo Black",Arial,sans-serif; font-size:14px}
.orders .dh .when{font-family:"DM Mono",monospace; font-size:12px; color:var(--ink-2)}
.orders .dh a{margin-left:auto; font-size:12.5px}
.orders .o{display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:10px 12px; border-bottom:1px solid var(--line); align-items:center; font-size:13.5px}
.orders .o:last-child{border-bottom:0}
.orders .o .code{font-family:"DM Mono",monospace; font-weight:500}
.orders .o .it{color:var(--ink-2); font-size:12.5px; grid-column:1}
.orders .o .qrbox{grid-column:1 / -1; display:grid; justify-items:center; gap:4px; padding:6px 0}
.orders .o .qrbox svg{width:120px; height:120px}
/* Report a problem (Decision 043): the line under an order, and its sheet. */
.problem{display:grid; gap:4px; font-size:12.5px; color:var(--ink-2); padding:4px 0}
.orders .o .problem{grid-column:1 / -1}
.problem .pk{font-weight:600; color:var(--ink)}
.problem .row{display:flex; gap:6px; flex-wrap:wrap}
.pbkinds{display:grid; gap:8px; margin:4px 0 6px}
.pbkind{display:flex; gap:8px; align-items:center; font-size:14px; cursor:pointer}
dialog.flow{width:min(760px, calc(100vw - 24px))}
.flowbox{display:grid; gap:10px; max-height:calc(100dvh - 24px); overflow:auto; padding:4px 4px 8px}
/* the founder's notes, 2026-09-20: on a phone the sheet ran past the bottom of the window; the button that closes it stays in view */
.flowclose{position:sticky; bottom:0; background:var(--surface); box-shadow:0 -8px 12px -8px rgba(0,0,0,.6)}
.flowbox .sec{margin:0}
#howBody .sec{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)}
#howBody .sec-head{margin-bottom:12px}
.flowclose{justify-self:center}
@media (max-width:700px){dialog.dlg{width:100vw; max-width:100vw; margin:auto 0 0; max-height:94dvh} .dlgbox{border-radius:var(--r) var(--r) 0 0; max-height:94dvh; padding:14px 12px 16px} .flowbox{max-height:94dvh; padding:8px 8px 10px}}
/* The pill that brings the sheet back when the customer closed it while their hold is live. */
.flowpill{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:60; background:var(--gold); color:var(--gold-ink); border-color:var(--gold); box-shadow:var(--shadow); font-family:"DM Mono",monospace; font-weight:600; font-size:14px; min-height:44px; padding:0 18px}
@media (prefers-reduced-motion:reduce){.sc-view[data-mode="marquee"] .sc-track{animation:none}}
/* The dots under the phone row: one per card, the one in view filled. Each is a 44 px tap target when there is room and shrinks
   evenly to 24 px on a long row. The row keeps its 44 px on a phone from the first paint, empty until the vendors land and empty
   when a single card fits, so nothing below the showcase moves when the dots appear; a desktop never shows it. The idle dot is a
   ring in --ink-3 (5.8:1 on the card in the light theme since #63675A, 4.7:1 in the dark one, over the 3:1 WCAG 1.4.11 asks of a control's edge),
   the same ring as Web/launch/index.html; the one in view is filled with the sear. */
.sc-dots{display:flex; justify-content:center; flex-wrap:wrap; max-width:100%; padding:0 var(--sc-pad)}
.sc-dot{flex:0 1 44px; min-width:24px; height:44px; display:grid; place-items:center; padding:0; border-radius:999px}
.sc-dot::before{content:""; box-sizing:border-box; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--ink-3); transition:transform .15s ease, background .15s ease, border-color .15s ease}
.sc-dot[aria-current="true"]::before{background:var(--sear); border-color:var(--sear); transform:scale(1.35)}
@media (min-width:700px) and (hover:hover){.sc-dots{display:none !important}}
/* The phone card (under 700 px, or no hover): one line each for the name, the tagline and the area, nothing under 13 px, the button
   48 px tall and the card's width. scroll-snap-stop keeps a fast swipe to one card at a time. The sign in fields and buttons meet the
   44 px tap rule here too, as on Web/launch/index.html. */
@media (max-width:699px), (hover:none){
  .sc-copy{padding-right:0}
  .sc-dots{min-height:44px}
  .sc-head .eyebrow, .sc-rib{font-size:13px; letter-spacing:.08em}
  .sc-card{scroll-snap-align:center; scroll-snap-stop:always}
  .sc-name{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:none; font-size:17px}
  .sc-tag, .sc-sub{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sc-meta{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:none; font-size:13px; letter-spacing:.06em}
  .sc-meta .sc-cnt{display:none} /* the area whole, the count only when there is no area */
  .sc-meta .sc-area:empty + .sc-cnt{display:inline}
  .sc-next{font-size:14px}
  .sc-body{padding:26px 14px 8px}
  .sc-act{padding:8px 14px 14px}
  .sc-card .sc-follow{min-height:48px; padding:0 12px; font-size:14px} /* .sc-card first: .btn.sm sets 13 px and outranks a lone class */
  .sc-head .tiny{font-size:13px}
  .field input{min-height:44px}
  #signupBtn, #verifyBtn{min-height:48px}
  .consent{min-height:44px; align-items:center} /* the checkbox row is one 44 px tap target; the label already toggles the box */
  .consent input{margin-top:0}
}

/* hero */
.hero{padding:24px 0 20px; border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(30px,6.6vw,50px); line-height:.98; margin:9px 0 12px}
/* The two pitches in the board's place when no drop is posted (Decision 013): vendors and the hungry, equal boxes across the
   whole width from the row's left edge to its right, everything centered. One under the other on a phone. */
.nodrop .cols{grid-template-columns:minmax(0,1fr)}
.pitches{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:860px){.pitches{grid-template-columns:1fr 1fr}}
.pitch{padding:30px 24px 26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); display:grid; gap:12px; justify-items:center; text-align:center; align-content:start}
.pitch h2{font-size:clamp(34px,5vw,48px); line-height:1; margin:0; color:var(--sear)}
.pitch .lead{font-family:"Archivo Black",Arial,sans-serif; font-size:clamp(19px,2.2vw,24px); line-height:1.15; margin:2px 0 0}
.pitch .sub{color:var(--ink-2); max-width:52ch; margin:0}
.steps3{margin:6px 0 0; padding:0; list-style:none; display:grid; gap:8px; width:100%; max-width:440px; counter-reset:p; text-align:left}
.steps3 li{display:grid; grid-template-columns:30px 1fr; gap:2px 10px; align-items:center; padding:10px 12px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r)}
.steps3 li::before{counter-increment:p; content:counter(p); grid-row:1 / span 2; font-family:"Archivo Black",Arial,sans-serif; font-size:20px; color:var(--sear); text-align:center}
.steps3 b{font-size:15px; color:var(--ink)}
.steps3 span{font-size:13px; color:var(--ink-2); grid-column:2}
.pitch em.slot{font-style:normal; color:var(--sear); font-weight:700}
.pitch .lead em.slot{font-family:"Archivo Black",Arial,sans-serif; font-weight:400}
.pitch-btn{font-size:16px; padding:13px 28px; margin-top:6px; min-width:240px}
.hero .sub{color:var(--ink-2); max-width:60ch}
.facts{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:18px}
.fact .k{font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.fact .v{font-size:15px; font-weight:600; margin-top:2px}

.cols{display:grid; grid-template-columns:minmax(0,1fr); gap:26px; padding:24px 0 50px; align-items:start} /* minmax(0,…) so the run sheet's min-width scrolls inside .scroller instead of widening main past a phone */
@media (min-width:1024px){.cols{grid-template-columns:minmax(0,1fr) 330px; gap:34px}}
.sec{margin-bottom:30px}
.sec-head{display:flex; align-items:baseline; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.sec-head h2{font-size:20px; font-family:"Archivo Black",Arial,sans-serif; letter-spacing:-.01em}
.sec-head .note{font-size:13px; color:var(--ink-3); margin-left:auto}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.pad{padding:16px}

/* board */
.boardbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:11px}
.legend{display:flex; gap:13px; flex-wrap:wrap; margin-left:auto}
.lg{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-2)}
.sw{width:11px; height:11px; border-radius:3px; border:1px solid var(--line-2); flex:none}
.sw.open{background:var(--surface); border-color:var(--sear)}
.sw.held{background:color-mix(in srgb,var(--sear) 10%,transparent); border-color:var(--sear); border-width:2px}
.sw.pend{background:var(--sear); border-color:var(--sear)}
.sw.sold{background:var(--go); border-color:var(--go)}
.sw.mine{background:var(--gold); border-color:var(--gold)}
.boardstate{font-family:"DM Mono",monospace; font-size:11.5px; color:var(--ink-2); margin:-4px 0 10px} /* the same state in words, for a phone with no motion (Decision 033) */
.boardstate b{color:var(--ink); font-weight:500}
.gauge{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.gbar{flex:1; min-width:180px; height:8px; border-radius:999px; background:var(--gone-tint); overflow:hidden; display:flex}
.gbar i{height:100%; display:block; transition:width .25s ease}
.gbar i.sold{background:var(--go)}
.gbar i.held{background:var(--wait)}

.windows{display:grid; gap:11px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.win{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 13px 12px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s ease, box-shadow .15s ease}
.win.mine{border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold)}
.win.full{background:var(--surface-2)}
.win .wh{display:flex; align-items:baseline; gap:8px}
.win .wt{font-family:"Archivo Black",Arial,sans-serif; font-size:18px; line-height:1.05; letter-spacing:-.01em}
.win .wt span{font-size:10px; font-family:"Archivo",sans-serif; font-weight:600; color:var(--ink-3); margin-left:3px}
.win .wc{margin-left:auto; font-family:"DM Mono",monospace; font-size:11.5px; color:var(--ink-2); white-space:nowrap}
.win.full .wc{color:var(--gone)}
.seats{display:grid; grid-template-columns:repeat(10,1fr); gap:3px}
/* A square shows the step the order is on (Decision 033): open is empty with a thin orange edge, held is an orange outline
   (the 30 seconds to say yes and the 5 minutes to build), paying is solid orange, paid is solid green, yours is gold. The
   feedback (the pop, the ripple, the pulse) is decoration: the colour is the state, and it changes with motion turned off too. */
.seat{position:relative; aspect-ratio:1; border-radius:2.5px; border:1px solid color-mix(in srgb,var(--sear) 55%,var(--line)); background:var(--surface); transition:background .2s ease, border-color .2s ease, transform .18s ease}
.seat.held{background:color-mix(in srgb,var(--sear) 10%,transparent); border-color:var(--sear); border-width:2px; animation:seat-pop .28s ease-out}
.seat.pend{background:var(--sear); border-color:var(--sear); border-width:1px}
.seat.sold{background:var(--go); border-color:var(--go)}
.seat.sold.just::after{content:""; position:absolute; inset:0; border-radius:3px; border:2px solid var(--go); animation:seat-ripple .6s ease-out forwards; pointer-events:none}
@keyframes seat-pop{0%{transform:scale(1)} 45%{transform:scale(1.35)} 100%{transform:scale(1)}}
@keyframes seat-ripple{0%{inset:0; opacity:.9} 100%{inset:-7px; opacity:0}}
/* Your own squares: gold, and a slow pulse so they are found at a glance. Paid ones keep the gold ring on green; a picked up
   one keeps a gold ring that pulses, so a finished order is still yours on the board. */
.seat.mine{background:var(--gold); border-color:var(--gold); animation:mine-pulse 1.8s ease-in-out infinite}
.seat.mine.sold{background:var(--go); border-color:var(--go); box-shadow:0 0 0 2px var(--gold); animation:none}
.seat.mine.sold.done{animation:mine-pulse 2.4s ease-in-out infinite}
@keyframes mine-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 75%,transparent)} 50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 0%,transparent)}}
/* The last square: one wave across the grid, left to right, then SOLD OUT. */
.seats.wave .seat{animation:seat-wave .5s ease-out both; animation-delay:calc(var(--i, 0) * 7ms)}
@keyframes seat-wave{0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.seat.mine, .seat.mine.sold.done, .seats.wave .seat{animation:none} .seat.mine{box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 45%,transparent)} .seat.mine.sold.done{box-shadow:0 0 0 3px var(--gold)} .seat.held{animation:none} .seat.sold.just::after{display:none}}
.seat.locked{background:transparent; border-style:dashed; border-color:var(--line-2)}
.seat.closed{background:transparent; border-style:dashed; border-color:var(--gone); opacity:.55} /* taken off the board by the vendor */
.win.locked{background:var(--surface-2); border-style:dashed}
.win.locked .wt{color:var(--ink-3)}
.win.locked .wc{color:var(--wait)}
.win.locked .qty{visibility:hidden}
.rel{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding:10px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); font-size:13px}
.rel .k{font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.rel .cd{font-family:"DM Mono",monospace; font-weight:500; color:var(--wait); margin-left:auto; font-variant-numeric:tabular-nums}
.rel .track{display:flex; gap:3px; width:100%}
.rel .track i{flex:1; height:5px; border-radius:999px; background:var(--gone-tint)}
.rel .track i.on{background:var(--go)}
.rel .track i.next{background:var(--wait)}
.win .wf{display:flex; align-items:center; gap:8px; margin-top:auto}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:8px; background:var(--surface-2); flex:none}
.qty button{width:28px; height:32px; display:grid; place-items:center; font-size:15px; color:var(--ink-2)}
.qty button:hover{color:var(--sear)}
.qty button:disabled{opacity:.35; cursor:default}
.qty .n{width:18px; text-align:center; font-family:"DM Mono",monospace; font-size:13px}
.win .claim{flex:1; padding:8px 10px; font-size:13px}
.brk{grid-column:1 / -1; display:flex; align-items:center; gap:12px; color:var(--ink-3); font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:2px 0}
.brk::before,.brk::after{content:""; flex:1; height:1px; background:var(--line-2)}

/* sign in */
.auth{padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.tryit{display:grid; gap:8px; justify-items:center; text-align:center; padding:10px 12px 12px; margin:-6px -6px 14px; border:1px dashed color-mix(in srgb,var(--sear) 45%,var(--line)); border-radius:var(--r); background:var(--surface-2)}
.tryit b{color:var(--sear)} .tryrow{display:flex; gap:8px; flex-wrap:wrap; justify-content:center} .tryrow .btn{min-width:130px; text-decoration:none}
.auth h3{font-size:17px; font-weight:700; margin-bottom:4px}
.auth .lede{color:var(--ink-2); font-size:13.5px; margin-bottom:14px}
.otp{display:flex; gap:8px; align-items:end; flex-wrap:wrap; margin-top:12px; padding:12px; border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface-2)}
.otp .field{flex:1; min-width:150px}
.otp input{letter-spacing:.3em; font-family:"DM Mono",monospace; font-size:18px; text-align:center}
.heldline{display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:12.5px; color:var(--ink-2)}
.heldline .sw{margin:0}
.heldline .cd{font-family:"DM Mono",monospace; color:var(--wait); font-weight:500}
.seat.held{cursor:help}
.win .wh2{font-family:"DM Mono",monospace; font-size:10.5px; color:var(--wait); margin-top:-4px}
.win .wh2:empty{display:none}
.win .wo{font-family:"DM Mono",monospace; font-size:10.5px; color:var(--ink-2); margin-top:-4px; text-align:right}
.win .wo:empty{display:none}
.pre .seat{border-style:dashed; border-color:var(--line-2); background:transparent}
/* how it works: the self playing demo under the board, four steps on a loop; a tap on a step replays from that step (Decision 012) */
.howtabs{display:flex; gap:6px; justify-content:center; margin:0 auto 14px; max-width:760px}
.htab{padding:7px 16px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer}
.htab.on{background:var(--sear); color:var(--sear-ink); border-color:var(--sear)}
.htab:focus-visible{outline:2px solid var(--sear); outline-offset:2px}
.stage .frow{display:flex; gap:8px} .stage .fld.sm{flex:1; font-size:13px; min-height:34px; padding:7px 10px}
.stage .seats.big{grid-template-columns:repeat(10,1fr); gap:3px}
.how{display:grid; grid-template-columns:minmax(0,420px) 300px; gap:22px; align-items:start; justify-content:center; max-width:760px; margin:0 auto} /* the steps and the stage sit together in the middle, never stretched across the page */
#howSec > .sec-head{max-width:760px; margin-left:auto; margin-right:auto}
.how .hsteps{display:grid; gap:8px}
.how .hstep{display:flex; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink-2); transition:border-color .25s ease, background .25s ease; width:100%; text-align:left; font:inherit; line-height:inherit; cursor:pointer}
.how .hstep:hover{border-color:var(--line-2)} .how .hstep:focus-visible{outline:2px solid var(--sear); outline-offset:2px}
.how .hstep b{font-family:"Archivo Black",Arial,sans-serif; color:var(--ink-3); width:22px; flex:none; font-size:18px; line-height:1.1}
.how .hstep .t{font-weight:700; color:var(--ink)} .how .hstep .d{font-size:13px; margin-top:2px}
.how .hstep.on{border-color:var(--sear); background:var(--sear-tint)} .how .hstep.on b{color:var(--sear)}
.stage{position:relative; height:420px; border:1px solid var(--line-2); border-radius:22px; background:var(--ground); padding:16px; overflow:hidden; pointer-events:none; user-select:none; box-shadow:var(--shadow)}
.stage .hf{position:absolute; inset:16px; opacity:0; transition:opacity .35s ease; display:flex; flex-direction:column; gap:10px}
.stage .hf.on{opacity:1}
.stage h4{font-size:14px; font-weight:700; line-height:1.3} .stage h4 b{font-family:"Archivo Black",Arial,sans-serif; color:var(--sear); margin-right:7px} .stage .hint{font-size:12.5px; color:var(--ink-2); min-height:18px}
.stage .fld{border:1px solid var(--line-2); border-radius:8px; background:var(--surface); padding:9px 11px; font-family:"DM Mono",monospace; font-size:15px; min-height:39px; transition:border-color .2s ease}
.stage .fld.on{border-color:var(--sear)}
.stage .hchk{display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--ink-2)}
.stage .hchk i{width:15px; height:15px; margin-top:1px; border:1px solid var(--line-2); border-radius:4px; background:var(--surface); flex:none; display:inline-grid; place-items:center; font-size:11px; line-height:1; color:var(--sear-ink); font-style:normal; transition:background .2s ease}
.stage .hchk i.on{background:var(--sear); border-color:var(--sear)}
.stage .btn{position:relative} .stage .btn.tap::after,.stage .seat.tap::after{content:""; position:absolute; inset:-6px; border-radius:14px; border:2px solid var(--sear); animation:tap .6s ease-out forwards}
.stage .seat.tap::after{inset:-5px; border-radius:6px}
@keyframes tap{from{opacity:1; transform:scale(.9)}to{opacity:0; transform:scale(1.12)}}
.stage .code{display:flex; gap:6px} .stage .code i{flex:1; height:40px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); display:grid; place-items:center; font-family:"DM Mono",monospace; font-size:18px; font-style:normal}
.stage .ok{display:none; align-items:center; gap:8px; color:var(--go); font-weight:700; font-size:14px} .stage .ok.on{display:flex}
.stage .mini{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:11px}
.stage .mini .wt{font-weight:700; font-size:13.5px; display:flex; justify-content:space-between} .stage .mini .wt span{font-family:"DM Mono",monospace; font-size:11px; color:var(--ink-3); font-weight:400}
.stage .seats{margin-top:9px; grid-template-columns:repeat(5,1fr); gap:6px} .stage .seat{position:relative}
.pre .stage .seat{border-style:solid; border-color:color-mix(in srgb,var(--sear) 55%,var(--line)); background:var(--surface)}
/* the demo's squares read like the live board (Decision 033), on a page with no drop too */
.pre .stage .seat.held{background:color-mix(in srgb,var(--sear) 12%,transparent); border-color:var(--sear); border-width:2px}
.pre .stage .seat.pend{background:var(--sear); border-color:var(--sear)}
.pre .stage .seat.sold{background:var(--go); border-color:var(--go)}
.pre .stage .seat.mine{background:var(--gold); border-color:var(--gold)}
.stage .finger{position:absolute; width:22px; height:22px; border-radius:50%; background:var(--ink); opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.6); transition:opacity .2s ease, transform .2s ease}
.stage .finger.on{opacity:.55; transform:translate(-50%,-50%) scale(1)}
.stage #h2Seats{grid-template-columns:repeat(10,1fr); gap:3px} /* one row of ten, as the board draws a window */
.stage .hclaim{margin-top:9px; align-items:center} .stage .hqty{flex:0 0 auto; text-align:center; letter-spacing:.2em} .stage .hclaim .btn{flex:1; white-space:nowrap; font-size:12.5px}
.stage .hgot{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px}
.stage .rc{display:grid; gap:6px} .stage .rc .line{font-size:13px} .stage .rc .line.total{font-size:14px}
.stage .card4{display:flex; gap:8px; align-items:center; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); padding:8px 11px; font-family:"DM Mono",monospace; font-size:13px; min-height:37px; color:var(--ink-3); transition:border-color .2s ease}
.stage .card4.on{color:var(--ink); border-color:var(--sear)}
.stage .qr{width:128px; height:128px; margin:2px auto; display:grid; grid-template-columns:repeat(13,1fr); gap:1.5px; padding:8px; background:#fff; border-radius:8px; box-sizing:border-box}
.stage .qr i{background:#111; border-radius:1px} .stage .qr i.w{background:transparent}
.stage .big{font-family:"Archivo Black",Arial,sans-serif; font-size:22px; letter-spacing:.06em; text-align:center}
/* A phone: the stage first, then the four steps as a compact two column list (number and title only) so the whole thing is in view. */
@media (max-width:700px){.how{grid-template-columns:1fr} .stage{order:-1; margin:0 auto; width:min(300px,100%)} .how .hsteps{grid-template-columns:1fr 1fr; gap:6px} .how .hstep{padding:9px 10px; gap:8px; align-items:center} .how .hstep b{font-size:15px; width:14px} .how .hstep .t{font-size:13px} .how .hstep .d{display:none}}
@media (prefers-reduced-motion:reduce){.stage{height:auto; display:grid; gap:12px; pointer-events:none} .stage .hf{position:static; opacity:1; padding:12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2)} .stage .btn.tap::after,.stage .seat.tap::after{display:none} .how .hstep.on{border-color:var(--line); background:var(--surface)} .how .hstep.on b{color:var(--ink-3)} .how .hstep{cursor:default} .stage .finger{display:none}}

.toast .btn{margin-left:8px; pointer-events:auto}
.toast.on{pointer-events:auto}
.tag{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border-radius:4px; border:1px solid transparent}
.tag.combined{background:var(--gone-tint); color:var(--gone)}
.stepper{display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin-top:4px}
.stepper .st{display:grid; gap:4px; font-family:"DM Mono",monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); text-align:center}
.stepper .st i{display:block; height:5px; border-radius:999px; background:var(--gone-tint)}
.stepper .st.on i{background:var(--go)}
.stepper .st.on{color:var(--go)}
.stepper .st.cur{color:var(--ink); font-weight:500}
.stepper .st.cur i{background:var(--sear)}
.livebadge{display:inline-flex; align-items:center; gap:5px; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--go)}
.linky{color:var(--sear); text-decoration:underline; padding:0}

/* forms */
.field{display:grid; gap:5px}
.field label{font-family:"DM Mono",monospace; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.ig{position:relative} .ig > span{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-weight:600; pointer-events:none} .ig > input{padding-left:30px !important; width:100%; box-sizing:border-box}
.slot{color:var(--sear); font-weight:700}
.norefund{font-size:14px; font-weight:700; margin:12px 0 4px; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface-2)} .norefund span{font-weight:400; color:var(--ink-2)}
.linkish{background:none; border:0; padding:0; font:inherit; color:var(--sear); text-decoration:underline; cursor:pointer}
.phonerow{display:grid; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)} @media (min-width:560px){.phonerow{grid-template-columns:1fr auto; align-items:end}}
.field input{font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%}
.field input:focus-visible{outline:2px solid var(--sear); outline-offset:1px; border-color:transparent}
.field .hint{font-size:11.5px; color:var(--ink-3)}
.consent{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); line-height:1.4}
.consent input{width:16px; height:16px; margin:2px 0 0; flex:none; accent-color:var(--sear)}
.consent label{cursor:pointer}
.consent-note{display:block; margin:5px 0 12px 25px}
.disclose{font-size:12.5px;color:var(--ink-3);margin:0 0 12px} /* the campaign's call to action, as on Web/launch/index.html; the bottom margin keeps it off the next field */
.disclose a{color:var(--sear)}
.ro{font-size:13px; color:var(--ink-2); margin:-4px 0 12px}
.two{display:grid; gap:10px}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}}
.three{display:grid; gap:10px} @media (min-width:560px){.three{grid-template-columns:2fr 1fr 1fr}}
.seg{display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; background:var(--surface); flex-wrap:wrap}
.seg button{padding:6px 11px; font-size:12.5px; color:var(--ink-2); border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--sear); color:var(--sear-ink); font-weight:600}

 /* Decision 027: the vendor's head (the card grown wide, with Back), the FEATURED FOODSlot head, the top five cards in the finder,
   the empty grid that fills by itself. */
.vhead{margin:18px 0 6px; display:grid; gap:10px}
.vback{justify-self:start; background:var(--sear); color:var(--sear-ink); border-color:var(--sear); font-weight:700; min-height:40px; padding:0 16px}
.vback:hover{filter:brightness(1.08)}
.vhead-card{list-style:none; margin:0; padding:0}
.vhead-card .sc-card{width:100%; flex-direction:row; flex-wrap:wrap}
.vhead-card .sc-link{display:grid; grid-template-columns:minmax(0,1fr); flex:1 1 320px}
@media (min-width:700px){.vhead-card .sc-link{grid-template-columns:minmax(220px,38%) minmax(0,1fr); align-items:center}}
.vhead-card .sc-photo{aspect-ratio:16 / 9}
@media (min-width:700px){.vhead-card .sc-photo{aspect-ratio:4 / 3; width:100%; min-width:0}}
.vhead-card .sc-body{padding:16px 18px 10px; align-content:center}
.vhead-card .sc-name{font-size:30px; line-height:1.05}
.vhead-card .sc-act{flex:1 1 100%; padding:0 14px 14px}
@media (min-width:700px){.vhead-card .sc-act{flex:0 0 240px; align-self:center; padding:14px}}
.feat-head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:22px 0 -6px; padding-top:18px; border-top:1px solid var(--line)}
.feat-word{font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.2em; color:var(--gold); font-weight:700}
.feat-brand{font-family:"Archivo Black",Arial,sans-serif; font-size:22px; letter-spacing:-.01em} .feat-brand em{font-style:normal; color:var(--sear)}
.feat-sub{font-size:13px; color:var(--ink-3); margin-left:auto}
.emptygrid{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.seats.big{grid-template-columns:repeat(10,1fr); gap:5px}
@media (min-width:560px){.seats.big{grid-template-columns:repeat(20,1fr); gap:4px}}
/* The founder's notes, 2026-09-20: the grid is the show, so nothing sits over it while it fills; SOLD OUT lands at the end. The
   empty grid reads the way the live board does (Decision 033): open is empty with a thin orange edge, held an orange outline,
   paying solid orange, paid solid green. */
.emptyover{position:absolute; inset:0; display:none; place-content:center; text-align:center; gap:4px; background:color-mix(in srgb,var(--ground) 35%,transparent); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); border-radius:var(--r); pointer-events:none}
/* the line under the board, a pill that breathes (the founder's ask, 2026-09-21) */
.emptypill{margin:12px auto 0; width:max-content; max-width:100%; padding:10px 18px; border-radius:999px; background:var(--sear-tint); color:var(--sear); border:1px solid color-mix(in srgb,var(--sear) 45%,transparent); font-size:15px; font-weight:600; text-align:center; animation:pill-breathe 2.4s ease-in-out infinite}
.emptypill.sold{background:var(--go-tint); color:var(--go); border-color:color-mix(in srgb,var(--go) 45%,transparent)}
@keyframes pill-breathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sear) 35%,transparent); opacity:.85}50%{box-shadow:0 0 0 8px transparent; opacity:1}}
@media (prefers-reduced-motion:reduce){.emptypill{animation:none}}
.emptyover.sold{display:grid}
/* the pretend board reads exactly like a live one (Decision 033): held is the orange outline, paying solid orange, paid green.
   The overrides are here because the page's .pre rule (no drop on the page) would dash and blank every square. */
#emptySeats .seat{border-style:solid; border-color:color-mix(in srgb,var(--sear) 55%,var(--line)); background:var(--surface)}
#emptySeats .seat.held{background:color-mix(in srgb,var(--sear) 12%,transparent); border-color:var(--sear); border-width:2px; border-style:solid} #emptySeats .seat.pend{background:var(--sear); border-color:var(--sear); border-style:solid} #emptySeats .seat.sold{background:var(--go); border-color:var(--go); border-style:solid}
.emptyover b{font-family:"Archivo Black",Arial,sans-serif; font-size:clamp(22px,6vw,40px); letter-spacing:-.01em}
.emptyover.sold b{color:var(--sear); font-size:clamp(34px,9vw,64px); letter-spacing:.02em}
.emptyover span{font-size:14px; color:var(--ink-2)}
.emptyover.sold span{display:none}

.mains{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 2px} .mains .btn{width:auto; min-height:0; padding:8px 12px; font-size:13px}
.kindh{margin-top:6px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:11px}
/* hold panel */
.pay{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--shadow)}
.pay .strip{height:3px; background:var(--wait)}
.pay.ok .strip{background:var(--go)}
.pay.dead .strip{background:var(--gone)}
.pay .body{padding:16px}
.paylogo{width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--line); flex:none}
/* The offer: the vendor first and big (logo, name, squares and time), then Yes, the clock and Cancel, each at its own width and
   centered. The title row, the amount box and the log wait for the next step. */
.pay .titlerow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.offerbox{display:grid; justify-items:center; gap:6px; text-align:center; padding:4px 0 6px}
.offerbox img{width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid var(--line); box-shadow:var(--shadow)}
.offerbox .display{font-size:26px; line-height:1.05}
.offerline{font-family:"DM Mono",monospace; font-size:18px; font-weight:500; color:var(--ink)}
.pay.offer .titlerow, .pay.offer #payLede, .pay.offer .sendbox .amt, .pay.offer .sendbox .to, .pay.offer #payLog, .pay.offer #payItems{display:none}
.pay.offer .paygrid{grid-template-columns:1fr; justify-items:center; gap:10px; margin-top:10px}
.pay.offer .sendbox{background:transparent; border:0; padding:0}
.pay.offer .copyrow{margin:0; justify-content:center}
.pay.offer #payMain{font-size:17px; padding:13px 34px; min-width:220px}
.pay.offer .clock{width:min(260px,100%); padding:10px}
.pay.offer #payActions{display:flex; justify-content:center; margin-top:8px}
.pay.offer #payActions .btn{font-size:15px; padding:11px 34px; min-width:220px}
.btn.danger{background:var(--bad); color:#fff; border-color:var(--bad)}
.btn.danger.block{font-size:15px; padding:13px 15px}
/* Building and confirmed: the total and the one button first and big, the order in a clear block, the log under its own title,
   Cancel 220 px and centered. */
.pay.build .sendbox .amt{font-size:38px}
.pay.build #payMain{font-size:17px; padding:13px 30px; min-width:240px}
.pay.build .sendbox.order{font-size:15px; padding:14px}
.pay.build .sendbox.order .to{font-size:15px; margin-top:0; margin-bottom:8px}
.pay.build .sendbox.order .line{font-size:15px; padding:4px 0}
.pay.build #payLog:not(:empty)::before{content:"Log"; display:block; font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin:0; padding:12px 0 6px; position:sticky; top:0; background:var(--surface); box-shadow:0 7px 0 var(--surface)}
.pay.build #payLog{padding-top:0}
/* The log is a box of a set height that scrolls; the newest line is at the bottom and the view sits there (testing notes, 2026-09-19). */
#payLog{max-height:150px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin}
/* Paying: the amount and the order line, then the card form, then the one Pay button under it, full width; the clock keeps its own
   height beside them instead of stretching to the form (testing notes, 2026-09-19). */
.paygrid{align-items:start}
.pay.paying .sendbox{display:grid; gap:12px}
.pay.paying .sendbox .to{margin-top:-6px}
.pay.paying #payElement{margin-top:0}
.pay.paying .copyrow{order:3; margin:0}
.pay.paying #payMain{width:100%; font-size:18px; padding:14px 20px}
.pay.paying .clock{position:sticky; top:12px}
.pay.build #payActions{display:flex; justify-content:center}
.pay.build #payActions .btn{min-width:220px; padding:11px 34px; font-size:15px}
.clock .cap2{font-size:11px; color:var(--ink-3); text-align:center; margin-top:-2px}
.pay h3{font-size:18px; font-family:"Archivo Black",Arial,sans-serif}
.paygrid{display:grid; gap:14px; margin-top:14px}
@media (min-width:640px){.paygrid{grid-template-columns:1fr 194px}}
.sendbox{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:13px}
.sendbox .amt{font-family:"Archivo Black",Arial,sans-serif; font-size:30px; line-height:1}
.sendbox .to{margin-top:7px; font-size:13px; color:var(--ink-2)}
.sendbox .handle{font-family:"DM Mono",monospace; font-weight:500; color:var(--ink); font-size:13.5px}
.copyrow{display:flex; gap:7px; margin-top:11px; flex-wrap:wrap}
.clock{display:grid; place-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.clock .num{font-family:"DM Mono",monospace; font-size:32px; font-weight:500; line-height:1; letter-spacing:-.02em}
.clock .cap{font-size:10.5px; color:var(--ink-3); text-align:center; font-family:"DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase}
.checks{display:flex; gap:6px; width:100%}
.chk{flex:1; height:5px; border-radius:999px; background:var(--gone-tint); overflow:hidden}
.chk i{display:block; height:100%; width:0; background:var(--wait)}
.chk.done i{width:100% !important; background:var(--gone)}
.chk.hit i{width:100% !important; background:var(--go)}
.log{margin-top:14px; border-top:1px solid var(--line); padding-top:12px; display:grid; gap:7px}
.logline{display:flex; gap:10px; font-size:12.5px; align-items:baseline}
.logline .ts{font-family:"DM Mono",monospace; font-size:11px; color:var(--ink-3); flex:none; width:80px; white-space:nowrap}
.logline .tx{color:var(--ink-2)}
.logline.good .tx{color:var(--go); font-weight:600}
.logline.bad .tx{color:var(--gone); font-weight:600}

/* ticket */
.ticket{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.ticket .hd{padding:12px 14px; border-bottom:1px dashed var(--line-2); display:flex; align-items:center; gap:8px}
.ticket .hd .code{font-family:"DM Mono",monospace; font-size:12.5px; color:var(--ink-3); margin-left:auto}
.ticket .bd2{padding:13px 14px; display:grid; gap:8px}
.line{display:flex; gap:10px; font-size:13.5px}
.line .l{flex:1}
.line .r{font-family:"DM Mono",monospace; font-variant-numeric:tabular-nums}
.line.total{border-top:1px solid var(--line); padding-top:9px; margin-top:2px; font-weight:700; font-size:15px}
.ticket .ft{padding:0 14px 14px; display:grid; gap:8px}
.empty{padding:22px 14px; text-align:center; color:var(--ink-3); font-size:13px}

/* pickup rules */
.rules{display:grid; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.rule{display:flex; gap:12px; padding:12px 15px; border-bottom:1px solid var(--line); font-size:13.5px}
.rule:last-child{border-bottom:0}
.rule .k{font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--sear); flex:none; width:82px; padding-top:3px}
.rule .v{color:var(--ink-2)}
.rule .v strong{color:var(--ink); font-weight:600}


/* steps */

/* ads */
.ad{border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface-2); display:grid; place-items:center; gap:3px; color:var(--ink-3); text-align:center; padding:12px}
.ad .lbl{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase}
.ad .dim{font-family:"DM Mono",monospace; font-size:12px; color:var(--ink-2)}
.ad.leader{min-height:96px}
@media (max-width:620px){.ad.leader{min-height:66px}}
.ad.rect{min-height:250px}
.ad-native{display:flex; gap:12px; align-items:center; padding:12px 14px; border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface-2); margin-top:14px}
.ad-native .sq{width:46px; height:46px; border-radius:8px; background:var(--gone-tint); flex:none}
.ad-native .t{font-weight:600; font-size:14px}
.ad-native .d{font-size:12.5px; color:var(--ink-3)}

@media print{
  .top, .showcase, .hero, .foot, .toast, aside{display:none !important}
  .cols{display:block}
  .scroller{max-height:none; overflow:visible}
}

.foot .btn, #findNear{white-space:nowrap}
.foot{border-top:1px solid var(--line); padding:22px 0 40px; color:var(--ink-3); font-size:12.5px; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
/* A popover: it sits in the top layer, over any open dialog (the founder's notes, 2026-09-20: the Stripe error hid behind the sheet). */
.toast{position:fixed; inset:auto; left:50%; bottom:20px; margin:0; border:0; translate:-50% 0; background:var(--ink); color:var(--ground); padding:12px 18px; border-radius:999px; font-size:14px; font-weight:600; z-index:80; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s ease, translate .2s ease; max-width:calc(100vw - 36px); text-align:center}
.toast:popover-open{display:block}
.toast.on{opacity:1; translate:-50% -4px}