/* Self-hosted so the page's CSP names no external origin, and so no
   visitor's browser announces the visit to a third party.

   ONE file, not three. Chivo v21 is a variable font (fvar/HVAR/STAT),
   so the single latin woff2 covers the whole 600-800 range that
   --display asks for -- Google's own stylesheet points all three weight
   blocks at this same URL.

   Latin subset only, and that is not a reduction: the rendered page
   holds four non-ASCII characters, and the three that Chivo can draw
   are all in this subset. The fourth is the arrow U+2192, which sits in
   NO Chivo subset and already falls back to a system font on the live
   site. So this is byte-for-byte what a browser fetches today.

   swap preserves the display:swap behaviour the Google link carried:
   text paints in the fallback first rather than staying invisible. */
@font-face{
  font-family:'Chivo';
  font-style:normal;
  font-weight:600 800;
  font-display:swap;
  src:url('/fonts/chivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================
   MIDNIGHT - the panel's own theme, at page scale.

   Not a dark mode invented for this page. Every value below is
   lifted from THEMES.midnight in cra.user.js, which is the
   default theme of the thing being advertised: the gradient,
   the blue-tinted translucent surfaces, the accent, the glow,
   and the starfield with its occasional meteor.

   The point is recognition. Somebody who has the panel open
   should arrive here and find the same room.
   ========================================================== */
:root{
  /* --- straight from THEMES.midnight.tokens --- */
  /* --bg and --grad are the ONE departure: the theme's navy is taken down
     to near-black so a deep-space field has somewhere to sit. Every other
     token below is the panel's, untouched. */
  --bg:#070b18;
  --surf:rgba(120,160,255,0.08);
  --surf2:rgba(120,160,255,0.16);
  --border:rgba(120,160,255,0.16);
  --text:#e6edff;
  --dim:#9fb2e0;
  --mut:#5e6f9e;
  --accent:#4f8cff;
  --accent2:#6aa6ff;
  --field:rgba(6,12,28,0.7);
  --shadow:rgba(0,8,30,0.6);
  --glow:rgba(79,140,255,0.4);
  --on-accent:#04102b;

  /* Deep space: near-black navy into indigo, on the theme's 160deg axis.
     This is the floor the nebulae are painted onto, and it is deliberately
     darker than the panel's own gradient (luminance .0056 against .0117)
     so there is room to put colour above it without spending contrast. */
  --grad:linear-gradient(160deg,#05060f 0%,#080a1e 45%,#06060f 100%);
  --head-a:#1b2a4d;
  --head-b:#10182f;

  /* --mut is 3.74:1 on this ground. In the panel it labels chrome at a
     glance; on a page it would be setting paragraphs, so it never sets
     type here. This is its accessible sibling, following the same `-t`
     convention the rest of this project uses, and it is what small
     de-emphasised text actually gets. */
  --mut-t:#8494c4;

  --radius:16px;
  --radius-sm:10px;
  --wrap:1180px;
  --gut:clamp(20px,4vw,40px);

  /* The panel's own elevation, three layers: a long soft drop, a short
     contact shadow, and a hairline ring standing in for a border. */
  --lift:0 18px 50px -12px var(--shadow),0 6px 18px -8px var(--shadow),0 0 0 1px var(--border);
  --lift-hi:0 22px 60px -12px var(--shadow),0 8px 22px -8px var(--shadow),0 0 0 1px var(--accent);

  /* Two stacks, on purpose.

     Body is the panel's own, verbatim from cra.user.js -- the product
     renders in system UI, so prose here does too. It costs no request and
     cannot flash.

     THEMES.midnight defines no typeface, so display is the one place this
     page is not copying the product, and it is where a landing page earns
     its presence. Chivo is a Franklin-descended grotesque: sturdy, a little
     industrial, with terminals that cut on an angle rather than sitting
     flat. At 4.9rem that reads as built rather than as a default, which
     suits an engineering tool better than the neutral geometrics every
     product page currently reaches for. Three weights, headings ONLY --
     every other word on this page is set in the system stack. */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --display:"Chivo",var(--sans);
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono","Consolas",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* The night itself: the theme's gradient, pinned so it does not scroll
   away, with the starfield painted on top of it and everything else
   above that. */
#sky{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--grad);
}
/* The nebula field. Painted once per load at a sixth of the viewport and
   stretched back up -- nebulae are soft, so the browser's own upscaling
   IS the blur, and it costs a 1/36th-size buffer instead of a full-screen
   one. Sits under the stars and over the ground. */
#nebula{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  width:100%;height:100%;
}
#stars{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  width:100%;height:100%;
}
header,main,footer{position:relative;z-index:3}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.08;letter-spacing:-.022em;font-weight:700}
h1{font-size:clamp(2.7rem,6.4vw,4.9rem);letter-spacing:-.032em;font-weight:800}
h2{font-size:clamp(2rem,4.2vw,3.3rem);letter-spacing:-.028em;font-weight:800}
h3{font-size:1.16rem;letter-spacing:-.015em;font-weight:600}

