/* ---------- tokens ---------- */
:root{
  --bg:#06080c;
  --bg-soft:#0a0e14;
  --surface:#0d121a;
  --surface-2:#111823;
  --line:#1b2432;
  --line-bright:#26344a;
  --fg:#e9eef7;
  --fg-dim:#94a4bb;
  --fg-faint:#64748b;
  --accent:#38ccff;
  --accent-2:#7c6bff;
  --good:#2fd39b;
  --warn:#ffc260;
  --bad:#ff6b6b;
  --grad:linear-gradient(135deg,var(--accent),var(--accent-2));
  --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;
}

/* ---------- 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:#03080f;
  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%,rgba(56,204,255,.10),transparent 65%),
    radial-gradient(760px 460px at 92% 4%,rgba(124,107,255,.10),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:rgba(56,204,255,.08);border:1px solid rgba(56,204,255,.16);
  padding:2px 6px;border-radius:5px;
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(6,8,12,.72);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:rgba(6,8,12,.9)}
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:rgba(255,255,255,.05)}
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);color:#03080f;white-space:nowrap;
  transition:transform .18s,box-shadow .18s,filter .18s;
  box-shadow:0 8px 24px -10px rgba(56,204,255,.6);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 14px 32px -12px rgba(56,204,255,.75)}
.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:rgba(255,255,255,.05);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:rgba(255,255,255,.02);
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(47,211,155,.16)}
.pill.live .dot{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1;box-shadow:0 0 0 3px rgba(47,211,155,.16)}50%{opacity:.65;box-shadow:0 0 0 6px rgba(47,211,155,.05)}}

/* ---------- 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:7px}

/* ---------- the race: the product, animated ---------- */
.race{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface),#080b11);
  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),rgba(38,52,74,.25));
}
/* 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,rgba(47,211,155,.7),rgba(47,211,155,.15))}
.lane.pass .verdict{opacity:1;color:var(--good)}
.lane.pass{background:rgba(47,211,155,.05)}

/* 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:rgba(56,204,255,.1);border:1px solid rgba(56,204,255,.22);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:rgba(255,255,255,.015);
  transition:border-color .2s,color .2s,background .2s;
}
.tp:hover{border-color:var(--accent);color:var(--accent);background:rgba(56,204,255,.06)}
.tp.free{border-color:rgba(47,211,155,.3);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:rgba(56,204,255,.4);background:linear-gradient(180deg,rgba(56,204,255,.05),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:#03080f;
}
.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:rgba(56,204,255,.08);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,rgba(56,204,255,.06),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,rgba(255,194,96,.07),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%,rgba(56,204,255,.12),transparent 70%),
    linear-gradient(180deg,var(--surface),#080b11);
  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:rgba(255,255,255,.02);
}

/* ---------- 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 rgba(255,107,107,.28);
  background:rgba(255,107,107,.07);
}

/* ---------- 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)}

/* 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:rgba(255,255,255,.016)}
.admin td code,.admin th code{
  font:500 12.5px/1 var(--mono);color:var(--accent);
  background:rgba(56,204,255,.08);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(210px,1fr));
}
.admin .card{padding:18px 20px}
.admin .card:hover{transform:none}
.admin .card p{font-size:14px}
.statlabel{
  font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-faint);margin:0 0 9px;
}
.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:rgba(56,204,255,.05);padding:14px 18px;margin-bottom:22px;font-size:14.5px;
  color:var(--fg-dim);
}
.notice.warn{border-left-color:var(--warn);background:rgba(255,194,96,.06)}
.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 rgba(56,204,255,.14);
}
.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 .card form input[type=text]{width:100%;margin:10px 0}
.admin button{
  padding:9px 15px;border-radius:9px;border:1px solid var(--line-bright);
  background:rgba(255,255,255,.04);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:0 0 20px}
.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:rgba(56,204,255,.07)}

.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:rgba(56,204,255,.3);background:rgba(56,204,255,.04);
  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}
}

/* ---------- 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 rgba(56,204,255,.14)}
.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 rgba(47,211,155,.28);background:rgba(47,211,155,.07);color:var(--good);
  display:none;
}
.mock-out.show{display:block;animation:fadeUp .4s ease both}
.mock-out.err{border-color:rgba(255,107,107,.3);background:rgba(255,107,107,.07);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:rgba(6,8,12,.98);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}
}