/* ═══════════════════════════════════════════════════════════════════════════
   PAGE.CSS - the public pages: privacy, terms, help, pricing and the 404.

   These pages load neither redesign.css nor any of the app's sheets, so the
   app's look is restated here as literal values: the same canvas, ink and
   accent, the same corners (28 for a panel, 32 for a hero card, 22 for a
   row, 999 for anything you tap), the same 4/8/12/16/20/24/32/40 spacing and
   the same press - down in 90ms, back on a spring in 380ms. Nothing here
   mints a radius token: redesign.css owns that ladder, and
   tests/test_one_radius_ladder.py fails any other sheet that declares one.

   Both themes, following the app. The app keeps the student's choice in
   localStorage ("aluma_theme"), and each page reads it in one line of script
   in <head>, before this sheet, so a student in the dark app who opens
   Privacy lands on a dark page with no light frame first. With no choice
   stored the page is light, which is the app's own default. The colours
   below are tokens; `:root[data-theme="dark"]` re-points them, and the few
   washes and rules that were literal rgba() ink or teal now read
   --wash-rgb, --shade-rgb and --accent-rgb so they turn with it.

   reset.html is not styled here: it carries its own small sheet and is held
   light by tests/test_signin_light_theme.py (a sign-in surface is light by
   product decision).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --bg:#f6f8f2; --card:#ffffff; --well:#fbfcf7;
  --border:rgba(19,32,27,.10); --strong:rgba(19,32,27,.17);
  /* --ink is the app's quiet panel ink, for long reading: darker than the
     meta grey, softer than the title black. 11:1 on white. */
  --text:#13201b; --ink:#2b3a33; --muted:#536159;
  /* --dim was #7a867e, which measured 3.36-3.79:1 on every surface these pages
     paint it on. The app solved this job already: redesign.css ships
     --text-tertiary #5B635D, 5.73:1 on --bg and 6.18:1 on white. */
  --dim:#5B635D;
  --accent:#1C6A5B; --accent-hover:#175C4F; --lip:#0E4238;
  /* ink on the accent, and the three channels the washes are mixed from */
  --on-accent:#fff;
  --accent-rgb:28 106 91; --wash-rgb:19 32 27; --shade-rgb:19 32 27;
  --rail:rgba(255,255,255,.55); --row-hover:#f3f8f2;
  --accent-wash:rgba(28,106,91,.10);
  --mint-wash:rgba(120,216,192,.12);
  --shadow-card:0 22px 44px -22px rgba(19,32,27,.24),0 1px 2px rgba(19,32,27,.04);
  --shadow-lip:0 2px 0 rgba(19,32,27,.10);
  --shadow-lip-down:0 1px 0 rgba(19,32,27,.10);
  /* --grad starts at a pale lime. White text on its lightest stop is 1.09:1
     and gradient-clipped text over the canvas is 1.5:1, so it is decoration
     only: nothing on these pages is written in it or on it. */
  --grad:linear-gradient(135deg,#a4df5c,#78d8c0 45%,#258c7a);
  --font-sans:'Geist','Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,sans-serif;
  --font-display:'Geist','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-code:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* The app's press curves, restated (redesign.css --ease-press and
     --ease-settle). */
  --tap:cubic-bezier(.3,0,.1,1);
  --spring:cubic-bezier(.22,1.2,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:15px;line-height:1.65;
  font-feature-settings:'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 80% -100px,rgba(120,216,192,.16),transparent 60%),
    radial-gradient(700px 420px at 0% -80px,rgba(192,232,152,.18),transparent 60%),
    linear-gradient(180deg,#fbfcf7 0%,#f6f8f2 40%,#eff4ee 100%);
  min-height:100vh;
}
.wrap{max-width:760px;margin:0 auto;padding:32px 24px 72px}

/* ── Top bar: the mark, and a soft pill back to the app ───────────────────── */
.topnav{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:32px}
/* The official mark ships as-is: no rounding, no crop, aspect preserved.
   Transparent padding in the PNG means a larger box is needed for the mark
   to read at wordmark height - negative margin keeps the lockup tight. */
.topnav img{width:56px;height:56px;margin:-10px -8px -10px -10px;border-radius:0;object-fit:contain;flex-shrink:0}
.topnav .brand{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:19px;color:var(--text)}
.topnav a{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:0 16px;border-radius:999px;
  background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-lip);
  color:var(--text);font-size:13px;font-weight:650;text-decoration:none;white-space:nowrap;
}

/* ── Type: the app's scale ────────────────────────────────────────────────── */
h1{font-family:var(--font-display);font-size:36px;font-weight:720;letter-spacing:-.035em;line-height:1.1;margin-bottom:8px;text-wrap:balance}
h1 .grad{color:var(--accent)}
h2{font-family:var(--font-display);font-size:18px;font-weight:740;letter-spacing:-.02em;line-height:1.3;margin:28px 0 10px;text-wrap:balance}
.updated{color:var(--dim);font-size:13.5px;line-height:1.55;margin-bottom:28px}
p,li{color:var(--ink);font-size:15px;line-height:1.7;margin-bottom:12px}
ul{margin:0 0 12px 20px}
li{padding-left:2px}
li::marker{color:var(--accent)}
b,strong{color:var(--text);font-weight:650}
a{color:var(--accent);text-decoration-color:rgb(var(--accent-rgb) / .35);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
/* aluma_did is a real identifier, so it keeps a code face, on a soft chip. */
code{font-family:var(--font-code);font-size:.86em;padding:2px 8px;border-radius:999px;background:rgb(var(--wash-rgb) / .06);color:var(--text);white-space:nowrap}

/* ── Panels ───────────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:28px;padding:24px 28px;margin-bottom:16px;box-shadow:var(--shadow-card)}
.card h2{margin:0 0 10px}
.card > :last-child,.card > ul:last-child > li:last-child{margin-bottom:0}
.beta-banner{margin:0 0 24px;padding:14px 18px;border:1px solid rgb(var(--accent-rgb) / .18);border-radius:22px;background:var(--mint-wash);color:var(--muted);font-size:13.5px;line-height:1.55}
.beta-banner strong{color:var(--text)}
/* Two notes in a row are one grouped panel, the way Settings groups its rows:
   the first keeps its top corners, the last its bottom ones, and the line
   between them is the first one's own bottom edge, straight because its
   bottom corners are square. */
.beta-banner:has(+ .beta-banner){margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.beta-banner + .beta-banner{border-top-width:0;border-top-left-radius:0;border-top-right-radius:0}
.note{margin-top:8px;padding:14px 18px;border-radius:22px;background:rgb(var(--wash-rgb) / .04);font-size:13px;line-height:1.55;color:var(--dim)}

/* ── Footer: quiet pills ──────────────────────────────────────────────────── */
.footer-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;font-size:13px;color:var(--dim)}
.footer-links a{
  display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;
  background:rgb(var(--wash-rgb) / .045);color:var(--muted);font-weight:600;text-decoration:none;
}

/* ── Documents: privacy, terms and help ───────────────────────────────────────
   A reading column of grouped panels, one per section, and an "On this page"
   rail built from the section titles. On a wide screen the rail sits beside
   the text and stays put while you read (the shape of the Settings rail); on
   anything narrower it becomes chips above the first panel.

   The column is sized for the measure, not the screen. Geist is narrow:
   16px of it runs about 7.6px a character, so 560px of text is 70 to 75
   characters a line, measured in Chromium. Wider, and a long policy reads
   like a spreadsheet row. */
body.doc .wrap{max-width:706px}
body.doc .doc-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "toc" "body"}
body.doc .doc-head{grid-area:head;margin-bottom:20px}
body.doc .doc-head .updated{margin-bottom:0}
body.doc .lede{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--muted)}
body.doc .doc-body{grid-area:body;min-width:0}
body.doc .doc-body h2[id]{scroll-margin-top:48px}
body.doc .doc-body .card[id]{scroll-margin-top:24px}
body.doc .toc{grid-area:toc;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
body.doc .toc-h{display:none}
body.doc .toc a{
  display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;
  background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-lip);
  color:var(--text);font-size:13px;font-weight:650;line-height:1.25;text-decoration:none;
}
body.doc .toc a[aria-current="true"]{color:var(--accent);border-color:rgb(var(--accent-rgb) / .30)}
/* The last word of help, with the next step in it. */
body.doc .card.still{background:var(--mint-wash);border-color:rgb(var(--accent-rgb) / .16);box-shadow:none;margin-top:8px}
body.doc .card.still p{color:var(--text);font-weight:550}
body.doc .card.still a{font-weight:700}

