/* ───────────────────────────────────────────────────────────────────────────
   SWITCHMAN — homepage draft v3

   v2 was a magazine. Big condensed capitals, wide tracking and empty fields
   are the language of fashion editorial, not of software. An app site earns
   its refinement the opposite way: sentence case, type held down, density
   raised, and the product's own interface carrying the page. Depth comes
   from 1px borders and layered shadow, not from texture.

   The palette is still the app's. Everything else is drawn to the standard
   the app itself is drawn to.
   ─────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#f6f8fc;
  --bg-2:#eef2f8;
  --surface:#ffffff;
  --surface-2:#f4f6fb;
  --inset:#eaeef6;
  --line:rgba(11,17,40,.09);
  --line-2:rgba(11,17,40,.16);
  --text:#0d1226;
  --text-2:#454d68;
  --text-3:#646c86;
  --accent:#3378f5;
  --accent-2:#7a59f7;
  --accent-wash:rgba(51,120,245,.09);
  /* Accent text on --accent-wash: the plain accent lands at 3.66:1 there. */
  --accent-ink:#2d66d2;
  --live:#1c8a55;
  --warn:#a85d10;
  --warn-wash:rgba(168,93,16,.1);
  --key-bg:#ffffff;
  --key-line:rgba(11,17,40,.16);
  --key-hi:rgba(255,255,255,.9);
  --key-shadow:rgba(11,17,40,.13);
  --lift:inset 0 1px 0 rgba(255,255,255,.7);
  --e1:0 1px 2px rgba(11,17,40,.06), 0 1px 1px rgba(11,17,40,.04);
  --e2:0 1px 2px rgba(11,17,40,.05), 0 8px 20px -10px rgba(11,17,40,.16);
  --e3:0 1px 2px rgba(11,17,40,.06), 0 18px 40px -18px rgba(11,17,40,.26), 0 48px 90px -50px rgba(11,17,40,.34);
  --halo:radial-gradient(60% 55% at 50% 0%, rgba(51,120,245,.13), transparent 70%);
  --sans:"Schibsted Grotesk","Helvetica Neue",sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --page:56rem;
  --measure:32rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b0e20;
    --bg-2:#090b1a;
    --surface:#151a38;
    --surface-2:#1a2044;
    --inset:#101430;
    --line:rgba(190,205,255,.10);
    --line-2:rgba(190,205,255,.18);
    --text:#eef1ff;
    --text-2:#b3bcdd;
    --text-3:#848daf;
    --accent:#5b93ff;
    --accent-2:#9b7dff;
    --accent-wash:rgba(91,147,255,.14);
    --accent-ink:#5b93ff;
    --live:#63d28f;
    --warn:#ffc06a;
    --warn-wash:rgba(255,192,106,.12);
    --key-bg:#1d2450;
    --key-line:rgba(190,205,255,.2);
    --key-hi:rgba(255,255,255,.09);
    --key-shadow:rgba(0,0,0,.4);
    --lift:inset 0 1px 0 rgba(255,255,255,.06);
    --e1:0 1px 2px rgba(0,0,0,.3);
    --e2:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -10px rgba(0,0,0,.5);
    --e3:0 1px 2px rgba(0,0,0,.35), 0 18px 40px -18px rgba(0,0,0,.55), 0 48px 90px -50px rgba(0,0,0,.7);
    --halo:radial-gradient(60% 55% at 50% 0%, rgba(91,147,255,.16), transparent 70%);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 .9375rem/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* One soft wash behind the fold, so the product window sits in light rather
   than on a flat field. It is a background, not a shadow — nothing on the page
   casts a coloured halo. */
body::before{content:"";position:absolute;inset:0 0 auto;height:52rem;background:var(--halo);pointer-events:none;z-index:0}
main,header,footer{position:relative;z-index:1}
.wrap{width:min(var(--page),100% - 2.5rem);margin-inline:auto}
@media (max-width:34rem){.wrap{width:min(var(--page),100% - 2rem)}}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;text-wrap:balance}
h1{font-size:clamp(1.95rem,4vw,2.75rem);line-height:1.08;letter-spacing:-.035em}
h2{font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.18}
h3{font-size:.9375rem;letter-spacing:-.012em}
p{margin:0}
a{color:inherit;text-decoration:none}
.free{color:var(--text);font-weight:600;box-shadow:inset 0 -.42em 0 color-mix(in srgb,var(--accent) 24%,transparent)}
.lede{color:var(--text-2);font-size:1rem;line-height:1.6;max-width:var(--measure);text-wrap:pretty}
.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font:500 .73rem/1 var(--sans);letter-spacing:.015em;color:var(--text-3);
}
.eyebrow::before{content:"";width:.85rem;height:1px;background:var(--line-2)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* ── chrome ────────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:2rem;height:3.25rem}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;letter-spacing:-.02em}

.top nav{display:flex;gap:1.35rem;margin-left:auto;font-size:.875rem;color:var(--text-2)}
.top nav a{transition:color 120ms ease}
.top nav a:hover{color:var(--text)}
.top .get{font-size:.875rem;font-weight:500}
@media (max-width:46rem){.top nav{display:none}}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:2.25rem;padding:0 .95rem;border:0;border-radius:8px;
  font:500 .875rem/1 var(--sans);letter-spacing:-.01em;cursor:pointer;
  color:#fff;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 78%,var(--accent-2)));
  box-shadow:var(--e2),inset 0 1px 0 rgba(255,255,255,.22);
  transition:filter 120ms ease,transform 120ms ease;
}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn.sec{
  color:var(--text);background:var(--surface);
  border:1px solid var(--line-2);box-shadow:var(--e1),var(--lift);
}
.btn.sec:hover{filter:none;background:var(--surface-2)}
.btn.sm{height:2.125rem;padding:0 .8rem;font-size:.875rem;border-radius:8px}

