/* Left Luggage. Station enamel, pasteboard tickets, rubber stamps.
   Every value below comes from a token; add new ones here first. */
@font-face{font-family:"Big Shoulders Display";src:url(fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url(fonts/big-shoulders-display-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Spectral";src:url(fonts/spectral-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Spectral";src:url(fonts/spectral-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Spectral";src:url(fonts/spectral-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  /* Color: enamel green dominates; red is for stamps and the one primary action; brass is focus only */
  --color-bg:#123024;
  --color-bg-deep:#0b2018;
  --color-surface:#efe4c8;
  --color-surface-2:#e4d6b2;
  --color-text:#f3ead2;
  --color-ink:#1d1b16;
  --color-muted:#a9b9a6;
  --color-muted-ink:#5d5644;
  --color-accent:#cf3b22;
  --color-accent-ink:#a82c17;
  --color-focus:#f2b636;
  --color-success:#2f6b3f;
  --color-warning:#94600c;
  --color-danger:#a8281a;
  --color-rule:rgba(239,228,200,.22);

  /* Typography */
  --font-display:"Big Shoulders Display","Oswald","Arial Narrow",Impact,sans-serif-condensed,sans-serif;
  --font-body:"Spectral","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --text-xs:.78rem;   --leading-xs:1.35;
  --text-sm:.92rem;   --leading-sm:1.45;
  --text-base:1.08rem;--leading-base:1.6;
  --text-lg:1.4rem;   --leading-lg:1.35;
  --text-xl:clamp(2.2rem,4.2vw,3.4rem); --leading-xl:.98;
  --text-2xl:clamp(4.4rem,13.5vw,12.5rem); --leading-2xl:.8;
  --track-sign:.02em; --track-label:.16em;

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem;
  --space-12:3rem; --space-16:4rem; --space-24:6rem;
  --gutter:clamp(1rem,4vw,3.5rem);

  /* Radius and Shadow */
  --radius-sm:3px; --radius-md:8px; --radius-lg:22px;
  --shadow-sm:0 1px 0 rgba(0,0,0,.35);
  --shadow-md:0 10px 0 -4px rgba(0,0,0,.28), 0 16px 30px rgba(0,0,0,.28);
  --shadow-lg:0 28px 50px rgba(0,0,0,.42);

  /* Motion */
  --duration-fast:140ms; --duration-base:320ms; --duration-slow:900ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* Ticket perforation */
  --perf:9px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font:400 var(--text-base)/var(--leading-base) var(--font-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Grain: an SVG noise layer that sits over the enamel, never over text contrast */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.2;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:1}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
code,kbd,.mono{font-family:var(--font-mono);font-size:.88em}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-sm)}
.skip{position:absolute;left:var(--space-4);top:-4rem;background:var(--color-focus);color:var(--color-ink);padding:var(--space-2) var(--space-4);z-index:10;font-family:var(--font-mono)}
.skip:focus{top:var(--space-4)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Prototype ribbon ---------- */
.ribbon{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) var(--gutter);
  background:var(--color-ink);color:var(--color-surface);font:500 var(--text-xs)/var(--leading-xs) var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.ribbon b{color:var(--color-focus);font-weight:500}

/* ---------- Header: platform board ---------- */
.board{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-6);padding:var(--space-4) var(--gutter);border-bottom:1px solid var(--color-rule)}
.mark{display:inline-flex;align-items:center;gap:var(--space-3);text-decoration:none;font:800 1.5rem/1 var(--font-display);text-transform:uppercase;letter-spacing:var(--track-sign)}
.mark svg{width:38px;height:38px}
.board nav ul{display:flex;gap:var(--space-1);list-style:none;margin:0;padding:0;justify-content:center}
.board nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-4);text-decoration:none;
  font:600 1.05rem/1 var(--font-display);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--color-muted);
  border-radius:var(--radius-sm);transition:color var(--duration-fast),background var(--duration-fast)}
