/* ---------- tokens ---------- */
:root{
  color-scheme:dark;
  --bg:#060810;
  --bg-soft:#0a0d18;
  --surface:#0d1120;
  --surface-2:#121728;
  --ink:#ffffff;               /* overlay base: glass, hovers, faint washes */
  --line:#1a2130;
  --line-bright:#27304a;
  --glass:rgba(6,8,12,.72);        /* sticky header / overlays */
  --glass-strong:rgba(6,8,12,.94);
  --card-bottom:#080b11;           /* the card gradient's lower stop */
  --fg:#eef1f8;
  --fg-dim:#9aa4c0;
  --fg-faint:#6b7590;
  /* Brand cool, from the "A": blue→violet. Lifted a touch off the logo's ink so
     small text stays legible on the dark field. */
  --accent:#5a6bff;
  --accent-2:#8a3cff;
  /* Brand warm, from the signal band. Reserved for the action — the primary CTA
     and the moments the signal is the point. */
  --warm:#ff7d00;
  --good:#2fd39b;
  --warn:#ffc260;
  --bad:#ff5c7a;
  --on-accent:#03080f;          /* text on the cool gradient */
  --on-warm:#1a0d00;            /* text on the warm gradient */
  --grad:linear-gradient(135deg,var(--accent),var(--accent-2));
  --grad-warm:linear-gradient(135deg,#ffc93d,#ff6a00);
  --r-sm:8px; --r:14px; --r-lg:22px;
  --shadow:0 20px 60px -20px rgba(0,0,0,.8);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
  --page:1120px;
}

/* The site follows the reader's OS appearance. Same brand, light field: the
   hues are deepened so they hold contrast on white, and the glass/ink/shadow
   tokens invert so the depth cues still read. */
@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;
    --bg:#eef1f7;
    --bg-soft:#f6f8fc;
    --surface:#ffffff;
    --surface-2:#f0f3fa;
    --ink:#101a30;
    --line:#d8dde8;
    --line-bright:#c2cadb;
    --glass:rgba(255,255,255,.74);
    --glass-strong:rgba(255,255,255,.95);
    --card-bottom:#eef1f7;
    --fg:#141a26;
    --fg-dim:#4a5468;
    --fg-faint:#8590a6;
    --accent:#3a4fe0;
    --accent-2:#7a2fe0;
    --warm:#d95f00;
    --good:#0f9d6b;
    --warn:#b98200;
    --bad:#d92b4a;
    --on-accent:#ffffff;
    --on-warm:#1a0d00;
    --grad-warm:linear-gradient(135deg,#f0a500,#e05a00);
    --shadow:0 20px 50px -22px rgba(16,26,48,.18);
  }
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.03em;line-height:1.12}
p{margin:0}
ul,ol{margin:0;padding:0}

/* Keyboard focus has to be visible. :focus-visible rather than :focus so a mouse
   click does not leave a ring behind. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{
  position:absolute;left:16px;top:-60px;z-index:100;
  padding:11px 18px;border-radius:10px;background:var(--accent);color:var(--on-accent);
  font-weight:600;transition:top .2s;
}
.skip:focus{top:12px}

/* Ambient light. Fixed so it does not repaint on scroll. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(700px 420px at 12% -8%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 65%),
    radial-gradient(760px 460px at 92% 4%,color-mix(in srgb,var(--accent-2) 10%,transparent),transparent 62%);
}
main,header,footer{position:relative;z-index:1}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--page);margin:0 auto;padding:0 24px}
/* Long-form pages. A measure of ~75 characters, centred, rather than a thin
   column pinned to the left of a wide one. */
