/* ───────────────────────────────────────────────────────────────────────────
   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.
   ─────────────────────────────────────────────────────────────────────── */

/* Metric-matched stand-ins for the web fonts, so the swap does not reflow text.
   They are local() faces: nothing to download. The stack lists each right after its
   web font, so the stand-in is what paints until the real face arrives.
   size-adjust is the web font's shaped width divided by the stand-in's, measured in
   Chromium over the text the site actually sets, per weight (Arial/Liberation Sans/Arimo
   share advances; Courier New/Liberation Mono/Cousine are all 0.6em, as is Spline Sans
   Mono, so that one is 100%). The overrides are the web font's own hhea metrics divided
   by size-adjust, because the overrides are scaled by it. Menlo is left out on purpose:
   its advance is 0.602em, not 0.6. Schibsted Grotesk 400-500 and 600-700 are separate faces
   since the bold stand-in is a real bold, whose advances differ from the regular's. */
@font-face{
  font-family:"Schibsted Grotesk Fallback";
  font-weight:400 500;
  src:local("Arial"),local("Liberation Sans"),local("Arimo");
  size-adjust:104.05%;
  ascent-override:93.86%;
  descent-override:24.78%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Schibsted Grotesk Fallback";
  font-weight:600 700;
  src:local("Arial Bold"),local("Liberation Sans Bold"),local("Arimo Bold");
  size-adjust:99.74%;
  ascent-override:97.91%;
  descent-override:25.85%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Spline Sans Mono Fallback";
  font-weight:400 500;
  src:local("Courier New"),local("Liberation Mono"),local("Cousine");
  size-adjust:100%;
  ascent-override:96.35%;
  descent-override:23.65%;
  line-gap-override:0%;
}

: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","Schibsted Grotesk Fallback","Helvetica Neue",sans-serif;
  --mono:"Spline Sans Mono","Spline Sans Mono Fallback",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}
/* in-text links: permanent underline (non-colour cue, WCAG 1.4.1) + --accent-ink.
   Scope is an allow-list of prose containers, so nav, footer, buttons and
   whole-card links never match. :where() keeps the scope selector at zero specificity, so a
   component rule that targets the link itself can still override the base state. Guides/compare/legal prose is not opted in yet. */
:where(.strip, .sec-head p, .faq .a)
  a:where(:not(.btn, .button, .buy, .cta, .get, .lang, .logo, .foot-badge)){
  color:var(--accent-ink);
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  text-decoration-skip-ink:auto;
  text-decoration-color:color-mix(in srgb,currentColor 60%,transparent);
  transition:color 120ms ease,text-decoration-color 120ms ease;
}
:where(.strip, .sec-head p, .faq .a)
  a:where(:not(.btn, .button, .buy, .cta, .get, .lang, .logo, .foot-badge)):is(:hover, :focus-visible){
  color:color-mix(in srgb,var(--accent-ink) 80%,var(--text));
  text-decoration-color:currentColor;
  text-decoration-thickness:2px;
}
.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}
/* 18ch, written in em: 18 x the "0" advance of Schibsted Grotesk 600 (0.6240em) = 11.23em. ch takes the
   first available font's "0", so while the stand-in is showing it came out 11% narrower and the
   centred box jumped on swap. */
.hero h1{max-width:11.23em;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}

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


/* ── hero film · the promo is the hero's picture ───────────────────────── */
/* Dark footage in a bordered, rounded frame with a soft lift, so it reads as embedded media on
   the light theme instead of a black rectangle. aspect-ratio holds the box before metadata
   arrives; the halo is the page's own token, so it adds no colour of its own. */
.hero-film{position:relative;width:min(100%,var(--page));margin:clamp(2.25rem,4.5vw,3.25rem) auto 0;text-align:left}
.hero-film::before{content:"";position:absolute;inset:-14% -8% 8%;z-index:-1;background:var(--halo);filter:blur(8px);pointer-events:none}
/* Below the page width + 8% halo bleed (~1039px) the glow overshot the 22-27px gutter and made the page scroll sideways. */
@media (max-width:1099px){.hero-film::before{inset:-14% -1rem 8%}}
.hero-film-frame{
  border-radius:16px;overflow:hidden;background:#0b1028;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(11,17,40,.06),0 32px 64px -32px rgba(11,17,40,.5);
}
.hero-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hero-film video:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:16px}
.hero-film figcaption{
  display:flex;justify-content:space-between;gap:1rem;margin-top:.875rem;
  font:400 .8125rem/1.5 var(--mono);color:var(--text-3);font-variant-numeric:tabular-nums;
}
.hero-film figcaption span:first-child{letter-spacing:.04em;text-transform:uppercase}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-film-frame{box-shadow:0 0 0 1px rgba(190,205,255,.06),0 32px 64px -28px rgba(0,0,0,.85)}
}
@media (max-width:34rem){
  .hero-film{margin-top:2rem}
  .hero-film-frame{border-radius:10px}
  .hero-film figcaption{font-size:.75rem}
}
.hero .lede{max-width:36rem}
.hero .meta.brew{margin-top:1.5rem}
@media (max-width:34rem){.hero .lede{max-width:none}}

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

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

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

/* ── 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}
/* the MacNative listing badge sits inline after the credit, at the footer's own scale */
footer .foot-id{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem}
footer .foot-badge{display:inline-flex;line-height:0;opacity:.8;transition:opacity .15s}
footer .foot-badge:hover,footer .foot-badge:focus-visible{opacity:1}
footer .foot-badge img{display:block;width:122px;height:32px}
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}

/* ── comparison tables ───────────────────────────────────────────────────── */
/* The table is wider than the text measure: it widens past it, up to the page gutter. */
article.legal figure{width:min(46rem,100vw - 3rem);max-width:none;margin:1.75rem 0 1rem;overflow-x:auto}
/* Screenshots stay within the reading measure; comparison tables keep their wider rail. */
article.legal figure.guide-shot{width:100%;max-width:100%;overflow:visible;margin:1.25rem 0 1.75rem}
article.legal .guide-shot img{display:block;max-width:100%;height:auto;border:1px solid var(--line-2);border-radius:12px;background:#0e1128}
article.legal .guide-shot figcaption{margin-top:.65rem;color:var(--text-2);font-size:.8125rem;line-height:1.55}

article.legal table{width:100%;min-width:38rem;border-collapse:collapse;font-size:.875rem;line-height:1.45}
article.legal th,article.legal td{
  padding:.7rem .75rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)
}
article.legal th{color:var(--text);font-weight:600}
article.legal td{color:var(--text-2)}
article.legal th:first-child,article.legal td:first-child{width:24%;padding-left:0;color:var(--text)}
article.legal th:last-child,article.legal td:last-child{padding-right:0}

/* ── 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)}
.legal .guide-cta{margin:1.5rem 0}
.legal .guide-cta p{margin:0 0 .75rem}
.legal .guide-cta p:last-child{margin-bottom:0}
.legal .guide-cta .cta{gap:.75rem}
/* 44px touch target; `.legal a:hover` must not underline a button */
.legal .guide-cta .button{min-height:2.75rem;height:auto;padding-block:.75rem;line-height:1.25;text-decoration:none}
/* The stock fill is white on an accent gradient (about 4.1:1 light, 3.0:1 dark); same hue, text 5.0:1 / 6.4:1 */
.legal .guide-cta .button:not(.quiet){background:var(--accent-ink);color:var(--bg)}

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