.board nav a:hover{color:var(--color-text);background:rgba(239,228,200,.07)}
.board nav a:active{background:rgba(239,228,200,.14)}
.board nav a[aria-current="true"]{color:var(--color-text);box-shadow:inset 0 -3px 0 var(--color-accent)}
.clock{font:500 var(--text-sm)/1 var(--font-mono);color:var(--color-muted);white-space:nowrap}
.clock b{color:var(--color-text);font-weight:500}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr);gap:var(--space-8) var(--space-12);
  padding:var(--space-12) var(--gutter) 0;align-items:start}
.sign{position:relative;background:var(--color-bg-deep);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-8) var(--space-6);
  box-shadow:inset 0 0 0 6px var(--color-bg-deep),inset 0 0 0 9px var(--color-surface),var(--shadow-lg)}
.sign::after{content:"";position:absolute;inset:18px;border-radius:14px;pointer-events:none;
  background:radial-gradient(120% 60% at 20% 0%,rgba(255,255,255,.08),transparent 60%)}
.sign-kicker{display:flex;justify-content:space-between;align-items:center;font:600 var(--text-sm)/1 var(--font-display);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-muted);margin:0 0 var(--space-4)}
.sign h1{margin:0;font:800 var(--text-2xl)/var(--leading-2xl) var(--font-display);text-transform:uppercase;letter-spacing:-.005em;color:var(--color-surface)}
.sign h1 .line{display:block}
.sign h1 .line:nth-child(2){padding-left:.42em}
.sign h1 .arrow{display:inline-block;width:.62em;height:.62em;vertical-align:.02em;margin-left:.06em}
.lede{max-width:34ch;font-size:var(--text-lg);line-height:var(--leading-lg);margin:var(--space-8) 0 var(--space-4)}
.lede em{font-style:italic;color:var(--color-focus)}
.hero-copy p.small{color:var(--color-muted);max-width:52ch;margin:0}
.install{margin-top:var(--space-8);max-width:640px}
.install-label{font:600 var(--text-sm)/1 var(--font-display);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-muted);margin:0 0 var(--space-2)}

/* Command line with copy button */
.cmd{display:flex;align-items:stretch;border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-bg-deep);overflow:hidden}
.cmd code{flex:1;padding:var(--space-4);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-surface);overflow-x:auto;white-space:nowrap}
.cmd code .p{color:var(--color-muted);user-select:none}
.cmd.on-paper{background:var(--color-surface-2);border-color:rgba(29,27,22,.25)}
.cmd.on-paper code{color:var(--color-ink)}
.cmd.on-paper code .p{color:var(--color-muted-ink)}

/* Buttons: default, hover, active, focus, disabled, loading, error */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-6);
  border:0;border-radius:var(--radius-sm);cursor:pointer;font:800 1.05rem/1 var(--font-display);letter-spacing:var(--track-label);text-transform:uppercase;
  transition:transform var(--duration-fast) var(--ease-out),background var(--duration-fast),color var(--duration-fast),box-shadow var(--duration-fast)}
