/* Slowpoke — the whole site's stylesheet.
   One file, shared by the homepage and every comparison page, so a visitor who moves between
   them pays for it once. No build step: this is the file the browser gets.
   Rules that must survive any edit (site/test/run enforces them):
     - no style attribute in any HTML file, so a CSP without 'unsafe-inline' serves the site
     - every colour used for text clears 4.5:1 on the darkest surface it sits on
     - nothing may force the page wider than a 320px screen
*/
:root{
  /* Neutral ramp, tuned for WCAG AAA: every value used for text clears 7:1 on every surface
     it sits on, down to the lightest card (ink-800). Hierarchy comes from size and weight as
     much as from the grey. 950-700 are surfaces and hairlines, never text; 600 is the edge of
     a control (3:1, WCAG 1.4.11). test/a11y.mjs runs axe with the AAA rules to hold this. */
  --ink-950:#0b0b0e; --ink-900:#111115; --ink-850:#16161b; --ink-800:#1c1c22;
  --ink-700:#2b2b34;                 /* hairlines, decorative */
  --ink-650:#414150;                 /* dividers inside panels */
  --ink-600:#6b6b7d;                 /* edges of controls — 3.77:1, WCAG 1.4.11 */
  --ink-500:#a6a6b3;                 /* smallest labels — 7.05:1 on ink-800, 8.17:1 on the page */
  --ink-400:#adadba;                 /* secondary text — 7.63:1 on ink-800 */
  --ink-300:#c2c2cc;                 /* body and lede — 9.5:1 on ink-800 */
  --ink-200:#d4d4dd; --ink-100:#ececf1;
  --poke-300:#ffb3c1; --poke-400:#ff8fa6; --poke-500:#ff6f8e; --poke-600:#f0507a;
  --good:#7ee0a1; --warn:#f5c76a; --bad:#ff7a7a; --info:#8ab4ff;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",monospace;
  --maxw:1120px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink-950); color:var(--ink-100);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgb(255 111 142 / .07), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgb(138 180 255 / .05), transparent 60%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:rgb(255 111 142 / .35)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
code.mono{font-size:.88em}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
section{padding-block:88px;border-top:1px solid rgb(38 38 46 / .6)}
section:first-of-type{border-top:0}
section.tight{padding-block:0 88px;border-top:0}

h1,h2,h3{line-height:1.15;letter-spacing:-.022em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:600}
h2{font-size:clamp(1.65rem,3.4vw,2.35rem);font-weight:600}
h3{font-size:1.02rem;font-weight:600}
p{margin:0}
.lede{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--ink-300);max-width:62ch;line-height:1.62}
.kicker{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;color:var(--poke-400)}
.muted{color:var(--ink-400)}
.small{font-size:13.5px;color:var(--ink-400);line-height:1.55}
.sec-head{max-width:64ch;margin-bottom:40px;display:flex;flex-direction:column;gap:14px}

/* ---------- chapter marker: the three acts of the page ---------- */
.chapter{display:flex;align-items:center;gap:12px}
.chapter .n{font-family:var(--mono);font-style:normal;font-size:11.5px;color:var(--poke-500);
  border:1px solid rgb(255 111 142 / .28);border-radius:999px;padding:3px 10px;background:rgb(255 111 142 / .07)}
.chapter span:not(.n){font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-400)}

/* ---------- reflow: nothing may push the page wider than the screen ----------
   Grid and flex children default to min-width:auto, so one long unbreakable string (a SQL
   statement in a truncating cell, a file path) drags the whole document sideways. Verified
   at 320px, and again with the WCAG 1.4.12 text-spacing overrides applied. */
.split>*,.grid>*,.card,.row>*,.node,.svc,.node .hd,.stat,.src,.foot-col,.ba-b,.ba-a,.ba-k,.step>*{min-width:0}
.mock-bar{flex-wrap:wrap}
.mock-bar .r{margin-left:auto}
.svc{flex-wrap:wrap}
.svc u{margin-left:auto}
.node .hd{flex-wrap:wrap}
.hero-text,.final{max-width:100%}
.term-body code{white-space:pre}

/* ---------- section helpers ---------- */
.sec-head.flush{margin-bottom:0}
.card .tag+h3{margin-top:14px}
.card h3.k{font-family:var(--mono);color:var(--poke-400);font-size:1rem}
.cost.lg{font-size:17px}
.bignum-note{font-size:12.5px;color:var(--ink-500);margin-top:12px;line-height:1.5}
.bignum .hr{font-size:13.5px;color:var(--ink-400);border-top:1px solid var(--ink-800);
  padding-top:14px;margin-top:6px;line-height:1.55}