@media(min-width:601px){
  body.doc .card{padding:30px 48px}
  body.doc .doc-body :is(p,li){font-size:16px}
}
@media(min-width:1080px){
  body.doc .wrap{max-width:970px}
  body.doc .doc-layout{
    grid-template-columns:232px minmax(0,658px);column-gap:32px;justify-content:center;
    grid-template-areas:"toc head" "toc body";
  }
  body.doc .toc{
    position:sticky;top:24px;align-self:start;flex-direction:column;flex-wrap:nowrap;gap:2px;
    max-height:calc(100vh - 48px);overflow:auto;margin:0;padding:12px;
    border-radius:28px;background:var(--rail);border:1px solid var(--border);
    scrollbar-width:none;
  }
  body.doc .toc::-webkit-scrollbar{display:none}
  body.doc .toc-h{display:block;padding:6px 14px 8px;font-size:12px;font-weight:650;letter-spacing:0;color:var(--dim)}
  body.doc .toc a{
    display:flex;min-height:38px;padding:9px 14px;background:transparent;border-color:transparent;box-shadow:none;
    color:var(--muted);font-size:13.5px;font-weight:550;
  }
  /* Where you are reads like the Settings rail's active tab: a white pill
     standing on its lip. */
  body.doc .toc a[aria-current="true"]{
    background:var(--card);border-color:var(--border);color:var(--accent);font-weight:650;
    box-shadow:var(--shadow-lip),0 10px 20px -12px rgb(var(--shade-rgb) / .30);
  }
}