.btn:active{transform:translateY(2px)}
.btn-copy{border-radius:0;background:var(--color-surface);color:var(--color-ink);min-width:7.5rem}
.btn-copy:hover{background:var(--color-focus)}
.cmd.on-paper .btn-copy{background:var(--color-ink);color:var(--color-surface)}
.cmd.on-paper .btn-copy:hover{background:var(--color-accent-ink)}
.btn[data-state="done"]{background:var(--color-success);color:var(--color-surface)}
.btn[data-state="error"]{background:var(--color-danger);color:var(--color-surface)}
.btn[data-state="loading"]{color:transparent;pointer-events:none}
.btn[data-state="loading"]::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:3px solid currentColor;border-color:var(--color-ink) transparent var(--color-ink) transparent;animation:spin .7s linear infinite}
.btn-stamp{background:var(--color-accent);color:var(--color-surface);box-shadow:0 4px 0 var(--color-accent-ink)}
.btn-stamp:hover{background:#dd4a2f}
.btn-stamp:active{box-shadow:0 1px 0 var(--color-accent-ink);transform:translateY(3px)}
.btn[aria-disabled="true"],.btn:disabled{background:repeating-linear-gradient(-45deg,#b9ad8e 0 8px,#c8bc9c 8px 16px);color:var(--color-muted-ink);box-shadow:none;cursor:not-allowed}
.btn[aria-disabled="true"]:active{transform:none}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn-ghost:hover{background:rgba(239,228,200,.1)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Signature: the claim ticket ---------- */
.ticket-wrap{position:relative;filter:drop-shadow(0 22px 26px rgba(0,0,0,.45));margin-bottom:calc(-1 * var(--space-24));z-index:3}
.ticket{position:relative;background:var(--color-surface);color:var(--color-ink);padding:var(--space-6) calc(var(--space-6) + var(--perf));
  transform:rotate(1.6deg);transform-origin:50% 0;
  -webkit-mask:radial-gradient(circle at 0 50%,transparent var(--perf),#000 calc(var(--perf) + .5px)) left/51% 26px repeat-y,
               radial-gradient(circle at 100% 50%,transparent var(--perf),#000 calc(var(--perf) + .5px)) right/51% 26px repeat-y;
          mask:radial-gradient(circle at 0 50%,transparent var(--perf),#000 calc(var(--perf) + .5px)) left/51% 26px repeat-y,
               radial-gradient(circle at 100% 50%,transparent var(--perf),#000 calc(var(--perf) + .5px)) right/51% 26px repeat-y;
  background-image:linear-gradient(transparent 0 0),radial-gradient(140% 90% at 100% 0,rgba(148,96,12,.12),transparent 55%)}
.ticket-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--color-ink);padding-bottom:var(--space-2);margin-bottom:var(--space-4)}
.ticket-head h2{margin:0;font:800 1.9rem/1 var(--font-display);text-transform:uppercase;letter-spacing:var(--track-sign)}
.ticket-no{font:500 var(--text-sm)/1 var(--font-mono);color:var(--color-accent-ink)}
.ticket p.hint{font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-muted-ink);margin:0 0 var(--space-4)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field label{display:block;font:600 var(--text-sm)/1.1 var(--font-display);text-transform:uppercase;letter-spacing:var(--track-label);margin-bottom:var(--space-2)}
.field .unit{position:relative}
.field input{width:100%;min-height:48px;padding:var(--space-2) 3.2rem var(--space-2) var(--space-3);border:2px solid var(--color-ink);border-radius:var(--radius-sm);
  background:#fbf6e6;color:var(--color-ink);font:500 1.35rem/1 var(--font-mono);transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.field input::placeholder{color:#a79d83}
.field input:hover{border-color:var(--color-accent-ink)}
.field input:focus-visible{outline:none;box-shadow:0 0 0 4px var(--color-focus)}
.field input[aria-invalid="true"]{border-color:var(--color-danger);background:#fbe9e2}
.field input:disabled{background:var(--color-surface-2);border-style:dashed;color:var(--color-muted-ink)}
.field .unit::after{content:"GB";position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);font:500 var(--text-sm)/1 var(--font-mono);color:var(--color-muted-ink)}
.msg{min-height:1.4em;margin:var(--space-3) 0 0;font-size:var(--text-sm);line-height:var(--leading-sm)}
.msg[data-tone="error"]{color:var(--color-danger);font-weight:600}
.msg[data-tone="ok"]{color:var(--color-success)}

/* Disk gauge: branded data viz. Ink = stays, red hatch = moving, paper = free */
.gauge{margin:var(--space-6) 0 var(--space-2)}
.gauge-row{display:grid;grid-template-columns:4.2rem 1fr;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.gauge-row span{font:600 var(--text-xs)/1 var(--font-display);text-transform:uppercase;letter-spacing:var(--track-label)}
.bar{position:relative;height:26px;border:2px solid var(--color-ink);background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(29,27,22,.18) calc(10% - 1px) 10%);overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;left:0;transition:width var(--duration-base) var(--ease-out),left var(--duration-base) var(--ease-out)}
.bar .keep{background:var(--color-ink)}
.bar .move{background:repeating-linear-gradient(-45deg,var(--color-accent) 0 6px,var(--color-accent-ink) 6px 12px)}
.gauge-legend{display:flex;justify-content:space-between;font:400 var(--text-xs)/1.3 var(--font-mono);color:var(--color-muted-ink)}
.gauge[data-empty="true"] .bar{background:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(29,27,22,.12) 7px 14px)}

.verdict{display:grid;grid-template-columns:1fr auto;gap:var(--space-4);align-items:center;border-top:2px dashed var(--color-ink);margin-top:var(--space-4);padding-top:var(--space-4);min-height:7.5rem}
.verdict-text strong{display:block;font:800 1.7rem/1 var(--font-display);text-transform:uppercase}
.verdict-text span{font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-muted-ink)}
.stamp{width:7.2rem;height:7.2rem;border-radius:50%;display:grid;place-items:center;text-align:center;color:var(--color-accent);
  border:4px double var(--color-accent);font:800 1.15rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.06em;
  transform:rotate(-14deg) scale(1);opacity:.9;mix-blend-mode:multiply;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.25'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.25'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E")}
.stamp small{display:block;font:500 .7rem/1.2 var(--font-mono);letter-spacing:0;margin-top:.2rem}
.stamp[data-empty="true"]{color:#b5aa8d;border-color:#b5aa8d;border-style:dashed}
.stamp.thump{animation:thump var(--duration-base) var(--ease-spring)}
@keyframes thump{0%{transform:rotate(-24deg) scale(1.7);opacity:0}60%{opacity:.95}100%{transform:rotate(-14deg) scale(1);opacity:.9}}
.ticket-foot{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:var(--space-4)}
.ticket-foot .cmd{flex:1 1 100%}
.not-live{font:500 var(--text-xs)/1.3 var(--font-mono);color:var(--color-danger);text-transform:uppercase;letter-spacing:.06em}
.checkout-note{flex:1 1 100%;margin:0;font-size:var(--text-sm);color:var(--color-danger)}
.checkout-note:empty{display:none}
.stub{display:flex;justify-content:space-between;border-top:2px dashed var(--color-muted-ink);margin:var(--space-6) calc(-1 * var(--space-6)) 0;padding:var(--space-3) var(--space-6) 0;
  font:500 var(--text-xs)/1 var(--font-mono);color:var(--color-muted-ink);text-transform:uppercase;letter-spacing:.08em}

/* ---------- Sections ---------- */
section{padding:var(--space-24) var(--gutter) var(--space-16)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-8);align-items:end;margin-bottom:var(--space-12)}
.sec-head .num{font:800 clamp(5rem,12vw,10rem)/.78 var(--font-display);color:transparent;-webkit-text-stroke:2px var(--color-surface);margin:0}
.sec-head h2{margin:0 0 var(--space-3);font:800 var(--text-xl)/var(--leading-xl) var(--font-display);text-transform:uppercase}
.sec-head p{margin:0;color:var(--color-muted);max-width:54ch}

/* How it works: departures board */
.how{background:var(--color-bg-deep);padding-top:calc(var(--space-24) + var(--space-16))}
.departures{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.departures caption{text-align:left;font:600 var(--text-sm)/1 var(--font-display);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-muted);padding-bottom:var(--space-3)}
.departures th{font:600 var(--text-sm)/1 var(--font-display);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-focus);text-align:left;padding:var(--space-3) var(--space-4);border-bottom:2px solid var(--color-focus)}
.departures td{padding:var(--space-6) var(--space-4);border-bottom:1px solid var(--color-rule);vertical-align:top}
.departures td:first-child{font:800 3rem/1 var(--font-display);color:var(--color-accent);width:5rem}
.departures td.cmdcell code{display:inline-block;background:rgba(239,228,200,.08);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--color-surface);white-space:nowrap}
.departures td.what{color:var(--color-muted);max-width:44ch}
.departures td.what b{color:var(--color-text);font-weight:600}
.departures tr{transition:background var(--duration-fast)}
.departures tbody tr:hover{background:rgba(239,228,200,.04)}

/* Bots panel: grid break, sticks out past the right-hand gutter */
.bots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-8);margin-top:var(--space-16);margin-right:calc(-1 * var(--gutter));
  background:var(--color-surface);color:var(--color-ink);padding:var(--space-8) var(--gutter) var(--space-8) var(--space-8);border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.bots h3{margin:0 0 var(--space-3);font:800 2.2rem/1 var(--font-display);text-transform:uppercase}
.bots p{margin:0 0 var(--space-4)}
.bots pre{margin:0;background:var(--color-ink);color:var(--color-surface);padding:var(--space-6);border-radius:var(--radius-md);overflow-x:auto;font:400 var(--text-sm)/1.55 var(--font-mono)}
.bots pre .k{color:var(--color-focus)} .bots pre .c{color:#9a9481}
.bots .links{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.bots .links a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-4);border:2px solid var(--color-ink);border-radius:var(--radius-sm);font:500 var(--text-sm)/1 var(--font-mono);text-decoration:none}
.bots .links a:hover{background:var(--color-ink);color:var(--color-surface)}

/* Plans: tariff board with dotted leaders */
.tariff{list-style:none;margin:0;padding:0;border-top:3px solid var(--color-surface)}
.tariff li{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr auto auto;gap:var(--space-4) var(--space-6);align-items:center;padding:var(--space-6) 0;border-bottom:1px solid var(--color-rule);
  transition:background var(--duration-fast)}
.tariff li[data-picked="true"]{background:linear-gradient(90deg,rgba(207,59,34,.22),transparent 70%);box-shadow:inset 6px 0 0 var(--color-accent);padding-left:var(--space-4)}
.tariff .t-name{font:800 2.6rem/1 var(--font-display);text-transform:uppercase}
.tariff .t-name small{display:block;font:500 var(--text-sm)/1.2 var(--font-mono);color:var(--color-focus);margin-top:var(--space-1);letter-spacing:0}
.tariff .t-for{color:var(--color-muted);display:flex;align-items:center;gap:var(--space-4)}
.tariff .t-for::after{content:"";flex:1;min-width:2rem;border-bottom:3px dotted var(--color-rule)}
.tariff .t-price{font:800 3.4rem/1 var(--font-display);white-space:nowrap}
.tariff .t-price span{font:500 var(--text-sm)/1 var(--font-mono);color:var(--color-muted);margin-left:.3rem}
.tariff .skeleton{height:5.2rem;background:linear-gradient(90deg,rgba(239,228,200,.05),rgba(239,228,200,.14),rgba(239,228,200,.05));background-size:200% 100%;animation:shimmer 1.2s linear infinite;display:block;border-bottom:1px solid var(--color-rule)}
@keyframes shimmer{to{background-position:-200% 0}}
.tariff-status{margin:var(--space-4) 0 0;font:400 var(--text-sm)/1.4 var(--font-mono);color:var(--color-muted)}
.tariff-status[data-tone="error"]{color:var(--color-surface);background:var(--color-danger);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);display:flex;gap:var(--space-4);align-items:center;justify-content:space-between;flex-wrap:wrap}
.tariff-status .btn{min-height:40px;background:var(--color-surface);color:var(--color-ink)}
.fine{margin-top:var(--space-8);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);color:var(--color-muted);font-size:var(--text-sm);line-height:var(--leading-sm)}
.fine b{display:block;color:var(--color-text);font:600 1.1rem/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-1)}

