/* Cosmos Consult — The Brigade. Stainless pass, graphite rail, thermal tickets. */

/* ---------- Fonts (self-hosted, OFL-1.1) ---------- */
@font-face{font-family:"Alumni Sans";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/alumni-sans-cyrillic-wght.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Alumni Sans";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/alumni-sans-latin-ext-wght.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alumni Sans";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/alumni-sans-latin-wght.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";font-style:normal;font-display:swap;font-weight:100 800;src:url(../fonts/martian-mono-cyrillic-wght.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Martian Mono";font-style:normal;font-display:swap;font-weight:100 800;src:url(../fonts/martian-mono-latin-ext-wght.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martian Mono";font-style:normal;font-display:swap;font-weight:100 800;src:url(../fonts/martian-mono-latin-wght.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-style:normal;font-display:swap;font-weight:400 900;src:url(../fonts/golos-text-cyrillic-wght.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-display:swap;font-weight:400 900;src:url(../fonts/golos-text-latin-ext-wght.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Golos Text";font-style:normal;font-display:swap;font-weight:400 900;src:url(../fonts/golos-text-latin-wght.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
  --steel:#C9CED2;
  --steel-2:#B9C0C5;
  --steel-3:#A1A9AF;
  --steel-hi:#EDF0F1;
  --steel-ink:#14171A;
  --steel-ink-2:#384045;
  --graphite:#17191B;
  --graphite-2:#2A2E31;
  --graphite-3:#3B4145;
  --screen:#121416;
  --screen-ink:#E9E8E2;
  --screen-ink-2:#A9B0B4;
  --paper:#F7F5EF;
  --ink:#1B1B1B;
  --ink-2:#47453F;
  --ink-3:#635F58;
  --amber:#F5A524;
  --red:#D7372B;
  --red-ink:#B42A1F;
  --red-lit:#FF8B7F;
  --tape:#1E2326;
  --tape-ink:#F1F1EB;

  --f-display:"Alumni Sans","Arial Narrow",sans-serif;
  --f-mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --f-text:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(16px,4vw,48px);
  --wrap:1344px;
  --hdr-h:64px;
  --tkt-w:clamp(330px,26vw,388px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-stamp:cubic-bezier(.2,.8,.2,1);

  --tex-brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0016 0.58' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23b)' opacity='0.6'/%3E%3C/svg%3E");
  --tex-speck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 1.35'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23s)' opacity='0.22'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  color-scheme:light;
  background:var(--steel);
  scrollbar-color:var(--graphite-2) var(--steel-2);
  scroll-padding-top:var(--hdr-h);
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;
  font-family:var(--f-text);
  font-size:17px;
  line-height:1.55;
  color:var(--steel-ink);
  background-color:var(--steel);
  background-image:var(--tex-brush),linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 16%,rgba(0,0,0,.035) 38%,rgba(255,255,255,.14) 61%,rgba(0,0,0,.03) 84%,rgba(255,255,255,.12) 100%);
  background-size:640px 640px,100% 1900px;
  background-blend-mode:overlay,normal;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
html.lang-pending body{visibility:hidden;animation:lang-failsafe 0s 1.4s forwards}
@keyframes lang-failsafe{to{visibility:visible}}
::selection{background:var(--graphite);color:var(--amber)}
input,textarea,button,select{font:inherit;color:inherit}
input,textarea{caret-color:var(--red-ink)}
a{color:inherit;text-underline-offset:.24em;text-decoration-thickness:1px}
img{max-width:100%;height:auto;display:block}
p,h1,h2,h3{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--graphite);outline-offset:3px;border-radius:2px}
main:focus,section:focus{outline:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--paper);color:var(--ink);font:600 15px/1 var(--f-text);padding:12px 14px;text-decoration:none;box-shadow:0 2px 4px rgba(0,0,0,.25),0 8px 18px -8px rgba(0,0,0,.3)}
.skip:focus{top:12px}

/* ---------- Label tape: flat, matte, cut ends, printed lettering ---------- */
.tape,.sig__tape{
  --tc:#23282B;
  --cut:.3em;
  font-family:var(--f-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#F1F0EA;
  background:
    linear-gradient(var(--tc),var(--tc)) center/calc(100% - 2*var(--cut) + 2px) 100% no-repeat,
    linear-gradient(to top right,transparent 49.5%,var(--tc) 50.5%) left/var(--cut) 100% no-repeat,
    linear-gradient(to bottom left,transparent 49.5%,var(--tc) 50.5%) right/var(--cut) 100% no-repeat;
  padding:.12em calc(var(--cut) + .28em) .06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  line-height:1;
  white-space:nowrap;
}
.tape--sign{--tc:#ECEAE2;color:#17191B;--cut:.24em}
.h1{font-size:clamp(42px,4.9vw,74px)}
.tape--xl{font-size:1em;font-weight:850;letter-spacing:.035em}
.h2{font-size:clamp(34px,4vw,58px)}
.tape--lg{font-size:1em;letter-spacing:.04em;white-space:normal}
.tape--md{font-size:clamp(26px,2.3vw,34px)}
.tape--plate{font-size:clamp(15px,1.25vw,19px);--cut:.36em}
.tape--sm{font-size:13px;letter-spacing:.07em;--cut:.4em}
.tape--brand{font-size:21px;font-weight:850;letter-spacing:.07em}

/* ---------- Panels, seams, station signatures ---------- */
.panel{
  position:relative;
  overflow-x:clip;
  padding-block:clamp(80px,9vw,128px);
  border-top:1px solid rgba(20,24,27,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.panel::before,.panel::after{
  content:"";position:absolute;top:10px;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#F6F7F8 0,#C2C8CC 45%,#7E868B 100%);
  box-shadow:inset 0 0 0 .8px rgba(60,66,70,.6),0 1px 1px rgba(0,0,0,.25);
}
.panel::before{left:12px}
.panel::after{right:12px}
.h2{margin:0;line-height:1.38}
.h2 .tape{line-height:1.36}
.sec-intro{font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:52ch;color:var(--steel-ink)}

.sig{position:absolute;top:0;right:clamp(28px,8vw,140px);z-index:6;margin:0;transform:translateY(-55%) rotate(-2.4deg);pointer-events:none;line-height:1}
.sig__tape{display:inline-block;font-size:14px;padding:.32em calc(var(--cut) + .45em) .22em;letter-spacing:.09em}
.sig__tape::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.55em;border-radius:50%;background:var(--amber);vertical-align:.12em;box-shadow:inset 0 -1px 1px rgba(0,0,0,.35)}
.sig--inline{top:-2px;right:28px}
.sig__tape--order{--tc:var(--paper);--cut:.01em;color:var(--ink);font:700 12px/1 var(--f-mono);letter-spacing:.06em;padding:.7em 1em .6em!important}
.sig__tape--order::before{display:none}
.sig--hero{top:auto;bottom:0;right:auto;left:clamp(28px,8vw,140px);transform:translateY(50%) rotate(1.8deg)}
.sig--foot{top:0}

/* ---------- Rail + clips ---------- */
.rail{position:relative;height:16px;pointer-events:none}
.rail__bar{position:absolute;inset:0;border-radius:3px;background:linear-gradient(180deg,#575E63 0,#2C3034 22%,#17191B 58%,#0D0E0F 84%,#2E3236 100%);box-shadow:0 1px 1px rgba(0,0,0,.3),0 10px 18px -8px rgba(0,0,0,.42)}
.rail__bar::after{content:"";position:absolute;left:0;right:0;top:2px;height:1px;background:rgba(255,255,255,.22)}
.rail__bracket{position:absolute;top:-11px;width:20px;height:38px;border-radius:3px;background:linear-gradient(90deg,#8C9499,#EEF0F1 38%,#B3BABF 62%,#7E868B);box-shadow:0 1px 1px rgba(0,0,0,.3),0 6px 10px -4px rgba(0,0,0,.35)}
.rail__bracket::after{content:"";position:absolute;left:50%;top:5px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#9aa2a7 70%);box-shadow:inset 0 0 0 .6px #5f676c}
.rail__bracket--l{left:clamp(8px,1.4vw,24px)}
.rail__bracket--r{right:clamp(8px,1.4vw,24px)}
.rail__idle{position:absolute;top:-6px;left:var(--x);width:26px;height:39px;transform-origin:50% 6px}
.hang{position:relative;transform-origin:50% 6px}
.hang__clip{position:absolute;z-index:3;top:-7px;left:50%;width:30px;height:45px;margin-left:-15px;transform-origin:50% 7px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}

/* ---------- Ticket (thermal paper) ---------- */
.ticket{position:relative;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)) drop-shadow(0 12px 14px rgba(20,24,27,.18))}
.ticket__paper{
  --zz:10px;
  position:relative;
  background-color:var(--paper);
  background-image:var(--tex-speck),linear-gradient(180deg,rgba(80,70,50,.04),rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(80,70,50,.05));
  background-size:220px 220px,100% 100%;
  color:var(--ink);
  font:400 12px/1.5 var(--f-mono);
  letter-spacing:.01em;
  padding:22px 20px 26px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--zz) 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--zz) 51% repeat-x;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--zz) 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--zz) 51% repeat-x;
  font-variant-numeric:tabular-nums;
}
.trow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-transform:uppercase;margin:0}
.trow--head{font-weight:700}
.trow--title{flex-direction:column;align-items:flex-start;gap:1px;font:700 15px/1.3 var(--f-mono);margin:8px 0}
.trow--foot{font-weight:700}
.t-strong{font-weight:700}
.t-dim{color:var(--ink-3)}
.t-flag{border:1px solid currentColor;padding:2px 5px 1px;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--ink-2);line-height:1.2}
.tperf{height:4px;margin:10px -6px;background:radial-gradient(circle,rgba(27,27,27,.38) 1.1px,transparent 1.5px) 0 50%/7px 4px repeat-x}
.bl{display:block}
.bl--ru{font-weight:300;color:var(--ink-2)}
html[lang="ru"] .bl--en{order:2;font-weight:300;color:var(--ink-2)}
html[lang="ru"] .bl--ru{order:1;font-weight:inherit;color:inherit}

.tlines{list-style:none;margin:0;padding:0}
.tline{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 0 6px;border-bottom:1px dotted rgba(27,27,27,.16)}
.tline:last-child{border-bottom:0}
.tline__q{color:var(--ink-3);font-weight:500}
.tline__n{display:flex;flex-direction:column;text-transform:uppercase;font-weight:600;line-height:1.3;min-width:0}
.tline__n .bl--ru{text-transform:none}
html[lang="ru"] .tline__n .bl--en{text-transform:none}

/* ---------- KDS status chips ---------- */
.chip{display:inline-grid;font:700 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;vertical-align:middle;align-self:center}
.chip>span{grid-area:1/1;padding:4px 6px 3px;border:1.5px solid;border-radius:2px;text-align:center;visibility:hidden}
.chip__q{color:var(--ink-2);border-style:dashed!important;border-color:rgba(27,27,27,.5)!important}
.chip__f{background:var(--red-ink);color:var(--paper);border-color:var(--red-ink)}
.chip__d{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(-2deg)}
[data-state="queued"] .chip__q,.chip[data-s="queued"] .chip__q,
[data-state="firing"] .chip__f,.chip[data-s="firing"] .chip__f,
[data-state="done"] .chip__d,.chip[data-s="done"] .chip__d,
[data-state="upcoming"] .chip__u{visibility:visible}
.chip__u{color:var(--ink-2);border-style:dotted!important;border-color:rgba(27,27,27,.55)!important}
.chip--held{display:inline-block;padding:4px 6px 3px;border:1.5px solid var(--red-ink);border-radius:2px;color:var(--red-ink);background:repeating-linear-gradient(-45deg,rgba(180,42,31,.14) 0 3px,transparent 3px 6px);font:700 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
html.motion [data-state="done"] .chip__d,html.motion .chip[data-s="done"] .chip__d{animation:stamp .42s var(--ease-stamp) both}
html.motion [data-state="firing"] .chip__f,html.motion .chip[data-s="firing"] .chip__f{animation:stamp-soft .3s var(--ease-out) both}
@keyframes stamp{0%{transform:rotate(-12deg) scale(1.5);opacity:0}55%{transform:rotate(-1deg) scale(.94);opacity:1}100%{transform:rotate(-2deg) scale(1);opacity:1}}
@keyframes stamp-soft{0%{transform:scale(1.25);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---------- Printer button (primary CTA) ---------- */
.pbtn{display:inline-block;text-decoration:none;color:var(--paper);-webkit-tap-highlight-color:transparent;border-radius:16px}
button.pbtn{appearance:none;border:0;background:none;padding:0;cursor:pointer}
.pbtn__bezel{display:flex;align-items:center;gap:14px;padding:7px 7px 7px 16px;border-radius:6px;background:#D2D7DA;border:1px solid #959DA2;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.pbtn__led{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:#F5A524;box-shadow:inset 0 -1px 1px rgba(0,0,0,.28),0 0 8px 1px rgba(245,165,36,.5);transition:box-shadow .25s,filter .25s}
.pbtn__key{display:block;padding:15px 22px 15px;border-radius:4px;background:linear-gradient(#202427,#202427) top/100% calc(100% - 3px) no-repeat,#0A0B0C;translate:0 0;transition:translate .12s var(--ease-out)}
.pbtn__label,.pbtn__busy{font:800 clamp(19px,1.45vw,23px)/1 var(--f-display);text-transform:uppercase;letter-spacing:.065em;color:var(--paper)}
.pbtn__busy{display:none}
.pbtn:hover .pbtn__led{filter:brightness(1.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,.28),0 0 12px 2px rgba(245,165,36,.65)}
.pbtn:hover .pbtn__key{translate:0 1px}
.pbtn:active .pbtn__key{translate:0 2px;background-size:100% 100%,auto}
.pbtn:focus-visible{outline:none}
.pbtn:focus-visible .pbtn__bezel{outline:2px solid var(--graphite);outline-offset:3px}
.pbtn.is-printing .pbtn__label{display:none}
.pbtn.is-printing .pbtn__busy{display:inline}
.pbtn.is-printing .pbtn__led{animation:led-blink .32s steps(2,jump-none) infinite}
.pbtn[disabled]{cursor:progress}
@keyframes led-blink{0%{opacity:1}100%{opacity:.25}}

.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--steel-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.32em}
.tlink svg{width:18px;height:18px;flex:0 0 auto;translate:0 0;transition:translate .25s var(--ease-out)}
.tlink:hover{text-decoration-thickness:2px}
.tlink:hover svg{translate:0 3px}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;height:var(--hdr-h);
  background-color:#CDD2D5;
  background-image:var(--tex-brush),linear-gradient(180deg,#D9DDE0,#C2C8CC);
  background-size:640px 640px,100% 100%;
  background-blend-mode:overlay,normal;
  border-bottom:1px solid rgba(20,24,27,.3);
  box-shadow:0 1px 0 rgba(255,255,255,.55),0 8px 16px -10px rgba(0,0,0,.35);
}
.hdr__in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);height:100%}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand__desc{font:500 12px/1.25 var(--f-text);color:var(--steel-ink-2);max-width:23ch}
.tabs{position:relative;flex:1 1 auto;align-self:stretch;display:flex;justify-content:center;min-width:0}
.tabs__rod{position:absolute;left:0;right:0;top:13px;height:6px;border-radius:3px;background:linear-gradient(180deg,#5A6166,#202326 58%,#34393D);box-shadow:0 1px 1px rgba(0,0,0,.3)}
.tabs__list{list-style:none;margin:0;padding:0;display:flex;gap:8px;position:relative}
.tabs__list li{position:relative}
.tabs__list li::before{content:"";position:absolute;z-index:2;top:9px;left:50%;width:14px;height:12px;margin-left:-7px;border-radius:2px 2px 3px 3px;background:linear-gradient(90deg,#868E93,#F0F2F3 40%,#A8AFB4 70%,#7A8287);box-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none}
.tab{
  --zz:6px;
  display:block;margin-top:12px;padding:10px 11px 12px;
  font:800 15px/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  background:var(--paper);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--zz) 51% repeat-x,linear-gradient(#000 0 0) top/100% 51% no-repeat;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--zz) 51% repeat-x,linear-gradient(#000 0 0) top/100% 51% no-repeat;
  transform-origin:50% 0;rotate:0deg;
  transition:rotate .5s var(--ease-out),translate .25s var(--ease-out),background-color .2s,color .2s;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.18));
}
.tab:hover{rotate:3deg}
.tab[aria-current="true"]{background:var(--graphite);color:var(--paper);translate:0 2px}
.tab:focus-visible{outline:none;background:var(--graphite);color:var(--paper)}

.keys{display:flex;gap:5px;padding:4px;border-radius:10px;background:linear-gradient(180deg,#AFB6BB,#D6DADD);box-shadow:inset 0 1px 2px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.6);flex:0 0 auto}
.key{appearance:none;border:0;display:flex;align-items:center;gap:6px;padding:8px 10px 7px;border-radius:7px;cursor:pointer;font:800 15px/1 var(--f-display);letter-spacing:.08em;color:var(--paper);background:linear-gradient(180deg,#3E4347,#1C1F22);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 1px rgba(0,0,0,.55),0 3px 6px rgba(0,0,0,.22);translate:0 0;transition:translate .12s var(--ease-out),box-shadow .12s var(--ease-out)}
.key__led{width:6px;height:6px;border-radius:50%;background:#54462F;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.key[aria-pressed="true"]{translate:0 1.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 .5px 0 rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.2)}
.key[aria-pressed="true"] .key__led{background:var(--amber);box-shadow:0 0 6px 1px rgba(245,165,36,.75)}
.key:hover .key__led{background:#8A6A33}
.key[aria-pressed="true"]:hover .key__led{background:var(--amber)}

.bell{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:6px 14px 6px 6px;border-radius:999px;text-decoration:none;color:var(--steel-ink);font:800 17px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(180deg,#F1F3F4,#BFC6CA);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.25),0 6px 12px -6px rgba(0,0,0,.4)}
.bell__icon{width:30px;height:30px;padding:5px;border-radius:50%;color:var(--paper);background:radial-gradient(circle at 40% 30%,#4A5055,#17191B 75%);transform-origin:50% 80%}
.bell:hover .bell__icon{animation:ding .7s var(--ease-out)}
@keyframes ding{0%{rotate:0deg}18%{rotate:-16deg}36%{rotate:12deg}54%{rotate:-7deg}72%{rotate:3deg}100%{rotate:0deg}}

/* ---------- 1. Hero ---------- */
.hero{
  --rail-y:clamp(66px,8.5vh,88px);
  --overhang:clamp(64px,7.4vw,120px);
  --heat:1;
  position:relative;
  overflow-x:clip;
  min-height:calc(100svh - var(--hdr-h));
  display:flex;flex-direction:column;
  padding-top:var(--rail-y);
}
.rail--hero{position:absolute;left:0;right:0;top:var(--rail-y);z-index:2}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) var(--tkt-w) var(--overhang);column-gap:clamp(24px,3vw,48px);align-items:start;flex:1 0 auto}
.hero__copy{grid-column:1;padding-top:clamp(28px,5vh,60px);padding-bottom:28px;position:relative;z-index:3}
.h1{margin:0;font-weight:inherit;line-height:1}
.h1__line{display:block;margin-bottom:.06em}
.h1 .tape{line-height:1.27}
.h1__line:nth-child(1){rotate:-.7deg;transform-origin:0 50%}
.h1__line:nth-child(2){rotate:.45deg;transform-origin:0 50%;margin-left:.4em}
.h1__line:nth-child(3){rotate:-.3deg;transform-origin:0 50%}
.lead{font-size:clamp(18px,1.35vw,20px);line-height:1.5;max-width:50ch;margin:clamp(18px,2.8vh,30px) 0 clamp(22px,3.2vh,32px);color:var(--steel-ink)}
.hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px 32px}
.hero__ticketcol{grid-column:2/4;position:relative;z-index:4}
.rail--local{display:none}
.printer{position:absolute;right:0;bottom:100%;width:calc(var(--tkt-w) + 40px);height:calc(var(--rail-y) - 12px);max-height:60px;z-index:5}
.printer__body{position:absolute;inset:0 0 6px 0;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#3C4246 0%,#25292C 52%,#16181A 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 3px rgba(0,0,0,.25),0 10px 18px -10px rgba(0,0,0,.5);display:flex;align-items:center;gap:12px;padding:0 16px}
.printer__tape{font-size:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.5);background-color:#2E3438}
.printer__led{width:9px;height:9px;border-radius:50%;background:#4A3A20;box-shadow:inset 0 1px 1px rgba(0,0,0,.6);margin-left:auto;transition:background-color .2s,box-shadow .2s}
.printer.is-on .printer__led,.printer--form .printer__led.is-on{background:var(--amber);box-shadow:0 0 8px 2px rgba(245,165,36,.7)}
.printer__vent{width:48px;height:12px;background:repeating-linear-gradient(90deg,#0B0C0D 0 2px,transparent 2px 5px);opacity:.7;border-radius:2px}
.printer__slot{position:absolute;left:20px;right:20px;bottom:0;height:8px;border-radius:0 0 3px 3px;background:linear-gradient(180deg,#0A0B0C,#2A2E31);box-shadow:inset 0 2px 2px rgba(0,0,0,.6)}
.printer__stub{position:absolute;left:34px;right:34px;top:100%;height:7px;background:var(--paper);-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/8px 100% repeat-x;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/8px 100% repeat-x;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.printer__mount{position:absolute;bottom:-14px;width:14px;height:22px;border-radius:2px;background:linear-gradient(90deg,#868E93,#EEF0F1 40%,#A9B0B5 70%,#7A8287);box-shadow:0 1px 2px rgba(0,0,0,.3);z-index:-1}
.printer__mount--l{left:8px}.printer__mount--r{right:8px}
.hero .hang{width:var(--tkt-w);margin-top:-2px}
.ticket--hero .ticket__paper{padding:24px 22px 28px;font-size:11.5px}
.ticket--hero .tline .bl--ru,html[lang="ru"] .ticket--hero .tline .bl--en{font-size:11px}
.ticket--hero .trow--title{font-size:16px}
.ticket--hero .tline{padding:4px 0 5px}

/* lamp-lit station shelf */
.shelf{position:relative;margin-top:auto}
.shelf--hero{padding:0 var(--pad);z-index:1}
.heat{position:relative;max-width:var(--wrap);height:20px;margin:0 auto}
.heat__housing{position:absolute;inset:0;border-radius:4px;background:linear-gradient(180deg,#43494D,#1F2225 55%,#121416);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 3px rgba(0,0,0,.3),0 10px 16px -10px rgba(0,0,0,.4)}
.heat__element{position:absolute;left:14px;right:14px;bottom:3px;height:6px;border-radius:3px;background:#3E3020;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.heat__element--on{background:linear-gradient(180deg,#FFE3A8,#F5A524 48%,#C9700A);box-shadow:0 2px 10px 1px rgba(245,165,36,.75);opacity:var(--heat)}
.heat__pool{position:absolute;left:-4%;right:-4%;top:100%;height:190px;pointer-events:none;background:radial-gradient(56% 100% at 50% 0,rgba(255,176,46,.6),rgba(255,170,40,.22) 46%,rgba(255,170,40,0) 78%);mix-blend-mode:overlay;opacity:var(--heat)}
.plates{list-style:none;margin:0 auto;padding:26px 0 16px;max-width:var(--wrap);display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;position:relative}
.plates li{line-height:1.5}
.shelf__edge{display:block;height:14px;border-radius:2px;background:linear-gradient(180deg,#F4F6F7 0,#D3D8DB 30%,#A2AAB0 72%,#6E767B 100%);box-shadow:0 1px 0 rgba(0,0,0,.2),0 10px 14px -8px rgba(0,0,0,.4)}
.shelf--hero .shelf__edge{margin-inline:calc(-1*var(--pad))}

/* ---------- 2. Package / receipt ---------- */
.pkg__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:start}
.pkg__head{position:sticky;top:calc(var(--hdr-h) + 40px)}
.pkg__head .sec-intro{margin-top:24px}
.pkg__receipt{position:relative;width:min(100%,500px);justify-self:center;padding-top:20px}
.pkg__clip{position:absolute;z-index:3;top:0;left:50%;width:34px;height:51px;margin-left:-17px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.ticket--receipt{rotate:1.1deg;transform-origin:50% 0}
.ticket--receipt .ticket__paper{padding:34px 28px 34px;font-size:12px}
.rc{list-style:none;margin:6px 0;padding:0}
.rc__item{padding:14px 0 12px}
.rc__item+.rc__item{border-top:1px dotted rgba(27,27,27,.2)}
.rc__line{display:flex;align-items:baseline;gap:8px;margin:0;text-transform:uppercase;font-weight:700;font-size:13.5px}
.rc__t{white-space:nowrap}
.rc__dots{flex:1 1 auto;min-width:2ch;height:1px;border-bottom:2px dotted rgba(27,27,27,.5);translate:0 -3px}
.rc__q{white-space:nowrap;font-variant-numeric:tabular-nums;margin:0}
.rc__d{margin:6px 0 0;font:400 12px/1.6 var(--f-mono);color:var(--ink-2);max-width:46ch}
.rc__line--total{font-size:12px;padding:4px 0}
.rc__line--total .rc__q{white-space:normal;text-align:right}

/* ---------- 3. Stations ---------- */
.stations__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.line{position:relative}
.line__stage,.line__strip{display:none}
.line__stations{list-style:none;margin:0 auto;padding:0 var(--pad);max-width:calc(var(--wrap) + 2*var(--pad))}
.stn{display:grid;grid-template-columns:minmax(250px,3.3fr) minmax(0,4.4fr) minmax(0,4.3fr);gap:10px 36px;align-items:center;padding:18px 0;border-top:1px solid rgba(20,24,27,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.stn__head{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px}
.stn__lamp{display:none}
.stn__no{font:700 15px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--steel-ink-2);min-width:2.2ch;font-variant-numeric:tabular-nums}
.stn__plate{margin:0;font-size:clamp(15px,1.25vw,19px);line-height:1.55}
.stn__plate .tape{font-size:1em}
.stn__leads{display:flex;flex-wrap:wrap;gap:8px}
.stn__body{display:contents}
.stn__title{display:none}
.stn__does{font-size:16.5px;line-height:1.45}
.stn__gate{display:flex;align-items:center;gap:10px;font:600 15px/1.35 var(--f-text)}
.stn__gate-k{flex:0 0 auto;padding:.32em .45em .26em;border:1.5px solid rgba(20,24,27,.6);font:800 13px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--steel-ink)}
.stn__gate-v{flex:1 1 auto}
.stn__mark{display:none}
.stamp{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border:2px dashed rgba(20,24,27,.45);border-radius:3px;color:var(--steel-ink)}
.stamp svg{width:18px;height:18px;visibility:hidden}
[data-state="done"] .stamp{border:2px solid var(--steel-ink);transform:rotate(-4deg)}
[data-state="done"] .stamp svg{visibility:visible}
html.motion [data-state="done"] .stamp svg{animation:stamp .45s var(--ease-stamp) both}
.stn .chip{margin-left:auto}
.stn .chip>span{border-color:var(--steel-ink)}
.stn .chip__q{color:var(--steel-ink-2);border-color:rgba(20,24,27,.55)!important}
.stn .chip__d{background:var(--steel-ink);border-color:var(--steel-ink)}

/* the pass: the heaviest row in the crew list */
.stn--pass{grid-template-columns:minmax(250px,3.3fr) minmax(0,4.6fr) minmax(0,4.1fr);grid-template-areas:"head does mark" "head gate mark";align-items:start;margin-top:26px;padding:30px 0 34px;border-top:3px solid var(--steel-ink);border-bottom:1px solid rgba(20,24,27,.22)}
.stn--pass .stn__head{grid-area:head;flex-direction:column;align-items:flex-start;gap:12px}
.stn--pass .stn__head .chip{margin-left:0;align-self:flex-start}
html:not(.line-pinned) .stn--pass .stn__no{display:none}
.stn--pass .stn__does{grid-area:does;font-size:clamp(18px,1.4vw,21px);font-weight:500}
.stn--pass .stn__gate{grid-area:gate}
.stn--pass .stn__mark{grid-area:mark;display:block;justify-self:center;align-self:center;color:var(--steel-ink)}
.tape--lead{font-size:clamp(30px,3.1vw,46px);font-weight:900;letter-spacing:.04em;--cut:.2em}
.initials{display:block;width:120px;height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-6deg)}
.initials circle{fill:currentColor;stroke:none}
.initials path{stroke-dasharray:1;stroke-dashoffset:0}
.stn__mark .initials{width:clamp(130px,11vw,170px)}
.stn--pass:not([data-state="done"]) .stn__mark{visibility:hidden}
html.motion .stn--pass[data-state="done"] .stn__mark .initials path{animation:sign 1.1s cubic-bezier(.45,.05,.3,1) both}
html.motion .stn--pass[data-state="done"] .stn__mark .initials path:nth-child(2){animation-delay:.18s}
html.motion .stn--pass[data-state="done"] .stn__mark .initials path:nth-child(3){animation-delay:.42s}
html.motion .stn--pass[data-state="done"] .stn__mark .initials path:nth-child(4){animation-delay:.7s}
@keyframes sign{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* pinned line (desktop, motion): the ORDER #0001 ticket itself rides the line */
html.line-pinned .line{
  --rail-top:250px;--detail-x:0px;--detail-top:300px;--detail-w:clamp(300px,24vw,360px);
  height:100vh;height:100svh;min-height:660px;overflow:hidden;padding-top:calc(var(--hdr-h) + 4px);
}
html.line-pinned .line__stage{display:block;position:absolute;inset:0;pointer-events:none}
html.line-pinned .line__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:linear-gradient(180deg,#F4F6F7 0,#D3D8DB 28%,#A2AAB0 70%,#6E767B 100%);box-shadow:0 -1px 0 rgba(0,0,0,.18)}
html.line-pinned .lampbar{position:absolute;left:0;right:0;top:calc(var(--hdr-h) + 4px);height:8px;background:linear-gradient(180deg,#4A5055,#1E2124 60%,#2B2F33);box-shadow:0 2px 3px rgba(0,0,0,.25)}
html.line-pinned .rail--line{position:absolute;left:0;right:0;top:var(--rail-top)}
html.line-pinned .rider{position:absolute;top:var(--rail-top);left:0;width:var(--tkt-w);transform-origin:50% 6px;will-change:transform;z-index:3}
.rider .hang__clip{top:-7px}
.rider .ticket--hero .ticket__paper{padding:20px 20px 24px}
.rider .ticket--hero .tline{padding:3px 0 4px}
.punch{display:inline-flex;gap:3px}
.punch i{width:7px;height:9px;border:1.5px solid var(--ink);border-radius:1px}
.punch i.on{background:var(--ink)}
html.line-pinned .line__stations{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:0 6px;max-width:none;padding:0 var(--pad)}
html.line-pinned .stn{display:block;padding:0;border:0;box-shadow:none;margin:0}
html.line-pinned .stn__head{flex-direction:column;flex-wrap:nowrap;align-items:center;text-align:center;gap:5px}
html.line-pinned .stn__lamp{--bulb:#3D3427;display:block;position:relative;width:64px;height:40px;margin-bottom:2px}
html.line-pinned .stn__lamp svg{width:100%;height:100%;display:block}
html.line-pinned .stn__glow{position:absolute;z-index:5;left:50%;top:30px;width:620px;height:calc(100svh - 130px);margin-left:-310px;background:linear-gradient(180deg,rgba(255,178,50,.7),rgba(255,170,40,.32) 38%,rgba(255,170,40,.1) 75%,rgba(255,170,40,0));clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);-webkit-mask:radial-gradient(56% 100% at 50% 0,#000 35%,transparent 100%);mask:radial-gradient(56% 100% at 50% 0,#000 35%,transparent 100%);mix-blend-mode:overlay;opacity:0;transition:opacity .35s var(--ease-out);pointer-events:none}
html.line-pinned .stn[data-state="firing"] .stn__lamp{--bulb:url(#g-bulb)}
html.line-pinned .stn[data-state="firing"] .stn__glow{opacity:1}
html.line-pinned .stn__no{font-size:13px}
html.line-pinned .stn__plate{font-size:clamp(12px,1.02vw,15px);line-height:1.6}
html.line-pinned .stn__plate .tape{letter-spacing:.025em;--cut:.3em;padding-inline:calc(var(--cut) + .18em)}
html.line-pinned .stn .chip{margin:3px 0 0;letter-spacing:.02em}
html.line-pinned .stn__leads{flex-direction:column;align-items:center;gap:4px}
html.line-pinned .tape--lead{font-size:clamp(14px,1.2vw,18px)}
html.line-pinned .stn--pass .stn__head .chip{margin-top:3px;align-self:center}
html.line-pinned .stn[data-state="queued"] .stn__plate .tape{opacity:.8}
html.line-pinned .stn__body{
  display:block;position:absolute;z-index:4;left:var(--detail-x);top:var(--detail-top);width:var(--detail-w);
  text-align:left;opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s;
}
html.line-pinned .stn.is-active .stn__body{opacity:1;visibility:visible;transition:opacity .2s;animation:feed .45s steps(5,end) both}
@keyframes feed{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
html.line-pinned .stn__title{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;font:850 clamp(30px,2.5vw,40px)/.95 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:var(--steel-ink);white-space:nowrap}
html.line-pinned .stn__title-no{font-size:.5em;letter-spacing:.06em;color:var(--steel-ink-2)}
html.line-pinned .stn__title--pass{display:block;font-size:clamp(46px,4.2vw,64px);font-weight:900;white-space:normal}
html.line-pinned .stn__does{font-size:clamp(18px,1.4vw,21px);line-height:1.42}
html.line-pinned .stn__gate{margin-top:16px;gap:12px;font-size:16px}
html.line-pinned .stn__gate-v{flex:0 1 auto}
html.line-pinned .stamp{width:40px;height:40px;border-width:2.5px}
html.line-pinned .stamp svg{width:28px;height:28px}
html.line-pinned .stn__mark{display:block;margin-top:14px;color:var(--steel-ink)}
/* the pass: its detail takes the left half of the frame */
html.line-pinned .stn--pass .stn__body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title title" "does mark" "gate mark";column-gap:clamp(32px,4vw,64px);row-gap:0;align-items:start;width:var(--pass-w,640px)}
html.line-pinned .stn--pass .stn__title--pass{grid-area:title;font-size:clamp(64px,6.6vw,108px);line-height:.9;margin-bottom:22px}
html.line-pinned .stn--pass .stn__does{grid-area:does;font-size:clamp(20px,1.6vw,24px);max-width:30ch}
html.line-pinned .stn--pass .stn__gate{grid-area:gate;font-size:18px}
html.line-pinned .stn--pass .stn__mark{grid-area:mark;align-self:center;margin:0}
html.line-pinned .stn--pass .stn__mark .initials{width:clamp(200px,17vw,270px);stroke-width:2.6}

/* hero/rider ticket: the pass row, the heaviest line on the ticket */
.tpass{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k sign" "names sign";align-items:end;column-gap:12px;padding:4px 0 6px;text-transform:uppercase}
.tpass__k{grid-area:k;color:var(--ink-3);letter-spacing:.08em}
.tpass__names{grid-area:names;font-weight:800;font-size:1.32em;line-height:1.15;letter-spacing:.02em}
.tpass__sign{grid-area:sign;position:relative;width:118px;height:48px;border-bottom:1.5px solid var(--ink)}
.tpass__line{position:absolute;left:2px;bottom:3px;font-size:11px;color:var(--ink-3);letter-spacing:.06em}
.tpass__sign .initials{position:absolute;left:4px;bottom:-4px;width:108px;color:var(--ink);visibility:hidden}
[data-pass="signed"] .tpass__sign .initials{visibility:visible}
[data-pass="signed"] .tpass__line{visibility:hidden}
[data-pass="checking"] .tpass__sign{border-bottom-style:dashed}
html.motion [data-pass="signed"] .tpass__sign .initials path{animation:sign 1.1s cubic-bezier(.45,.05,.3,1) both}
html.motion [data-pass="signed"] .tpass__sign .initials path:nth-child(2){animation-delay:.18s}
html.motion [data-pass="signed"] .tpass__sign .initials path:nth-child(3){animation-delay:.42s}
html.motion [data-pass="signed"] .tpass__sign .initials path:nth-child(4){animation-delay:.7s}

/* phone strip: the ticket strip rides on an opaque steel band */
html.line-strip .line__strip{
  display:block;position:sticky;top:0;z-index:8;margin:0 0 8px;padding:10px var(--pad) 12px;
  background-color:var(--steel);background-image:var(--tex-brush);background-size:640px 640px;background-blend-mode:overlay;
  border-bottom:1px solid rgba(20,24,27,.28);box-shadow:0 1px 0 rgba(255,255,255,.5),0 10px 14px -10px rgba(0,0,0,.35);
}
@media (min-width:1024px){html.line-strip .line__strip{top:var(--hdr-h)}}
.strip__paper{
  --zz:8px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:12px 14px 16px;
  background:var(--paper);color:var(--ink);font:600 11px/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--zz) 51% repeat-x,linear-gradient(#000 0 0) top/100% 51% no-repeat;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--zz) 51% repeat-x,linear-gradient(#000 0 0) top/100% 51% no-repeat;
}
.strip__order{font-weight:700}
.strip__no{color:var(--ink-3)}
.strip__name{flex:1 1 auto;font-weight:700;font-size:12px;min-width:0}
.strip__paper .punch{flex:1 0 100%}
.strip__paper .punch i{width:auto;flex:1;height:6px}

/* ---------- 4. Days (KDS board) ---------- */
.days__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.kds{background:var(--screen);background-image:linear-gradient(180deg,#1C1F22,#111315);color:var(--screen-ink);border:10px solid #B1B8BD;border-radius:18px;box-shadow:inset 0 0 0 1px #000,inset 0 2px 0 rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.6),0 2px 3px rgba(0,0,0,.25),0 30px 44px -22px rgba(0,0,0,.5);overflow:hidden}
.kds :focus-visible{outline-color:var(--paper)}
.kds__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 22px;font:600 11px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--screen-ink-2);border-bottom:1px solid #2A2F33}
.kds__flag{border:1px solid currentColor;padding:3px 6px 2px}
.kds__rows{list-style:none;margin:0;padding:0}
.kds__row{position:relative;display:grid;grid-template-columns:clamp(110px,12vw,170px) minmax(0,1fr) 130px;gap:12px clamp(20px,3vw,40px);align-items:center;padding:20px 22px;border-bottom:1px solid #24292C}
.kds__row:last-child{border-bottom:0}
.kds__day{display:flex;flex-direction:column;gap:6px;font-family:var(--f-mono)}
.kds__dk{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--screen-ink-2)}
.kds__dn{font:600 clamp(28px,2.6vw,38px)/1 var(--f-mono);color:var(--amber);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kds__dn--word{font-size:clamp(20px,1.8vw,26px);letter-spacing:.02em;text-transform:uppercase}
.kds__t{font:600 clamp(19px,1.5vw,22px)/1.25 var(--f-text);color:var(--screen-ink)}
.kds__d{margin-top:6px;color:#C2C7CA;font-size:16px;line-height:1.5;max-width:66ch}
.chip--kds{justify-self:end}
.kds .chip__q,.kds .chip__u{color:#C2C7CA;border-color:#6F777C!important}
.kds .chip__f{background:var(--red-ink);border-color:#E0473A;color:#FFF7F2}
.kds .chip__d{background:var(--screen-ink);border-color:var(--screen-ink);color:var(--ink)}
.kds__row--held{background:repeating-linear-gradient(-45deg,rgba(215,55,43,.2) 0 12px,rgba(215,55,43,.09) 12px 24px);border-top:1px solid rgba(255,120,100,.45);border-bottom:1px solid rgba(255,120,100,.45);padding-block:22px}
.kds__day--held{color:var(--red-lit);flex-direction:row;align-items:center}
.kds__day--held svg{width:30px;height:30px;padding:4px;border:2px solid var(--red-lit);border-radius:50%}
.kds__day--held .kds__dk{color:var(--red-lit)}
.kds__row--held .kds__t{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.kds__row--held .chip--held{color:var(--red-lit);border-color:var(--red-lit);background:repeating-linear-gradient(-45deg,rgba(255,139,127,.18) 0 3px,transparent 3px 6px);font-size:11px}
.kds__d--held{color:var(--screen-ink)}
.held{display:flex;flex-wrap:wrap;gap:8px 12px;margin:14px 0 0}
.held div{display:flex;align-items:center;gap:8px;padding:6px 10px 5px;border:1px dashed rgba(255,139,127,.6);font:600 11px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.held dt{color:var(--red-lit)}
.held dd{margin:0;color:var(--screen-ink)}
.kds__holdbar{display:none}

/* ---------- 5. The pass (four plates) ---------- */
.pass__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,4vw,56px)}
.pass__counter{position:relative}
.lamps{position:absolute;left:0;right:0;top:0;height:10px}
.lamps__bar{position:absolute;left:-1%;right:-1%;top:0;height:9px;border-radius:3px;background:linear-gradient(180deg,#50575C,#1D2023 60%,#2C3034);box-shadow:0 2px 3px rgba(0,0,0,.25)}
.dishes{list-style:none;margin:0;padding:0 0 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);position:relative}
.dish{position:relative;min-width:0;padding-top:70px}
.dish__lamp{position:absolute;top:6px;left:50%;width:96px;height:60px;margin-left:-48px;pointer-events:none}
.dish__lamp svg{width:100%;height:100%;display:block}
.dish__lamp::after{content:"";position:absolute;left:50%;top:48px;width:min(30vw,380px);height:300px;translate:-50% 0;background:radial-gradient(50% 60% at 50% 0,rgba(255,176,46,.7),rgba(255,170,40,.2) 50%,rgba(255,170,40,0) 78%);mix-blend-mode:overlay}
.dish__link{display:block;text-decoration:none;color:inherit;border-radius:8px}
.dish__frame{display:block;padding:8px;border-radius:7px;background:linear-gradient(180deg,#F2F4F5 0%,#C8CED2 50%,#A9B1B6 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.25),0 2px 3px rgba(0,0,0,.2),0 18px 26px -14px rgba(0,0,0,.45);translate:0 0;transition:translate .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.dish__frame img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2px;background:var(--graphite);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.dish__meta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px}
.dish__meta .tape{line-height:1}
.dish__desc{font:500 14px/1.35 var(--f-text);color:var(--steel-ink-2)}
.dish__go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:800 16px/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;text-decoration:underline;text-underline-offset:.35em}
.dish__go svg{width:16px;height:16px;translate:0 0;transition:translate .3s var(--ease-out)}
.dish__link:hover .dish__frame{translate:0 -5px;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.25),0 6px 8px rgba(0,0,0,.16),0 26px 34px -16px rgba(0,0,0,.5)}
.dish__link:hover .dish__go svg{translate:4px 0}
.dish__link:focus-visible{outline:none}
.dish__link:focus-visible .dish__frame{outline:2px solid var(--graphite);outline-offset:4px}
.dish__here{position:absolute;left:20px;top:calc(70px + 20px);z-index:2;pointer-events:none}
.stamp-word{display:inline-block;padding:7px 10px 5px;border:3px solid var(--ink);border-radius:4px;background:rgba(247,245,239,.94);color:var(--ink);font:850 clamp(14px,1.2vw,18px)/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transform:rotate(-7deg);box-shadow:0 2px 3px rgba(0,0,0,.2),0 8px 14px -8px rgba(0,0,0,.35)}
.dish--here .dish__frame{background:linear-gradient(180deg,#F7EBD2 0%,#D8CCB4 50%,#B4AA98 100%)}
.pass__counter .shelf__edge{margin-top:0}

/* ---------- 6. Orders served (cases) ---------- */
.orders__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end}
.case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(56px,7vw,104px)}
.case--flip .case__shots{order:2}
.case__shots{position:relative;padding:0 6% 12% 0}
.case--flip .case__shots{padding:0 0 12% 6%}
.frame{margin:0;position:relative;padding:12px;border-radius:9px;background:linear-gradient(180deg,#3C4246,#1C1F22 40%,#111315);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 3px rgba(0,0,0,.25),0 30px 40px -24px rgba(0,0,0,.55)}
.frame img{border-radius:3px;width:100%}
.frame--desk img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.frame__screw{position:absolute;width:8px;height:8px}
.frame__screw--tl{top:2px;left:2px}.frame__screw--tr{top:2px;right:2px}.frame__screw--bl{bottom:2px;left:2px}.frame__screw--br{bottom:2px;right:2px}
.frame--phone{position:absolute;right:0;bottom:0;width:23%;padding:6px;border-radius:20px}
.case--flip .frame--phone{right:auto;left:0}
.frame--phone img{border-radius:14px;aspect-ratio:780/1688;object-fit:cover}
.case__name{margin:0 0 16px;line-height:1.4;font-size:clamp(26px,2.3vw,34px)}
.case__name .tape{font-size:1em}
.case__name .tape{text-transform:none;letter-spacing:.04em}
.case__desc{font-size:clamp(17px,1.3vw,19px);line-height:1.55;max-width:44ch;margin:0 0 34px}
.spiked{position:relative;padding-top:34px;max-width:390px}
.spike--rod{position:absolute;left:50%;top:0;bottom:-26px;width:4px;margin-left:-2px;background:linear-gradient(90deg,#727A80,#F1F3F4 45%,#8C9499);clip-path:polygon(50% 0,100% 9px,100% 100%,0 100%,0 9px);z-index:0}
.spike--rod::after{content:"";position:absolute;bottom:0;left:50%}
.spiked::after{content:"";position:absolute;left:50%;bottom:-34px;width:96px;height:12px;margin-left:-48px;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#F2F4F5,#AEB5BA 55%,#6C7479 100%);box-shadow:0 4px 8px -2px rgba(0,0,0,.4)}
.ticket--case{z-index:1;rotate:-2.2deg;transform-origin:50% 0}
.spiked--b .ticket--case{rotate:1.8deg}
.ticket--case .ticket__paper{padding:30px 22px 28px;font-size:11.5px}
.spiked__hole{position:absolute;top:10px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:radial-gradient(circle,#3A3F43 0 45%,rgba(27,27,27,.25) 55%,transparent 72%)}
.clines{list-style:none;margin:0;padding:0}
.clines li{display:grid;grid-template-columns:2.2em 1fr;gap:6px;padding:4px 0;text-transform:uppercase;font-weight:600}
.figs__label{font-size:11px;letter-spacing:.02em;color:var(--ink-2);margin:0 0 6px;font-weight:600}
.figs{margin:0}
.figs .rc__line{font-size:12.5px;padding:3px 0}
.figs dt,.figs dd{margin:0}
.tkt-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);text-decoration:underline;text-underline-offset:.34em;margin-top:4px}
.tkt-link svg{width:16px;height:16px;flex:0 0 auto;translate:0 0;transition:translate .25s var(--ease-out)}
.tkt-link:hover{text-decoration-thickness:2px}
.tkt-link:hover svg{translate:2px -2px}
.tkt-link:focus-visible{outline-color:var(--ink)}

/* ---------- 7/8. Wall: house rules card + rating plate ---------- */
.wall{padding-block:clamp(96px,12vw,170px)}
.wall__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(48px,7vw,120px);align-items:center}
.rules,.terms{position:relative}
.card{position:relative;rotate:-1deg;color:var(--ink);background-color:var(--paper);background-image:linear-gradient(112deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.62) 38%,rgba(255,255,255,0) 50%),var(--tex-speck);background-size:100% 100%,220px 220px;border-radius:12px;padding:clamp(34px,4.4vw,60px) clamp(26px,4vw,56px) clamp(28px,3.4vw,44px)}
.card::before{content:"";position:absolute;inset:-9px;z-index:-1;border-radius:18px;background:linear-gradient(140deg,rgba(255,255,255,.55),rgba(225,232,236,.35));box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 1px 2px rgba(0,0,0,.22),0 22px 34px -18px rgba(0,0,0,.42)}
.card__tape{position:absolute;top:-22px;width:118px;height:34px;background-color:rgba(232,224,203,.82);background-image:var(--tex-speck);box-shadow:0 1px 2px rgba(0,0,0,.14);clip-path:polygon(0 8%,6% 0,12% 10%,18% 2%,82% 2%,88% 10%,94% 0,100% 8%,100% 92%,94% 100%,88% 90%,82% 98%,18% 98%,12% 90%,6% 100%,0 92%)}
.card__tape--l{left:28px;rotate:-9deg}
.card__tape--r{right:28px;rotate:7deg}
.card__title{font:900 clamp(52px,5.4vw,84px)/.88 var(--f-display);text-transform:uppercase;letter-spacing:.01em;margin:0 0 22px;color:var(--ink)}
.card__rules{list-style:none;margin:0;padding:0}
.card__rules li{position:relative;font:600 clamp(19px,1.75vw,25px)/1.3 var(--f-text);padding:15px 0 15px 34px;border-top:1.5px dashed rgba(27,27,27,.28)}
.card__rules li::before{content:"";position:absolute;left:2px;top:calc(15px + .65em);width:13px;height:13px;margin-top:-6.5px;background:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.card__foot{margin-top:18px;font:500 13px/1.4 var(--f-text);color:var(--ink-3)}
.rplate{position:relative;padding:44px 40px 34px;border-radius:10px;color:#22282C;background-color:#D4D9DC;background-image:var(--tex-brush),linear-gradient(180deg,rgba(255,255,255,.45),rgba(0,0,0,.06));background-size:640px 640px,100% 100%;background-blend-mode:overlay,normal;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.22),0 1px 1px rgba(0,0,0,.25),0 16px 26px -14px rgba(0,0,0,.42)}
.rplate::before{content:"";position:absolute;inset:18px;border:1.5px solid rgba(34,40,44,.5);border-radius:4px;box-shadow:0 1px 0 rgba(255,255,255,.65),inset 0 1px 0 rgba(255,255,255,.4);pointer-events:none}
.rplate__rivet{position:absolute;width:12px;height:12px}
.rplate__rivet--tl{top:6px;left:6px}.rplate__rivet--tr{top:6px;right:6px}.rplate__rivet--bl{bottom:6px;left:6px}.rplate__rivet--br{bottom:6px;right:6px}
.rplate__title{position:relative;font:900 clamp(46px,4.4vw,70px)/.9 var(--f-display);text-transform:uppercase;letter-spacing:.02em;text-shadow:0 1px 0 rgba(255,255,255,.75),0 -1px 0 rgba(0,0,0,.25)}
.rplate__sub{position:relative;font:600 15px/1.4 var(--f-text);margin:10px 0 22px;color:#2E3539}
.rplate__rows{position:relative;margin:0}
.rplate__row{display:grid;grid-template-columns:minmax(8ch,auto) 1fr;gap:6px 18px;padding:14px 0;border-top:1px solid rgba(34,40,44,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.rplate__row dt{font:800 15px/1.3 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:#2E3539;padding-top:2px}
.rplate__row dd{margin:0;display:flex;flex-direction:column;gap:3px;font-size:15.5px;line-height:1.45}
.rplate__v{font:850 19px/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.04em}

/* ---------- 9. Order form (a ticket being filled in) ---------- */
.order{padding-bottom:clamp(96px,11vw,160px)}
.order__rig{position:relative;--rig-y:72px}
.rail--order{position:absolute;left:0;right:calc(max(var(--pad),(100% - var(--wrap)) / 2) + 80px);top:calc(var(--rig-y) + 18px);z-index:2}
.rail--dock{display:none}
.order__grid{display:grid;grid-template-columns:minmax(0,4.2fr) 256px minmax(0,6fr);grid-template-areas:"copy dock machine" "status dock machine";grid-template-rows:auto 1fr;column-gap:clamp(24px,3vw,48px);align-items:start;padding-top:var(--rig-y)}
.order__copy{grid-area:copy;padding-top:52px}
.order__copy .sec-intro{margin-top:24px}
.order__dock{grid-area:dock;position:relative;min-height:250px}
.dock__hang{position:absolute;top:18px;left:3px;width:250px;z-index:4}
.dock__hang[hidden]{display:none}
.dock__example[hidden]{display:none}
/* one machine: a single graphite body, a paper slot under its head, the key on its base */
.order__machine{grid-area:machine;position:relative;z-index:3;width:100%;max-width:640px;justify-self:end;padding:64px 22px 0;border-radius:12px;background:#24292C;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 1px rgba(0,0,0,.3),0 26px 38px -22px rgba(0,0,0,.5)}
.printer.printer--form{position:absolute;top:0;left:0;right:0;bottom:auto;width:auto;height:64px;max-height:none;translate:none}
.printer--form .printer__body{inset:0 0 12px 0;background:none;box-shadow:none;padding:0 22px}
.printer--form .printer__slot{left:16px;right:16px;bottom:2px;height:10px;border-radius:3px;background:#08090A;box-shadow:inset 0 2px 3px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.07)}
.oform{display:flex;flex-direction:column;align-items:stretch}
.ticket--form{width:100%;margin-top:-6px}
.ticket--form .ticket__paper{padding:30px clamp(18px,3vw,32px) 34px;font-size:12px}
.printer__base{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 -22px;padding:18px 22px 20px}
.printer__base::after{content:"";width:64px;height:14px;flex:0 0 auto;background:repeating-linear-gradient(90deg,#0B0C0D 0 2px,transparent 2px 5px);opacity:.75}
.ticket--form .trow{flex-wrap:wrap}
.ticket--form output{text-transform:uppercase;word-break:break-word}
.field{border:0;margin:0;padding:16px 0 4px;min-width:0}
.field__l{display:block;padding:0;margin:0 0 6px;font:700 11px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.field__req,.field__opt{font-weight:400;color:var(--ink-3);letter-spacing:.04em}
.field__req::before,.field__opt::before{content:"· "}
.field__i{display:block;width:100%;font:500 16px/1.4 var(--f-mono);color:var(--ink);background:transparent;border:0;border-bottom:2px dotted rgba(27,27,27,.5);border-radius:0;padding:8px 4px 6px;outline:none;transition:background-color .2s,border-color .2s}
.field__i:hover{background:rgba(27,27,27,.03)}
.field__i:focus-visible{border-bottom:2px solid var(--ink);background:rgba(27,27,27,.045);outline:2px solid var(--ink);outline-offset:3px}
.field__i[aria-invalid="true"]{border-bottom:2px solid var(--red-ink);background:rgba(180,42,31,.06)}
.field__i--area{resize:vertical;min-height:88px;line-height:28px;padding-top:2px;border-bottom:0;background-image:repeating-linear-gradient(180deg,transparent 0 27px,rgba(27,27,27,.22) 27px 28px);background-attachment:local}
.field__e{margin:8px 0 0;font:600 11.5px/1.5 var(--f-mono);color:var(--red-ink);display:none}
.field__e.is-on{display:flex;gap:8px;align-items:baseline}
.field__e.is-on::before{content:"";flex:0 0 auto;width:8px;height:8px;background:var(--red-ink);translate:0 -1px}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;margin-top:4px}
.opt{position:relative;display:flex;align-items:center;gap:10px;padding:8px 0;font:600 12.5px/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.02em;cursor:pointer}
.opt input{position:absolute;opacity:0;width:18px;height:18px;margin:0;left:0}
.opt__box{flex:0 0 auto;width:18px;height:18px;border:2px solid var(--ink);border-radius:2px;background:transparent;transition:background-color .15s,box-shadow .15s}
.opt:hover .opt__box{background:rgba(27,27,27,.08)}
.opt input:checked+.opt__box{background:var(--ink);box-shadow:inset 0 0 0 3px var(--paper)}
.opt input:focus-visible+.opt__box{outline:2px solid var(--ink);outline-offset:3px}
.heldbox{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:14px 0 2px;padding:10px 12px;border:1.5px dashed var(--red-ink);color:var(--red-ink);font:700 11px/1.4 var(--f-mono);letter-spacing:.04em;text-transform:uppercase}
.heldbox[hidden]{display:none}
.heldbox:focus{outline:2px solid var(--red-ink);outline-offset:3px}
.tperf--tear{margin-top:24px;margin-bottom:0}
.ticket--in .ticket__paper{padding:22px 16px 26px;font-size:11px}
.orderin__line{margin:4px 0 0;text-transform:uppercase;font-weight:600;overflow-wrap:anywhere}
.orderin__stamp{display:inline-block;margin-top:14px;padding:6px 10px 4px;border:3px solid var(--ink);border-radius:3px;font:900 24px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-6deg)}
html.motion .order__dock.is-filled .orderin__stamp{animation:stamp .5s var(--ease-stamp) 1.3s both}
.status{grid-area:status;margin-top:28px;max-width:46ch}
.status:empty{display:none}
.status__ok{font-size:18px;line-height:1.5}
.status__ok strong{display:block;margin-bottom:6px;font:850 26px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.status__again{margin-top:14px;appearance:none;border:0;background:none;padding:0;cursor:pointer;font:800 16px/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;text-decoration:underline;text-underline-offset:.35em;color:var(--steel-ink)}
.status__err{padding:14px 16px;background:var(--paper);color:var(--red-ink);font:600 12.5px/1.55 var(--f-mono);box-shadow:0 1px 1px rgba(0,0,0,.2),0 10px 16px -10px rgba(0,0,0,.35)}
.status__err a{color:var(--red-ink)}

/* ---------- 10. Footer: the counter edge ---------- */
.foot{position:relative;overflow-x:clip;padding:64px 0 44px;background-color:#B6BDC2;background-image:var(--tex-brush),linear-gradient(180deg,rgba(0,0,0,.05),rgba(255,255,255,.08));background-size:640px 640px,100% 100%;background-blend-mode:overlay,normal}
.foot__edge{position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(180deg,#F5F7F8 0,#D7DCDF 26%,#A9B1B6 62%,#6A7277 92%,#4E555A 100%);box-shadow:0 1px 0 rgba(0,0,0,.3),0 12px 18px -10px rgba(0,0,0,.45)}
.foot__in{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:32px clamp(32px,5vw,72px);align-items:start;padding-top:24px}
.foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.foot__brand .tape--brand{font-size:clamp(28px,3vw,40px)}
.foot__desc{font-size:14px;color:var(--steel-ink-2);font-weight:500}
.foot__k{font:800 15px/1.3 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--steel-ink-2);margin-bottom:12px}
.foot__versions ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fplate{display:inline-flex;align-items:center;gap:8px;padding:9px 12px 8px;border-radius:4px;font:800 16px/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--steel-ink);background:linear-gradient(180deg,#EEF1F2,#C4CACE);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.22),0 1px 1px rgba(0,0,0,.25),0 6px 10px -6px rgba(0,0,0,.35);translate:0 0;transition:translate .25s var(--ease-out)}
a.fplate:hover{translate:0 -2px}
a.fplate:hover{text-decoration:underline;text-underline-offset:.3em}
.fplate--here{background:linear-gradient(180deg,#30353A,#17191B);color:var(--paper);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.3)}
.fplate__here{font:500 13px/1 var(--f-text);color:#C9CED1;text-transform:none;letter-spacing:0}
.foot__end{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.foot__c{font:500 13px/1.3 var(--f-text);color:var(--steel-ink-2)}

/* ---------- Responsive ---------- */
@media (min-width:900px) and (max-height:820px){
  .hero{--rail-y:60px}
  .hero__copy{padding-top:22px;padding-bottom:14px}
  .h1{font-size:clamp(42px,4.5vw,68px)}
  .h1 .tape{line-height:1.22}
  .lead{margin:14px 0 18px}
  .plates{padding:20px 0 12px}
  .ticket--hero .ticket__paper{padding:20px 20px 22px;font-size:11px}
  .ticket--hero .tline{padding:2px 0}
  .ticket--hero .trow--title{font-size:15px;margin:4px 0}
  .ticket--hero .tperf{margin:7px -6px}
}
@media (max-width:1180px){
  .brand__desc{display:none}
  .stn{grid-template-columns:minmax(220px,3.2fr) minmax(0,4.6fr) minmax(0,4.2fr)}
}
@media (max-width:1023px){
  .hdr{position:relative;height:auto}
  .hdr__in{flex-wrap:wrap;row-gap:0;padding-top:10px}
  .brand{flex-direction:column;align-items:flex-start;gap:5px;margin-right:auto}
  .brand__desc{display:block;max-width:none;font-size:11.5px}
  .tabs{order:3;flex:1 0 100%;height:52px;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:none;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs__rod{display:none}
  .tabs__list::after{content:"";position:absolute;z-index:-1;left:calc(-1*var(--pad));right:-8px;top:13px;height:6px;border-radius:3px;background:linear-gradient(180deg,#5A6166,#202326 58%,#34393D)}
  html{scroll-padding-top:0}
  .pkg__head{position:static}
  .stations__head,.days__head,.pass__head,.orders__head{grid-template-columns:1fr}
  .stn{grid-template-columns:1fr 1fr;gap:12px 28px}
  .stn__head{grid-column:1/-1}
  .stn--pass{grid-template-columns:1fr auto;grid-template-areas:"head head" "does mark" "gate mark"}
  .dishes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .lamps{display:none}
  .dish__lamp::before{content:"";position:absolute;top:-6px;left:-36px;right:-36px;height:7px;border-radius:3px;background:linear-gradient(180deg,#50575C,#1D2023 60%,#2C3034)}
  .case{grid-template-columns:1fr}
  .case--flip .case__shots{order:0;padding:0 6% 12% 0}
  .case--flip .frame--phone{left:auto;right:0}
  .spiked{margin-inline:auto}
  .wall__grid{grid-template-columns:1fr;gap:72px}
  .order__rig{--rig-y:0px}
  .rail--order{display:none}
  .order__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "machine" "dock" "status";grid-template-rows:auto;padding-top:0}
  .order__copy{padding-top:0}
  .order__machine{justify-self:center;max-width:620px;margin-top:40px}
  .order__dock{margin-top:56px;min-height:236px}
  .rail--dock{display:block;position:absolute;left:calc(-1*var(--pad));right:calc(-1*var(--pad));top:18px}
  .dock__hang{left:50%;margin-left:-125px}
  .status{margin-top:8px}
  .foot__in{grid-template-columns:1fr}
  .foot__end{align-items:flex-start}
}
@media (max-width:899px){
  .hero{--rail-y:0px;--tkt-w:min(100%,400px);min-height:0;padding-top:0}
  .rail--hero{display:none}
  .hero__grid{grid-template-columns:1fr}
  .hero__copy{padding-top:28px}
  .lead{margin:20px 0 24px}
  .hero__actions{gap:18px 28px}
  .hero__ticketcol{grid-column:1;padding-top:70px;margin-top:8px}
  .rail--local{display:block;position:absolute;left:calc(-1*var(--pad));right:calc(-1*var(--pad));top:70px}
  .printer{bottom:auto;top:12px;left:50%;right:auto;translate:-50% 0;width:min(calc(100% - 0px),440px);height:58px}
  .hero .hang{margin:-2px auto 0}
  .shelf--hero{margin-top:48px}
  .pkg__grid{grid-template-columns:1fr}
  .h1__line:nth-child(2){margin-left:0}
}
@media (max-width:719px){
  body{font-size:16.5px}
  .panel{padding-block:clamp(72px,18vw,96px)}
  .stn{grid-template-columns:1fr;gap:10px}
  .stn__gate{font-size:14px}
  .stn--pass{grid-template-columns:1fr;grid-template-areas:"head" "does" "gate" "mark";gap:14px}
  .stn--pass .stn__mark{justify-self:start}
  .order__machine{padding-inline:14px}
  .printer__base{margin-inline:-14px;padding-inline:14px}
  .printer__base{justify-content:center}
  .printer__base::after{display:none}
  .tabs__list{gap:5px}
  .tab{padding:10px 8px 12px;font-size:14px;letter-spacing:.05em}
  .kds{border-width:7px;border-radius:14px}
  .kds__row{grid-template-columns:1fr auto;padding:18px 16px}
  .kds__day{flex-direction:row;align-items:baseline;gap:10px}
  .kds__txt{grid-column:1/-1;grid-row:2}
  .chip--kds{grid-row:1;grid-column:2}
  .kds__row--held .kds__holdbar{display:none}
  .dishes{grid-template-columns:1fr;row-gap:44px}
  .dish__lamp::after{width:86vw}
  .opts{grid-template-columns:1fr}
  .rplate{padding:40px 28px 30px}
  .rplate__row{grid-template-columns:1fr}
  .card__rules li{padding-left:30px}
  .tape--brand{font-size:18px}
  .bell{padding:5px 10px 5px 5px;font-size:15px}
  .bell__icon{width:28px;height:28px}
  .key{padding:7px 8px 6px}
  .sig{right:20px}
}
@media (max-width:420px){
  .hdr__in{column-gap:8px}
  .bell span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .key{padding:7px 7px 6px;font-size:14px;gap:5px}
  .keys{gap:4px;padding:3px}
  .tape--brand{font-size:16px}
  .brand{max-width:calc(100% - 150px)}
  .h1{font-size:clamp(34px,10vw,42px)}
  .bell{padding:5px}
  .pbtn__key{padding:14px 16px 12px}
  .pbtn__bezel{gap:10px;padding:7px 7px 7px 12px}
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Hero print: content stays visible unless JS arms the printer (failsafe reveals it). */
html.motion:not(.print-armed) .hero [data-paper]{animation:print-failsafe 0s 2.6s both;clip-path:inset(0 0 100% 0)}
@keyframes print-failsafe{to{clip-path:inset(0 0 0 0)}}
html.print-armed .hero [data-paper]{animation:none}
.chip__c{color:var(--ink);border-color:var(--ink)}
.chip__p{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(-2deg)}
.chip[data-s="checking"] .chip__c,.chip[data-s="passed"] .chip__p{visibility:visible}
html.motion .chip[data-s="passed"] .chip__p{animation:stamp .42s var(--ease-stamp) both}

/* Optical centring of label tape on the cap height where supported */
@supports (text-box:trim-both cap alphabetic){
  .tape,.sig__tape{text-box:trim-both cap alphabetic;padding-top:.3em;padding-bottom:.28em}
  .tape--xl{padding-top:.25em;padding-bottom:.23em}
  .tape--lg{padding-top:.25em;padding-bottom:.23em}
  .tape--plate{padding-top:.36em;padding-bottom:.34em}
  .tape--sm{padding-top:.42em;padding-bottom:.4em}
  .tape--brand{padding-top:.32em;padding-bottom:.3em}
  .sig__tape{padding-top:.46em;padding-bottom:.44em}
}

/* nav strip: fade cue while more tabs sit past the edge */
.tabs.has-more{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.printer__base .pbtn:focus-visible .pbtn__bezel{outline-color:var(--paper)}