.bignum .hr strong{color:var(--ink-200)}
.note{font-size:12.5px;color:var(--ink-500);line-height:1.55}
.diag{margin-top:26px}
.diag h3{font-size:13px;color:var(--ink-300);margin-bottom:12px}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-lg{display:flex;flex-direction:column;gap:26px}

.diag-note{margin-top:14px}
.stack-top{margin-top:44px}
.install-steps{gap:24px}
h2 .mono{font-size:.88em}
.src h3 .tag{margin-left:6px}
.compare-note{margin-top:16px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px;margin-top:14px}
.kv dt{font-family:var(--mono);color:var(--poke-400);white-space:nowrap}
.kv dd{margin:0;color:var(--ink-400)}

/* ---------- utilities: the page carries no inline style attribute, so a strict
   Content-Security-Policy (no 'unsafe-inline') serves this file unchanged ---------- */
.c-poke{color:var(--poke-400)}
.c-good{color:var(--good)}
.c-bad{color:var(--bad)}
.c-dim{color:var(--ink-500);font-style:normal}
.nano{font-size:11.5px}
.bar-100 i{width:100%} .bar-23 i{width:23%} .bar-19 i{width:19%}
.bar-12 i{width:12%}  .bar-10 i{width:10%}  .bar-9 i{width:9%}
#stats{padding-top:72px}

/* ---------- accessibility basics ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;top:0;left:0;z-index:100;background:var(--poke-500);color:var(--ink-950);
  padding:12px 18px;border-radius:0 0 12px 0;font-weight:600;font-size:14px;text-decoration:none;
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{width:auto;height:auto;overflow:visible;clip:auto}
/* One focus ring for everything focusable. --poke-300 is 10.8:1 against every surface on the
   page, and the dark inner line keeps it visible on the pink button too. */
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:3px solid var(--poke-300);outline-offset:2px;border-radius:6px;
  box-shadow:0 0 0 1px var(--ink-950)}
.faq summary:focus-visible{outline-offset:-3px;border-radius:0}
.term-body:focus-visible,.tbl-wrap:focus-visible{outline-offset:-3px}
fieldset{border:0;margin:0;padding:0;min-width:0}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgb(11 11 14 / .78);border-bottom:1px solid rgb(38 38 46 / .6)}
.nav-in{max-width:var(--maxw);margin-inline:auto;padding:12px 20px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.02em;text-decoration:none;font-size:15px}
/* The turtle, the same one the panel puts in the browser tab. No box around it: an emoji in a
   pink square fights with the square. */
.brand .dot{width:22px;height:22px;display:grid;place-items:center;font-size:18px;line-height:1}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{color:var(--ink-300);text-decoration:none;font-size:14px;transition:color .15s}
.nav-links a:hover{color:var(--ink-100)}
.nav-right{display:flex;gap:14px;align-items:center;margin-left:auto}
.nav-right .gh{display:inline-flex;align-items:center;gap:7px;color:var(--ink-300);text-decoration:none;font-size:14px;transition:color .15s}
.nav-right .gh:hover{color:var(--ink-100)}
.nav-right .gh svg{width:16px;height:16px;fill:currentColor}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;
  padding:11px 18px;font-size:14.5px;font-weight:500;text-decoration:none;transition:.16s;border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--poke-500);color:var(--ink-950);font-weight:600}
.btn-primary:hover{background:var(--poke-400)}
/* A control is recognised by its edge: the ghost button's border clears 3:1 on the page (WCAG 1.4.11). */
.btn-ghost{border-color:var(--ink-600);background:var(--ink-850);color:var(--ink-100)}
.btn-ghost:hover{border-color:var(--ink-400);background:var(--ink-800)}
.btn-sm{padding:8px 14px;font-size:13.5px}

/* ---------- cards ---------- */
.card{border-radius:16px;border:1px solid rgb(38 38 46 / .7);background:rgb(17 17 21 / .8);padding:22px}
h3+p,h3+.small,h3+.kv{margin-top:8px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid var(--ink-700);
  background:var(--ink-850);padding:4px 11px;font-size:12px;color:var(--ink-300)}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pills .chip{font-family:var(--mono);font-size:11.5px;padding:4px 10px}