/* FAQ: lost property index cards */
.faq{background:var(--color-bg-deep)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-6)}
.cards details{background:var(--color-surface);color:var(--color-ink);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);
  background-image:repeating-linear-gradient(transparent 0 27px,rgba(29,27,22,.12) 27px 28px);background-position:0 3.6rem}
.cards details:nth-child(odd){transform:rotate(-.4deg)} .cards details:nth-child(even){transform:rotate(.35deg)}
.cards summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-4);align-items:center;min-height:56px;padding:var(--space-3) var(--space-6);
  font:800 1.3rem/1.1 var(--font-display);text-transform:uppercase;letter-spacing:.02em;border-bottom:2px solid var(--color-accent)}
.cards summary::-webkit-details-marker{display:none}
.cards summary::after{content:"+";font:500 1.4rem/1 var(--font-mono);color:var(--color-accent);transition:transform var(--duration-fast)}
.cards details[open] summary::after{transform:rotate(45deg)}
.cards summary:hover{background:var(--color-surface-2)}
.cards .a{padding:var(--space-4) var(--space-6) var(--space-6);line-height:28px}
.cards .a p{margin:0}

/* Footer */
footer{padding:var(--space-12) var(--gutter);display:grid;grid-template-columns:1fr auto;gap:var(--space-6);align-items:end;border-top:1px solid var(--color-rule)}
footer .big{font:800 clamp(3rem,9vw,7rem)/.85 var(--font-display);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--color-muted);margin:0}
footer p{margin:0;color:var(--color-muted);font-size:var(--text-sm);max-width:46ch}