/* keycap — the app's number shortcuts are its signature, so the site draws
   real keys rather than writing "press 1" */
.key{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.375rem;height:1.375rem;padding:0 .3rem;
  border-radius:5px;border:1px solid var(--key-line);background:var(--key-bg);
  box-shadow:inset 0 1px 0 var(--key-hi),0 1px 1.5px var(--key-shadow);
  font:500 .75rem/1 var(--mono);color:var(--text-2);
}

/* ── sections ──────────────────────────────────────────────────────────── */
section{padding:clamp(3.25rem,5.5vw,4.75rem) 0}
.sec-head{max-width:var(--measure);margin-bottom:2rem}
.sec-head .eyebrow{margin-bottom:.9rem}
.sec-head p{margin-top:.8rem;color:var(--text-2)}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:0;text-align:center}
.hero .eyebrow{margin-bottom:1.35rem}
.hero h1{max-width:18ch;margin-inline:auto}
.hero .lede{margin:1.25rem auto 0;max-width:31rem;text-align:center}
.hero .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2rem}
.hero .meta{margin-top:1rem;color:var(--text-3);font-size:.8125rem}

/* ── hero picker · the page’s one interface drawing ───────────────────────
   The hero retains the product’s own picker; every later visual is a diagram. */
.hero-pick{
  --u:1.42;
  --a-canvas:#f4f7fb;--a-surface:#ffffff;--a-panel:#ffffff;--a-inset:#e7ebf2;
  --a-ink:#19202a;--a-soft:#414853;--a-faint:#585e68;
  --a-hair:rgba(25,32,42,.14);--a-track:#8792b0;--a-tfaint:rgba(37,48,83,.18);
  --a-rail:rgba(231,235,242,.5);--a-card:rgba(231,235,242,.78);
  --a-live:#258f58;--a-warn:#a85d10;--a-warn-ink:#6b3500;
  --a-acc:#3378f5;--a-acc2:#7a59f7;
  --a-ground:#f4f7fb;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  font-weight:400;letter-spacing:0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero-pick{
    --a-canvas:#0e1128;--a-surface:#1a2046;--a-panel:#171c3d;--a-inset:#101634;
    --a-ink:#f0f3ff;--a-soft:#c1c9e6;--a-faint:#9da8ce;
    --a-hair:rgba(224,230,255,.18);--a-track:#9aa7d4;--a-tfaint:rgba(211,220,255,.19);
    --a-rail:rgba(6,9,27,.23);--a-card:rgba(7,11,31,.36);
    --a-live:#63d28f;--a-warn:#ffc06a;--a-warn-ink:#ffc06a;
    --a-ground:linear-gradient(160deg,#1d2468 0%,#141939 55%,#0e1128 100%);
  }
}
/* app icons: flat monogram tiles. The app shows the real ones; a drawing that
   faked a logo would be worse than one that plainly stands in for it. */
.hero-pick .ai{flex:none;display:grid;place-items:center}
.ai svg{width:100%;height:100%;display:block}
.hero-pick .hero-pick .hero-pick .hero-pick .hero-pick .ai.site{background:var(--a-inset);color:var(--a-soft);box-shadow:none}

/* Rows first, then the address, then the footer — the panel grows out of the
   pointer, so whatever sits at the top is what the pointer is already on. */
.hero-pick{
  width:calc(292px * var(--u));max-width:100%;
  border-radius:calc(12px * var(--u));
  background:var(--a-panel);border:1px solid var(--a-hair);
  box-shadow:0 calc(10px * var(--u)) calc(18px * var(--u)) rgba(0,0,0,.18);
  overflow:hidden;text-align:left;
}
.hero-pick-rows{padding:calc(3px * var(--u)) calc(4px * var(--u));display:grid;gap:calc(1px * var(--u))}
.prow{
  display:flex;align-items:center;gap:calc(8px * var(--u));
  padding:calc(4px * var(--u)) calc(8px * var(--u));min-height:calc(32px * var(--u));
  border-radius:calc(8px * var(--u));color:var(--a-ink);font-size:calc(13px * var(--u));
}
.prow .ai{width:calc(20px * var(--u));height:calc(20px * var(--u));border-radius:calc(5px * var(--u));font-size:calc(9px * var(--u))}
.prow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .sp{margin-left:auto}
.prow .perm{font-size:calc(9px * var(--u));color:var(--a-faint);white-space:nowrap}
.prow .sc{font:400 calc(12px * var(--u))/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:var(--a-faint)}
/* Signature.highlight — the route gradient at 0.85, because full strength under
   13pt type is a poster, not a control. */