/* ---------- hero ---------- */
.hero{padding-top:62px;padding-bottom:0;text-align:center;border-top:0}
.hero-text{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:900px}
.badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:1px solid var(--ink-700);
  background:rgb(22 22 27 / .8);padding:5px 14px;font-size:12px;color:var(--ink-300)}
.badge b{color:var(--poke-400);font-weight:500}
.hero h1{font-size:clamp(1.95rem,4.3vw,3.3rem);text-wrap:balance;max-width:22ch}
@media (min-width:760px){.hero h1{max-width:24ch}}
.hero .lede{max-width:64ch;text-align:center}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;align-items:center}
.hero .cta-row{justify-content:center}
.cta-note{font-size:13px;color:var(--ink-500)}
.cta-note a{color:var(--ink-400);text-decoration:underline;text-underline-offset:3px}
/* the three promises under the buttons: chips, so they wrap one per line at 320px */
.hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}

/* ---------- hero showcase: CSS-only tabs, no JavaScript ---------- */
.showcase{position:relative;max-width:1280px;margin:54px auto 0;padding-inline:20px;text-align:left}
.sc-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sc-tabs{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;width:max-content;max-width:100%;
  margin:0 auto 24px;padding:4px;border:1px solid var(--ink-600);background:rgb(22 22 27 / .75);border-radius:999px}
.sc-tabs label{padding:7px 17px;border-radius:999px;font-size:13.5px;color:var(--ink-400);transition:.15s;white-space:nowrap;
  cursor:pointer}
.sc-tabs label:hover{color:var(--ink-200)}
.sc-frame{display:grid}
.sc-pane{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .28s ease,transform .28s ease}
#sc1:checked~.sc-tabs label[for=sc1],
#sc2:checked~.sc-tabs label[for=sc2],
#sc3:checked~.sc-tabs label[for=sc3],
#sc4:checked~.sc-tabs label[for=sc4]{background:rgb(255 111 142 / .16);color:var(--ink-100);
  box-shadow:inset 0 0 0 1px var(--poke-500)}  /* the chosen tab is told apart by its edge, not by a shade */
#sc1:focus-visible~.sc-tabs label[for=sc1],
#sc2:focus-visible~.sc-tabs label[for=sc2],
#sc3:focus-visible~.sc-tabs label[for=sc3],
#sc4:focus-visible~.sc-tabs label[for=sc4]{outline:2px solid var(--poke-500);outline-offset:2px}
#sc1:checked~.sc-frame .p1,
#sc2:checked~.sc-frame .p2,
#sc3:checked~.sc-frame .p3,
#sc4:checked~.sc-frame .p4{opacity:1;visibility:visible;transform:none}

/* ---------- terminal ---------- */
.term{margin-top:22px;border-radius:14px;border:1px solid var(--ink-700);background:var(--ink-950);
  font-family:var(--mono);font-size:13px;overflow:hidden}
.term-bar{display:flex;align-items:center;gap:7px;padding:9px 13px;border-bottom:1px solid var(--ink-800);background:rgb(22 22 27 / .8)}
.term-bar i{width:9px;height:9px;border-radius:50%;background:var(--ink-700);display:block}
.term-bar span{margin-left:6px;font-size:11px;color:var(--ink-500);letter-spacing:.04em}
.term-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;overflow-x:auto}
.term-body .pr{color:var(--poke-500);user-select:none}
.term-body code{color:var(--ink-200);white-space:pre}
.term-body .cm{color:var(--ink-500)}
.term-body .ok{color:var(--good)}
.term-body .wn{color:var(--warn)}
.term-body .hl{color:var(--poke-400)}
.term-body .sp{height:5px}

/* The one command that installs everything. No copy button: this site runs no JavaScript at
   all (the policy in the vhost forbids it), so the command selects itself in one click. */
.cmd{margin-top:22px;display:flex;align-items:center;gap:12px;
  padding:clamp(14px,2.2vw,20px) clamp(14px,2.4vw,22px);border-radius:14px;
  border:1px solid var(--poke-500);background:linear-gradient(180deg,rgb(255 111 142 / .09),rgb(255 111 142 / .03));
  box-shadow:0 22px 60px -32px var(--poke-600)}
.cmd-pr{font-family:var(--mono);color:var(--poke-400);user-select:none;flex:none}
.cmd-line{font-family:var(--mono);font-size:clamp(12.5px,1.4vw,15px);color:var(--ink-100);
  /* It wraps instead of scrolling: a command you cannot read to the end is not a call to
     action. Wrapping is visual only, so what gets copied is still one line. */
  white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;
  /* One click takes the whole line: on a phone, a long press does. */
  user-select:all;-webkit-user-select:all}