/* Offline banner */
.offline{position:fixed;left:50%;bottom:var(--space-4);transform:translate(-50%,160%);z-index:20;display:flex;gap:var(--space-3);align-items:center;
  background:var(--color-warning);color:#fff8e6;padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);font-size:var(--text-sm);
  transition:transform var(--duration-base) var(--ease-out),visibility 0s linear var(--duration-base);max-width:calc(100% - 2rem);visibility:hidden}
.offline[data-show="true"]{transform:translate(-50%,0);visibility:visible;transition-delay:0s}
.offline b{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em}

/* Checkout mock page */
.page-checkout{display:grid;place-items:center;min-height:100vh;padding:var(--space-8)}
.checkout{background:var(--color-surface);color:var(--color-ink);padding:var(--space-8);max-width:30rem;width:100%;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)}
.badge-mock{font:500 var(--text-xs)/1.3 var(--font-mono);background:var(--color-ink);color:var(--color-focus);padding:var(--space-2) var(--space-3);margin:0 0 var(--space-4)}
.checkout-title{font:800 3rem/1 var(--font-display);text-transform:uppercase;margin:0 0 var(--space-2)}
.checkout-line{display:flex;justify-content:space-between;font:500 1.2rem/1 var(--font-mono);border-block:2px solid var(--color-ink);padding:var(--space-3) 0}
.checkout-done{color:var(--color-success);font-weight:600}