/* ── Pricing ──────────────────────────────────────────────────────────────── */
/* Wide breakout, so the three paid tiers and the comparison get room. */
.pricing-wide{width:min(980px,94vw);margin-left:50%;transform:translateX(-50%)}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0}
.tier{background:var(--card);border:1px solid var(--border);border-radius:28px;padding:24px 22px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:border-color .3s,box-shadow .3s}
.tier.feat{border-color:rgb(var(--accent-rgb) / .45);box-shadow:0 0 0 1px rgb(var(--accent-rgb) / .22),0 26px 50px -22px rgb(var(--shade-rgb) / .34)}
.tier .nm{font-size:16px;letter-spacing:-.01em;color:var(--text);font-weight:760}
.tier .pr{font-size:30px;font-weight:800;letter-spacing:-.04em;margin:8px 0 4px}
.tier .pr span{font-size:13px;color:var(--dim)}
.tier .pr .annual{display:block;font-size:11px;color:var(--dim);font-weight:600;margin-top:4px}
/* #4ade80 on white is 1.74:1 - a dark-theme green used as ink. */
.tier .pr .annual b{color:var(--accent);font-weight:600}
.tier ul{list-style:none;margin:14px 0 0}
/* A line that wraps hangs under its words, not back under the check. */
.tier li{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:8px;align-items:baseline;margin-bottom:8px;padding-left:0;font-size:13.5px;line-height:1.55}
.tier li::before{content:"✓";color:var(--accent);font-weight:650}
/* The app's status chip: ink on a wash of itself, sentence case. */
.tier .tag{align-self:flex-start;display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;margin-bottom:10px;border-radius:999px;background:var(--accent-wash);color:var(--accent);font-size:12px;font-weight:700;line-height:1.3}
.cta{display:block;margin-top:auto;padding-top:18px}
.cta a,a.cta{
  display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:700;font-size:14px;
  box-shadow:0 3px 0 var(--lip),inset 0 1px 0 rgba(255,255,255,.16);
}
.pricing-wide + p{margin:28px 0 0;text-align:center;color:var(--muted);font-size:14px}