.prow.hi{background:linear-gradient(90deg,rgba(51,120,245,.85),rgba(122,89,247,.85));color:#fff}
.prow.hi .perm{color:rgba(255,255,255,.82)}
.prow.hi .sc{color:rgba(255,255,255,.92);font-weight:700}
.hero-pick-addr{
  display:flex;gap:calc(8px * var(--u));align-items:flex-start;
  padding:calc(7px * var(--u)) calc(12px * var(--u));
  background:var(--a-inset);border-top:1px solid var(--a-hair);
}
.hero-pick-addr .ai{width:calc(20px * var(--u));height:calc(20px * var(--u));border-radius:calc(4px * var(--u))}
.hero-pick-addr .ai svg{width:calc(16px * var(--u));height:calc(16px * var(--u));color:var(--a-ink)}
.hero-pick-addr .col{min-width:0;display:grid;gap:calc(2px * var(--u))}
.hero-pick-addr .host{font-size:calc(14px * var(--u));letter-spacing:calc(-.28px * var(--u));color:var(--a-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-pick-addr .host i{font-style:normal;color:var(--a-soft)}
.hero-pick-addr .host b{font-weight:700}
.hero-pick-addr .path{font-size:calc(10px * var(--u));color:var(--a-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-pick-foot{
  display:flex;align-items:center;gap:calc(8px * var(--u));
  padding:calc(6px * var(--u)) calc(12px * var(--u));
  background:var(--a-inset);border-top:1px solid var(--a-hair);
  font-size:calc(10px * var(--u));color:var(--a-soft);
}
.hero-pick-foot kbd{
  font:400 calc(9px * var(--u))/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:0 calc(3px * var(--u));border-radius:calc(3px * var(--u));background:var(--a-inset);
  filter:brightness(.94);
}
.hero-pick-foot .all{
  margin-left:auto;font-size:calc(9px * var(--u));font-weight:600;color:var(--a-acc);
  padding:calc(3px * var(--u)) calc(7px * var(--u));border-radius:calc(6px * var(--u));
  background:color-mix(in srgb,var(--a-acc) 14%,transparent);white-space:nowrap;
}

/* ── the Pro ticket ───────────────────────────────────────────────────────
   ProSection.swift draws Pro as an all-line pass, and this is that pass made
   loud enough for a homepage. One deliberate difference from the app: the
   ticket is warm paper with dark ink in BOTH appearances. A physical ticket
   does not change colour with the room, and a dark-grey pass on a night ground
   is the exact thing that read as flat. On the night page it now glows. */
.ticket{
  --tp:#f7f5ed;--ti:#191c28;--ts:#5f5c52;--tr:rgba(25,28,40,.16);
  --tam:#9a5410;--tam-wash:rgba(154,84,16,.14);
  max-width:40rem;position:relative;display:grid;grid-template-columns:1fr 11.5rem;
  border-radius:14px;background:var(--tp);color:var(--ti);
  font-family:var(--sans);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.14);
}
/* the class band: the one place the route gradient appears down here */
.ticket::before{content:"";position:absolute;inset:0 0 auto;height:5px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.tbody{padding:1.5rem 1.4rem 1.3rem;display:grid;gap:.9rem;align-content:start}
.tline{display:flex;align-items:center;gap:.65rem;font:500 .7rem/1 var(--mono);letter-spacing:.14em;color:var(--ts)}
.tline .fill{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--tr) 0 3px,transparent 3px 7px)}
.tline .serial{letter-spacing:.06em}
.probadge{font:700 .65rem/1 var(--sans);letter-spacing:.09em;padding:.3rem .4rem;border-radius:4px;background:var(--tam-wash);color:var(--tam)}
/* the journey the pass is for, printed the way a ticket prints one */
.route-row{display:flex;align-items:center;gap:1rem}
.route-row .end{display:grid;gap:.2rem}
.route-row .lbl{font:500 .625rem/1 var(--mono);letter-spacing:.16em;color:var(--ts)}
.route-row .val{font-size:.95rem;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.route-row .arrow{flex:1;height:1px;position:relative;background:linear-gradient(90deg,var(--accent),var(--accent-2));min-width:2rem}
.route-row .arrow::after{content:"";position:absolute;right:0;top:-3px;border:3.5px solid transparent;border-left-color:var(--accent-2)}
.tcovers{font:500 .625rem/1 var(--mono);letter-spacing:.16em;color:var(--ts)}
.tinc{margin-top:-.45rem;list-style:none;padding:0;display:grid;gap:.42rem}
.tinc li{display:grid;grid-template-columns:auto 1fr;gap:.55rem;align-items:baseline;font-size:.875rem;line-height:1.45;color:var(--ti)}
.tinc li::before{content:"";width:.4rem;height:.4rem;margin-top:.42rem;border-radius:50%;background:var(--tam)}
.tinc li span{color:var(--ts)}
.tdash{height:1px;background:repeating-linear-gradient(90deg,var(--tr) 0 3px,transparent 3px 7px)}
.tfree{font-size:.875rem;color:var(--ts);line-height:1.5}
.tfree b{color:var(--ti);font-weight:600}
.stub{
  position:relative;padding:1.5rem 1.2rem 1.3rem;
  display:grid;gap:.55rem;align-content:center;justify-items:center;text-align:center;
}
/* a punched tear, not two holes: the page ground shows through the notches */
.stub::before{
  content:"";position:absolute;left:-.4375rem;top:0;bottom:0;width:.875rem;
  background-image:radial-gradient(circle at .4375rem .4375rem,var(--bg) .34rem,transparent .375rem);
  background-size:.875rem .9375rem;
}
.fare{font-size:2.5rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.once{font:500 .65rem/1 var(--mono);letter-spacing:.16em;color:var(--ts)}
.buy{
  margin-top:.35rem;width:100%;padding:.8rem 1rem;border-radius:8px;
  background:var(--tam);color:#fff;font-size:.9375rem;font-weight:600;
  text-decoration:none;display:block;
  box-shadow:0 8px 18px -8px rgba(154,84,16,.7),inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform 120ms ease-out,filter 120ms ease-out;
}
.buy:hover{transform:translateY(-1px);filter:brightness(1.06)}
.never{font-size:.75rem;color:var(--ts)}
.barcode{margin-top:.4rem;display:flex;gap:2px;align-items:flex-end;height:1.6rem;opacity:.7}
.barcode i{display:block;width:2px;background:var(--ti);height:100%}
.barcode i:nth-child(3n){width:4px}
.barcode i:nth-child(4n){height:70%}
.barcode i:nth-child(5n){width:1px}
@media (max-width:52rem){
  .ticket{grid-template-columns:1fr}
  .tbody{padding:1.6rem 1.4rem 1.3rem}
  .stub{padding:1.4rem;justify-items:stretch;text-align:left;gap:.7rem}
  .stub::before{left:0;right:0;top:-.4375rem;bottom:auto;width:auto;height:.875rem;background-image:radial-gradient(circle at .4375rem .4375rem,var(--bg) .34rem,transparent .375rem);background-size:.9375rem .875rem}
  .fare{font-size:2.6rem}
  .barcode{display:none}
}

/* ── the browser ledger ───────────────────────────────────────────────────
   One card, uniform rows. The three-column arrangement this replaces split
   eight browsers into boxes of five, two and one, so the column widths said
   something about quantity that nothing in the content meant, and the
   single-item column was mostly air. The grouping survives as quiet caption
   rows — it is real information (how far into a browser a rule can name) and
   it costs one line each instead of a box each. */
.ledger{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--e1);overflow:hidden}
.lgroup{
  margin:0;padding:.7rem .95rem .55rem;background:var(--surface-2);
  border-top:1px solid var(--line);font-size:.75rem;color:var(--text-3);
}
.ledger .lgroup:first-child{border-top:0}
.lgroup em{font-style:normal;font-family:var(--mono);font-size:.9em;color:var(--text-2)}
.lrow2{display:flex;align-items:center;gap:.7rem;padding:.6rem .95rem;border-top:1px solid var(--line)}
.lrow2 svg{flex:none;width:1.4rem;height:1.4rem;display:block}
.lrow2 .nm{font-size:.9375rem;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.lrow2 .tags{margin-left:auto;display:flex;gap:.3rem}
.lrow2 .tag{
  font:500 .6875rem/1 var(--sans);letter-spacing:.01em;padding:.26rem .4rem;border-radius:5px;
  background:var(--accent-wash);color:var(--accent-ink);white-space:nowrap;
}
.lrow2 .tag.q{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text-3)}
@media (max-width:30rem){
  .lrow2{flex-wrap:wrap;gap:.45rem .7rem}
  .lrow2 .tags{margin-left:0;width:100%;padding-left:2.1rem}
}
.anybrowser{
  margin-top:1.5rem;padding:1rem 1.15rem;border-radius:10px;
  border:1px dashed var(--line-2);color:var(--text-2);font-size:.9375rem;max-width:44rem;
}
.anybrowser b{color:var(--text)}
.anybrowser code{font-family:var(--mono);font-size:.9em}

.stage-wide{margin-top:1.75rem;display:flex;justify-content:center}
.stage{margin-top:clamp(2.25rem,4.5vw,3.25rem)}
.hero-pick{--u:1.12;margin-inline:auto}
@media (max-width:44rem){.hero-pick{--u:1}}
@media (max-width:30rem){.hero-pick{--u:.82}}

/* ── logos / trust strip ───────────────────────────────────────────────── */
.strip{margin:2.5rem auto 0;max-width:40rem;color:var(--text-3);font-size:.9375rem;line-height:1.6}
.strip b{color:var(--text-2);font-weight:500}
.strip a{color:var(--accent)}

/* ── feature sections ─────────────────────────────────────────────────────
   One architecture, one left edge. The page used to alternate between a
   two-column split and a head-over-centred-stage, and the two modes carried
   seven different art widths between them — so a reader scanning down found a
   new left edge every section and no rule behind any of them. Everything now
   starts at the same line: the head, the prose, and the picture under it. The
   hero is the one deliberate exception, because a page is allowed one. */
.feature{display:grid;gap:1.6rem}
.copy{max-width:var(--measure)}
.copy h2{margin-bottom:.7rem}
.copy p{color:var(--text-2)}
.copy .facts{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem}
.copy .facts li{display:grid;grid-template-columns:auto 1fr;gap:.55rem;font-size:.875rem;color:var(--text-2);line-height:1.5}
.copy .facts li::before{
  content:"";width:.9rem;height:.9rem;margin-top:.3rem;border-radius:50%;
  border:1.5px solid var(--line-2);
  background:radial-gradient(circle at 50% 50%,var(--accent) 0 2.5px,transparent 2.6px);
}
/* the picture, whatever its natural width, hung on the same line as the words */
.art{display:block}
/* ── the three illustrations ──────────────────────────────────────────────
   Built from what the rest of the page is built from — real surfaces on the
   elevation ladder, hairline edges, the keycap and chip the picker and the
   ledger already use, and real hostnames set in the data face. The thin line
   diagrams these replace opted out of every one of those and read as a
   whiteboard sketch: the page's own material is what makes a picture here
   look like it belongs to this product rather than to a slide. */
.ill{
  --row:2.75rem;
  position:relative;margin:0;width:100%;font-family:var(--sans);
}
.ill .host{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ill .host i{font-style:normal;color:var(--text-3)}
.ill .cap{
  display:block;font:500 .6875rem/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);
}

/* one · a link arrives, is answered once, and its successors do not ask */
.ill-decide{display:grid;gap:.55rem;padding-top:.35rem}
.card{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;
  padding:.85rem .95rem;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--e2),var(--lift);
}
.card .host{font-size:.9375rem;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .keys{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.card .keys .cap{margin-left:.45rem;letter-spacing:.11em}
.card.settled{
  margin-left:1.6rem;padding-block:.7rem;
  background:var(--surface-2);box-shadow:var(--e1);
}
.card.settled .host{font-size:.875rem;color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.settled .went{display:flex;align-items:center;gap:.45rem;font-size:.8125rem;color:var(--text-3)}
.card.settled .went b{
  font-weight:500;color:var(--accent-ink);
  background:var(--accent-wash);padding:.2rem .45rem;border-radius:5px;
}
.card.settled .went svg{flex:none;width:.85rem;height:.85rem;stroke:var(--line-2);fill:none}
.ill-decide .card:first-child::after{
  content:"";position:absolute;left:1.05rem;top:100%;height:.55rem;width:1px;background:var(--line-2);
}

/* two · three shapes of match, each reaching its own destination */
.ill-match{
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  box-shadow:var(--e2),var(--lift);overflow:hidden;
}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.9rem;padding:.75rem .95rem;border-top:1px solid var(--line)}
.ill-match .mrow:first-child{border-top:0}
.mrow .m{
  justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:.8125rem;color:var(--text);
  background:var(--inset);border-radius:6px;padding:.3rem .5rem;
}
.mrow .m em{font-style:normal;color:var(--accent)}
.mrow .to{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--text-2);white-space:nowrap}
.mrow .to::before{
  content:"";width:1.6rem;height:1px;background:var(--line-2);
}
.mrow .to b{font-weight:500;color:var(--text)}

/* three · the address, read at the size a person would have to read it */
.ill-read{display:grid;gap:.9rem;justify-items:start}
.plate{
  width:100%;padding:1.15rem 1.15rem 1.05rem;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--e2),var(--lift);
}
.plate .big{
  display:block;margin-top:.55rem;font-family:var(--mono);
  font-size:clamp(1.35rem,3.4vw,1.9rem);letter-spacing:-.03em;color:var(--text);
}
.plate .big i{font-style:normal;color:var(--text-3)}
.plate .big mark{
  background:var(--warn-wash);color:var(--warn);
  padding:.06em .18em;border-radius:4px;
  box-shadow:inset 0 -.14em 0 color-mix(in srgb,var(--warn) 34%,transparent);
}
.plate .verdict{
  display:flex;align-items:center;gap:.5rem;margin-top:.95rem;padding-top:.8rem;
  border-top:1px solid var(--line);font-size:.8125rem;color:var(--warn);
}
.plate .verdict b{
  font-weight:600;background:var(--warn-wash);color:var(--warn);
  padding:.22rem .45rem;border-radius:5px;letter-spacing:.02em;
}
@media (max-width:40rem){
  .ill,.ill .card,.ill-match,.plate{max-width:100%}
  .card.settled{margin-left:0}
  .mrow{grid-template-columns:minmax(0,1fr);gap:.45rem}
  .mrow .to::before{width:1rem}
}

.stage-wide{margin-top:0;display:block}
/* ── the boundary list ───────────────────────────────────────────────────
   A definition list in the page's own ledger / FAQ vocabulary: a stable term
   column, a reading column, and one hairline per equal claim. The claims are
   not a sequence, so neither a number rail nor a closing treatment belongs. */
.bounds{max-width:40rem;border-top:1px solid var(--line)}
.bound{display:grid;grid-template-columns:13rem minmax(0,1fr);column-gap:1.25rem;padding:.95rem 0 1rem;border-bottom:1px solid var(--line)}
.bound h3{padding-top:.02rem}
.bound p{color:var(--text-2);font-size:.875rem;line-height:1.6}
@media (max-width:36rem){.bound{grid-template-columns:1fr;row-gap:.3rem;padding:.9rem 0}.bound h3{padding-top:0}}

/* ── pricing ───────────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
@media (max-width:46rem){.plans{grid-template-columns:1fr}}
.plan{border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--e2),var(--lift);padding:1.6rem}
.plan.pro{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:var(--e3),var(--lift)}
.plan .tier{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.875rem;color:var(--text-3)}
.plan .price{display:flex;align-items:baseline;gap:.5rem;margin:.9rem 0 .35rem}
.plan .price b{font-size:2.125rem;font-weight:600;letter-spacing:-.04em;line-height:1}
.plan .price span{color:var(--text-3);font-size:.875rem}
.plan .terms{color:var(--text-2);font-size:.875rem;min-height:2.6rem}
.plan ul{list-style:none;margin:1.35rem 0;padding:0;display:grid;gap:.75rem}
.plan li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;font-size:.9375rem;color:var(--text-2);line-height:1.5}
.plan li::before{content:"";width:1rem;height:1rem;margin-top:.24rem;border-radius:50%;border:1.5px solid var(--line-2)}
.plan.pro li::before{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:radial-gradient(circle at 50% 50%,var(--accent) 0 2.5px,transparent 2.6px)}
.plan b.k{color:var(--text);font-weight:600}
.plan .btn{width:100%}
.plan .fine{margin-top:.75rem;color:var(--text-3);font-size:.8125rem;text-align:center}
/* ── the free half ────────────────────────────────────────────────────────
   Free was a band under the ticket, which is where a footnote goes. The
   section's own heading says free first, so it is set first, at the same width
   as the ticket and with a price of its own — a $0 nobody has to infer. */
.freeband{
  max-width:40rem;margin:0 0 1.1rem;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:1.35rem 1.4rem 1.3rem;box-shadow:var(--e1);
}
.freeband .fh{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1.15rem;align-items:baseline;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--line)}
.freeband .fzero{grid-row:1 / span 2;font-size:2.5rem;font-weight:700;letter-spacing:-.04em;line-height:.95;color:var(--text)}
.freeband .flabel{font:500 .65rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.freeband .fsay{margin-top:.25rem;font-size:.875rem;line-height:1.5;color:var(--text-2)}
.freeband .fsay b{color:var(--text);font-weight:600}
.freeband ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.4rem}
.freeband li{display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:baseline;font-size:.875rem;color:var(--text-2);line-height:1.45}
.freeband li::before{content:"";width:.4rem;height:.4rem;margin-top:.42rem;border-radius:50%;border:1.5px solid var(--accent)}
.freeband li b{color:var(--text);font-weight:600}
.freeband .fine{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--text-3)}
@media (max-width:34rem){.freeband ul{grid-template-columns:1fr}}
.note{margin-top:1.75rem;max-width:var(--measure);color:var(--text-2);font-size:.9375rem}
.note b{color:var(--text)}

/* ── faq ───────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line);max-width:44rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:.9rem 2rem .9rem 0;font-weight:500;font-size:.9rem;
  transition:color 120ms ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.35rem;width:.45rem;height:.45rem;
  border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);
  transform:rotate(45deg);transition:transform 150ms ease,border-color 150ms ease;
}
.faq details[open] summary{color:var(--accent)}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
.faq .a{padding:0 2rem 1rem 0;color:var(--text-2);font-size:.875rem;max-width:var(--measure)}
.faq .a a{color:var(--accent)}

/* ── page composition: a twelve-column editorial grid ────────────────────
   Sections deliberately take one of four roles: paired explanation, wide
   proof, reading ledger, or closing offer. Every shift lands on the same
   twelve-column field, so the rhythm is measured rather than arbitrary. */
.wrap{--gutter:clamp(1.35rem,3vw,2.5rem);width:min(var(--page),100% - (var(--gutter) * 2))}
section{padding:clamp(4.75rem,8vw,7.25rem) 0}
.sec-head{margin-bottom:0}
.sec-head .eyebrow,.copy .eyebrow{margin-bottom:1rem}
.sec-head h2,.copy h2{font-size:clamp(1.5rem,2.65vw,2.15rem);line-height:1.1;margin-bottom:.9rem}
.eyebrow{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase}
.decision-band,.safety-band{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:start}
.decision-band .feature,.safety-band .feature{display:contents}
.decision-band .copy{grid-column:1 / span 5}
.decision-band .art{grid-column:6 / -1;justify-self:stretch}
.rules-band{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:start}
.rules-band .sec-head{grid-column:1 / span 5}
.rules-band>.art{grid-column:6 / -1;justify-self:stretch}
.safety-band{grid-template-columns:repeat(12,minmax(0,1fr))}
.safety-band .art{grid-column:1 / span 5;justify-self:stretch;order:-1}
.safety-band .copy{grid-column:6 / -1}
.boundary-band{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem}
.boundary-band .sec-head{grid-column:1 / span 4}
.boundary-band .bounds{grid-column:6 / -1;max-width:none}
.browsers-band{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:start}
.browsers-band .sec-head{grid-column:1 / span 4;position:sticky;top:5rem}
.browsers-band .ledger,.browsers-band .anybrowser{grid-column:6 / -1;max-width:none}
.browsers-band .anybrowser{margin-top:1.5rem}
.pricing-band{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:start}
.pricing-band .sec-head{grid-column:1 / span 4;position:sticky;top:5rem}
.pricing-band .freeband,.pricing-band .ticket,.pricing-band .note{grid-column:6 / -1;max-width:none}
.pricing-band .ticket{width:100%;margin-top:1.1rem}
.pricing-band .note{margin-top:1.5rem}
.faq-band{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem}
.faq-band .sec-head{grid-column:1 / span 4}
.faq-band .faq{grid-column:6 / -1;max-width:none}
.close{padding-top:clamp(5rem,10vw,8rem)}
@media (max-width:46rem){
  section{padding:4.25rem 0}
  .decision-band,.rules-band,.safety-band,.boundary-band,.browsers-band,.pricing-band,.faq-band{display:block}
  .decision-band .copy,.rules-band .sec-head,.safety-band .copy,.boundary-band .sec-head,.browsers-band .sec-head,.pricing-band .sec-head,.faq-band .sec-head{margin-bottom:2rem}
  .decision-band .art,.safety-band .art,.rules-band>.art{justify-self:auto;margin-inline:0}
  .safety-band .art{order:initial}
  .boundary-band .bounds,.browsers-band .ledger,.browsers-band .anybrowser,.pricing-band .freeband,.pricing-band .ticket,.pricing-band .note,.faq-band .faq{max-width:40rem}
  .browsers-band .sec-head,.pricing-band .sec-head{position:static}
}
.boundary-band::before,.pricing-band::before,.faq-band::before{display:none}
.boundary-band,.pricing-band,.faq-band{background:var(--surface-2);box-shadow:0 0 0 100vmax var(--surface-2);clip-path:inset(0 -100vmax);border-block:1px solid var(--line)}
@media (max-width:30rem){
}

/* ── close ─────────────────────────────────────────────────────────────── */
.close{text-align:center;padding-bottom:clamp(4rem,8vw,6rem)}
.close .actions{display:flex;justify-content:center;gap:.75rem;margin-top:1.75rem}
footer{border-top:1px solid var(--line);padding:1.75rem 0 2.5rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;color:var(--text-3);font-size:.8125rem}
footer nav{display:flex;gap:1.15rem;flex-wrap:wrap}
footer a:hover{color:var(--text)}

.brief 
@keyframes lift{from{opacity:0;transform:translateY(1.25rem) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
:where(a,summary,button,.btn):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ═══════════════════════════════════════════════════════════════════════════
   The rest of the site

   Twenty-two pages share one stylesheet with the homepage, and they carry a
   vocabulary the homepage does not: a legal list, a numbered how-to, a thanks
   page, the Pro page's own hero. They are restyled here in the same system
   rather than kept on their own palette, which is what made the site read as
   two sites.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── chrome the inner pages share ─────────────────────────────────────────── */
.wordmark{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:.95rem;letter-spacing:-.02em;color:var(--text);
}
/* The mark is the app icon, so it is drawn as the app icon: the same vertical
   night gradient from app/Scripts/make-icons.swift, with the lever in white on
   top of it. `currentColor` inside the tile picks up the white set here, which
   is what lets twenty pages of inline SVG stay untouched.

   It used to paint the lever in the page's own text colour and give the home
   page — and only the home page — a diagonal accent tile behind it. That left
   three different marks in circulation: dark lever on violet here, dark lever
   on nothing everywhere else, white lever on night in the Dock. The icon's own
   notes rule out the violet one explicitly: a diagonal candy-blue-to-violet
   field is the backdrop every indie Mac app already has, and that ramp is spent
   on the lever instead, where it means something. */
.mark{
  width:1.15rem;height:1.15rem;flex:none;
  border-radius:5px;
  background:linear-gradient(180deg,#121740,#0d1024 55%,#0a0c1c);
  color:#fff;
}
.mark path,.mark circle{fill:currentColor;stroke:currentColor}
/* On a dark page the tile and the page are within a few points of each other, so
   the tile stops reading as a tile and the lever looks like it is floating in the
   header. One hairline of its own light is enough to give it an edge back. */
@media (prefers-color-scheme: dark){
  .mark{box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
}
.top nav .lang{display:inline-flex;align-items:center;gap:.35rem}
.top nav .lang svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.5}

/* ── the reading pages: privacy, terms, about, releases, the two guides ───── */
.legal{padding:clamp(3rem,5vw,4.5rem) 0 clamp(2.5rem,4vw,3.5rem);max-width:var(--measure)}
.legal h1{font-size:clamp(1.95rem,4vw,2.75rem);line-height:1.08;letter-spacing:-.035em;margin-bottom:1.1rem}
.legal h2{margin:2.5rem 0 .8rem}
.legal p{color:var(--text-2);margin:0 0 1rem}
.legal p b,.legal li b{color:var(--text);font-weight:600}
.legal a:not(.button){color:var(--accent)}
.legal a:hover{text-decoration:underline}
.legal ul{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.9rem}
.legal li{
  position:relative;padding-left:1.4rem;color:var(--text-2);line-height:1.6;
}
.legal li::before{
  content:"";position:absolute;left:0;top:.55em;width:.4rem;height:.4rem;
  border-radius:50%;border:1.5px solid var(--accent);
}
.legal .updated,.legal .muted{color:var(--text-3);font-size:.8125rem}
.legal .updated{margin-top:2rem}
.section-lede{color:var(--text-2);font-size:1rem;line-height:1.6;max-width:var(--measure);text-wrap:pretty}

/* ── the how-to pages: a real sequence, so it is numbered ─────────────────── */
.steps{list-style:none;margin:1.75rem 0 0;padding:0;counter-reset:step;display:grid;gap:1.1rem;max-width:var(--measure)}
.steps li{
  counter-increment:step;position:relative;padding-left:2.25rem;
  color:var(--text-2);line-height:1.6;
}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:.05rem;
  width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--accent-wash);color:var(--accent-ink);
  font:600 .75rem/1.5rem var(--mono);text-align:center;
}
.steps li b{color:var(--text);font-weight:600}

/* ── the thanks page, and the release notes that borrow it ────────────────── */
.thanks{padding:clamp(3.5rem,6vw,5.5rem) 0;max-width:var(--measure)}
.thanks h1{font-size:clamp(1.95rem,4vw,2.75rem);line-height:1.08;letter-spacing:-.035em;margin-bottom:1rem}
.thanks .section-lede{margin-bottom:1.75rem}
.thanks .note,.note{
  margin-top:1.5rem;padding:1rem 1.15rem;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--e1);
  color:var(--text-2);font-size:.875rem;line-height:1.55;
}
.note b{color:var(--text);font-weight:600}
.note code,.legal code,.hero .meta code,.hero .meta .copy{
  font-family:var(--mono);font-size:.9em;
  background:var(--inset);padding:.12em .35em;border-radius:4px;color:var(--text);
}
.hero .meta .copy{
  border:0;font-size:inherit;line-height:inherit;cursor:pointer;
  transition:background 120ms ease,color 120ms ease;
}
.hero .meta .copy{position:relative}
.hero .meta .copy:hover,.hero .meta .copy.copied{
  background:var(--accent-wash);color:var(--accent-ink);
  box-shadow:inset 0 0 0 1px currentColor;
}
.hero .meta .copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Absolute so the confirmation cannot reflow the line it sits on: this paragraph is
   centred, and a mark appearing inline would re-centre it and shift the command
   sideways at the moment of the click. */
.hero .meta .copy-note{
  position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:.45em;
  color:var(--accent-ink);opacity:0;transition:opacity 120ms ease;
  pointer-events:none;display:block;
}
.hero .meta .copy-note svg{
  width:.8rem;height:.8rem;display:block;
  fill:none;stroke:currentColor;stroke-width:2;
}
.hero .meta .copy.copied .copy-note{opacity:1}
.sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.fine{color:var(--text-3);font-size:.8125rem}
.muted{color:var(--text-3)}

/* ── the Pro page ─────────────────────────────────────────────────────────── */
.pro-hero{padding:clamp(3rem,5vw,4.5rem) 0 0;max-width:var(--measure)}
.pro-hero h1{font-size:clamp(1.95rem,4vw,2.75rem);line-height:1.08;letter-spacing:-.035em}
.pro-hero .lede{margin-top:1rem}
.pro-hero .fine{margin-top:.9rem}
.pro-price{display:flex;align-items:baseline;gap:.5rem;margin:1.5rem 0 .35rem}
.pro-price b{font-size:2.5rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--text)}
.pro-price small{color:var(--text-3);font:400 .8125rem/1 var(--mono)}
.pro-columns{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2.5rem;margin-top:2.5rem}
.pro-columns h2{margin-bottom:.6rem}
.pro-columns p{color:var(--text-2);font-size:.9375rem}
.pro-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.75rem}
.buy-note{color:var(--text-3);font-size:.8125rem}
.controls{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
@media (max-width:46rem){.pro-columns{grid-template-columns:1fr}}

/* ── buttons, under the site's own class name ─────────────────────────────── */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:2.25rem;padding:0 .95rem;border:0;border-radius:8px;
  font:500 .875rem/1 var(--sans);letter-spacing:-.01em;cursor:pointer;
  color:#fff;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 78%,var(--accent-2)));
  box-shadow:var(--e2),inset 0 1px 0 rgba(255,255,255,.22);
  transition:filter 120ms ease,transform 120ms ease;
}
.button:hover{filter:brightness(1.07);transform:translateY(-1px)}
.button:active{transform:none}
.button.quiet{
  color:var(--text);background:var(--surface);
  border:1px solid var(--line-2);box-shadow:var(--e1),var(--lift);
}
.button.quiet:hover{filter:none;background:var(--surface-2)}
button.button{font-family:var(--sans)}
button.buy-pro:disabled{opacity:.55;cursor:default;transform:none;filter:none}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.75rem}
.cta small{color:var(--text-3);font:400 .8125rem/1.5 var(--mono)}