.cmd-line:focus-visible{outline:2px solid var(--poke-400);outline-offset:4px;border-radius:4px}
.cmd-hint{margin-top:10px;font-size:13px;color:var(--ink-400);line-height:1.55;max-width:62ch}
.cmd-hint code{font-family:var(--mono);font-size:12.5px;color:var(--ink-300)}

/* The hero panes are screenshots of the live demo, not drawings: what the page promises is
   what the panel does. Each sits in a browser window with the demo's real address, over a
   warm glow, so the first thing on the page reads as a product and not as an illustration.
   The tall ones hold still on their headline numbers, then walk slowly to the bottom and back:
   the closest thing to a recording that costs nothing, and it stops for anyone who asked their
   system for less motion. Every frame is the same height, so no pane leaves a black band. */
.sc-frame{position:relative}
.sc-frame::before{content:"";position:absolute;inset:-6% 4% auto;height:70%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgb(255 111 142 / .22),rgb(138 180 255 / .06) 60%,transparent);filter:blur(40px)}
.win{position:relative;border-radius:16px;border:1px solid var(--ink-700);background:var(--ink-900);overflow:hidden;
  box-shadow:0 1px 0 rgb(255 255 255 / .04) inset,0 40px 120px -30px rgb(0 0 0 / .8),0 0 0 1px rgb(255 111 142 / .06)}
.win-bar{display:flex;align-items:center;gap:7px;height:50px;padding-inline:14px;border-bottom:1px solid var(--ink-700);
  background:var(--ink-850)}
.win-bar i{width:11px;height:11px;border-radius:50%;background:var(--ink-700)}
.win-bar i:first-child{background:#ff6f8e}
.win-url{flex:1;min-width:0;margin-inline:10px;padding:4px 12px;border-radius:8px;background:var(--ink-950);
  font-family:var(--mono);font-size:12px;color:var(--ink-400);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot{--shot-h:clamp(340px,60vh,600px);position:relative;height:var(--shot-h);margin:0;background:var(--ink-950);overflow:hidden}
.shot img{position:absolute;inset:0;display:block;width:100%;height:auto;min-height:100%;
  object-fit:cover;object-position:top center}
.shot::after{content:"";position:absolute;inset:auto 0 0;height:56px;pointer-events:none;
  background:linear-gradient(transparent,rgb(11 11 14 / .85))}
.shot-scroll img{animation:shot-pan 44s ease-in-out infinite alternate}
@keyframes shot-pan{0%,14%{transform:translateY(0)}86%,100%{transform:translateY(calc(-100% + var(--shot-h)))}}
@media (prefers-reduced-motion:reduce){.shot-scroll img{animation:none}}
.win-cta{flex:none;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-radius:999px}
.win-cta .pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--poke-500);background:rgb(255 111 142 / .1);color:var(--ink-100);
  font-size:12.5px;font-weight:500;transition:border-color .15s,background .15s}
.win-cta:hover .pill{border-color:var(--poke-400);background:var(--ink-800)}
.win-cta:focus-visible{outline:2px solid var(--poke-500);outline-offset:3px}
.win-cta .pill span{color:var(--poke-400);transition:transform .15s}
.win-cta:hover .pill span{transform:translateX(3px)}

.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  border:1px solid rgb(38 38 46 / .7);border-radius:16px;overflow:hidden;background:rgb(38 38 46 / .5)}
.stat{background:var(--ink-950);padding:22px 24px;display:flex;flex-direction:column;gap:5px}
.stat b{font-size:clamp(1.35rem,2.3vw,1.75rem);font-weight:600;letter-spacing:-.03em;color:var(--ink-100)}
.stat span{font-size:13px;color:var(--ink-400);line-height:1.5}

/* ---------- mock product panels (stand-ins for real screenshots) ---------- */
.mock{border-radius:18px;border:1px solid var(--ink-700);background:linear-gradient(180deg,rgb(22 22 27 / .95),rgb(17 17 21 / .95));
  overflow:hidden;box-shadow:0 30px 80px -30px rgb(0 0 0 / .8)}