/* comparison matrix */
.compare{margin:56px 0 8px}
.cmp-h{font-family:var(--font-display);font-size:28px;font-weight:760;letter-spacing:-.035em;text-align:center;margin-bottom:6px;color:var(--text);text-wrap:balance}
.cmp-h .grad{color:var(--accent)}
.cmp-sub{text-align:center;color:var(--dim);font-size:13.5px;margin-bottom:24px}
.cmp-swipe{display:none;color:var(--muted);font-size:12px;margin:-10px 0 10px;text-align:right}
.cmp-scroll{overflow-x:auto;border-radius:28px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-card);-webkit-overflow-scrolling:touch}
table.cmp{border-collapse:separate;border-spacing:0;width:100%;min-width:620px;font-size:13.5px}
table.cmp th,table.cmp td{padding:14px;text-align:center;border-bottom:1px solid var(--border);vertical-align:middle}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp thead th{background:var(--well);padding:18px 14px 16px}
table.cmp th.lab,table.cmp td.lab{text-align:left;color:var(--muted);font-weight:600;position:sticky;left:0;z-index:2;background:var(--card);min-width:184px;white-space:nowrap}
table.cmp thead th.lab{z-index:3;background:var(--well);color:var(--dim);font-size:13px;font-weight:650}
.cmp .pname{font-size:15px;font-weight:750;letter-spacing:-.01em;color:var(--text)}
.cmp .pprice{font-size:11px;color:var(--dim);font-weight:600;margin-top:3px}
.cmp .pprice b{color:var(--text);font-size:15px}
.cmp .feat-col{background:linear-gradient(180deg,rgb(var(--accent-rgb) / .08),rgb(var(--accent-rgb) / .03))}
.cmp thead th.feat-col{background:linear-gradient(180deg,rgb(var(--accent-rgb) / .13),var(--well))}
.cmp .feat-col .pname{color:var(--accent)}
.cmp .badge-pop{display:inline-flex;align-items:center;margin-top:7px;padding:3px 10px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11.5px;font-weight:700}
.cmp .yes{color:var(--accent);font-weight:650;font-size:16px;line-height:1}
.cmp .no{color:var(--dim);font-size:15px;line-height:1}
.cmp .val{color:var(--text);font-weight:650}
.cmp .mut{color:var(--muted);font-weight:500;font-size:12.5px}
table.cmp tbody tr:hover td{background:rgb(var(--accent-rgb) / .035)}
table.cmp tbody tr:hover td.feat-col{background:linear-gradient(180deg,rgb(var(--accent-rgb) / .12),rgb(var(--accent-rgb) / .05))}
table.cmp tbody tr:hover td.lab{background:var(--row-hover)}
.cmp .cta-row td{padding-top:18px;padding-bottom:18px}
.cmp .cta-mini{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;font-weight:650;font-size:12.5px;text-decoration:none;background:var(--card);border:1px solid var(--strong);box-shadow:var(--shadow-lip);color:var(--text)}
.cmp .cta-mini.go{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:0 3px 0 var(--lip),inset 0 1px 0 rgba(255,255,255,.16)}
/* entrance animation (armed only when JS adds .reveal, so content shows even if JS is off) */
.compare.reveal thead th{opacity:0;transform:translateY(-10px)}
.compare.reveal tbody tr{opacity:0;transform:translateY(14px)}
.compare.reveal.in thead th{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease .05s}
.compare.reveal.in tbody tr{opacity:1;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*42ms)}
.compare.reveal .yes,.compare.reveal .no{transform:scale(.35);opacity:0}
.compare.reveal.in .yes,.compare.reveal.in .no{transform:scale(1);opacity:1;transition:transform .45s cubic-bezier(.2,1.6,.45,1),opacity .3s ease;transition-delay:calc(.16s + var(--i,0)*42ms)}
@media(max-width:760px){
  .tiers{grid-template-columns:1fr}
  /* The breakout is for wide screens. On a phone it pushed the cards and
     the table 12px past the gutter every other block sits in. */
  .pricing-wide{width:auto;margin-left:0;transform:none}
  .cmp-swipe{display:block}
  table.cmp th.lab,table.cmp td.lab{min-width:154px;max-width:154px;white-space:normal;line-height:1.35}
  table.cmp th,table.cmp td{padding:12px 10px}
}

/* ── 404: one soft card with the way out in it ────────────────────────────── */
body.nf .topnav a{display:none}
.nf-card{max-width:560px;margin:6vh auto 0;padding:40px 36px 36px;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:32px;box-shadow:var(--shadow-card)}
.nf-card .updated{margin-bottom:0}
.nf-code{display:inline-flex;align-items:center;min-height:26px;padding:4px 12px;margin:0 0 14px;border-radius:999px;background:var(--accent-wash);color:var(--accent);font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.04em}
.nf-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:28px 0 0}
.nf-actions .cta{margin:0;padding:0}
.nf-actions .cta a,.nf-actions > a.cta{display:inline-flex;padding:0 22px}
.nf-secondary{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
  background:var(--card);border:1px solid var(--strong);box-shadow:var(--shadow-lip);
  color:var(--text);font-size:14px;font-weight:650;text-decoration:none;
}
body.nf .footer-links{justify-content:center}

