:root {
  color-scheme: light;
  --bg: #f3f5f6; --card: #fff; --ink: #12171c; --muted: #55606a; --line: #dce1e5; --soft: #e6eaed; --faint: #f8f9fa; --edge: #c9d0d6;
  --brand: #0cb8df; --brand-ink: #007a99; --accent: #0a7791; --fill: #19a9cc; --focus: #2563eb;
  --green: #2b8a3e; --green-soft: #e3f3e6; --amber: #e8a00c; --amber-ink: #8a5a00; --amber-soft: #fdf1d3; --red: #c92a2a; --red-soft: #fbe4e4; --none: #9a9893;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --bar: 52px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.quiet { color: var(--muted); }
.small { font-size: 13px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ───────── Header ───────── */
.bar { position: sticky; top: 0; z-index: 20; min-height: var(--bar); display: flex; align-items: center; gap: 0 20px; flex-wrap: wrap; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; }
.brand img { display: block; height: 32px; width: 32px; }
.tabs { display: flex; align-self: stretch; }
.tab { border: 0; border-bottom: 2px solid transparent; background: none; padding: 0 14px; min-height: var(--bar); font-weight: 500; font-size: 14px; cursor: pointer; color: var(--muted); }
.tab:hover { color: var(--ink); }
.tab[aria-selected=true] { color: var(--ink); font-weight: 600; border-color: var(--accent); }
.actions { margin-left: auto; display: flex; gap: 4px; padding: 8px 0; }
.btn { border: 1px solid var(--edge); background: #fff; border-radius: 6px; padding: 6px 12px; min-height: 36px; cursor: pointer; font-weight: 500; font-size: 14px; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--soft); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #2a2f37; }
.btn.ghost { border-color: transparent; }
.btn.danger { color: #b3261e; }
.btn.sm { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.link { border: 0; background: none; padding: 2px 4px; border-radius: 5px; color: var(--muted); cursor: pointer; font-size: 13px; }
.link:hover { color: var(--ink); background: var(--soft); }
.about { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 9px 20px; font-size: 15px; color: var(--muted); background: #fff; border-bottom: 1px solid var(--line); }
.about b { color: var(--ink); font-weight: 600; }
.notice { background: #fff8e1; border-bottom: 1px solid #f0dfa8; padding: 8px 20px; font-size: 14px; }
input[type=text], input[type=search], input[type=number], input[type=password], select { background: #fff; border: 1px solid var(--edge); border-radius: 6px; padding: 6px 10px; min-height: 36px; min-width: 0; width: 100%; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.pad { padding: 18px 20px; display: grid; gap: 14px; }
.stage > .blankstate { margin: 24px; }
.blankstate { padding: 40px 20px; text-align: center; color: var(--muted); display: grid; gap: 12px; justify-items: center; }

/* ───────── Pages: a strip of figures across the top, then one dense table ───────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; background: #fff; border-bottom: 1px solid var(--line); }
.kpis div { padding: 14px 20px; border-right: 1px solid var(--line); }
.kpis dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kpis dd { margin: 0; font: 500 26px/1.25 var(--mono); letter-spacing: -.02em; white-space: nowrap; }
.page { max-width: 1500px; margin: 0 auto; padding: 16px 20px 40px; display: grid; gap: 14px; font-size: 14px; }
.targets { color: var(--muted); font-size: 13px; max-width: 120ch; }
/* The heads and every row share --cols, set by the page from the columns the set has. */
.vlist { overflow: hidden; }
.vcols, .vrow { display: grid; grid-template-columns: var(--cols); gap: 4px 24px; align-items: center; padding: 9px 14px; }
.vcols { background: var(--faint); border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.vcols > .r { justify-self: end; }
.vsort { border: 0; background: none; padding: 2px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; justify-self: start; border-radius: 4px; }
.vsort:hover, .vsort[aria-pressed=true] { color: var(--ink); }
.vsort[aria-pressed=true]:not([data-by=name])::after { content: ' ↓'; }
.venue + .venue { border-top: 1px solid #ebeef1; }
.vrow { cursor: pointer; }
.vrow:hover { background: var(--faint); }
.vrow h2 { font-size: 14px; font-weight: 600; line-height: 1.4; }
.vmeta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 1px; padding-left: 14px; font-size: 12.5px; color: var(--muted); }
.vmeta .badge { font-size: 11.5px; padding: 0 7px; }
.vnum { text-align: right; font-family: var(--mono); }
.vsold { display: grid; grid-template-columns: 6ch minmax(0, 1fr); gap: 14px; align-items: center; }
.vsold b { text-align: right; font: 400 14px var(--mono); }
.vsold i { height: 6px; border-radius: 3px; background: var(--fill); width: max(3px, calc(var(--v) * 100%)); }
.vmixc { display: flex; align-items: center; gap: 12px; font: 400 13px var(--mono); white-space: nowrap; }
.vmixc .mixbar { flex: 1; height: 6px; margin: 0; }
.vmixc .dot { margin-right: 5px; }
.vrow .check { font-size: 13px; }
.vbody { padding: 6px 14px 18px 28px; display: grid; gap: 12px; content-visibility: auto; contain-intrinsic-height: auto 300px; }  /* venues below the fold are laid out when scrolled to */
.narrow { display: none; }
@media (max-width: 760px) {
  .vcols { display: none; }
  .vrow { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .vname { flex: 1 0 100%; }
  .vnum { margin-left: 14px; }
  .vnum::after, .vsold b::after { content: ' ' attr(data-l); font-family: var(--font); color: var(--muted); }
  .vsold { display: block; }
  .vsold b::after { content: ' sold a week'; }
  .vsold i { display: none; }
  .vmixc { flex: 1 1 150px; }
  .vbody { padding: 0 14px 16px; }
  .narrow { display: block; }
}
.badge { font-size: 13px; font-weight: 500; padding: 2px 10px; border-radius: 999px; background: var(--soft); color: #454a52; white-space: nowrap; }
.vmix { display: grid; gap: 8px; max-width: 720px; }
.minis { display: flex; flex-wrap: wrap; gap: 14px; }
.minicard { flex: none; width: 152px; border: 1px solid var(--line); border-radius: 8px; background: #eef1f3; padding: 12px 10px 10px; cursor: pointer; display: grid; justify-items: center; gap: 2px; text-align: center; transition: border-color .12s, transform .12s; }
.minicard:hover { border-color: var(--ink); transform: translateY(-2px); }
.minicard b { font-size: 14px; font-weight: 600; margin-top: 8px; line-height: 1.25; }
.minicard small { font-size: 12.5px; color: var(--muted); }
.minifit { height: 198px; position: relative; }
.minifit .machine { transform: scale(.1302); }

/* Healthy choice mix */
.mixbar { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--soft); margin: 6px 0; }
.mixbar i { display: block; height: 100%; background: var(--r); }
.mixkey { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--muted); }
.mixkey b { color: var(--ink); }
.r-green { --r: var(--green); --rs: var(--green-soft); --rt: #fff; --ri: var(--green); }
.r-amber { --r: var(--amber); --rs: var(--amber-soft); --rt: #1d1d1f; --ri: var(--amber-ink); }
.r-red { --r: var(--red); --rs: var(--red-soft); --rt: #fff; --ri: var(--red); }
.r-none { --r: var(--none); --rs: var(--soft); --rt: #fff; --ri: var(--muted); }
.r-na { --r: #d9d6cf; --rs: var(--soft); --rt: #1d1d1f; --ri: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--r); flex: none; }
.pill { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; background: var(--rs); color: var(--ri); }
.pill.nuts { background: #f1e7da; color: #6b4a1f; }
.checks { display: grid; gap: 4px; margin-top: 6px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.check b { color: var(--ink); font-weight: 600; }
.check i { flex: none; width: 18px; height: 18px; border-radius: 50%; font: 700 11px/18px var(--font); text-align: center; color: #fff; background: var(--green); }
.check.no i { background: var(--red); }

/* ───────── Planogram ───────── */
.plan { display: grid; grid-template-columns: 250px minmax(0, 1fr) 350px; grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; }
#app:has(.plan) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.rail { overflow: auto; padding: 12px 10px 20px; border-right: 1px solid var(--line); background: var(--faint); display: grid; gap: 2px; align-content: start; }
.railbtns { display: flex; gap: 8px; padding: 2px 4px 8px; }
.railbtns .btn { flex: 1; }
.loc { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 8px; margin-top: 6px; padding: 10px 8px 6px; border-top: 1px solid var(--line); background: var(--faint); font-size: 13px; font-weight: 600; line-height: 1.3; }
.loc:first-child { margin-top: 0; border-top: 0; }
.loc .fold { flex: 1; }
/* Under the pointer the count gives way to Edit, which lies over the row's end instead of taking room in it, so the venue's name does not rewrap and move the list. */
.loc .n { flex: none; font-size: 12px; font-weight: 500; color: var(--muted); }
.loc .link { display: none; position: absolute; right: 4px; top: 8px; font-size: 12px; padding: 2px 4px 2px 8px; background: var(--faint); }
.loc:hover .link, .loc:focus-within .link { display: inline; }
.loc:has(.link):hover .n, .loc:has(.link):focus-within .n { visibility: hidden; }
@media (hover: none) { .loc .link { display: inline; position: static; padding: 0 4px; } .loc:has(.link) .n { display: none; } }
.fold { display: flex; align-items: baseline; gap: .55em; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fold::before { content: ''; flex: none; width: .42em; height: .42em; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-.22em) rotate(45deg); transition: transform .12s; }
.fold[aria-expanded=false]::before { transform: translateY(-.1em) rotate(-45deg); }
.loc em { font-style: normal; font-weight: 500; color: #6b4a1f; background: #f1e7da; border-radius: 999px; padding: 0 7px; margin-left: 2px; white-space: nowrap; }
.mi { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px; padding: 6px 10px 6px 20px; cursor: pointer; font-size: 14px; line-height: 1.3; }
.mi[data-two] { display: grid; justify-content: stretch; gap: 0; }  /* a Seed machine: its asset number sits under the name */
.mi[data-two] small { font-size: 11.5px; letter-spacing: .02em; }
.mi { scroll-margin: 44px 0 8px; }
.mi:hover { background: var(--soft); }
.mi[aria-current=true] { background: var(--ink); color: #fff; font-weight: 600; }
.mi small { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.mi[aria-current=true] small { color: #c9ccd1; }
.emptyloc { font-size: 13px; color: var(--muted); padding: 2px 10px 6px; }
.railselect { display: none; }

.stage { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.room {
  flex: 1; min-height: 0; overflow: hidden; display: flex; padding: 22px 30px 0;
  background: linear-gradient(to top, #8f8a80 0, #a39e94 44px, #6f6b63 44px, #6f6b63 47px, transparent 47px), linear-gradient(#e9e6e0, #d6d3cc);
}
.fit { margin: auto auto 0; position: relative; flex: none; margin-bottom: 26px; }
.stagebar { position: absolute; left: 14px; top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.hint { position: absolute; left: 14px; right: 14px; bottom: 4px; font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* one line, on the floor under the machine */
.switch { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px; border-radius: 8px; cursor: pointer; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); user-select: none; white-space: nowrap; font-size: 14px; font-weight: 500; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i { width: 28px; height: 16px; border-radius: 8px; background: #c4c2bd; position: relative; transition: background .15s; }
.switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + i { background: var(--ink); }
.switch input:checked + i::after { transform: translateX(12px); }
.switch input:focus-visible + i { outline: 2px solid var(--focus); outline-offset: 2px; }

.inspector { overflow: auto; padding: 18px 18px 28px; border-left: 1px solid var(--line); background: #fff; }
.inspector h2 { font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
.inspector h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 8px; font-weight: 600; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f { display: grid; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 500; min-width: 0; }
.f.wide { grid-column: 1 / -1; }
.fields.holds { grid-template-columns: 84px minmax(0, 1fr); margin-top: 14px; }
.fields.holds.seed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fields.holds.seed > div { grid-column: 1 / -1; }
.fields.holds.seed > div > span { display: none; }
.f input, .f select { color: var(--ink); font-size: 15px; font-weight: 400; }
.facts { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 14.5px; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; text-align: right; font-weight: 500; }
.shelflist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; font-size: 14.5px; }
.shelflist li { display: flex; align-items: center; gap: 8px; }
.shelflist b { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; line-height: 22px; text-align: center; }
.shelflist span { flex: 1; color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.row.tight { flex-wrap: nowrap; }
.insphead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -4px 0 10px -4px; font-size: 13px; }
.hero { height: 170px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 14px; padding: 16px; border-radius: 12px; background: linear-gradient(#eef1f4, #cfd5dc); box-shadow: inset 0 0 0 1px rgba(20,30,45,.08); }
.heropack { height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 5px 5px rgba(20, 30, 45, .4)); }
.hero em { color: #6b7280; font-style: normal; align-self: center; }
.prow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.price { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-right: 4px; }
.why { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.warn { margin-top: 10px; padding: 8px 12px; border-radius: 9px; background: var(--red-soft); color: #8f1d1d; font-size: 14px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 2px 12px; min-height: 28px; font-size: 13.5px; cursor: pointer; }
.chip[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pick { list-style: none; margin: 0; padding: 0; }
.pi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 9px; cursor: pointer; text-align: left; }
.pi:hover:not(:disabled) { background: var(--soft); }
.pi[aria-pressed=true] { background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pi:disabled { opacity: .45; cursor: not-allowed; }
.thumb { flex: none; width: 38px; height: 38px; border-radius: 8px; background: #e3e7ec; display: flex; align-items: flex-end; justify-content: center; padding: 4px; }
.thumbpack { max-width: 100%; height: 100%; width: auto; }
.pn { flex: 1; min-width: 0; display: grid; }
.pn b { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.pn small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp { flex: none; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.pp .dot { margin: 0; }
.nomatch { padding: 10px 8px; font-size: 14px; }

/* Build tab: brief and cabinet settings on the left */
.plan.build { grid-template-columns: 300px minmax(0, 1fr) 350px; }
.side { overflow: auto; padding: 18px 16px 28px; border-right: 1px solid var(--line); background: var(--faint); display: grid; gap: 10px; align-content: start; }
.side h2 { font-size: 19px; letter-spacing: -.01em; }
.btn.wide { width: 100%; }
input[type=range] { width: 100%; accent-color: var(--ink); margin: 2px 0 0; }
.f b { color: var(--ink); }
.tick { display: flex; align-items: center; gap: 8px; font-size: 14.5px; cursor: pointer; }
.tick.wide { grid-column: 1 / -1; }
.tick input { width: 18px; height: 18px; accent-color: var(--ink); }

/* ───────── The machine. Sizes are design pixels (--w × 1516); .fit scales it. ─────────
   --body is the cabinet colour, --trim the door frame; each machine type sets its own. */
.machine {
  --body: #131415; --trim: #17181a; --cap: #1d1e20;
  position: absolute; left: 0; top: 0; width: var(--w); height: 1500px; transform-origin: 0 0; border-radius: 9px 9px 4px 4px; user-select: none; -webkit-user-select: none;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.10) 7%, rgba(255,255,255,0) 50%, rgba(255,255,255,.08) 93%, rgba(0,0,0,.5)), var(--body);
  box-shadow: 0 0 0 1px rgba(0,0,0,.85), 0 30px 26px -18px rgba(0,0,0,.55), 26px 14px 60px rgba(0,0,0,.28), -10px 10px 40px rgba(0,0,0,.16);
}
.machine.drinks { --body: #14294b; --trim: #0f1f3a; --cap: #1b3560; }
.machine.snack { --body: #41454b; --trim: #c3c7cd; --cap: #50545b; }
.machine.fresh { --body: #eceef0; --trim: #cfd3d8; --cap: #f6f7f8; }
.machine.essentials { --body: #20393d; --trim: #172a2d; --cap: #2a474c; }
.machine::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; border-radius: 9px 9px 0 0; background: linear-gradient(rgba(255,255,255,.10), rgba(0,0,0,.28)), var(--cap); border-bottom: 1px solid rgba(0,0,0,.6); }
.machine::after { content: ""; position: absolute; left: 34px; right: 34px; bottom: -16px; height: 16px; background: linear-gradient(90deg, #111 0 46px, transparent 46px calc(100% - 46px), #111 calc(100% - 46px)); filter: drop-shadow(0 6px 5px rgba(0,0,0,.5)); }
.window { position: absolute; left: 30px; top: 62px; width: var(--win); height: 1200px; border-radius: 5px; padding: 13px; background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(0,0,0,.25) 30%, rgba(0,0,0,.4) 70%, rgba(255,255,255,.14)), var(--trim); box-shadow: 0 0 0 1px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.1); }
/* A lit interior: pale back wall, light strips down both sides. */
.interior { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(90deg, #fff, rgba(255,255,255,0) 7%, rgba(255,255,255,0) 93%, #fff), linear-gradient(#eef1f4, #d3d8df 60%, #c3c9d1); box-shadow: inset 0 0 22px 2px rgba(20,30,45,.35); }
.led { flex: none; height: 30px; position: relative; background: linear-gradient(#aab0b8, #d9dde2); }
.led::before { content: ""; position: absolute; left: 5%; right: 5%; top: 11px; height: 7px; border-radius: 4px; background: #fff; box-shadow: 0 0 12px 4px rgba(255,255,255,.95); }
.shelves { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; }
.shelf { position: relative; display: flex; flex-direction: column; min-height: 0; }
.lanes { flex: 1; display: flex; padding: 0 12px; position: relative; z-index: 2; margin-bottom: -15px; min-height: 0; background: linear-gradient(rgba(30,40,55,.20), rgba(30,40,55,0) 30%); }
.floor { flex: none; height: 24px; margin: 0 5px; background: linear-gradient(#aeb4bc, #d5d9de 70%, #e6e9ec); clip-path: polygon(1.4% 0, 98.6% 0, 100% 100%, 0 100%); }
.lip { flex: none; height: 36px; display: flex; padding: 0 12px; position: relative; z-index: 3; background: linear-gradient(#f4f5f7, #d5d8dd 45%, #aeb3ba); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.28), 0 5px 8px rgba(20,30,45,.35); }
/* Read out, not shown: what a lane holds, for a screen reader. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lane { position: relative; flex: 1; min-width: 0; cursor: pointer; outline-offset: -3px; }
.lane::before, .lane::after { content: ""; position: absolute; bottom: 4px; width: 3px; height: 50%; background: linear-gradient(90deg, #f3f4f6, #8d939b); clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
.lane::before { left: -1.5px; } .lane::after { right: -1.5px; transform: scaleX(-1); }
.stack { position: absolute; inset: 0 4px; }
.loop, .pack { position: absolute; left: 50%; bottom: 0; transform-origin: 50% 100%; transform: translate(-50%, calc(var(--d) * var(--rise, 8px) * -1)) scale(calc(1 - var(--d) * .065)); }
/* One turn of the spiral, seen from the front. */
.loop { --rise: calc(var(--zone) * .04); width: min(80%, calc(var(--zone) * .34)); aspect-ratio: 1 / .9; border-radius: 50%; border: 2.2px solid #7d838b; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(20,30,45,.35); opacity: calc(.9 - var(--d) * .2); }
.pack { width: 100%; height: var(--ph); pointer-events: none; filter: brightness(calc(1 - var(--d) * .09)) drop-shadow(0 2px 2px rgba(20,30,45,.4)); }
.lane:hover .pack { filter: brightness(calc(1.06 - var(--d) * .09)) drop-shadow(0 2px 2px rgba(20,30,45,.4)); }
.lane.empty::after { content: "+"; inset: auto 0 22% 0; width: auto; height: auto; background: none; clip-path: none; transform: none; text-align: center; color: rgba(20,30,45,.35); font: 500 40px/1 var(--font); }
.lane.selected, .lane.drop { background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.7)); border-radius: 4px; }
.lane.selected { box-shadow: inset 0 0 0 3px #15181d; }
.lane.drop { box-shadow: inset 0 0 0 3px #f0a30a; }
.lane.lifted .pack { opacity: .25; }
.tag { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.tag i { flex: none; min-width: 22px; height: 21px; padding: 0 4px; border-radius: 11px; background: #19191b; color: #fff; font: 700 12px/21px var(--font); text-align: center; font-style: normal; box-shadow: 0 1px 1px rgba(0,0,0,.4); }
.tag b { padding: 2px 5px 1px; border-radius: 3px; background: #fff; color: #111; font: 700 12.5px/1.2 var(--font); white-space: nowrap; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.25); }
.tag[class*=" r-"] b { background: var(--r); color: var(--rt); box-shadow: 0 0 0 1.5px #fff, 0 1px 2px 1px rgba(0,0,0,.3); }
.tag.tight { flex-direction: column; gap: 1px; }
.tag.tight i { min-width: 18px; height: 14px; font-size: 10px; line-height: 14px; }
.tag.tight b { font-size: 10.5px; padding: 1px 3px 0; }
.tag.selected i { background: var(--focus); }
.tag.bad i { background: var(--red); box-shadow: 0 0 0 2px #fff; }
.glass { position: absolute; inset: 13px; pointer-events: none; z-index: 6; background: linear-gradient(112deg, rgba(255,255,255,.34), rgba(255,255,255,0) 17%, rgba(255,255,255,0) 58%, rgba(255,255,255,.16) 59%, rgba(255,255,255,.07) 71%, rgba(255,255,255,0) 72%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
/* Control column and delivery bin */
.column { position: absolute; left: calc(var(--win) + 48px); top: 312px; width: 122px; display: flex; flex-direction: column; align-items: center; gap: 22px; pointer-events: none; }
.lcd { width: 108px; height: 46px; border-radius: 3px; border: 4px solid #050505; flex: none; background: #0c2b3a; color: #9fe6ff; font: 700 9.5px/1.25 ui-monospace, Menlo, monospace; text-align: center; padding-top: 7px; box-shadow: inset 0 0 8px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08); }
.keys { width: 96px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 7px; flex: none; background: #0a0a0b; border-radius: 4px; box-shadow: inset 0 0 0 1px #2a2a2d; }
.keys span { height: 22px; border-radius: 3px; background: linear-gradient(#d9dadc, #a6a8ab); color: #111; font: 700 11px/22px var(--font); text-align: center; box-shadow: 0 1px 0 #000; }
.screen { width: 112px; height: 190px; flex: none; border-radius: 8px; border: 5px solid #08090a; background: linear-gradient(160deg, #1d2a3d, #0d1522); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 8px; align-content: start; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 10px rgba(0,0,0,.35); }
.screen i { height: 36px; border-radius: 4px; background: rgba(255,255,255,.16); }
.screen i:nth-child(1) { background: #3fa46a; } .screen i:nth-child(4) { background: #e8a00c; }
.reader { position: relative; width: 96px; height: 150px; border-radius: 9px; background: linear-gradient(#232427, #0c0c0d); flex: none; box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.12), 0 6px 10px rgba(0,0,0,.5); }
.reader::before { content: ""; position: absolute; left: 12px; right: 12px; top: 13px; height: 58px; border-radius: 3px; background: linear-gradient(160deg, #1763c6, #0a2f6e); }
.reader::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 22px; height: 5px; border-radius: 3px; background: #000; box-shadow: 0 1px 0 rgba(255,255,255,.14), 0 -34px 0 -1px #1d1e20; }
.coin { position: relative; width: 70px; height: 86px; border-radius: 4px; background: linear-gradient(#bfc1c4, #8b8d90); box-shadow: 0 0 0 1px #000; flex: none; }
.coin::before { content: ""; position: absolute; left: 31px; top: 14px; width: 6px; height: 34px; border-radius: 3px; background: #050505; }
.coin::after { content: ""; position: absolute; left: 20px; bottom: 10px; width: 30px; height: 12px; border-radius: 2px; background: #2a2b2e; }
.plate { width: 92px; padding: 5px 0 4px; border-radius: 2px; background: #f3f2ee; color: #111; text-align: center; flex: none; font: 700 12px/1.15 var(--font); box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.5); }
.plate small { display: block; font-size: 7.5px; font-weight: 700; letter-spacing: .08em; color: var(--brand-ink); }
.lock { position: relative; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e3e4e6, #77797c 70%); box-shadow: 0 0 0 1px #000; flex: none; }
.lock::after { content: ""; position: absolute; left: 11px; top: 6px; width: 4px; height: 14px; border-radius: 2px; background: #1a1a1b; }
.bin { position: absolute; left: 30px; top: 1296px; width: var(--win); height: 150px; border-radius: 5px; padding: 12px; pointer-events: none; background: linear-gradient(#060606, #101012); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,255,255,.06); }
.bin div { height: 100%; border-radius: 3px; background: linear-gradient(#232427, #17181a 20%, #0e0e0f); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -10px 18px rgba(0,0,0,.6); color: rgba(255,255,255,.16); font: 700 22px/126px var(--font); letter-spacing: .5em; text-align: center; text-indent: .5em; }
/* A cabinet that is a photograph (img/cab/combo.webp): the picture is the whole machine, feet and all, and the live
   shelves lie over its glass at --wx, --wy. Under the picture is a plain dark body, so a machine drawn before its
   picture is painted does not flash empty. */
.machine.shelled { height: 1516px; border-radius: 0; box-shadow: 0 30px 26px -18px rgba(0,0,0,.5);
  background: url(img/cab/combo.webp) 0 0 / 100% 100% no-repeat, linear-gradient(#1f2022, #1f2022) 3px 4px / calc(100% - 6px) calc(100% - 62px) no-repeat; }
.machine.shelled::before, .machine.shelled::after { content: none; }
.machine.shelled .window { left: var(--wx); top: var(--wy); width: calc(var(--win) - 26px); height: var(--wh); padding: 0; border-radius: 0; background: none; box-shadow: none; }
.machine.shelled .glass { inset: 0; background: linear-gradient(100deg, rgba(255,255,255,.10), rgba(255,255,255,0) 22%); box-shadow: none; }
.machine.shelled.mini, .sheetpic .machine.shelled { box-shadow: none; }
/* A cabinet with an oven: a chilled window of meals, and beside it a tower that is a photograph (img/hot/tower.webp):
   the screen, the reader, the oven a meal comes out of hot, and the cutlery drawer. The menu lies over its screen.
   The body is flat and matt, as the photograph is. What is sold cold drops to the bin. */
.machine.hot { --body: #2e2f32; --trim: #1b1c1e; --cap: #f67627; border-radius: 4px; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 2.5%, rgba(0,0,0,0) 97.5%, rgba(0,0,0,.4)), var(--body); }
.machine.hot::before { height: 52px; border-radius: 4px 4px 0 0; background: var(--cap); border-bottom: 2px solid #17181a; }
.sign { position: absolute; left: 34px; right: 34px; top: 0; height: 52px; display: flex; align-items: center; justify-content: space-between; color: #fff; font: 800 27px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.sign span { font-size: 15px; font-weight: 600; letter-spacing: .12em; }
.chill { position: absolute; left: 52px; top: 84px; z-index: 7; padding: 3px 7px 2px; border-radius: 2px; background: #111213; color: #e9eaec; font: 600 13px/1.2 var(--font); pointer-events: none; }
.machine.hot .window { background: var(--trim); box-shadow: 0 0 0 1px #0c0c0d, inset 0 0 0 2px #46484b; border-radius: 3px; }
.machine.hot .glass { background: linear-gradient(100deg, rgba(255,255,255,.10), rgba(255,255,255,0) 22%); box-shadow: none; }
.machine.hot .bin { border-radius: 3px; background: #1b1c1e; box-shadow: 0 0 0 1px #0c0c0d; }
.machine.hot .bin div { border-radius: 2px; background: linear-gradient(#111213, #232426); box-shadow: inset 0 6px 10px rgba(0,0,0,.6); color: rgba(255,255,255,.22); font-size: 15px; letter-spacing: .3em; }
.machine.hot .column { display: block; top: 62px; width: 318px; height: 1384px; background: url(img/hot/tower.webp) 0 0 / 100% 100% no-repeat; }
.menu { position: absolute; left: 13%; top: 4.9%; width: 74.4%; height: 29%; background: #fff; padding: 12px 10px 8px; display: flex; flex-direction: column; gap: 8px; }
.menu > b { color: #15181d; font: 800 14px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.menu > div { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 6px; min-height: 0; }
.menu i { position: relative; border-radius: 6px; background: #f1f1ee; overflow: hidden; }
.menu .dish { position: absolute; left: 9%; top: 5%; width: 82%; height: 66%; }
.menu s { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; text-decoration: none; color: #15181d; font: 700 13px/1 var(--font); }
.menu em { flex: none; color: #5b6168; font: 600 10.5px/1 var(--font); font-style: normal; text-align: center; }
.machine.hot .plate { position: absolute; left: 34px; top: 1196px; }
.machine.hot .lock { display: none; }
.machine.mini { pointer-events: none; box-shadow: 0 0 0 1px #000, 0 40px 40px -20px rgba(0,0,0,.5); }
.machine.mini .lane { cursor: inherit; }
.machine.mini .pack { filter: none; }

/* ───────── Products ───────── */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar input[type=search] { flex: 1 1 240px; width: auto; }
.toolbar select { width: auto; }
.count { font-size: 13px; color: var(--muted); }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.range th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; padding: 9px 10px; background: var(--faint); }
.range td { padding: 2px 10px; border-bottom-color: #ebeef1; }
.range td input[type=text], .range td input[type=number], .range td select { border-color: transparent; background-color: transparent; border-radius: 4px; min-height: 32px; padding: 4px 8px; }
.range td input:hover, .range td select:hover { border-color: var(--edge); }
.range td input:focus, .range td select:focus { border-color: var(--edge); background-color: #fff; }
.range td .num { font-family: var(--mono); text-align: right; }
.range tr.fixed td { padding: 7px 10px; }
.range .grp th { padding: 10px 12px 8px; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink); background: #fff; }
.grp .fold small { font-weight: 500; font-size: 13px; color: var(--muted); }
td input[type=text] { min-width: 130px; }
td select { min-width: 112px; }
.range td:nth-child(2) { width: 28%; } .range td:nth-child(3) input { min-width: 148px; }  /* the name gets the spare width */
.range td:nth-child(4) select { min-width: 172px; } .range td:nth-child(7) select { min-width: 164px; } .range .num { width: 76px; }
td .num { width: 88px; }
td.c { text-align: center; }
td input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ink); }
.tthumb { width: 46px; min-width: 46px; }
.tthumb .thumbpack { display: block; width: 32px; height: 32px; max-width: none; padding: 3px; border-radius: 4px; background: #eef1f3; }
.rsel { border-left: 5px solid var(--r) !important; }

/* ───────── Overlays ───────── */
#tip { position: fixed; z-index: 40; pointer-events: none; padding: 5px 9px; border-radius: 7px; background: rgba(20, 20, 22, .94); color: #fff; font-size: 13px; white-space: nowrap; }
#tip small { color: #b9b9be; font-size: 12.5px; }
#ghost { position: fixed; z-index: 39; pointer-events: none; transform: translate(-50%, -60%); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .5)); }
.ghostpack { height: 90px; width: auto; }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; max-width: calc(100vw - 32px); }
dialog { border: 1px solid var(--line); border-radius: 14px; padding: 20px; max-width: min(440px, calc(100vw - 32px)); width: 100%; box-shadow: 0 20px 50px rgba(20, 30, 50, .18); color: var(--ink); background: #fff; }
dialog::backdrop { background: rgba(20, 24, 30, .4); }
dialog form { display: grid; gap: 12px; }
dialog h3 { font-size: 18px; line-height: 1.3; }
.dlgbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* The header stays on one row down to the width where the page goes to one column. */
@media (max-width: 1100px) {
  .bar { column-gap: 14px; }
  .tab { padding: 6px 11px; }
  .actions { gap: 4px; }
  .actions .btn { padding: 6px 10px; }
}
/* ───────── Narrow screens: one column, machine picker becomes a menu ───────── */
@media (max-width: 999px) {
  #app:has(.plan) { height: auto; display: block; overflow: visible; }
  .plan { display: block; }
  .bar { position: static; }
  .rail { display: none; }
  .side { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .plan.build .stagebar { top: 14px; }
  .railselect { display: block; margin: 12px 12px 0; width: calc(100% - 24px); font-weight: 600; }
  .stage { background: linear-gradient(#e9e6e0, #d6d3cc); overflow: visible; }
  .room { padding: 56px 10px 0; overflow: visible; }
  .stagebar { top: 60px; }
  .hint { display: none; }
  .inspector { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
  .actions { margin-left: 0; }
}
@media (max-width: 560px) {
  .bar { padding: 8px 12px; gap: 8px 12px; }
  .actions { flex-wrap: wrap; gap: 4px; }
  .actions .btn { padding: 6px 10px; }
  .brand span { display: none; }
  .about { padding: 7px 12px; }
  .tab { padding: 6px 11px; }
  .page { padding: 20px 12px 40px; }
}
@media (prefers-reduced-motion: no-preference) { .btn, .mi, .pi, .tab { transition: background .12s, border-color .12s; } }

/* Internal tool: rail search, venue filters, suggested swaps */
.rail input[type=search] { margin: 0 4px 4px; width: calc(100% - 8px); }
#rail-list { display: grid; gap: 2px; }
.loc .dot { flex: none; align-self: center; }
.vmix > .btn { margin-top: 10px; justify-self: start; }
dialog.swaps { max-width: min(640px, calc(100vw - 32px)); }
dialog.fc { max-width: min(720px, calc(100vw - 32px)); }
dialog.fc .chips { margin: 0; }
.fclist { height: min(50vh, 460px); overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
dialog.fc .dlgbtns { align-items: center; } dialog.fc .dlgbtns .quiet { margin-right: auto; }
.fclist .pn small { white-space: normal; }
.fcl.on { color: var(--green); font-weight: 500; }
.swaplist { max-height: min(46vh, 420px); overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px 10px; }
.swaplist h4 { font-size: 14px; margin: 12px 0 4px; }
.swaplist h4 small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.swaplist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.swaplist li { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 52px; gap: 8px; align-items: baseline; font-size: 14px; }
.swaplist li em { font-style: normal; color: var(--muted); font-size: 12.5px; text-align: right; white-space: nowrap; }
.swaplist li > i { font-style: normal; color: var(--muted); font-size: 12.5px; }
.swaplist li span { color: var(--muted); text-decoration: line-through; text-decoration-color: #c9ccd1; }
.swaplist li b { font-weight: 500; }
.swaplist li span, .swaplist li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The list of sets, and the way back to it */
.about a { color: var(--brand-ink); font-size: 16px; font-weight: 600; text-decoration: none; padding-right: 12px; border-right: 1px solid var(--line); }
.about a:hover { text-decoration: underline; }
.setrow { color: inherit; text-decoration: none; }
.setrow + .setrow { border-top: 1px solid #ebeef1; }
.kind { justify-self: start; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--edge); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.setrow .btn { display: inline-flex; align-items: center; justify-content: center; }
.setrow:hover .btn { background: var(--soft); border-color: var(--ink); }
.setrow:hover .btn.primary { background: #2a2f37; }
@media (max-width: 760px) { .setrow .vnum { margin-left: 0; } .setrow > :empty { display: none; } .setrow .vname { flex: 1 1 60%; } .setrow .btn { margin-left: auto; } }
.signin { justify-self: center; width: min(340px, 100%); padding: 22px; display: grid; gap: 10px; }
.signin label { font-weight: 500; }
.signin .danger { color: #b3261e; }
tr.fixed td { padding: 9px 8px; }

/* What the bar says of the last save, and a client's changes offered to Vending First. */
.saved { align-self: center; font-size: 13px; color: var(--muted); white-space: nowrap; }
.about .link { margin-left: auto; }
.notice .link { margin-left: 6px; }

/* ───────── Print: a page a machine, made by printOut() and shown only on paper ───────── */
#print { display: none; }
.sheet { width: 704px; color: var(--ink); break-after: page; break-inside: avoid; }
.sheet header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sheet h1 { font-size: 20px; letter-spacing: -.01em; line-height: 1.2; }
.sheet header div div { font-size: 12.5px; color: var(--muted); }
.sheetbody { display: flex; gap: 22px; align-items: flex-start; }
.sheetpic { position: relative; flex: none; }
.sheetpic > div { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sheetpic .machine { box-shadow: 0 0 0 1px rgba(0,0,0,.85); }
.sheetside { flex: 1; min-width: 0; }
.sheetside .mixbar { margin-top: 0; }
.sheetside .mixkey, .sheetside .check { font-size: 11.5px; }
.sheetside table { width: 100%; border-collapse: collapse; font-size: 10.5px; line-height: 1.25; margin-top: 10px; }
.sheetside.small table { font-size: 8.5px; }
.sheetside th { text-align: left; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); padding: 2px 4px 3px 0; }
.sheetside td { padding: 2px 4px 2px 0; border-bottom: 1px solid var(--soft); vertical-align: top; }
.sheetside td:first-child { white-space: nowrap; font-weight: 600; }
.sheetside td:nth-child(3) { text-align: right; white-space: nowrap; }
.sheetside .dot { margin: 0; }
@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff; }
  #app, #tip, .toast, dialog { display: none !important; }
  #print { display: block; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* A set's presentation: its pitch, around the live machines of the planogram. --k is a machine's scale, --s the page's. */
.pitch { --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: var(--font); --p-ink: #12171c; --p-muted: #5b656e; --p-paper: #f5f4f0; --p-line: #12171c1f; --p-dim: #9aa4ad; --s: 1; background: var(--p-paper); color: var(--p-ink); min-height: 100svh; overflow-x: clip; }
.pitch-header { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 24px; padding: 12px 5%; background: #f5f4f0f2; border-bottom: 1px solid var(--p-line); backdrop-filter: blur(12px); }
.pitch-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; font-weight: 600; font-size: 14px; line-height: 1.3; }
.pitch-brand small { display: block; font-weight: 400; font-size: 12px; color: var(--p-muted); }
.pitch-header nav { display: flex; gap: 2px; margin: auto; }
.pitch-header nav button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--p-muted); white-space: nowrap; }
.pitch-header nav button:hover { color: var(--p-ink); background: #12171c0d; }
.pitch-header nav button[aria-current] { color: var(--p-ink); background: #12171c14; font-weight: 600; }
.pitch-header-actions { display: flex; gap: 8px; flex: none; }
.pitch-section { padding: 88px 5%; border-bottom: 1px solid var(--p-line); scroll-margin-top: 62px; }
.pitch-section[hidden] { display: none !important; }
.pitch-in { max-width: 1240px; margin-inline: auto; }
.pitch h1, .pitch h2 { font-weight: 600; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.pitch h1 { font-size: clamp(38px, 5vw, 70px); }
.pitch h2 { font-size: clamp(28px, 3.2vw, 44px); }
.pitch-lead, .pitch-head p { font-size: clamp(16px, 1.45vw, 20px); line-height: 1.5; color: var(--p-muted); max-width: 34em; text-wrap: pretty; }
.pitch-head { display: grid; gap: 14px; margin-bottom: 36px; }
.pitch-mini { width: calc(var(--w) * var(--k) * var(--s) * 1px); height: calc(1516px * var(--k) * var(--s)); position: relative; flex: none; pointer-events: none; }
.pitch-mini .machine { transform: scale(calc(var(--k) * var(--s))); }
/* Overview: dark, so the machines are the colour on the page. */
.pitch-hero { background: radial-gradient(ellipse 55% 75% at 76% 70%, #323840, #0f1418 72%); color: #fff; border: 0; padding-block: 72px 0; overflow: hidden; }
.pitch-hero .pitch-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.pitch-kicker { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); font-weight: 600; margin-bottom: 22px; }
.pitch-hero .pitch-lead { color: #c3cad1; margin-top: 24px; }
.pitch-facts { display: flex; gap: 32px; margin: 40px 0; flex-wrap: wrap; }
.pitch-facts > div { padding-left: 16px; border-left: 2px solid var(--brand); }
.pitch-facts dt { font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.pitch-facts dd { font-size: 13px; color: var(--p-dim); margin: 4px 0 0; max-width: 13em; }
.pitch-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 72px; }
.pitch-actions .btn { padding: 11px 20px; font-size: 15px; border-radius: 10px; }
.pitch-hero .btn { background: none; color: #fff; border-color: #ffffff4d; }
.pitch-hero .btn.primary { background: #fff; color: var(--p-ink); border-color: #fff; }
.pitch-hero .btn:hover { border-color: #fff; } .pitch-hero .btn.primary:hover { background: #e7eaec; }
.pitch-hero-art { display: flex; align-items: flex-end; justify-content: center; align-self: end; }
.pitch-hero-art .pitch-mini + .pitch-mini { order: -1; margin-right: -34px; filter: brightness(.7); }
.pitch-hero-art .pitch-mini:first-child { z-index: 1; }
/* Machines */
.pitch-lineup { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.pitch-card { display: grid; gap: 5px; justify-items: start; align-content: start; text-align: left; padding: 22px; border: 1px solid var(--p-line); border-radius: 14px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.pitch-card:hover { border-color: var(--p-ink); }
.pitch-card .pitch-mini { margin: 6px auto 18px; }
.pitch-card b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pitch-card span { font-size: 13px; color: var(--p-muted); line-height: 1.45; }
.pitch-card small { font-size: 12px; color: var(--p-muted); margin-top: 6px; }
/* Hot meals */
.pitch-hot { background: #171b20; color: #fff; }
.pitch-hot .pitch-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 64px; align-items: center; }
.pitch-hot .pitch-head p { color: #c3cad1; }
.pitch-how { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pitch-how li { padding-top: 12px; border-top: 2px solid #f08a24; display: grid; gap: 3px; align-content: start; }
.pitch-how b { font-weight: 600; } .pitch-how span { color: var(--p-dim); font-size: 13px; line-height: 1.45; }
.pitch-meals { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.pitch-meal { background: #ffffff0f; border-radius: 12px; padding: 12px 12px 10px; display: grid; gap: 1px; }
.pitch-meal .dish { width: 100%; height: 80px; margin-bottom: 8px; filter: drop-shadow(0 6px 8px #0009); }
.pitch-meal b { font-size: 13px; font-weight: 600; } .pitch-meal span { font-size: 12px; color: var(--p-dim); }
.pitch-note { font-size: 12px; color: var(--p-dim); margin-top: 18px; max-width: 48em; }
/* Your range: the planogram's machine and its product list */
.pitch-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pitch-tabs button { border: 1px solid var(--p-line); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.pitch-tabs button[aria-pressed=true] { background: var(--p-ink); color: #fff; border-color: var(--p-ink); }
.pitch-demo { display: grid; grid-template-columns: 1.25fr 1fr; border: 1px solid var(--p-line); border-radius: 14px; overflow: hidden; background: #fff; }
.pitch .room { height: 570px; padding: 18px 16px 0; background: radial-gradient(ellipse at 50% 40%, #f3f4f2, #d9dcde); display: flex; overflow: hidden; }
.pitch .fit { margin: auto auto 18px; }
.pitch-picker { height: 570px; padding: 28px; border-left: 1px solid var(--p-line); scroll-margin-top: 90px; }
.pitch-picker > h3 { font-size: 24px; font-weight: 600; text-transform: none; letter-spacing: -.02em; color: var(--p-ink); margin: 0 0 10px; line-height: 1.2; }
.pitch-picker > p { font-size: 15px; color: var(--p-muted); margin-bottom: 18px; max-width: 28em; }
.pitch-search { display: block; font-size: 12px; color: var(--p-muted); margin: 14px 0 6px; }
.pitch-picker input[type=search] { width: 100%; }
.pitch-picker .pick { margin-top: 12px; }
.pitch-demo-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--p-muted); }
.pitch-demo-foot > div { display: flex; align-items: center; gap: 12px; flex: none; }
/* Next steps */
.pitch-next .pitch-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.pitch-us { margin: 28px 0 0; }
.pitch-us > div { padding: 16px 0; border-top: 1px solid var(--p-line); display: grid; grid-template-columns: 13em 1fr; gap: 20px; }
.pitch-us dt { font-weight: 600; } .pitch-us dd { margin: 0; color: var(--p-muted); }
.pitch-steps { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
.pitch-steps li { counter-increment: step; display: flex; gap: 14px; font-size: 17px; align-items: baseline; }
.pitch-steps li::before { content: counter(step); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--p-ink); color: #fff; font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.pitch-contact { margin-top: 32px; padding: 22px 24px; border-radius: 14px; background: #fff; border: 1px solid var(--p-line); display: grid; gap: 4px; }
.pitch-contact small { color: var(--p-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.pitch-contact b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.pitch-contact a { color: var(--brand-ink); }
.pitch-footer { padding: 22px 5%; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--p-muted); }
/* Presenting: one section a screen, with Previous and Next along the bottom. */
.pitch-controls { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; justify-content: center; align-items: center; gap: 14px; padding: 10px 5%; background: #f5f4f0f2; border-top: 1px solid var(--p-line); font-size: 13px; backdrop-filter: blur(12px); }
.pitch-controls .pitch-fullscreen { margin-right: auto; }
.pitch.presenting { padding-bottom: 58px; }
.pitch.presenting .pitch-section { min-height: calc(100svh - 121px); display: grid; align-items: center; border: 0; padding-block: 36px; }
.pitch.presenting .pitch-in { width: 100%; }
.pitch.presenting .pitch-hero { padding-bottom: 0; align-items: end; }
.pitch.presenting .pitch-footer { display: none; }
@media (max-width: 1100px) {
  .pitch { --s: .8; }
  .pitch-header nav { display: none; }
  .pitch-header-actions { margin-left: auto; }
  .pitch-hero .pitch-in, .pitch-hot .pitch-in, .pitch-next .pitch-in { grid-template-columns: minmax(0, 1fr); }
  .pitch-actions { padding-bottom: 36px; }
  .pitch-hot .pitch-mini { margin-inline: auto; }
  .pitch-next .pitch-in { gap: 48px; }
}
@media (max-width: 760px) {
  .pitch { --s: .6; }
  .pitch-header { padding: 10px 20px; gap: 10px; }
  .pitch-brand small { display: none; }
  .pitch-hero-art .pitch-mini + .pitch-mini { display: none; }
  .pitch-meals { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .pitch-section { padding: 56px 20px; }
  .pitch-hero { padding-top: 48px; }
  .pitch-facts { gap: 20px; margin: 28px 0; }
  .pitch-how { grid-template-columns: 1fr; }
  .pitch-demo { grid-template-columns: 1fr; }
  .pitch .room { height: auto; min-height: 370px; }
  .pitch-picker { height: auto; max-height: 560px; border-left: 0; border-top: 1px solid var(--p-line); padding: 22px; }
  .pitch-demo-foot, .pitch-footer { flex-direction: column; align-items: start; }
  .pitch-us > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 420px) {
  .pitch { --s: .5; }
  .pitch-brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pitch h1 { font-size: 34px; }
}
@media print {
  .pitch-header-actions, .pitch-header nav, .pitch-controls { display: none; }
  .pitch-section { break-inside: avoid; }
}