.mock-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--ink-800);background:rgb(11 11 14 / .6)}
.mock-bar .t{font-size:12.5px;color:var(--ink-300);font-weight:500}
.mock-bar .r{margin-left:auto;font-size:11.5px;color:var(--ink-500);font-family:var(--mono)}
.mock-body{padding:6px 0}
.row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;
  padding:13px 16px;border-top:1px solid rgb(28 28 34 / .8);font-size:13.5px}
.row:first-child{border-top:0}
.row.two{grid-template-columns:1fr auto}
.row .nm{font-family:var(--mono);font-size:13px;color:var(--ink-100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .nm.txt{font-family:var(--sans);font-size:14px;font-weight:500}
.row .sub{font-size:11.5px;color:var(--ink-500);margin-top:3px;font-family:var(--mono)}
.row .sub.txt{font-family:var(--sans);font-size:12.5px}
.row .cost{font-family:var(--mono);color:var(--poke-400);font-weight:500;white-space:nowrap}
.bar{width:104px;height:6px;border-radius:999px;background:var(--ink-800);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--poke-600),var(--poke-400))}
.tag{font-size:11.5px;padding:2px 8px;border-radius:999px;border:1px solid;letter-spacing:.02em;white-space:nowrap}
.tag-bad{color:var(--bad);border-color:rgb(255 122 122 / .35);background:rgb(255 122 122 / .08)}
.tag-warn{color:var(--warn);border-color:rgb(245 199 106 / .35);background:rgb(245 199 106 / .08)}
.tag-good{color:var(--good);border-color:rgb(126 224 161 / .35);background:rgb(126 224 161 / .08)}
.tag-info{color:var(--info);border-color:rgb(138 180 255 / .35);background:rgb(138 180 255 / .08)}
.tag-off{color:var(--ink-400);border-color:var(--ink-700);background:rgb(38 38 46 / .4)}

/* ---------- infrastructure map mock ---------- */
.map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px}
.node{border:1px solid var(--ink-700);border-radius:13px;background:rgb(11 11 14 / .55);padding:13px;
  display:flex;flex-direction:column;gap:9px}
.node.edge{border-style:dashed;border-color:rgb(138 180 255 / .35);background:rgb(138 180 255 / .05)}
.node .hd{display:flex;align-items:baseline;gap:8px}
.node .hd b{font-size:13px;font-weight:600;letter-spacing:-.01em}
.node .hd span.meta{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-500);margin-left:auto}
.svc{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--ink-300);
  border:1px solid rgb(38 38 46 / .9);border-radius:8px;padding:6px 9px;background:rgb(22 22 27 / .7)}
.svc u{text-decoration:none;color:var(--ink-500);margin-left:auto;font-size:11.5px}
.svc.hot{border-color:rgb(255 111 142 / .35);color:var(--poke-300);background:rgb(255 111 142 / .07)}
.map-note{padding:0 18px 16px;font-size:12px;color:var(--ink-500);line-height:1.5}

.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split.top{align-items:start}
.feat-list{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.feat-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-300);line-height:1.55}
.feat-list .b{color:var(--ink-100);font-weight:500}
.tick{flex:none;width:18px;height:18px;border-radius:6px;background:rgb(255 111 142 / .14);color:var(--poke-400);
  display:grid;place-items:center;font-size:11px;margin-top:2px}

/* ---------- big number ---------- */
.bignum{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.bignum b{font-family:var(--mono);font-size:clamp(2.6rem,6.5vw,4.2rem);font-weight:500;letter-spacing:-.04em;
  color:var(--poke-400);line-height:1;display:flex;align-items:baseline;gap:.12em}
.bignum b .u{font-size:.42em;letter-spacing:0;color:var(--poke-500);opacity:.85}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl caption{text-align:left;font-size:13px;color:var(--ink-500);padding:0 16px 12px}
.tbl th,.tbl td{text-align:left;padding:13px 16px;border-top:1px solid rgb(38 38 46 / .7);vertical-align:top}
.tbl thead th{border-top:0;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-400);font-weight:500}
.tbl thead th.me{color:var(--poke-400)}
.tbl tbody th{font-weight:500;color:var(--ink-200);width:23%}
.tbl td{color:var(--ink-400)}
.tbl td.me{color:var(--ink-100);background:rgb(255 111 142 / .04)}
.yes{color:var(--good)} .no{color:var(--ink-500)}
/* position:relative is load-bearing. The visually hidden labels inside the cells are
   position:absolute, and an absolutely positioned box is only clipped by an ancestor's
   overflow when that ancestor is its containing block. Without this, those 1px labels
   escaped the scroller at their static position deep inside a 1050px table and dragged
   the whole document to 537px wide on a 320px screen. */