/* The accent word. The glow is the theme's own --glow, the same one the
   panel pulses on its primary button, kept low so it reads as light on
   the letterform rather than as a blur. */
.s{color:var(--accent2);text-shadow:0 0 26px var(--glow)}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}
.lede{font-size:1.06rem;line-height:1.7;color:var(--dim);max-width:62ch}
a{color:var(--accent2)}
a:hover{color:var(--text)}

.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}

:focus-visible{outline:2.5px solid var(--accent2);outline-offset:3px;border-radius:4px}

/* ---- surfaces: the panel's glass ---------------------------
   Translucent blue over the gradient rather than a flat fill, so the
   night shows through every card the way it shows through the panel. */
.card{
  background:var(--surf);
  border-radius:var(--radius);
  box-shadow:var(--lift);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  padding:clamp(20px,2.4vw,28px);
}

/* ---- masthead ---------------------------------------------- */
.mast{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(10,19,38,.92),rgba(10,19,38,.72));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.mast-in{display:flex;align-items:center;gap:24px;height:64px}
.mark{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  color:var(--text);text-decoration:none;white-space:nowrap;
}
.mark .moon{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 32%,#eaf1ff 0%,#b9ccff 42%,var(--accent) 100%);
  box-shadow:0 0 16px var(--glow);
}
.mast nav{margin-left:auto;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.mast nav::-webkit-scrollbar{display:none}
.mast nav a{
  color:var(--dim);text-decoration:none;white-space:nowrap;
  font-size:.83rem;font-weight:500;
  padding:7px 11px;border-radius:999px;
  transition:background .2s,color .2s;
}
.mast nav a:hover{color:var(--text);background:var(--surf)}
.mast nav a[aria-current="true"]{color:var(--text);background:var(--surf2)}
@media (max-width:820px){.mast nav{display:none}}

/* ---- buttons: the panel's pill + its glow pulse ------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);
  font:700 .92rem/1 var(--sans);letter-spacing:-.008em;
  text-decoration:none;border:0;cursor:pointer;
  box-shadow:0 6px 20px -6px var(--glow);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .22s,background .22s;
}
.btn:hover{background:var(--accent2);color:var(--on-accent);transform:translateY(-2px);box-shadow:0 12px 30px -8px var(--glow)}
.btn:active{transform:translateY(0)}
.btn--ghost{
  background:var(--surf);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--border);
}
.btn--ghost:hover{background:var(--surf2);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.btn svg{flex:none}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---- hero -------------------------------------------------- */
.hero{padding:clamp(56px,8vw,104px) 0 clamp(40px,5vw,72px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(32px,5vw,68px);align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero h1 .l{display:block}

/* A closed door, not a coloured stripe. The accent bar down one edge said
   "notice" generically; the lock says which KIND of notice, which is the
   single most important thing on this page -- installing without being on
   the list gets you a script that silently does nothing. */
.gate{
  display:flex;gap:13px;align-items:flex-start;
  margin-top:26px;padding:16px 18px;
  background:var(--surf);border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px var(--border);
  font-size:.95rem;line-height:1.6;color:var(--dim);
}
.gate svg{flex:none;margin-top:3px;color:var(--accent2)}
.gate p{margin:0}
.gate strong{color:var(--text);font-weight:600}

/* ---- the panel mock: the product, not an illustration ------- */
.panel{
  border-radius:var(--radius);
  background:var(--field);
  box-shadow:var(--lift);
  overflow:hidden;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.panel-head{
  padding:14px 18px;
  background:linear-gradient(135deg,var(--head-a),var(--head-b));
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.panel-title{font-weight:700;font-size:.92rem;letter-spacing:-.01em}
.slug{font:500 10.5px/1 var(--mono);color:var(--mut-t);letter-spacing:.04em;text-transform:uppercase}
.panel-body{padding:18px}

/* Each criterion is a meter. The fill is the accent with its own glow,
   and the one that failed is the only thing on the card that is not
   blue - so the eye lands on the miss without a legend. */
.meter{display:grid;grid-template-columns:96px minmax(0,1fr) 54px;gap:14px;align-items:center;margin-bottom:14px}
.meter:last-child{margin-bottom:0}
.meter-name{font-size:.82rem;font-weight:500;color:var(--dim);line-height:1.25}
.meter-track{height:9px;border-radius:999px;background:rgba(120,160,255,.10);overflow:hidden;position:relative}
/* Always at its true width -- the reveal is a CLIP, not a resize.
   Animating width would relayout the row on every frame of five staggered
   fills; clip-path only repaints. scaleX would have been the other option
   and is wrong here: it squashes the pill's end caps as it grows.

   The clip is inset 18px BEYOND the border box on the three static sides
   so it never crops the 12px glow at rest. Only the right edge travels. */
.meter-fill{
  display:block;height:100%;border-radius:999px;width:var(--w);
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 0 12px var(--glow);
}
.js .meter-fill{clip-path:inset(-18px 100% -18px -18px round 999px)}
.meter-pts{font:600 11.5px/1 var(--mono);color:var(--dim);text-align:right;white-space:nowrap}
.meter.miss .meter-fill{background:linear-gradient(90deg,#ff8a5c,#ffb27a);box-shadow:0 0 12px rgba(255,138,92,.45)}
.meter.miss .meter-pts{color:#ffb27a}

/* the meters fill once the card is actually seen */
.js .lit .meter-fill{
  clip-path:inset(-18px -18px -18px -18px round 999px);
  transition:clip-path 1.05s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i)*.12s);
}
@media (prefers-reduced-motion:reduce){
  /* not merely "no transition" -- never clipped, so the bars are simply
     already drawn rather than snapping in on a stagger */
  .js .meter-fill,.js .lit .meter-fill{clip-path:none;transition:none}
}

.verdict{display:flex;align-items:center;gap:16px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.score{
  flex:none;width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;line-height:1;
  background:radial-gradient(circle at 50% 40%,rgba(79,140,255,.30),rgba(79,140,255,.06));
  box-shadow:0 0 0 1px var(--border),0 0 28px var(--glow);
}
.score b{display:block;font-family:var(--display);font-size:1.62rem;font-weight:700;letter-spacing:-.03em}
.score span{display:block;font:500 8.5px/1 var(--mono);color:var(--mut-t);letter-spacing:.1em;margin-top:3px}
.verdict p{font-size:.88rem;line-height:1.55;color:var(--dim);margin:0}
.verdict b{color:var(--text);font-weight:600}

/* ---- sections ---------------------------------------------- */
section{padding:clamp(56px,8vw,108px) 0;border-top:1px solid var(--border)}
.sec-head{max-width:64ch;margin-bottom:clamp(30px,4vw,50px)}
.sec-head .lede{margin-top:18px}

/* ---- the five criteria ------------------------------------- */
.crit{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1040px){.crit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.crit{grid-template-columns:minmax(0,1fr)}}
.crit .card{display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.crit .card:hover{transform:translateY(-3px);box-shadow:var(--lift-hi)}
.crit .bar{display:block;height:4px;border-radius:999px;margin-bottom:16px;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 12px var(--glow)}
.crit .pts{font:600 10.5px/1 var(--mono);color:var(--accent2);letter-spacing:.07em;text-transform:uppercase;display:block;margin-bottom:9px}
.crit h3{margin-bottom:10px}
.crit p{font-size:.9rem;line-height:1.6;color:var(--dim);margin-bottom:14px}
.crit .thr{
  margin-top:auto;margin-bottom:0;padding-top:12px;border-top:1px solid var(--border);
  font:500 10.5px/1.5 var(--mono);color:var(--mut-t);letter-spacing:.02em;
}

/* ---- where it runs ----------------------------------------- */
.situ{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.2fr);gap:clamp(30px,4.5vw,60px);align-items:center}
@media (max-width:960px){.situ{grid-template-columns:minmax(0,1fr)}}
.browser{border-radius:var(--radius);background:var(--field);box-shadow:var(--lift);position:relative;min-width:0;overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,var(--head-a),var(--head-b))}
.dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--surf2)}
.browser-bar span{font:400 10.5px/1 var(--mono);color:var(--mut-t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;margin-left:6px}
.browser-body{display:grid;grid-template-columns:minmax(0,1fr) 186px;min-height:286px}
@media (max-width:560px){.browser-body{grid-template-columns:minmax(0,1fr) 140px}}
.host{padding:20px;border-right:1px solid var(--border);min-width:0}
.host-line{height:8px;border-radius:999px;background:rgba(120,160,255,.09);margin-bottom:11px}
.host-line.s{width:58%}
.host-line.m{width:82%}
.host-line.t{width:40%;background:rgba(120,160,255,.2)}
.mini{padding:16px 15px;background:var(--surf)}
.mini h4{font-size:.82rem;font-weight:700;margin-bottom:13px;letter-spacing:.01em}
.mini-row{display:flex;justify-content:space-between;gap:8px;font:400 10.5px/1.9 var(--mono);color:var(--dim)}
.mini-row b{font-weight:600;color:var(--text)}
.mini-row.tot{margin-top:11px;border-top:1px solid var(--border);padding-top:9px}
.mini-row.tot b{color:var(--accent2)}
/* the launcher, pulsing exactly like the panel's own */
.launcher{
  position:absolute;right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;
  background:var(--accent);display:grid;place-items:center;color:var(--on-accent);
  font:700 15px/1 var(--sans);letter-spacing:-.02em;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 var(--glow)}
  50%{box-shadow:0 0 16px 2px var(--glow)}
}
@media (prefers-reduced-motion:reduce){
  .launcher{animation:none;box-shadow:0 0 14px 1px var(--glow)}
}

/* ---- what it does ------------------------------------------ */
.does{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.does{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.does{grid-template-columns:minmax(0,1fr)}}
.does .card{transition:box-shadow .25s,transform .25s}
.does .card:hover{transform:translateY(-3px);box-shadow:var(--lift-hi)}
.does h3{margin-bottom:9px;font-size:1.04rem}
.does p{font-size:.9rem;line-height:1.6;color:var(--dim);margin:0}
/* a single star, the page's own motif, standing in for an icon set */
.does .star{
  display:block;width:12px;height:12px;margin-bottom:14px;
  background:var(--accent2);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 7px var(--glow));
}

/* ---- the game layer ---------------------------------------- */
.team{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(26px,3.5vw,48px);align-items:start}
@media (max-width:900px){.team{grid-template-columns:minmax(0,1fr)}}
.board-row{
  display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:11px 4px;border-bottom:1px solid var(--border);font-size:.94rem;
}
.board-row:last-child{border-bottom:0}
.board-row .r{font:600 11.5px/1 var(--mono);color:var(--mut-t)}
.board-row .v{font:600 .92rem/1 var(--mono);color:var(--dim)}
.board-row.top{color:var(--text)}
.board-row.top .r{color:var(--on-accent);background:var(--accent);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;box-shadow:0 0 12px var(--glow)}
.board-row.top .v{color:var(--accent2)}
.synthetic{display:block;margin-top:12px;font:500 10.5px/1.5 var(--mono);color:var(--mut-t);letter-spacing:.03em;text-transform:uppercase}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.badge{
  font:600 10.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;
  background:var(--surf);color:var(--dim);box-shadow:inset 0 0 0 1px var(--border);
}
/* Twenty-seven of them, so the swatch comes down from 40px to 32 and the
   catalogue reads as a palette rather than a row of buttons. Split into
   its two real groups, because "15 standard and 12 seasonal" is the
   actual shape of the thing and a single run of 27 hides it. */
.sw-label{
  display:block;margin:18px 0 8px;
  font:600 10px/1 var(--mono);color:var(--mut-t);
  letter-spacing:.1em;text-transform:uppercase;
}
.swatches{display:flex;gap:7px;flex-wrap:wrap}
.swatches button{
  width:32px;height:32px;border-radius:9px;border:0;cursor:pointer;padding:0;
  background:var(--t);box-shadow:inset 0 0 0 1px var(--border);
  transition:transform .18s,box-shadow .18s;
}
.swatches button:hover{transform:translateY(-2px)}
/* selection is never colour alone: the chosen swatch also lifts and
   carries a ring in the accent */
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent),0 0 16px var(--glow);transform:translateY(-2px)}
.theme-name{display:block;margin-top:12px;font:600 11px/1 var(--mono);color:var(--accent2);letter-spacing:.06em;text-transform:uppercase;min-height:11px}

/* ---- access ------------------------------------------------ */
.access-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:900px){.access-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- install ----------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:s}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{position:relative}
.steps .n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--surf2);color:var(--accent2);
  font:700 14px/1 var(--mono);margin-bottom:15px;
  box-shadow:inset 0 0 0 1px var(--border);
}
.steps h3{margin-bottom:9px;font-size:1.04rem}
.steps p{font-size:.9rem;line-height:1.6;color:var(--dim);margin:0}

