:root{
  --bg:#EEF0EF;
  --surface:#FFFFFF;
  --surface-2:#E3E8E7;
  --ink:#141B20;
  --ink-muted:#55636B;
  --line:#D2D9D8;
  --accent:#B34A16;
  --accent-ink:#FFFFFF;
  --teal:#2B6E6B;
  --success:#3F7A4F;
  --warn:#B8322A;
  --focus:#2B6E6B;
  --font-display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --container:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10161A; --surface:#182228; --surface-2:#1F2A30; --ink:#EDEFEE; --ink-muted:#96A3A8;
    --line:#29353B; --accent:#E07A42; --accent-ink:#14181A; --teal:#5FB3AC; --success:#66B37A;
    --warn:#E27971; --focus:#5FB3AC;
  }
}
:root[data-theme="dark"]{
  --bg:#10161A; --surface:#182228; --surface-2:#1F2A30; --ink:#EDEFEE; --ink-muted:#96A3A8;
  --line:#29353B; --accent:#E07A42; --accent-ink:#14181A; --teal:#5FB3AC; --success:#66B37A;
  --warn:#E27971; --focus:#5FB3AC;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ background:none; }
h1,h2,h3{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.01em; line-height:0.98; margin:0; text-wrap:balance; font-weight:700; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }
.eyebrow{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.14em; font-size:0.72rem; color:var(--accent); font-weight:600; }
section{ padding-block:clamp(3rem,7vw,5.5rem); border-top:1px solid var(--line); }
section:first-of-type{ border-top:none; }

.nav{ position:sticky; top:0; z-index:50; background:var(--bg); background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:0.85rem; }
.brand{ display:flex; align-items:center; gap:0.5rem; text-decoration:none; color:var(--ink); }
.brand-mark{ color:var(--accent); width:22px; height:22px; flex:none; }
.brand-word{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; text-transform:uppercase; letter-spacing:0.02em; }
.nav-links{ display:flex; align-items:center; gap:1.75rem; }
.nav-links a{ text-decoration:none; font-size:0.92rem; color:var(--ink-muted); }
.nav-links a:hover{ color:var(--ink); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-family:var(--font-body); font-weight:600; font-size:0.92rem; padding:0.7rem 1.25rem; border-radius:3px; border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn--primary{ background:var(--accent); color:var(--accent-ink); }
.btn--primary:hover{ filter:brightness(1.08); }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink-muted); }
.btn--sm{ padding:0.5rem 0.9rem; font-size:0.85rem; }
.btn:disabled{ opacity:0.55; cursor:not-allowed; }

.section-head{ max-width:60ch; margin-bottom:2.25rem; }
.section-head h2{ font-size:clamp(1.9rem,4vw,2.7rem); margin-top:0.5rem; }
.section-head p{ margin-top:0.9rem; color:var(--ink-muted); font-size:1.02rem; }

.stamp{ display:inline-block; font-family:var(--font-mono); font-weight:700; text-transform:uppercase; font-size:0.72rem; letter-spacing:0.08em; padding:0.3rem 0.6rem; border:2px solid currentColor; border-radius:3px; transform:rotate(-2.5deg); }
.stamp--created{ color:var(--ink-muted); }
.stamp--picked, .stamp--transit{ color:var(--teal); }
.stamp--out{ color:var(--accent); }
.stamp--delivered{ color:var(--success); }
.stamp--invalid{ color:var(--warn); }
.stamp--pending{ color:var(--ink-muted); }

.field{ display:flex; flex-direction:column; gap:0.4rem; }
.field label{ font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-muted); }
.field input, .field select{ padding:0.65rem 0.8rem; border:1.5px solid var(--line); border-radius:3px; background:var(--surface); color:var(--ink); }

.track-form{ display:flex; gap:0.75rem; flex-wrap:wrap; }
.track-input{ flex:1 1 280px; font-family:var(--font-mono); font-size:1.05rem; letter-spacing:0.04em; padding:0.75rem 0.9rem; border:1.5px solid var(--line); border-radius:3px; background:var(--surface); color:var(--ink); }
.try-hint{ color:var(--ink-muted); font-size:0.9rem; }

.result-card{ margin-top:1.75rem; border:1px solid var(--line); border-radius:4px; padding:1.5rem; background:var(--surface); }
.result-card--error p{ color:var(--ink-muted); font-size:0.95rem; margin-top:0.6rem; }
.result-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.result-code{ font-family:var(--font-mono); font-size:1.3rem; letter-spacing:0.03em; }
.result-route{ color:var(--ink-muted); font-size:0.9rem; margin-top:0.25rem; }
.result-meta{ display:flex; gap:2.5rem; flex-wrap:wrap; margin:1.25rem 0 0; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.result-meta > div{ display:flex; flex-direction:column; gap:0.2rem; }
.result-meta dt{ font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-muted); }
.result-meta dd{ margin:0; font-size:0.95rem; font-variant-numeric:tabular-nums; }

.stepper{ display:flex; flex-direction:column; margin-top:1.25rem; }
.step{ display:grid; grid-template-columns:1.1rem 1fr; column-gap:0.85rem; padding-block:0.65rem; position:relative; }
.step::before{ content:""; position:absolute; left:0.5rem; top:1.6rem; bottom:-0.65rem; width:1px; background:var(--line); }
.step:last-child::before{ display:none; }
.step-dot{ width:1.1rem; height:1.1rem; border-radius:50%; border:2px solid var(--line); background:var(--surface); margin-top:0.15rem; }
.step--done .step-dot{ border-color:var(--teal); background:var(--teal); }
.step--current .step-dot{ border-color:var(--accent); background:var(--accent); }
.step-label{ font-weight:600; font-size:0.95rem; color:var(--ink-muted); }
.step--done .step-label, .step--current .step-label{ color:var(--ink); }
.step-meta{ display:block; font-size:0.82rem; color:var(--ink-muted); margin-top:0.1rem; font-family:var(--font-mono); }

footer{ border-top:1px solid var(--line); padding-block:2.5rem; }
.footer-inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; }
.footer-tagline{ color:var(--ink-muted); font-size:0.88rem; margin-top:0.4rem; max-width:32ch; }
.footer-copy{ margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--ink-muted); font-size:0.8rem; }

.toast{ position:fixed; bottom:1.25rem; right:1.25rem; background:var(--ink); color:var(--bg); padding:0.75rem 1.1rem; border-radius:4px; font-size:0.88rem; box-shadow:0 6px 20px rgba(0,0,0,0.2); opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease; pointer-events:none; z-index:100; }
.toast.show{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; }
}