.wrap.narrow{max-width:880px}
.section{padding:96px 0}
.section.tight{padding:64px 0}
.section-head{max-width:64ch;margin-bottom:40px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
h1{font-size:clamp(38px,6.2vw,68px)}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:19px;letter-spacing:-.02em}
.lead{font-size:clamp(17px,2vw,20px);color:var(--fg-dim);line-height:1.6;max-width:62ch}
.muted{color:var(--fg-dim)}
.faint{color:var(--fg-faint);font-size:14px}
.prose p{color:var(--fg-dim);margin:0 0 18px;max-width:70ch}
.prose h2{margin:44px 0 14px}
.prose h3{margin:30px 0 10px;color:var(--fg)}
.prose ul{margin:0 0 18px;padding-left:22px;color:var(--fg-dim)}
.prose li{margin:7px 0;max-width:68ch}
.prose strong{color:var(--fg);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
code{
  font:500 .88em/1.4 var(--mono);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
  padding:2px 6px;border-radius:5px;
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:var(--glass);backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
header.stuck{border-bottom-color:var(--line);background:var(--glass-strong)}
header .wrap{display:flex;align-items:center;gap:14px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:680;font-size:17px;letter-spacing:-.02em}
.brand .mark{width:26px;height:26px;flex:none}
.brand em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav.main{display:flex;gap:4px;margin-left:22px}
nav.main a{
  padding:8px 12px;border-radius:9px;font-size:15px;color:var(--fg-dim);
  transition:color .18s,background .18s;
}
nav.main a:hover{color:var(--fg);background:color-mix(in srgb,var(--ink) 5%,transparent)}
nav.main a[aria-current]{color:var(--fg)}
.head-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line)}
.burger span{display:block;width:16px;height:1.5px;background:var(--fg);margin:3px auto;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border-radius:11px;font-weight:600;font-size:15px;
  background:var(--grad-warm);color:var(--on-warm);white-space:nowrap;
  transition:transform .18s,box-shadow .18s,filter .18s;
  box-shadow:0 8px 24px -10px color-mix(in srgb,var(--warm) 55%,transparent);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 14px 32px -12px color-mix(in srgb,var(--warm) 70%,transparent)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;border:1px solid var(--line-bright);color:var(--fg);box-shadow:none}
.btn.ghost:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);border-color:var(--fg-faint)}
.btn.sm{padding:9px 15px;font-size:14px;border-radius:9px}
.btn[disabled],.btn.disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- pills & chips ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:999px;font-size:13px;color:var(--fg-dim);
  border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 2%,transparent);
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 16%,transparent)}
.pill.live .dot{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 16%,transparent)}50%{opacity:.65;box-shadow:0 0 0 6px color-mix(in srgb,var(--good) 5%,transparent)}}

/* ---------- hero ---------- */
.hero{padding:72px 0 40px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{margin:20px 0 22px}
.hero h1 .glow{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{max-width:52ch}
.hero-note{margin-top:26px;display:flex;flex-wrap:wrap;gap:18px;color:var(--fg-faint);font-size:14px}
.hero-note span{display:flex;align-items:center;gap:8px}
/* The assurances read as a checklist, so each gets the same tick the plan
   feature list uses. The flex gap above was always sized for this marker. */
.hero-note span::before{
  content:"";width:11px;height:6px;flex:none;
  border-left:1.6px solid var(--good);border-bottom:1.6px solid var(--good);
  transform:rotate(-45deg) translateY(-1px);
}

/* ---------- the race: the product, animated ---------- */
.race{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface),var(--card-bottom));
  padding:20px 20px 16px;box-shadow:var(--shadow);overflow:hidden;
}
.race-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line);
  font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);
}
.race-head .state{color:var(--accent);transition:color .3s}
.race.done .race-head .state{color:var(--good)}
.lanes{display:flex;flex-direction:column;gap:9px;position:relative}
.lane{
  position:relative;height:34px;display:flex;align-items:center;gap:12px;
  border-radius:9px;padding:0 10px;transition:background .35s;
}
.lane .name{
  width:136px;flex:none;font:500 12px/1 var(--mono);color:var(--fg-faint);
  letter-spacing:.02em;transition:color .35s;white-space:nowrap;
}
.lane .name i{font-style:normal;color:inherit;opacity:.72}
.lane .track{
  position:relative;flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--line-bright),color-mix(in srgb,var(--ink) 12%,transparent));
}
/* The inspecting middlebox: everything must pass this line. */
.lane .track::after{
  content:"";position:absolute;left:58%;top:-9px;width:1px;height:20px;
  background:repeating-linear-gradient(180deg,var(--line-bright) 0 3px,transparent 3px 6px);
}
.lane .packet{
  position:absolute;top:50%;left:0;width:26px;height:4px;border-radius:3px;
  background:var(--fg-faint);transform:translate(-30px,-50%);opacity:0;
}
.lane .verdict{
  width:74px;flex:none;text-align:right;font:600 11px/1 var(--mono);
  letter-spacing:.06em;opacity:0;transition:opacity .3s;
}
.lane.blocked .name{color:var(--fg-faint)}
.lane.blocked .verdict{opacity:1;color:var(--bad)}
.lane.pass .name{color:var(--good)}
.lane.pass .track{background:linear-gradient(90deg,color-mix(in srgb,var(--good) 70%,transparent),color-mix(in srgb,var(--good) 15%,transparent))}
.lane.pass .verdict{opacity:1;color:var(--good)}
.lane.pass{background:color-mix(in srgb,var(--good) 5%,transparent)}