/* ---- FAQ ---------------------------------------------------- */
/* Questions stack closed; clicking one drops its answer. Built on native
   <details>/<summary> rather than JS: it is keyboard-operable and
   screen-reader-announced for free, it survives the page's scripts
   failing, and current browsers expand a closed <details> when
   find-in-page matches text inside it, so ctrl-F still reaches an answer
   nobody has opened. */
.faq{list-style:none;margin:0;padding:0;max-width:78ch;display:grid;gap:10px}
.faq > li{
  background:var(--surf);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.faq summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;gap:16px;
  padding:15px 18px;
  font:600 1.01rem/1.45 var(--sans);
  color:var(--text);
  transition:background .18s ease;
}
/* Safari and older Chromium draw their own triangle; this is the only
   way to take it away. */
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--surf2)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* The chevron. A rotated corner rather than an icon so it costs no
   request and inherits the theme's muted ink. */
.faq summary::after{
  content:'';
  margin-left:auto;margin-top:-4px;
  flex:none;width:9px;height:9px;
  border-right:2px solid var(--mut-t);
  border-bottom:2px solid var(--mut-t);
  transform:rotate(45deg);
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:3px}
@media (prefers-reduced-motion:reduce){
  .faq summary,.faq summary::after{transition:none}
}
.faq .a{padding:2px 18px 18px}
.faq .a p{font-size:.9rem;line-height:1.65;color:var(--dim);margin:0}
.faq .a p + p{margin-top:11px}
/* The two switches from the permissions answer. Set in mono and boxed so
   they read as things to find in a UI rather than as prose. */