/* ── The press: the app's, everywhere you can tap ─────────────────────────────
   Down in 90ms, back on a spring in 380ms: going down is mechanical, coming
   back is elastic. Hover changes the fill, never the shape, and only on a
   device that can hover - on a touch screen a hover style latches after the
   tap and the control goes on looking armed. */
.topnav a,.footer-links a,body.doc .toc a,.cta a,a.cta,.cmp .cta-mini,.nf-secondary{
  transition:transform 380ms var(--spring),background-color .2s,border-color .2s,color .2s,box-shadow .2s;
}
:is(.topnav a,.footer-links a,body.doc .toc a,.cta a,a.cta,.cmp .cta-mini,.nf-secondary):active{
  transform:scale(.97);transition-duration:90ms;transition-timing-function:var(--tap);
}
@media(hover:hover){
  .topnav a:hover{border-color:var(--strong);color:var(--accent)}
  .footer-links a:hover{background:var(--accent-wash);color:var(--accent)}
  body.doc .toc a:hover{border-color:var(--strong);color:var(--accent)}
  .cta a:hover,a.cta:hover{background:var(--accent-hover)}
  .tier:hover{border-color:var(--strong)}
  .tier.feat:hover{border-color:rgb(var(--accent-rgb) / .55)}
  .cmp .cta-mini:hover{border-color:var(--accent);color:var(--accent)}
  .cmp .cta-mini.go:hover{background:var(--accent-hover);color:var(--on-accent)}
  .nf-secondary:hover{border-color:var(--accent);color:var(--accent)}
}
@media(hover:hover) and (min-width:1080px){
  body.doc .toc a:hover{background:rgb(var(--wash-rgb) / .045);border-color:transparent;color:var(--text)}
  body.doc .toc a[aria-current="true"]:hover{background:var(--card);border-color:var(--border);color:var(--accent)}
}

/* ── Keyboard ────────────────────────────────────────────────────────────────
   The app draws a deliberate 2px accent ring (redesign.css), so these pages
   do too; a student tabbing from the app into Pricing should not watch the
   focus indicator change. No border-radius here: a :focus-visible rule that
   draws an outline must not also reshape the control it lands on -
   tests/test_beta_redesign.py holds the whole of interfaces/web to that. The
   outline follows each control's own radius. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* A finger needs 44px, whatever the width: a tablet is still a touch screen. */
@media(pointer:coarse){
  .topnav a,.footer-links a,body.doc .toc a,.cmp .cta-mini{min-height:44px}
}

/* ── Phone: 16px gutters, 44px targets ────────────────────────────────────── */
@media(max-width:600px){
  .wrap{padding:20px 16px 56px}
  .topnav{margin-bottom:24px}
  h1{font-size:28px}
  .card{padding:20px 18px}
  .nf-card{padding:32px 20px 28px;border-radius:28px}
  .topnav a,.footer-links a,body.doc .toc a,.cmp .cta-mini{min-height:44px}
  /* One row of chips you swipe, instead of a five-row wall above the text.
     It bleeds to the screen edge so the row reads as one you can scroll.
     The snap edge sits on the 16px gutter too: without scroll-padding the
     first chip snapped to x=0 and the row loaded already scrolled by 16px. */
  body.doc .toc{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 20px;padding:4px 16px 10px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:16px}
  body.doc .toc::-webkit-scrollbar{display:none}
  body.doc .toc a{flex:none;white-space:nowrap;scroll-snap-align:start}
  body.doc .lede{font-size:16px}
}

/* ── The lip sinks with the press ─────────────────────────────────────────────
   The app's pills go down onto their lip (3px to 1px) as they shrink; here
   they shrank and the lip stayed put. */
:is(.cta a,a.cta,.cmp .cta-mini.go):active{box-shadow:0 1px 0 var(--lip),inset 0 1px 0 rgba(255,255,255,.10)}
:is(.topnav a,body.doc .toc a,.cmp .cta-mini:not(.go),.nf-secondary):active{box-shadow:var(--shadow-lip-down)}