/* Motion is applied by class so reduced-motion can simply never add it. */
.race.run .lane .packet{animation:sendpkt 1.15s cubic-bezier(.4,0,.75,.3) forwards}
.race.run .lane.pass .packet{animation:passpkt 1.5s cubic-bezier(.3,0,.4,1) forwards}
@keyframes sendpkt{
  0%{transform:translate(-30px,-50%);opacity:0;background:var(--fg-faint)}
  12%{opacity:1}
  70%{transform:translate(calc(58% - 26px),-50%);opacity:1;background:var(--fg-dim)}
  82%{transform:translate(calc(58% - 26px),-50%);background:var(--bad);width:26px}
  100%{transform:translate(calc(58% - 26px),-50%);opacity:0;background:var(--bad);width:6px}
}
@keyframes passpkt{
  0%{transform:translate(-30px,-50%);opacity:0;background:var(--good)}
  10%{opacity:1}
  100%{transform:translate(calc(100% + 6px),-50%);opacity:1;background:var(--good)}
}
.race-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--fg-faint);
}
.race-foot b{color:var(--good);font-weight:600;font-family:var(--mono)}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:26px;transition:border-color .25s,transform .25s,background .25s;
}
.card:hover{border-color:var(--line-bright);transform:translateY(-2px)}
.card h3{margin-bottom:10px}
.card p{color:var(--fg-dim);font-size:15px}
.card .ico{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);margin-bottom:16px;
}
.card .ico svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:1.7}
.card.flat:hover{transform:none}

/* numbered steps */
.step{counter-increment:step}
.step .n{
  font:600 12px/1 var(--mono);color:var(--accent);
  display:flex;align-items:center;gap:9px;margin-bottom:14px;
}
.step .n::before{content:"0" counter(step);}
.step .n::after{content:"";flex:1;height:1px;background:var(--line)}
.steps{counter-reset:step}

/* ---------- stat strip ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.stat{background:var(--bg-soft);padding:24px 22px}
.stat b{display:block;font:650 30px/1 var(--sans);letter-spacing:-.03em;margin-bottom:7px}
.stat b .u{font-size:16px;color:var(--fg-dim);font-weight:500;margin-left:2px}
.stat span{font-size:13.5px;color:var(--fg-dim)}

/* ---------- transports ---------- */
.transports{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.tp{
  font:500 13px/1 var(--mono);padding:9px 13px;border-radius:9px;
  border:1px solid var(--line);color:var(--fg-dim);background:color-mix(in srgb,var(--ink) 2%,transparent);
  transition:border-color .2s,color .2s,background .2s;
}
.tp:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.tp.free{border-color:color-mix(in srgb,var(--good) 30%,transparent);color:var(--good)}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.plan{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px 26px;display:flex;flex-direction:column;
}
.plan.featured{
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,transparent),var(--surface) 40%);
}
.plan.featured::before{
  content:"Most chosen";position:absolute;top:-11px;left:26px;
  font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;background:var(--grad);color:var(--on-accent);
}
.plan h3{font-size:17px;color:var(--fg-dim);font-weight:600;letter-spacing:0}
.plan .amount{display:flex;align-items:baseline;gap:7px;margin:14px 0 6px}
.plan .amount b{font-size:44px;font-weight:680;letter-spacing:-.04em}
.plan .amount span{color:var(--fg-faint);font-size:14px}
.plan .billed{font-size:13px;color:var(--fg-faint);min-height:20px}
.plan ul{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:11px}
.plan li{position:relative;padding-left:26px;font-size:14.5px;color:var(--fg-dim)}
.plan li::before{
  content:"";position:absolute;left:2px;top:6px;width:9px;height:5px;
  border-left:1.8px solid var(--good);border-bottom:1.8px solid var(--good);
  transform:rotate(-45deg);
}
.plan li.no{color:var(--fg-faint)}
.plan li.no::before{
  border:0;left:3px;top:8px;width:8px;height:1.8px;background:var(--fg-faint);transform:none;
}
.plan .btn{margin-top:auto;width:100%}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{
  font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-faint);
}
.tbl td{color:var(--fg-dim)}
.tbl td code{
  font:500 13px/1 var(--mono);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);padding:2px 6px;border-radius:5px;
}
/* Scrolls rather than squashes: a four-column table crushed into 340px is not a
   table anyone can read. */