.tbl-wrap{position:relative;overflow-x:auto;border:1px solid rgb(38 38 46 / .7);
  border-radius:16px;background:rgb(17 17 21 / .6);padding-top:14px}

/* ---------- sources grid ---------- */
.src{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:14px;
  border:1px solid rgb(38 38 46 / .7);background:rgb(22 22 27 / .55)}
.src h3{font-size:14px}
.src p{font-size:13px;color:var(--ink-400);line-height:1.5}

/* ---------- steps ---------- */
.step{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start}
.step-n{width:34px;height:34px;border-radius:11px;border:1px solid var(--ink-700);background:var(--ink-850);
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--poke-400)}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:0;border:1px solid rgb(38 38 46 / .7);border-radius:16px;overflow:hidden}
.faq details{border-top:1px solid rgb(38 38 46 / .7);background:rgb(17 17 21 / .5)}
.faq details:first-child{border-top:0}
.faq summary{padding:18px 20px;font-size:15px;font-weight:500;color:var(--ink-100);list-style:none;
  display:flex;align-items:center;gap:14px;transition:background .15s;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgb(28 28 34 / .5)}
.faq summary::after{content:"+";margin-left:auto;color:var(--ink-500);font-size:18px;font-weight:400;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq .ans{padding:0 20px 20px;color:var(--ink-300);font-size:14.5px;max-width:74ch;line-height:1.62}
.faq .ans a{color:var(--poke-400)}
.faq .ans p+p{margin-top:12px}

/* ---------- before / after: same servers, six weeks apart ---------- */
.ba{border:1px solid rgb(38 38 46 / .7);border-radius:18px;overflow:hidden;
  background:rgb(17 17 21 / .5);box-shadow:0 30px 80px -40px rgb(0 0 0 / .8)}
.ba-head{display:grid;grid-template-columns:168px 1fr 1fr;gap:1px;background:rgb(38 38 46 / .7)}
.ba-head span{background:rgb(11 11 14 / .75);padding:13px 20px;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-500)}
.ba-head span:last-child{color:var(--poke-400)}
.ba-row{display:grid;grid-template-columns:168px 1fr 1fr;gap:1px;background:rgb(38 38 46 / .55);
  border-top:1px solid rgb(38 38 46 / .7)}
.ba-k{background:rgb(11 11 14 / .55);padding:18px 20px;font-size:12.5px;font-weight:500;
  color:var(--ink-300);line-height:1.4;letter-spacing:-.01em}
.ba-k span.meta{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;
  color:var(--ink-500);margin-top:5px;letter-spacing:.04em}
.ba-b,.ba-a{padding:18px 20px;display:flex;gap:11px;align-items:flex-start}
.ba-b{background:var(--ink-950)}
.ba-a{background:rgb(255 111 142 / .05)}
.ba-b b,.ba-a b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px;line-height:1.35}
.ba-b b{color:var(--ink-400)}
.ba-a b{color:var(--ink-100)}
.ba-b p{font-size:13px;color:var(--ink-500);line-height:1.5}
.ba-a p{font-size:13px;color:var(--ink-300);line-height:1.5}
.ba-a p .mono{color:var(--poke-300);font-size:12.5px}
.mk{flex:none;width:19px;height:19px;border-radius:6px;display:grid;place-items:center;font-size:11px;margin-top:3px}
.mk-x{background:rgb(82 82 94 / .22);color:var(--ink-500)}
.mk-v{background:rgb(255 111 142 / .14);color:var(--poke-400)}
/* Read by a screen reader on every screen; shown to the eye only once the columns stack. */
.lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ba-foot{padding:16px 20px;border-top:1px solid rgb(38 38 46 / .7);background:rgb(11 11 14 / .5);
  font-size:12.5px;color:var(--ink-500);line-height:1.55}

/* ---------- final + footer ---------- */
.final{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.final .lede{text-align:center}
footer{border-top:1px solid rgb(38 38 46 / .6);padding-block:44px;color:var(--ink-500);font-size:13.5px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-400);margin:0;font-weight:500}
.foot-col a{color:var(--ink-400);text-decoration:none}
.foot-col a:hover{color:var(--ink-200)}
.foot-bot{margin-top:36px;padding-top:22px;border-top:1px solid rgb(38 38 46 / .6);display:flex;align-items:center;gap:0 16px;flex-wrap:wrap}