.faq .switches{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.faq .switches li{
  font:600 12px/1.5 var(--mono);
  color:var(--text);
  background:var(--surf2);
  border:1px solid var(--border);
  border-radius:9px;
  padding:9px 12px;
}
.faq code{font:600 12px/1.5 var(--mono);color:var(--text)}

/* ---- SLA --------------------------------------------------- */
.sla{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:900px){.sla{grid-template-columns:minmax(0,1fr)}}
.sla-bar{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:12px}
.sla-bar:last-child{margin-bottom:0}
.sla-bar span{font:500 10.5px/1 var(--mono);color:var(--mut-t);letter-spacing:.03em}
.sla-bar i{display:block;height:24px;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 12px var(--glow)}
.sla-bar.warn i{background:linear-gradient(90deg,#ffb27a,#ffd0a8);box-shadow:0 0 12px rgba(255,178,122,.4)}
.sla-bar.bad i{background:linear-gradient(90deg,#ff7a8a,#ffa8b4);box-shadow:0 0 12px rgba(255,122,138,.4)}

/* ---- download ---------------------------------------------- */
.dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:820px){.dl{grid-template-columns:minmax(0,1fr)}}
.dl .card{display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.dl .card:hover{transform:translateY(-3px);box-shadow:var(--lift-hi)}
.dl h3{font-size:1.3rem;margin-bottom:8px}
.dl-ver{display:block;font:500 10.5px/1 var(--mono);color:var(--accent2);letter-spacing:.05em;text-transform:uppercase;margin-bottom:15px}
.dl p{font-size:.94rem;line-height:1.62;color:var(--dim)}
.dl-gate{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:auto;padding:13px 15px;border-radius:var(--radius-sm);
  background:var(--surf);font-size:.87rem;line-height:1.55;color:var(--dim);
}
.dl-gate svg{flex:none;margin-top:2px;color:var(--accent2)}
.dl-gate b{color:var(--text);font-weight:600}
.dl .acts{margin-top:18px}

/* ---- footer ------------------------------------------------ */
footer{border-top:1px solid var(--border);padding:clamp(50px,7vw,88px) 0 clamp(40px,5vw,60px)}
.colo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:820px){.colo{grid-template-columns:minmax(0,1fr)}}
.colo dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px 22px;font-size:.92rem}
.colo dt{font:600 10.5px/1.6 var(--mono);color:var(--mut-t);letter-spacing:.05em;text-transform:uppercase}
.colo dd{margin:0;color:var(--dim)}
.colo a{text-underline-offset:3px}

/* ---- reveal ------------------------------------------------ */
/* Gated on .js for the reason in the head: without script nothing ever
   adds .seen, so an ungated rule would hide almost the entire page
   behind a permanent opacity:0. */
.js .rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.js .rise.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
}