/* ---------- Entrance: the ticket is printed and stamped once ---------- */
.js .hero .sign{animation:rise var(--duration-slow) var(--ease-out) both}
.js .hero-copy>*{animation:rise var(--duration-slow) var(--ease-out) both}
.js .hero-copy>*:nth-child(2){animation-delay:120ms}.js .hero-copy>*:nth-child(3){animation-delay:200ms}.js .hero-copy>*:nth-child(4){animation-delay:280ms}
.js .ticket-wrap{animation:print 1100ms var(--ease-out) 320ms both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes print{from{opacity:0;transform:translateY(-60px) rotate(-3deg);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Breakpoints: 1100, 820, 560, 380 ---------- */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr;}
  .ticket-wrap{max-width:560px;justify-self:end;width:100%}
  .tariff li{grid-template-columns:minmax(8rem,12rem) 1fr auto}
  .tariff li .btn{grid-column:1/-1;justify-self:start}
}
@media (max-width:820px){
  .board{grid-template-columns:1fr auto}
  .board nav{grid-column:1/-1;grid-row:2;overflow-x:auto}
  .board nav ul{justify-content:flex-start}
  .sec-head{grid-template-columns:1fr;gap:var(--space-2)}
  .bots{grid-template-columns:1fr;margin-right:calc(-1 * var(--gutter));padding-left:var(--space-6)}
  .cards{grid-template-columns:1fr}
  .fine{grid-template-columns:1fr;gap:var(--space-4)}
  .departures thead{display:none}
  .departures tr{display:grid;grid-template-columns:3.5rem 1fr;border-bottom:1px solid var(--color-rule);padding:var(--space-4) 0}
  .departures td{border:0;padding:var(--space-1) var(--space-2)}
  .departures td:first-child{grid-row:span 2;font-size:2.4rem}
}
@media (max-width:560px){
  :root{--perf:7px}
  .ribbon{flex-direction:column;gap:var(--space-1)}
  .clock{display:none}
  .sign{padding:var(--space-6) var(--space-4) var(--space-4)}
  .sign h1 .line:nth-child(2){padding-left:0}
  .ticket{transform:none;padding:var(--space-4) calc(var(--space-4) + var(--perf))}
  .fields{grid-template-columns:1fr}
  .verdict{grid-template-columns:1fr;justify-items:start}
  .stamp{width:6rem;height:6rem;font-size:1rem}
  .tariff li{grid-template-columns:1fr auto;padding:var(--space-4) 0}
  .tariff .t-for{grid-column:1/-1;grid-row:2}
  .tariff .t-for::after{display:none}
  .tariff .t-name{font-size:2.1rem} .tariff .t-price{font-size:2.6rem}
  footer{grid-template-columns:1fr}
  .stub{margin-inline:calc(-1 * var(--space-4));padding-inline:var(--space-4)}
}
@media (max-width:380px){
  .cmd{flex-direction:column}
  .btn-copy{width:100%}
  .sign h1{font-size:4rem}
}

/* Grid and flex children must be allowed to shrink so long commands scroll inside their box */
.hero>*,.bots>*,.sec-head>*,.cmd code{min-width:0}
.ticket-wrap{min-width:0;max-width:100%}
.bots pre{max-width:100%}
@media (max-width:820px){
  .departures,.departures tbody,.departures tr,.departures td{max-width:100%}
  .departures td{min-width:0}
  .departures td.cmdcell code{white-space:normal;overflow-wrap:anywhere}
}

/* ---------- Waitlist additions ---------- */
.queue{display:flex;align-items:baseline;gap:var(--space-3);margin-top:var(--space-8)}
.queue-num{margin:0;font:800 clamp(3.5rem,7vw,5.5rem)/.85 var(--font-display);color:var(--color-focus);font-variant-numeric:tabular-nums}
.queue-label{margin:0;font:600 var(--text-lg)/1 var(--font-display);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--color-muted)}
.queue[data-state="error"] .queue-num{color:var(--color-muted)}
.plan-pick{border:0;margin:var(--space-4) 0 0;padding:0}
.plan-pick legend{font:600 var(--text-sm)/1.1 var(--font-display);text-transform:uppercase;letter-spacing:var(--track-label);margin-bottom:var(--space-2);padding:0}
.plan-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.plan-opts label{position:relative;cursor:pointer}
.plan-opts input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.plan-opts span{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:var(--space-2) var(--space-3);border:2px solid var(--color-ink);border-radius:var(--radius-sm);
  font:500 var(--text-xs)/1.2 var(--font-mono);background:#fbf6e6;transition:background var(--duration-fast),color var(--duration-fast),transform var(--duration-fast)}
.plan-opts b{font:800 1.25rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.plan-opts label:hover span{background:var(--color-surface-2)}
.plan-opts label:active span{transform:translateY(1px)}
.plan-opts input:checked+span{background:var(--color-ink);color:var(--color-surface);box-shadow:inset 0 -4px 0 var(--color-accent)}
.plan-opts input:focus-visible+span{outline:3px solid var(--color-focus);outline-offset:2px}
.plan-opts input:disabled+span{opacity:.55;cursor:not-allowed}
.field-email{margin-top:var(--space-4)}
.field-email input{padding-right:var(--space-3);font-size:1.1rem}
.check{display:flex;gap:var(--space-3);align-items:flex-start;min-height:44px;margin-top:var(--space-3);font-size:var(--text-sm);line-height:var(--leading-sm);cursor:pointer}
.check input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--color-ink);cursor:pointer}
.check input:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ticket-foot .btn-stamp{min-width:14rem}
.btn-stamp[data-state="loading"]{color:transparent}
.btn-stamp[data-state="loading"]::after{border-color:var(--color-surface) transparent var(--color-surface) transparent}
.btn-stamp[data-state="done"]{background:var(--color-success);box-shadow:0 4px 0 #214d2d}
.form-note{flex:1 1 100%;margin:0;font-size:var(--text-sm);line-height:var(--leading-sm)}
.form-note:empty{display:none}
.form-note[data-tone="error"]{color:var(--color-danger);font-weight:600}
.form-note[data-tone="info"]{color:var(--color-warning);font-weight:600}
.form-note[data-tone="ok"]{color:var(--color-success);font-weight:600}
.ticket[data-joined="true"] .fields,.ticket[data-joined="true"] .field-email,.ticket[data-joined="true"] .check{opacity:.55}
.stamp.joined{color:var(--color-success);border-color:var(--color-success)}
footer .indep{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-muted)}
@media (max-width:560px){
  .plan-opts{grid-template-columns:1fr}
  .plan-opts span{flex-direction:row;justify-content:space-between;align-items:center}
  .queue{margin-top:var(--space-6)}
  .ticket-foot .btn-stamp{width:100%}
}
.btn-stamp[data-state="done"]:disabled{background:var(--color-success);color:var(--color-surface);box-shadow:0 4px 0 #214d2d;cursor:default}
.btn-stamp[data-state="loading"]:disabled{background:var(--color-accent);cursor:progress}
.ticket[data-joined="true"] .plan-pick{opacity:1}
.ticket[data-joined="true"] .plan-opts input:not(:checked)+span{opacity:.45}
.ticket[data-joined="true"] .plan-opts input:checked+span{opacity:1;cursor:default}

/* ---------- Privacy notice and small-page footer ---------- */
.page-notice{min-height:100vh;display:flex;flex-direction:column}
.notice-wrap{flex:1;display:grid;place-items:start center;padding:var(--space-12) var(--gutter) var(--space-8)}
.notice{max-width:40rem;position:relative;
  border-top:6px solid var(--color-accent)}
.notice-lede{font-size:var(--text-lg);line-height:var(--leading-lg);margin:0 0 var(--space-6)}
.notice-h{font:600 var(--text-sm)/1 var(--font-display);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-accent-ink);margin:var(--space-6) 0 var(--space-2)}
.notice p{margin:0 0 var(--space-3)}
.notice a{color:var(--color-ink);text-decoration-color:var(--color-accent);text-decoration-thickness:2px;text-underline-offset:3px}
.notice a:hover{color:var(--color-accent-ink)}
.notice a:active{color:var(--color-danger)}
.notice-ledger{margin:0;border-block:2px solid var(--color-ink)}
.notice-ledger>div{display:grid;grid-template-columns:7rem 1fr;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px dashed rgba(29,27,22,.35)}
.notice-ledger>div:last-child{border-bottom:0}
.notice-ledger dt{font:500 var(--text-sm)/var(--leading-sm) var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.notice-ledger dd{margin:0}
.notice-back{margin-top:var(--space-8)!important;font-family:var(--font-mono);font-size:var(--text-sm)}
.notice-foot,.page-checkout .notice-foot{display:block;padding:var(--space-6) var(--gutter);text-align:center;border-top:1px solid var(--color-rule)}
.notice-foot p{margin:0 auto;max-width:60ch}
.notice-foot a,footer a{color:var(--color-text);text-underline-offset:3px}
.notice-foot a:hover,footer a:hover{color:var(--color-focus)}
.page-checkout .notice-foot{border-top:0;padding:var(--space-6) 0 0}
@media (max-width:560px){
  .notice-wrap{padding:var(--space-6) var(--space-3)}
  .notice{padding:var(--space-6)}
  .notice-ledger>div{grid-template-columns:1fr;gap:var(--space-1)}
  .checkout-title{font-size:2.4rem}
}
.page-stack{grid-template-rows:1fr auto;align-content:center}
.page-stack>.checkout{align-self:center}