.tbl-wrap{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
}
.tbl{min-width:520px}
.tbl tr:last-child td{border-bottom:0}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-weight:560;font-size:16.5px;transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:1.8px solid var(--fg-faint);border-bottom:1.8px solid var(--fg-faint);
  transform:rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{color:var(--fg-dim);padding:0 40px 22px 0;max-width:76ch;margin:0}

/* ---------- callout ---------- */
.callout{
  border:1px solid var(--line);border-left:2px solid var(--accent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent 60%);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin:26px 0;
}
.callout.warn{border-left-color:var(--warn);background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 7%,transparent),transparent 60%)}
.callout p{color:var(--fg-dim);font-size:15px}
.callout p+p{margin-top:10px}
.callout strong{color:var(--fg)}

/* ---------- cta band ---------- */
.band{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    radial-gradient(600px 200px at 20% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),
    linear-gradient(180deg,var(--surface),var(--card-bottom));
  padding:52px 44px;text-align:center;
}
.band h2{margin-bottom:14px}
.band .lead{margin:0 auto}
.band .btn-row{justify-content:center}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:40px;padding:56px 0 36px;background:var(--bg-soft)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px}
.foot-brand p{color:var(--fg-faint);font-size:14px;margin-top:14px;max-width:34ch}
.foot h4{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:15px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot a{color:var(--fg-dim);font-size:14.5px;transition:color .18s}
.foot a:hover{color:var(--accent)}
.foot-bottom{
  margin-top:44px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  color:var(--fg-faint);font-size:13.5px;
}
.pay{display:flex;align-items:center;gap:9px}
.pay .m{
  height:25px;padding:0 9px;border:1px solid var(--line);border-radius:5px;
  display:flex;align-items:center;font:600 10px/1 var(--mono);
  letter-spacing:.06em;color:var(--fg-faint);background:color-mix(in srgb,var(--ink) 2%,transparent);
}

/* ---------- sign-in ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth h1{font-size:20px;text-align:center;margin-bottom:22px;font-weight:600}
.auth .err{
  color:var(--bad);font-size:14px;text-align:center;margin-bottom:16px;
  padding:11px;border-radius:9px;border:1px solid color-mix(in srgb,var(--bad) 28%,transparent);
  background:color-mix(in srgb,var(--bad) 7%,transparent);
}

/* ---------- admin panel ----------
   The panel is a tool, not a page: it is read at a glance by somebody who
   already knows what they are looking for, so it trades the marketing site's
   air for density. Everything below is scoped to body.admin so none of it can
   reach the public pages. */
.admin main .wrap{max-width:1180px}
.admin h1{font-size:26px;margin-bottom:20px}
.admin h2{font-size:17px;margin:38px 0 14px;color:var(--fg);font-weight:600}
.admin h3{font-size:15px;margin-bottom:10px}
.admin .head-cta{display:flex;align-items:center;gap:14px}
.admin .who{font:500 13px/1 var(--mono);color:var(--fg-faint)}

/* The admin nav groups sections so an operator scanning for a downed server
   does not read past Vouchers to find it. The group label is a faint mono
   caps prefix; groups are separated by a hairline so the eye can jump. */
.admin nav.main{display:flex;gap:0;margin-left:18px}
.admin nav.main .nav-group{display:flex;align-items:center;gap:1px}
.admin nav.main .nav-group + .nav-group{margin-left:14px;padding-left:16px;border-left:1px solid var(--line)}
.admin nav.main .nav-label{
  font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-faint);margin-right:8px;opacity:.7;
}
.admin nav.main a{
  padding:7px 11px;border-radius:8px;font-size:14px;color:var(--fg-dim);
  transition:color .18s,background .18s;
}
.admin nav.main a:hover{color:var(--fg);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.admin nav.main a[aria-current="page"]{
  color:var(--fg);background:color-mix(in srgb,var(--accent) 14%,transparent);
  font-weight:600;
}

/* Tables here are written as bare <table> so a page reads as data, not markup. */
.admin table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.admin th,.admin td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
.admin th{
  font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-faint);white-space:nowrap;
}
.admin td{color:var(--fg-dim)}
.admin tbody tr:last-child td{border-bottom:0}
.admin tbody tr:hover td{background:color-mix(in srgb,var(--ink) 2%,transparent)}
.admin td code,.admin th code{
  font:500 12.5px/1 var(--mono);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);padding:2px 6px;border-radius:5px;
}
.admin .tbl-wrap{margin-bottom:6px}