/* ── release notes ────────────────────────────────────────────────────────── */
.legal h3{margin:2rem 0 .6rem;font-size:1rem}
.legal ol{margin:1.25rem 0 0;padding-left:1.3rem;color:var(--text-2);display:grid;gap:.6rem}

/* ── the inner pages' own chrome ──────────────────────────────────────────
   Twenty-two pages put the header and footer directly inside .wrap, where the
   homepage nests a .wrap inside each. Rather than edit twenty-two files, the
   two shapes are both described here. */
.wrap > .top{
  position:static;background:none;backdrop-filter:none;
  display:flex;align-items:center;gap:1.5rem;
  height:3.25rem;padding:0;border-bottom:1px solid var(--line);
}
.wrap > .top nav{display:flex;align-items:center;gap:1.35rem;margin-left:auto;font-size:.875rem;color:var(--text-2)}
.wrap > footer{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 1.5rem;
  margin-top:clamp(3rem,5vw,4.5rem);padding:1.75rem 0 2.5rem;
  border-top:1px solid var(--line);color:var(--text-3);font-size:.8125rem;
}
.wrap > footer nav{display:flex;flex-wrap:wrap;gap:1.15rem}
.wrap > footer a:hover{color:var(--text)}

/* ── the measurement opt-out ──────────────────────────────────────────────
   Injected by analytics.js into the privacy page's own list, so it inherits
   that page's type and sits where the sentence describing it ends. It used to
   be a fixed-position button floating over every page, alongside a consent
   card that interrupted the first visit — both are gone: the measurement is
   cookieless, so there is nothing to consent to, and the one control that is
   still worth offering belongs next to its explanation rather than on top of
   every page. */