/* ── Dark: the app's dark tokens (redesign.css), for a student who reads in
   the dark app. Set by the one-line script in each page's <head>. ─────────── */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#070A08; --card:#101814; --well:#141C18;
  --border:rgba(255,255,255,.10); --strong:rgba(255,255,255,.17);
  --text:#F4F8F5; --ink:#CBD5CF; --muted:#A3B0A8; --dim:#8D9890;
  --accent:#78D8C0; --accent-hover:#8FE2CD; --lip:#3A9A84;
  --on-accent:#051916;
  --accent-rgb:120 216 192; --wash-rgb:255 255 255; --shade-rgb:0 0 0;
  --rail:rgba(16,24,20,.6); --row-hover:#141C18;
  --accent-wash:rgba(120,216,192,.14);
  --mint-wash:rgba(120,216,192,.07);
  --shadow-card:0 18px 48px rgba(0,0,0,.22);
  --shadow-lip:0 2px 0 rgba(0,0,0,.45);
  --shadow-lip-down:0 1px 0 rgba(0,0,0,.45);
}
:root[data-theme="dark"] body{
  background-image:
    radial-gradient(900px 500px at 80% -100px,rgba(120,216,192,.08),transparent 60%),
    radial-gradient(700px 420px at 0% -80px,rgba(164,223,92,.05),transparent 60%),
    linear-gradient(180deg,#0B100D 0%,#070A08 40%,#070A08 100%);
}

/* ── Print: the words, not the chrome ─────────────────────────────────────── */
@media print{
  @page{margin:16mm}
  /* Paper is white whatever the screen was. */
  :root,:root[data-theme="dark"]{color-scheme:light;--text:#13201b;--ink:#2b3a33;--muted:#536159;--dim:#5B635D;--accent:#1C6A5B;--accent-rgb:28 106 91}
  html{scroll-behavior:auto}
  body{background:#fff;font-size:11pt}
  .wrap,body.doc .wrap{max-width:none;padding:0;margin:0}
  .topnav a,.footer-links,body.doc .toc,.cmp-swipe,.nf-actions,.cta,.cmp .cta-row{display:none}
  .topnav{margin-bottom:12pt}
  body.doc .doc-layout{display:block}
  .card,.tier,.cmp-scroll,.nf-card,.beta-banner,.note{box-shadow:none;background:#fff;border:1px solid #c9cfc9}
  .tier,.beta-banner,.note{break-inside:avoid}
  /* On paper a document is a document: the panels give way to plain
     sections that may run across a page break, and only a title is
     kept with what follows it. */
  .card,body.doc .card{padding:0;margin:0 0 14pt;border:0;border-radius:0}
  .cmp-scroll{overflow:hidden}
  table.cmp{min-width:0}
  table.cmp th.lab,table.cmp td.lab{min-width:0;white-space:normal}
  h1,h2{break-after:avoid}
  p,li,body.doc .doc-body :is(p,li){color:#111;font-size:10.5pt;line-height:1.5;orphans:3;widows:3}
  body.doc .doc-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all;color:#444}
  .pricing-wide{width:auto;margin:0;transform:none}
  /* The table animates in on scroll. A page printed before it was scrolled
     to would print an empty table. */
  .compare.reveal thead th,.compare.reveal tbody tr,.compare.reveal .yes,.compare.reveal .no{opacity:1;transform:none;transition:none}
  table.cmp th.lab,table.cmp td.lab{position:static}
}

/* ── Reduced motion, last so it beats everything above at equal specificity ── */
@media(prefers-reduced-motion:reduce){
  /* The .in selectors are listed too: the rules that animate carry .in, and a
     media query adds no specificity, so a block without them never wins. */
  .compare.reveal thead th,.compare.reveal tbody tr,.compare.reveal .yes,.compare.reveal .no,
  .compare.reveal.in thead th,.compare.reveal.in tbody tr,.compare.reveal.in .yes,.compare.reveal.in .no{
    opacity:1;transform:none;transition:none;animation:none
  }
  .tier,.cta a,a.cta,.cmp .cta-mini,.topnav a,.footer-links a,body.doc .toc a,.nf-secondary{transition:none}
  /* The press still confirms itself; it just does not travel. */
  :is(.topnav a,.footer-links a,body.doc .toc a,.cta a,a.cta,.cmp .cta-mini,.nf-secondary):active{transform:none}
  html{scroll-behavior:auto}
}