.admin .grid{
  display:grid;gap:14px;margin-bottom:8px;
  grid-template-columns:repeat(auto-fit,minmax(172px,1fr));
}
.admin .card{padding:18px 20px}
.admin .card:hover{transform:none}
.admin .card p{font-size:14px}
/* A fixed height so a label that wraps to two lines does not push its number
   out of line with the numbers beside it. */
.statlabel{
  font:600 10.5px/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-faint);margin:0 0 9px;min-height:2.7em;
}
.statvalue{font-size:25px;color:var(--fg);margin:0;font-variant-numeric:tabular-nums}

.badge{
  display:inline-block;font:500 11.5px/1 var(--mono);padding:3px 9px;
  border-radius:999px;border:1px solid var(--line-bright);
}

/* An operator needs to be told something is wrong before they read a table. */
.notice{
  border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:0 10px 10px 0;
  background:color-mix(in srgb,var(--accent) 5%,transparent);padding:14px 18px;margin-bottom:22px;font-size:14.5px;
  color:var(--fg-dim);
}
.notice.warn{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 6%,transparent)}
.notice strong{color:var(--fg)}
.notice code{font:500 12.5px/1 var(--mono);color:var(--fg)}

/* Forms in the panel: inputs sit on one line and wrap on a narrow screen
   rather than each claiming a row of their own. */
.admin input,.admin select{
  padding:9px 12px;border-radius:9px;border:1px solid var(--line-bright);
  background:var(--bg);color:var(--fg);font:500 14px/1.2 var(--sans);
}
.admin input[type=number]{width:92px}
.admin input:focus,.admin select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);
}
.admin .row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;align-items:center}
.admin .row input[type=text],.admin .row input[type=password]{flex:1;min-width:150px}
.admin form.inline{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:12px 0 6px}
.admin form.inline input[type=text]{flex:1;min-width:160px;max-width:340px}
/* Stacked forms give each field its own line; inline ones are excluded or the
   first text input would push the button onto a line of its own. */
.admin .card form:not(.inline) input[type=text]{width:100%;margin:10px 0}
.admin button{
  padding:9px 15px;border-radius:9px;border:1px solid var(--line-bright);
  background:color-mix(in srgb,var(--ink) 4%,transparent);color:var(--fg);font:560 13.5px/1 var(--sans);
  cursor:pointer;transition:border-color .2s,background .2s,color .2s;
}
.admin button:hover{border-color:var(--accent);color:var(--accent)}
.admin button.danger:hover{border-color:var(--bad);color:var(--bad)}
/* Row actions are links wearing a button, because a destructive action inside a
   table row should not shout louder than the row. */