.analytics-choices{
  display:inline-flex;align-items:center;height:2rem;margin-top:.5rem;
  padding:0 .8rem;border-radius:8px;cursor:pointer;
  color:var(--text);background:var(--surface);border:1px solid var(--line-2);
  box-shadow:var(--e1),var(--lift);
  font:500 .8125rem/1 var(--sans);letter-spacing:-.01em;
}
.analytics-choices:hover{filter:brightness(1.03)}
.analytics-choices[aria-pressed="true"]{color:var(--text-2);background:var(--canvas)}

/* ── disclosures outside the homepage FAQ ─────────────────────────────────
   The guides and the release notes use bare <details>. Without this they fall
   back to the platform triangle, which is the one piece of unstyled browser
   chrome on an otherwise finished page. */
.legal details,.thanks details{border-bottom:1px solid var(--line)}
.legal details:first-of-type,.thanks details:first-of-type{border-top:1px solid var(--line)}
.legal summary,.thanks summary{
  list-style:none;cursor:pointer;position:relative;
  padding:.9rem 2rem .9rem 0;font-weight:500;font-size:.9rem;color:var(--text);
  transition:color 120ms ease;
}
.legal summary::-webkit-details-marker,.thanks summary::-webkit-details-marker{display:none}
.legal summary:hover,.thanks summary:hover{color:var(--accent)}
.legal summary::after,.thanks summary::after{
  content:"";position:absolute;right:.35rem;top:1.15rem;width:.45rem;height:.45rem;
  border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);
  transform:rotate(45deg);transition:transform 150ms ease,border-color 150ms ease;
}
.legal details[open] summary,.thanks details[open] summary{color:var(--accent)}
.legal details[open] summary::after,.thanks details[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
.legal details p,.thanks details p{padding:0 2rem 1rem 0;color:var(--text-2);font-size:.875rem;max-width:var(--measure)}