@media (max-width:980px){
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  section{padding-block:64px}
  section.tight{padding-block:0 64px}
  .sc-tabs label{padding:7px 12px;font-size:12.5px}
  .showcase{margin-top:40px}
  .split{grid-template-columns:1fr;gap:28px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:1fr}
  .map{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
  .nav-links a[data-opt]{display:none}
}
@media (max-width:760px){
  .ba-head{display:none}
  .ba-row{grid-template-columns:1fr}
  .ba-k{padding:14px 20px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--poke-400)}
  .ba-k span.meta{display:none}
  .ba-a{border-top:1px solid rgb(38 38 46 / .55)}
  .lbl{position:static;width:auto;height:auto;margin:0 0 6px;overflow:visible;clip:auto;
    font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
    letter-spacing:.1em;color:var(--ink-500)}
  .ba-a .lbl{color:var(--poke-400)}
}
@media (max-width:620px){
  .win-bar{padding-inline:10px;gap:5px}
  .win-url{display:none}
  .win-bar .win-cta{margin-left:auto}
  /* Below this width the brand, the one nav link and the demo button no longer fit on one
     line at 320px. They wrap instead of being hidden: the navigation stays complete. */
  .nav-in{gap:10px 12px;padding-inline:16px;flex-wrap:wrap}
  .nav-links{gap:14px}
  .nav-right{margin-left:auto}
  .wrap,.showcase{padding-inline:16px}
  .map{padding:14px}
  .sc-tabs{width:100%;border-radius:14px;justify-content:stretch}
  .sc-tabs label{flex:1;text-align:center;border-radius:11px;padding:8px 6px;font-size:12px}
  .stat-row{grid-template-columns:1fr}
  .g2,.g4{grid-template-columns:1fr}
  .map{grid-template-columns:1fr}
  .row{grid-template-columns:1fr auto}
  .row .bar{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---------- comparison pages ---------- */
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-400);margin-bottom:18px}
.crumb a{color:var(--ink-400);text-decoration:none;border-bottom:1px solid transparent}
.crumb a:hover{color:var(--ink-200);border-bottom-color:var(--ink-600)}
.crumb span[aria-current]{color:var(--ink-200)}
.vs-hero{padding-top:52px;padding-bottom:58px;border-top:0}
.vs-hero .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.vs-hero .crumb{margin-bottom:2px}
.vs-hero h1{font-size:clamp(1.8rem,4vw,2.9rem);max-width:20ch}
.vs-hero .lede{max-width:66ch}
.vs-hero .cta-row{margin-top:4px}

/* the honest summary, before anything else on the page */
.verdict{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.verdict>div{border-radius:16px;border:1px solid rgb(38 38 46 / .7);padding:22px;display:flex;
  flex-direction:column;gap:10px;background:rgb(17 17 21 / .8)}
.verdict .mine{border-color:rgb(255 111 142 / .3);background:rgb(255 111 142 / .05)}
.verdict h2{font-size:1.05rem;font-weight:600}
.verdict .who{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-500)}
.verdict .mine .who{color:var(--poke-400)}
.verdict ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
/* The dash is positioned, not a flex item: inside a flex container every inline child
   becomes its own box, which tore sentences containing a <span class="mono"> in half. */
.verdict li{position:relative;padding-left:20px;font-size:14px;color:var(--ink-300);line-height:1.55}
.verdict li::before{content:"—";position:absolute;left:0;top:0;color:var(--ink-600)}
.verdict .mine li::before{color:var(--poke-500)}
.verdict li .mono{font-size:.92em;color:var(--poke-300);white-space:nowrap}

.prose{display:flex;flex-direction:column;gap:34px;max-width:72ch}
.prose h2{font-size:clamp(1.3rem,2.4vw,1.6rem)}
.prose p{color:var(--ink-300);font-size:15.5px;line-height:1.68;margin-top:12px}
.prose p+p{margin-top:14px}
.prose strong{color:var(--ink-100);font-weight:600}

.together{border-radius:16px;border:1px solid rgb(138 180 255 / .25);background:rgb(138 180 255 / .05);
  padding:22px;display:flex;flex-direction:column;gap:10px}
.together h2{font-size:1.05rem;color:var(--info)}
.together p{font-size:14.5px;color:var(--ink-300);line-height:1.6}

/* the index of comparisons */
.vs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vs-card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:14px;text-decoration:none;
  border:1px solid rgb(38 38 46 / .7);background:rgb(22 22 27 / .55);transition:border-color .15s,background .15s}