.admin button.link{
  background:none;border:0;padding:0;color:var(--fg-faint);
  font:500 13px/1 var(--sans);text-decoration:underline;text-underline-offset:3px;
}
.admin button.link:hover{color:var(--bad)}

.admin form.search{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.admin form.search input{flex:1;max-width:460px;font-family:var(--mono);font-size:13.5px}
.admin form.search a.clear{font-size:13.5px;color:var(--fg-faint)}

.admin .tabs{display:flex;gap:8px;margin:18px 0 22px}
.admin .tabs a{
  font:500 13px/1 var(--mono);padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);color:var(--fg-faint);
}
.admin .tabs a.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}

.admin .card.node{margin-bottom:14px}
.admin .card.node p{margin:5px 0}
.admin .card.node .warn{color:var(--warn)}

/* Something shown once and never again is worth making hard to misread. */
.admin .card.secret{
  border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 4%,transparent);
  padding:20px 22px;margin:14px 0;
}
.admin .card.secret p{
  font:500 17px/1.6 var(--mono);color:var(--fg);margin:3px 0;
  letter-spacing:.08em;user-select:all;word-break:break-all;
}

@media(max-width:720px){
  .admin .who{display:none}
  .admin main .wrap{padding-left:16px;padding-right:16px}
  /* The global rule hides nav.main on phones; the admin panel has no burger,
     so it gets a horizontally scrollable strip instead of vanishing. */
  .admin nav.main{
    display:flex;order:3;width:100%;margin-left:0;
    overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    padding:6px 0 2px;
  }
  .admin nav.main .nav-label{display:none}
  .admin nav.main .nav-group + .nav-group{margin-left:10px;padding-left:12px}
  .admin header .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:8px}
}

/* ---------- mock UI ---------- */
.mock{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:26px;max-width:460px;
}
.mock label{display:block;font-size:13px;color:var(--fg-dim);margin:0 0 7px}
.mock input{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line-bright);
  background:var(--bg);color:var(--fg);font:500 15px/1.3 var(--mono);letter-spacing:.06em;
  transition:border-color .2s,box-shadow .2s;
}
.mock input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.mock .field+.field{margin-top:16px}
.mock .btn{width:100%;margin-top:20px}
.mock-note{font-size:13px;color:var(--fg-faint);margin-top:14px;text-align:center}
.mock-out{
  margin-top:16px;padding:14px;border-radius:10px;font:500 13.5px/1.5 var(--mono);
  border:1px solid color-mix(in srgb,var(--good) 28%,transparent);background:color-mix(in srgb,var(--good) 7%,transparent);color:var(--good);
  display:none;
}
.mock-out.show{display:block;animation:fadeUp .4s ease both}
.mock-out.err{border-color:color-mix(in srgb,var(--bad) 30%,transparent);background:color-mix(in srgb,var(--bad) 7%,transparent);color:var(--bad)}

/* ---------- scroll reveal ----------
   Gated on .js, which the head script adds. Content that is invisible until a
   script runs is content that is invisible when the script is slow, blocked, or
   simply not supported — and this site has to render on networks that interfere
   with things. Without JavaScript every .reveal is just visible. */
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.in{animation:fadeUp .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .grid.c3,.grid.c4,.plans{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:720px){
  .section{padding:64px 0}
  nav.main,.head-cta .btn:not(.burger){display:none}
  .burger{display:block}
  nav.main.open{
    display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;
    background:var(--glass-strong);border-bottom:1px solid var(--line);
    padding:14px 24px 20px;gap:2px;margin:0;
  }
  nav.main.open a{padding:13px 8px;font-size:16px}
  .grid.c2,.grid.c3,.grid.c4,.plans{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .band{padding:40px 24px}
  .lane .name{width:78px;font-size:11px}
  .lane .name i{display:none}
  .lane .verdict{width:54px;font-size:10px}
  .race{padding:16px 14px 12px}
}

/* ---------- honour the setting ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
  .race .lane .packet{opacity:0}
}