.vs-card:hover{border-color:var(--ink-600);background:rgb(28 28 34 / .7)}
.vs-card b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.vs-card span{font-size:13.5px;color:var(--ink-400);line-height:1.5}
.vs-card em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-500)}
.vs-group{margin-bottom:34px}
.vs-group>h2{font-size:1.05rem;margin-bottom:6px}
.vs-group>p{font-size:14px;color:var(--ink-400);margin-bottom:16px;max-width:70ch;line-height:1.55}

@media (max-width:900px){
  .verdict{grid-template-columns:1fr}
  .vs-grid{grid-template-columns:1fr}
}

/* ---------- the two tables on /vs/: the cost table and the master matrix ---------- */
.tbl.cost tbody th,.tbl.matrix tbody th{width:auto}
.tbl.cost thead th .sz{display:block;font-size:11px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink-500);margin-top:5px;line-height:1.4;max-width:22ch}
.tbl.cost tbody th{min-width:15ch}
.tbl.cost tbody th a{color:var(--ink-100);text-decoration:none;border-bottom:1px solid var(--ink-600)}
.tbl.cost tbody th a:hover{border-bottom-color:var(--poke-400);color:var(--poke-300)}
.tbl.cost .meter{display:block;font-size:11.5px;font-weight:400;color:var(--ink-500);
  margin-top:5px;line-height:1.45;max-width:26ch}
.tbl.cost td{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl.cost td.why{white-space:normal;font-size:12.5px;color:var(--ink-400);line-height:1.5;min-width:30ch}
.tbl.cost tr.mine th,.tbl.cost tr.mine td{background:rgb(255 111 142 / .06)}
.tbl.cost tr.mine th{color:var(--ink-100)}
.tbl.cost td.mine{color:var(--poke-300);font-weight:600;font-size:15px}

.tbl.matrix tbody th a{color:var(--ink-100);text-decoration:none;border-bottom:1px solid var(--ink-600)}
.tbl.matrix tbody th a:hover{border-bottom-color:var(--poke-400);color:var(--poke-300)}
.tbl.matrix thead th{vertical-align:bottom}
.tbl.matrix thead th:not(:first-child):not(:last-child){max-width:11ch}
/* No percentage width here: `width:1%` on a cell of an auto-layout table inside a
   horizontal scroller made the document itself 537px wide at a 320px viewport. */
.tbl.matrix td.m{text-align:center;white-space:nowrap}
.tbl.matrix td.best{white-space:normal;font-size:13px;color:var(--ink-300);min-width:32ch}
.tbl.matrix tr.mine th,.tbl.matrix tr.mine td{background:rgb(255 111 142 / .06)}
.mk-y{color:var(--good);font-size:15px}
.mk-p{color:var(--warn);font-size:15px}
/* aria-hidden, so axe skips it — but a sighted reader still has to see it. ink-600 is a
   border colour at 3.25:1; ink-500 is 4.87:1 and still reads as the quiet answer. */
.mk-n{color:var(--ink-500);font-size:15px}

/* a header row that scrolls away on a wide table is useless */
@supports (position:sticky){
  .tbl.cost thead th,.tbl.matrix thead th{position:sticky;top:0;background:var(--ink-950);z-index:1}
}

/* ---------- target size: WCAG 2.5.5 AAA, 44 x 44 CSS px ----------
   Every control is at least 44px tall. Where the drawing is smaller (a link in a table, a pill in
   the window bar) the clickable box is grown around it, so the page looks the same and a thumb
   still lands. test/controls.mjs tabs through every page and measures each stop. */
.brand,.nav-links a,.nav-right .gh,.foot-col a,.foot-bot a,.crumb a,.sc-tabs label{min-height:44px;display:inline-flex;align-items:center}
.sc-tabs label{justify-content:center}
.btn{min-height:44px}
.foot-col{gap:0}
.foot-col h3{margin-bottom:6px}
.tbl.cost tbody th a,.tbl.matrix tbody th a{display:inline-block;min-width:44px;padding-block:13px;margin-block:-13px;border-bottom:0;
  text-decoration:underline;text-decoration-color:var(--ink-600);text-underline-offset:3px}
.tbl.cost tbody th a:hover,.tbl.matrix tbody th a:hover{text-decoration-color:var(--poke-400)}
.cmd-line{min-height:44px;display:flex;align-items:center}