/* Strathlon — site-wide stylesheet for every page except the homepage (which keeps /home.css).
   Same "night studio" language as the homepage: its colour tokens, Barlow Condensed display face + Inter body,
   the live-text gradient wordmark and the original mark, one accent colour per page type (--c).
   Google Fonts only. No icons, no emoji, no stock imagery.

   Sections:  1 tokens  2 base  3 chrome (nav, menu, footer)  4 type + buttons  5 page shells
              6 reading system (.doc)  7 figures  8 tables  9 callouts / FAQ / references / TOC
             10 breadcrumbs, prev/next, related cards, listing cards  11 chips, search, forms
             12 legal  13 changelog timeline  14 legacy pages (join/publicbeta hero, library)  15 motion + print */

/* ---------- 1. Tokens (identical to home.css, plus the reading tokens and the legacy aliases) ---------- */
:root {
  --bg: #06070B;
  --bg-2: #0B0D14;
  --bg-3: #10131B;
  --ink: #F2F4F8;
  --body: #CBD2DE;                /* long-form body text: 13.2:1 on --bg */
  --mute: #A3ABBB;                /* 8.7:1 on --bg */
  --dim: #8B94A7;                 /* 6.6:1 on --bg: meta and fine print only */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);

  --c-plan: #2F8CFF;
  --c-session: #22E08A;
  --c-fuel: #FFB020;
  --c-watch: #FF3D3D;
  --c-coach: #A78BFA;
  --c-sport: #2EE6D6;
  --c-ready: #FF5CA8;
  --c-plain: #F2F4F8;
  --c: var(--c-plan);             /* the page accent: set per page type on <main> */

  --brand-blue: #00AEFF;
  --brand-red: #F71216;
  --brand-grad: linear-gradient(135deg, var(--brand-blue), var(--brand-red));

  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --maxw: 1200px;
  --gutter: 16px;
  --measure: 70ch;                /* the reading column: about 700 px at 17 px Inter */
  --wide: 900px;                  /* listing and hub pages */
  --radius: 16px;
  --link: #5FB3FF;                /* in-text links: 9.4:1 on --bg, distinct from the body colour */
  --pw: 300px;                    /* phone-frame width */
  color-scheme: dark;

  /* Legacy aliases: the pages' own <style> blocks (kept by tools/convert.py) use the old stylesheet's names. */
  --azure: var(--brand-blue);
  --neon-red: var(--brand-red);
  --txt: var(--ink);
  --txt-mut: var(--mute);
  --txt-dim: var(--dim);
  --bg-elev: var(--bg-2);
  --bg-card: var(--bg-3);
  --grad: var(--brand-grad);
}
@supports (background: linear-gradient(in oklab, red, blue)) {
  :root { --brand-grad: linear-gradient(135deg in oklab, var(--brand-blue), var(--brand-red)); }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }

img, svg, video { max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
/* the ring follows each control's own shape (pills stay pills); only bare inline links, which have no shape of their own, get a soft corner */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--c-plan); outline-offset: 3px;
}
a:not([class]):focus-visible { border-radius: 6px; }
:target { scroll-margin-top: 84px; }   /* deep links from the app land under the sticky 64 px header */
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { .wrap { --gutter: 32px; } }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; text-decoration: none;
}
.skip:focus { left: 8px; }

/* ---------- 3. Chrome: nav, mobile menu, footer (the homepage's, verbatim) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
}
/* The blur lives on a pseudo-element: a backdrop-filter on the header itself would make the header the containing block
   of the fixed menu panel (the panel then collapsed to a 60 px strip and the page painted over it). */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(6, 7, 11, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav__row { position: relative; z-index: 1; }
.nav__row { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: flex-start; gap: 9px; text-decoration: none; flex: none; }
.brand__mark {
  width: 32px; height: 32px; display: block; align-self: center; border-radius: 22%;
  mix-blend-mode: screen;   /* the artwork's black ground sinks into the page; the S itself is untouched */
}
.brand__word {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.02em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.brand__tm { font-family: var(--font-body); font-size: 9px; line-height: 1; color: var(--mute); margin: 7px 0 0 1px; }
.nav__links { display: none; gap: 22px; margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--mute); font-size: 14px; font-weight: 500; }
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav__cta { margin-left: auto; }
.nav__toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; flex: none;
}
.nav__toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
/* open: the three bars become a close cross (the button's label says "Close menu") */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav__toggle span { transition: none; } }
/* MOBILE MENU (owner bug 2026-10-01, from his iPhone: "See how the menu appears when on a section with graphic ... that
   menu needs to appear smaller in a better way"). WHAT WAS WRONG: the homepage's moving graphics carry z-indexes up to
   300 (hero orbit) and 100 (coach answers) in the page's root stacking context, above the header's 50, so they painted
   over the open menu (and its 30 px uppercase links read as a wall of type). THE FIX, three parts: (1) home.css isolates
   the stage and the answer ring so their z-indexes stay inside them; (2) while the menu is open the header is fixed to
   the top at z-index 1000, above anything a page can hold, and the page under it is locked where it was (body fixed at
   -scrollY by the menu script, restored on close) and made inert; (3) the panel is one solid full-screen sheet in the
   page's own ground, under the header row (so the brand and the close cross stay on top), one column of 24 px links,
   each at least 52 px tall to tap. The CTA's own colours now win over the link rule (they lost on specificity before,
   which left white text on a white pill: the "empty pill" in his screenshot). ALTERNATIVES rejected: only raising the
   header's z-index (the graphics would still cover the sticky header while scrolling); a translucent sheet with blur
   (the cause of the see-through look). Desktop (1024 px and up) never shows the button or the panel. */
body.nav-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
body.nav-open .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.nav__panel {
  position: fixed; inset: 0; z-index: 0;
  background: var(--bg);
  padding: 76px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.nav__panel[hidden] { display: none !important; }
.nav__panel a {
  display: flex; align-items: center; flex: none; min-height: 52px; padding: 6px 0;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.nav__panel a[aria-current="page"] { color: var(--c); }
.nav__panel a.nav__panel-cta {
  margin-top: 24px; justify-content: center; border: 0; border-radius: 999px;
  background: var(--ink); color: #0B0D14;
  font-family: var(--font-body); font-weight: 700; font-size: 17px; letter-spacing: 0; text-transform: none;
}
@media (max-width: 439px) {
  .nav__row { gap: 12px; }
  .brand { gap: 7px; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__word { font-size: 21px; line-height: 28px; }
  .brand__tm { margin-top: 5px; }
  .btn--small { padding: 10px 13px; }
}
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__cta { margin-left: 0; }
  .nav__toggle, .nav__panel { display: none; }
}

.footer { border-top: 1px solid var(--line); padding: 48px 0 32px; margin-top: clamp(48px, 8vw, 96px); color: var(--mute); }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.fine { font-size: 13px; color: var(--dim); max-width: 52ch; margin: 14px 0 0; line-height: 1.5; }
.footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.footer__links a { text-decoration: none; color: var(--mute); font-size: 14px; }
.footer__links a:hover { color: var(--ink); }
.footer__legal { margin-top: 32px; font-size: 13px; color: var(--dim); }
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 1.2fr 2fr; }
  .footer__links { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 4. Type + buttons (the homepage's) ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
}
h1.display { font-size: clamp(44px, 6vw, 80px); }
h2.display { font-size: clamp(36px, 4.6vw, 64px); }
.display--small { font-size: clamp(30px, 3.2vw, 44px); line-height: 0.96; }
.display em { font-style: normal; color: var(--c, var(--ink)); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c, var(--mute));
  margin: 0 0 16px;
}
.eyebrow--plain { color: var(--mute); }
.tag {
  display: inline-block; vertical-align: middle;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bg); background: var(--c, var(--ink));
  padding: 3px 8px 2px; border-radius: 6px; margin-left: 8px; line-height: 1.2;
}
.lede {
  font-size: clamp(17px, 1.35vw, 20px);
  color: var(--mute);
  max-width: 38ch;
  margin: 22px 0 0;
}
.lede--small { font-size: 16px; }
.lede b { color: var(--ink); font-weight: 600; }
.textlink {
  display: inline-block;
  margin-top: 26px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c, var(--mute));
  padding-bottom: 2px;
}
.textlink:hover { color: var(--c, var(--ink)); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.btn--primary, .btn-primary {
  background: var(--ink);
  color: #0B0D14;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.12);
}
.btn--primary:hover, .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(255, 255, 255, 0.18); text-decoration: none; }
.btn--ghost, .btn-ghost {
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
}
.btn--ghost:hover, .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.4); text-decoration: none; }
.btn--small { padding: 10px 16px; font-size: 14px; background: var(--ink); color: #0B0D14; }
.btn[disabled], .btn.is-soon { opacity: 0.6; cursor: default; transform: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-row--centre { justify-content: center; }
@media (max-width: 419px) { .cta-row .btn { font-size: 15px; padding: 14px 17px; } }

/* ---------- 5. Page shells ----------
   <main id="main" class="page page--article" style="--c: var(--c-plan)">
     <div class="wrap"><article class="doc">…</article></div>
   </main>
   page--article  guides, blog posts, stats explainers, user guide (reading column)
   page--hub      listing pages: guides, blog, understanding-your-stats (wider column)
   page--legal    privacy, terms
   page--form     feature-request, roadmap, support
   page--log      whats-new (timeline)
   page--library  the library's own layout (its scoped .lib-* styles stay in the page)
   page--landing  join, publicbeta (the old hero markup, restyled below)                                    */
.page { position: relative; padding: clamp(28px, 5vw, 64px) 0 0; }
.page::before {   /* one soft glow in the page's accent, top left, like the homepage's feature glows */
  content: ""; position: absolute; z-index: 0; left: 50%; top: -140px; width: min(90vw, 1100px); height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.page > * { position: relative; z-index: 1; }
.doc { max-width: var(--measure); margin: 0 auto; }
.page--hub .doc, .page--log .doc, .page--form .doc, .doc--wide { max-width: var(--wide); }
.page--legal .doc { max-width: calc(var(--measure) + 6ch); }

/* ---------- 6. Reading system ----------
   Everything a converted page already contains is styled by element and by its existing class, so no text changes. */
.doc { color: var(--body); font-size: 17px; line-height: 1.65; }
.doc > p, .doc li, .doc td, .doc dd { color: var(--body); }
.doc p { margin: 0 0 1.15em; }
.doc strong, .doc b { color: var(--ink); font-weight: 600; }
.doc em { font-style: italic; }
.doc a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.doc a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.doc a.btn, .doc a.post-card, .doc a.stat-card, .doc a.lib-card, .doc .btn { text-decoration: none; }
.doc code { font-family: var(--font-mono); font-size: 0.92em; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.doc sup { line-height: 0; }

/* article header: the page's own first elements, wrapped by convert.py in <header class="article__head"> */
.article__head { margin: 0 0 clamp(28px, 4vw, 44px); padding-bottom: clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--line); }
.doc h1 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.004em;
  font-size: clamp(42px, 5.6vw, 76px); line-height: 0.94; margin: 0 0 18px; color: var(--ink); text-wrap: balance;
}
.doc .back-link {   /* the old "← All guides" link reads as the eyebrow crumb above the title */
  display: inline-block; margin: 0 0 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--c) 45%, transparent); padding-bottom: 2px;
}
.doc .back-link:hover { color: var(--ink); border-color: var(--ink); }
.doc .updated, .doc .lede, .doc .stat-lede, .doc .article__dek {   /* the dek */
  font-size: clamp(17.5px, 1.35vw, 19.5px); line-height: 1.55; color: var(--mute); margin: 0 0 14px; max-width: none;
}
.doc .stat-lede, .doc .article__head .lede { color: var(--ink); font-weight: 400; }
.doc .lede strong, .doc .updated strong, .doc .stat-lede strong { color: var(--ink); }
.doc .updated { color: var(--mute); }
.doc .post-meta, .doc .article__meta {   /* date · read time */
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}
.article__head > :last-child { margin-bottom: 0; }
.doc .article__head .updated, .doc .article__head .lede, .doc .article__head .stat-lede { font-size: clamp(17.5px, 1.35vw, 19.5px); }
/* the same dek classes further down the page (e.g. the stats hub's second lede) read as ordinary lead paragraphs */
.doc > .stat-lede, .doc > .lede { font-size: 19px; color: var(--ink); margin: 0 0 1.2em; }

/* headings: Barlow Condensed for the H2 (the section beat), Inter for the H3 (the paragraph beat) */
.doc h2 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(30px, 3.2vw, 42px); line-height: 1; color: var(--ink);
  margin: clamp(44px, 6vw, 64px) 0 16px; padding-top: 22px; border-top: 1px solid var(--line);
  text-wrap: balance;
}
.doc h2::before { content: ""; display: block; width: 44px; height: 3px; background: var(--c); border-radius: 2px; margin: 0 0 14px; }
.doc h3 { font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); margin: 34px 0 10px; letter-spacing: -0.01em; }
.doc h4 { font-weight: 700; font-size: 17px; color: var(--ink); margin: 26px 0 8px; }
.doc h2 + h3 { margin-top: 18px; }
.doc h2[id], .doc h3[id], .doc [id] { scroll-margin-top: 84px; }

/* lists */
.doc ul, .doc ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.doc li { margin: 0.45em 0; }
.doc li::marker { color: var(--c); }
.doc ol > li::marker { color: var(--mute); font-variant-numeric: tabular-nums; }
.doc li > ul, .doc li > ol { margin: 0.4em 0 0.4em; }
.doc dl { margin: 0 0 1.2em; }
.doc dt { color: var(--ink); font-weight: 600; margin-top: 12px; }
.doc dd { margin: 4px 0 0 0; }

/* blockquote */
.doc blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--c);
  font-size: 19px; line-height: 1.55; color: var(--ink);
}
.doc blockquote p { margin: 0 0 0.6em; }
.doc blockquote cite, .doc blockquote footer { display: block; margin-top: 6px; font-size: 14px; font-style: normal; color: var(--dim); }

/* ---------- 7. Figures: real app screenshots in the homepage's phone frame ----------
   <figure class="shot"><img …><figcaption>…</figcaption></figure>   (guides, stats)
   <figure class="app-shot"><img …></figure>                          (blog)
   Both get the frame. Add class "shot--wide" for a landscape image that is not a phone screen, "app-shot--card" for a
   square/portrait marketing graphic that is not a phone screen. */
.doc figure.shot, .doc figure.app-shot { margin: clamp(30px, 5vw, 44px) auto; max-width: 100%; text-align: center; }
.doc figure.shot img, .doc figure.app-shot img {
  display: block; width: var(--pw); max-width: 100%; height: auto; margin: 0 auto;
  border-radius: calc(var(--pw) * 0.135); background: #fff;
  padding: 0; border: 0;
  box-shadow:
    0 0 0 calc(var(--pw) * 0.026) #14161C,
    0 0 0 calc(var(--pw) * 0.026 + 1px) rgba(255, 255, 255, 0.12),
    0 30px 70px rgba(0, 0, 0, 0.65),
    0 0 90px color-mix(in srgb, var(--c) 28%, transparent);
}
.doc figure.shot, .doc figure.app-shot { --pw: min(300px, 78vw); padding: calc(var(--pw) * 0.03) 0 0; }
.doc figure.shot figcaption, .doc figure.app-shot figcaption {
  margin: 22px auto 0; max-width: 52ch; font-size: 14px; line-height: 1.5; color: var(--mute); text-align: center;
}
.doc figure.shot--wide img { width: 100%; border-radius: 14px; box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px rgba(0, 0, 0, 0.55); background: var(--bg-2); }
.doc figure.shot--wide { --pw: 100%; padding: 0; }
/* a marketing graphic (not an app screen) inside a post: a plain rounded card, no phone bezel. <figure class="app-shot app-shot--card"> */
.doc figure.app-shot--card { --pw: min(420px, 100%); padding: 0; }
.doc figure.app-shot--card img { border-radius: 18px; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px rgba(0, 0, 0, 0.55); }
/* a real Apple Watch (Apple's official Series 11 bezel with our own watch screen, flattened by tools/compose_watch.py):
   no phone frame, no white ground; the image already is the product. <figure class="app-shot shot--watch"> */
.doc figure.shot--watch { --pw: min(240px, 62vw); padding: 0; }
.doc figure.shot--watch img { border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 60px color-mix(in srgb, var(--c) 22%, transparent)); }
.doc img { max-width: 100%; height: auto; }
.doc > img { display: block; margin: 28px auto; border-radius: 14px; }
/* the article's hero image, when a page carries one: <figure class="shot shot--hero"> */
.doc figure.shot--hero { margin-top: 0; }

/* ---------- 8. Tables: scroll sideways in their own box on phones, the page never does ----------
   Existing: <div class="logwrap"><table class="logtable">…</table></div>
   Bare tables are wrapped by convert.py in <div class="tablewrap">. */
.doc .logwrap, .doc .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); overscroll-behavior-x: contain; }
.doc .logwrap table, .doc .tablewrap table { margin: 0; min-width: 520px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; margin: 24px 0; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.doc thead th { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.doc tbody th { color: var(--ink); font-weight: 600; }
.doc tbody tr:last-child td, .doc tbody tr:last-child th { border-bottom: 0; }
.doc td.num, .doc .logtable td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.doc .logtable td, .doc .logtable th { font-variant-numeric: tabular-nums; }
.doc caption { caption-side: top; text-align: left; padding: 0 0 10px; font-size: 14px; color: var(--mute); }

/* ---------- 9. Callouts, FAQ, references, table of contents ---------- */
.doc .callout {
  position: relative; margin: 28px 0; padding: 18px 20px 18px 24px;
  background: color-mix(in srgb, var(--bg-2) 92%, var(--c)); border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 14px;
  font-size: 16px; line-height: 1.6; color: var(--body);
}
.doc .callout > :first-child { margin-top: 0; }
.doc .callout > :last-child { margin-bottom: 0; }
.doc .callout strong { color: var(--ink); }
.doc .callout.safety, .doc .callout--warn { border-left-color: var(--c-watch); background: color-mix(in srgb, var(--bg-2) 92%, var(--c-watch)); }
.doc .callout.safety strong, .doc .callout--warn strong { color: #FF8A8A; }
.doc .callout--note { border-left-color: var(--mute); background: var(--bg-2); }

/* FAQ, two shapes: <div class="faq"><details><summary>…  or  <h2 id="faq">…</h2> followed by h3 + p pairs */
.doc .faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); margin: 10px 0; padding: 0 18px; }
.doc .faq details[open] { border-color: var(--line-2); }
.doc .faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; font-weight: 600; font-size: 17px; color: var(--ink);
}
.doc .faq summary::-webkit-details-marker { display: none; }
.doc .faq summary::after { content: "+"; flex: none; color: var(--c); font-size: 24px; font-weight: 400; line-height: 1; }
.doc .faq details[open] summary::after { content: "\2013"; }
.doc .faq details > :not(summary) { color: var(--body); }
.doc .faq details p, .doc .faq details ul { margin: 0 0 16px; }
.doc #faq ~ h3, .doc .faq-q { padding-left: 18px; border-left: 3px solid var(--c); }

/* references */
.doc .ref-list, .doc ol.ref-list, .doc ol.refs { margin: 18px 0 0; padding-left: 28px; font-size: 14.5px; line-height: 1.6; color: var(--mute); }
.doc .ref-list li, .doc ol.ref-list li, .doc ol.refs li { margin: 0 0 12px; padding-left: 4px; scroll-margin-top: 84px; }
.doc .ref-list li::marker, .doc ol.refs li::marker { color: var(--c); font-variant-numeric: tabular-nums; font-weight: 600; }
.doc .ref-list li:target, .doc ol.refs li:target { background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 8px; padding: 6px 8px; margin-left: -8px; }
.doc .ref-list a { color: var(--link); word-break: break-word; }
.doc .ref-list .ref-src { color: var(--dim); }
.doc sup.cite { font-size: 11px; line-height: 0; vertical-align: super; }
.doc sup.cite a, .doc sup a { color: var(--c); text-decoration: none; padding: 0 1px; font-weight: 600; }
.doc sup.cite a:hover, .doc sup a:hover { text-decoration: underline; }
.doc .fr-fine, .doc .fine { font-size: 13.5px; line-height: 1.55; color: var(--dim); }
.doc p.fr-fine { border-top: 1px solid var(--line); padding-top: 20px; }

/* table of contents */
.doc .guide-toc, .doc .toc {
  margin: 28px 0 36px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2);
}
.doc .guide-toc h2, .doc .toc h2 {
  margin: 0 0 12px; padding: 0; border: 0; font-size: 14px; letter-spacing: 0.16em; color: var(--mute);
}
.doc .guide-toc h2::before, .doc .toc h2::before { display: none; }
.doc .guide-toc ol, .doc .toc ol { margin: 0; padding-left: 1.6em; columns: 1; }
.doc .guide-toc li, .doc .toc li { margin: 6px 0; font-size: 15px; color: var(--mute); break-inside: avoid; }
.doc .guide-toc li::marker, .doc .toc li::marker { color: var(--c); font-variant-numeric: tabular-nums; }
.doc .guide-toc a, .doc .toc a { color: var(--ink); text-decoration: none; }
.doc .guide-toc a:hover, .doc .toc a:hover { color: var(--c); }
@media (min-width: 720px) { .doc .guide-toc ol, .doc .toc ol { columns: 2; column-gap: 32px; } }
.doc .guide-section { scroll-margin-top: 84px; }
.doc .guide-top { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--dim); text-decoration: none; }
.doc .guide-top:hover { color: var(--ink); }

/* ---------- 10. Breadcrumbs, prev/next, related cards, listing cards ---------- */
.crumbs { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.crumbs a { color: var(--c); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--dim); }
.crumbs [aria-current="page"] { color: var(--mute); }

.pager { display: grid; grid-template-columns: 1fr; gap: 12px; margin: clamp(40px, 6vw, 64px) 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.pager a { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); text-decoration: none; color: var(--ink); }
.pager a:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.pager small { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); margin-bottom: 6px; }
.pager b { font-weight: 600; font-size: 16px; line-height: 1.35; }
.pager__next { text-align: right; }
@media (min-width: 640px) { .pager { grid-template-columns: 1fr 1fr; } }

/* related-articles cards and the listing cards the hubs already use (.post-list/.post-card, .stat-index/.stat-card) */
.related { margin: clamp(40px, 6vw, 64px) 0 0; }
.related__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin: 0 0 16px; }
.related__grid, .doc .post-list, .doc .stat-index { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.doc .post-list li, .doc .stat-index li { margin: 0; }
.rcard, .doc .post-card, .doc .stat-card, .doc .card {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 20px 20px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-top: 3px solid var(--c);
  color: var(--body); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}
.rcard:hover, .doc .post-card:hover, .doc .stat-card:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); text-decoration: none; }
.rcard b, .rcard h3, .doc .post-card h2, .doc .post-card h3, .doc .stat-card .stat-head {
  display: block; margin: 0; padding: 0; border: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink);
}
.doc .post-card h2::before, .doc .post-card h3::before { display: none; }
.rcard p, .doc .post-card p, .doc .stat-card p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--mute); }
.rcard small, .doc .post-card .post-date, .doc .lib-date { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.rcard .more, .doc .post-card .post-more, .doc .stat-card .stat-more { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 14px; color: var(--c); }
.doc .post-card .post-thumb { display: block; width: 100%; height: 150px; object-fit: cover; object-position: top center; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); margin: 0 0 10px; }
.doc .stat-card .stat-head { display: flex; align-items: center; gap: 10px; }
.doc .stat-card .stat-ico { width: 22px; height: 22px; flex: none; color: var(--c); }
.doc .stat-group-head { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3vw, 36px); text-transform: uppercase; line-height: 1; color: var(--ink); margin: clamp(40px, 5vw, 56px) 0 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.doc .stat-group-sub { margin: 0 0 16px; color: var(--mute); }
/* hub pages: the H2 group titles between card lists lose the section rule and sit closer */
.page--hub .doc > h2 { margin-bottom: 14px; }
@media (min-width: 640px) { .related__grid, .doc .post-list, .doc .stat-index { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (min-width: 1024px) { .related__grid--3, .doc .stat-index { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 11. Chips, search, forms ---------- */
.chips, .doc .fr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .doc .fr-chip, .doc .rel-tag--chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 7px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--mute);
  font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.chip:hover, .doc .fr-chip:hover { color: var(--ink); border-color: var(--c); }
.chip.is-on, .chip[aria-checked="true"], .chip[aria-pressed="true"], .doc .fr-chip.is-on, .doc .fr-chip[aria-checked="true"] {
  background: var(--c); border-color: var(--c); color: var(--bg);
}
.chip__count { font-size: 12px; color: inherit; opacity: 0.7; }

.search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); }
.search:focus-within { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font: inherit; font-size: 16px; }
.search input::placeholder { color: var(--dim); }
.search svg { flex: none; color: var(--mute); }

.field { margin: 0 0 18px; }
.label, .doc .fr-label { display: block; margin: 18px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.label:first-child, .doc .fr-label:first-child { margin-top: 0; }
.label .opt, .doc .fr-opt { font-family: var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--dim); }
.input, .doc .fr-input, .doc input[type="text"], .doc input[type="email"], .doc input[type="search"], .doc select, .doc textarea {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; -webkit-appearance: none; appearance: none;
}
.input::placeholder, .doc .fr-input::placeholder, .doc textarea::placeholder { color: var(--dim); }
.input:focus, .doc .fr-input:focus, .doc select:focus, .doc textarea:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
textarea.input, .doc .fr-textarea, .doc textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
select.input, .doc select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A3ABBB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--mute); cursor: pointer; }
.check input { margin: 3px 0 0; flex: none; accent-color: var(--c); width: 16px; height: 16px; }
.hint { margin: 8px 0 0; font-size: 13.5px; color: var(--dim); }
.doc .fr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile, .doc .fr-turnstile { margin: 16px 0 0; min-height: 0; }
.turnstile:empty, .doc .fr-turnstile:empty { margin: 0; }
.doc .fr-submit, .form__submit { margin-top: 20px; width: 100%; }
@media (min-width: 640px) { .doc .fr-submit, .form__submit { width: auto; min-width: 220px; } }
.status, .doc .fr-status { margin: 12px 0 0; min-height: 1em; font-size: 14px; color: #FF8A8A; }
.status.is-ok, .doc .fr-status.is-ok { color: var(--c-session); }
.doc .fr-form { margin: 8px 0 0; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); }
.doc .fr-done { text-align: center; padding: 32px 0 8px; }
.doc .fr-done-ic { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: var(--bg); background: var(--c); }
.doc .fr-done h2 { border: 0; padding: 0; margin: 0 0 8px; }
.doc .fr-done h2::before { display: none; }
/* status tags on the roadmap board */
.doc .fr-tag { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 9px 2px; border-radius: 999px; white-space: nowrap; }
.doc .fr-tag.review { background: rgba(255, 255, 255, 0.06); color: var(--mute); border: 1px solid var(--line); }
.doc .fr-tag.planned { background: color-mix(in srgb, var(--c-fuel) 18%, transparent); color: var(--c-fuel); }
.doc .fr-tag.shipped { background: color-mix(in srgb, var(--c-session) 18%, transparent); color: var(--c-session); }
/* roadmap board */
.doc .rm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.doc .rm-head h1 { margin-bottom: 8px; }
.doc .rm-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 16px; padding-bottom: 12px; }
.doc .rm-tab { background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer; color: var(--mute); font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px 7px; }
.doc .rm-tab:hover { color: var(--ink); }
.doc .rm-tab.is-on { color: var(--bg); background: var(--c); border-color: var(--c); }
.doc .rm-list { display: flex; flex-direction: column; gap: 10px; }
.doc .rm-empty { color: var(--mute); padding: 24px 0; }
.doc .rm-row { display: flex; gap: 14px; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.doc .rm-vote { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--line); background: var(--bg-3); border-radius: 10px; padding: 6px 4px; min-width: 52px; }
.doc .rm-up, .doc .rm-down { background: none; border: 0; cursor: pointer; color: var(--dim); font-size: 13px; line-height: 1; padding: 4px 8px; }
.doc .rm-up:hover, .doc .rm-up.on { color: var(--c-session); }
.doc .rm-down:hover, .doc .rm-down.on { color: var(--c-watch); }
.doc .rm-score { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ink); }
.doc .rm-body { flex: 1; min-width: 0; }
.doc .rm-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc .rm-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.doc .rm-summary { margin: 4px 0 0; color: var(--mute); font-size: 14.5px; }

/* ---------- 12. Legal documents ---------- */
.page--legal .doc h2 { font-size: clamp(24px, 2.6vw, 32px); margin-top: clamp(36px, 5vw, 52px); }
.page--legal .doc h2::before { width: 32px; }
.page--legal .doc h3 { font-size: 18px; }
.page--legal .doc p, .page--legal .doc li { font-size: 16.5px; }
.page--legal .doc table { font-size: 14.5px; }
.page--legal .doc td { min-width: 12ch; }
.placeholder { background: rgba(247, 18, 22, 0.12); border: 1px dashed rgba(247, 18, 22, 0.5); border-radius: 5px; padding: 1px 6px; color: #FFB4B6; font-size: 0.92em; }

/* ---------- 13. Changelog timeline (whats-new) ----------
   Existing markup: .rel-summary, then .rel > h2 (+ .rel-tag) > .rel-group (h3 + .rel-count, ul) … */
.doc .rel-summary {
  margin: 0 0 32px; padding: 16px 20px; border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 14px; background: var(--bg-2);
  font-size: 15px; color: var(--mute);
}
.doc .rel-summary strong { color: var(--ink); }
.doc .rel { position: relative; margin: 0; padding: 0 0 36px 32px; border: 0; }
.doc .rel::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: -12px; width: 2px; background: var(--line); }
.doc .rel:last-of-type::before { bottom: 12px; }
.doc .rel::after { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.doc .rel:first-of-type::after { background: var(--c); }
.doc .rel h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 14px; padding: 0; border: 0; font-size: clamp(26px, 2.6vw, 32px); }
.doc .rel h2::before { display: none; }
.doc .rel-tag { font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--mute); }
.doc .rel-group { margin: 0 0 14px; padding: 14px 16px 6px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
.doc .rel-group:last-child { margin-bottom: 0; }
.doc .rel-group-fixes { border-color: var(--line); }
.doc .rel-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0; border: 0; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
.doc .rel-group-fixes h3 { color: var(--mute); }
.doc .rel-count { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mute); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.doc .rel ul { margin: 0; padding-left: 20px; }
.doc .rel li { margin: 8px 0; font-size: 15.5px; }
.doc .rel li::marker { color: var(--dim); }
.doc .rel li strong { color: var(--ink); }
/* a generic timeline for new pages: <ol class="timeline"><li><time>…</time><b>…</b><p>…</p></li>… */
.timeline { list-style: none; margin: 24px 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 28px 32px; }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: -8px; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--c); }
.timeline time { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.timeline b { display: block; color: var(--ink); font-weight: 600; font-size: 17px; }
.timeline p { margin: 4px 0 0; color: var(--body); font-size: 15.5px; }

/* ---------- 14. Legacy landing markup (join, publicbeta) and the library ---------- */
.page--landing .hero { position: relative; padding: clamp(24px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); text-align: center; }
.page--landing .hero h1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(44px, 6vw, 84px); line-height: 0.94; margin: 18px 0 0; text-wrap: balance; }
.page--landing .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 6px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.page--landing .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.page--landing .tagline { font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; margin: 22px auto 6px; max-width: 22ch; color: var(--ink); }
.page--landing .sub { color: var(--mute); max-width: 56ch; margin: 14px auto 30px; font-size: 17px; }
.page--landing .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.page--landing .cta-note { font-size: 14px; color: var(--dim); margin-top: 18px; }
.page--landing .section { padding: clamp(40px, 6vw, 72px) 0; }
.page--landing .section h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 4vw, 56px); line-height: 0.96; margin: 0 0 10px; }
.page--landing .section .lead { color: var(--mute); font-size: 18px; max-width: 60ch; margin: 0 0 32px; }
.page--landing .section.center { text-align: center; }
.page--landing .section.center .lead { margin-left: auto; margin-right: auto; }
.page--landing .features { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .page--landing .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .page--landing .features { grid-template-columns: repeat(3, 1fr); } }
.page--landing .card { display: block; padding: 22px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.page--landing .card .ic { display: none; }
.page--landing .card h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--ink); }
.page--landing .card p { margin: 0; color: var(--mute); font-size: 15px; }
.page--landing .cta-band { margin: 0 auto; max-width: var(--maxw); border: 1px solid var(--line); border-radius: 28px; padding: clamp(36px, 5vw, 56px) 24px; text-align: center; background: var(--bg-2); }
.page--landing .cta-band h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 4vw, 56px); line-height: 0.96; margin: 0 0 10px; }
.page--landing .cta-band p { color: var(--mute); margin: 0 auto 26px; max-width: 52ch; }
.page--library .lib-wrap { padding-top: 0; }

/* ---------- 15. Motion, print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .nav, .footer, .skip, .nav__panel { display: none !important; }
  body, html { background: #fff; color: #000; }
  .doc, .doc p, .doc li, .doc td { color: #000; }
  .doc a { color: #000; }
}

/* ==== company ==== */
/* Company pages (support, privacy, terms, promise, our-story, join, publicbeta). Reusable components; tokens only.
   .article__head + h2       no double rule when the body opens with an H2 (our story; also fixes blog-icloud-sync)
   .tablewrap / .logwrap     a scroll cue on every scrolling table: an edge glow on the side that has more to scroll (phones)
   .linkrow                  the closing line of "see also" links at the foot of a page: <p class="linkrow">
   .callout--lead            a callout that opens a page (support's contact line): larger, links in the accent
   .split                    a section whose H2 sits in a sticky left column beside its content from 900 px (support's FAQ)
   .cardpair > .infocard     two short H2 + text blocks side by side from 720 px (support: help / ideas)
   .principles > .principle  numbered rows, the number drawn by CSS and hung in the margin from 1024 px (promise)
   .closing                  a closing statement in the display face (promise, our story)
   .signoff                  an author's sign-off line (our story)
   .namesplit                the wordmark split into the words it blends: <span class="namesplit__part" data-part="Str"
                             data-word="Strength"></span> … (our story; decorative, aria-hidden, letters drawn from the data
                             attributes so no text is added; one gradient runs across the three parts)
   .getapp …                 the "Get Strathlon" block: copy, CTA, QR (720 px and up), two phones, the four facts (join, publicbeta) */

/* an H2 that opens the body straight after the article head drops its own top rule (the head already draws one) */
.doc .article__head + h2 { margin-top: 0; padding-top: 0; border-top: 0; }

/* scrolling tables (privacy, guides, stats): a scroll cue. On a phone a wide table scrolls sideways inside its box; a soft
   edge glow shows on whichever side has more to see and disappears at the end (background-attachment: local covers). */
.doc .tablewrap, .doc .logwrap {
  background:
    linear-gradient(to right, var(--bg-2) 40%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--bg-2) 40%, transparent) right center / 32px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--c) 20%, transparent), transparent) left center / 20px 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--c) 20%, transparent), transparent) right center / 20px 100% no-repeat scroll,
    var(--bg-2);
}

.doc .linkrow {
  margin: clamp(44px, 6vw, 64px) 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.8; color: var(--dim);
}
.doc .linkrow a { color: var(--mute); text-decoration: none; font-weight: 500; }
.doc .linkrow a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--c); }

.doc .callout--lead { padding: 22px 24px 22px 26px; font-size: 17.5px; border-radius: 18px; }
.doc .callout--lead a { color: var(--c); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--c) 50%, transparent); }
.doc .callout--lead a:hover { color: var(--ink); }

@media (min-width: 900px) {
  .doc .split {
    display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 2fr); column-gap: 44px; align-items: start;
    margin-top: clamp(44px, 6vw, 64px); padding-top: 24px; border-top: 1px solid var(--line);
  }
  .doc .split > h2 { position: sticky; top: 88px; margin: 0; padding: 0; border: 0; }
  .doc .split > .faq > details:first-child { margin-top: 0; }
}

.doc .cardpair { display: grid; grid-template-columns: 1fr; gap: 14px; margin: clamp(44px, 6vw, 64px) 0 0; }
@media (min-width: 720px) { .doc .cardpair { grid-template-columns: 1fr 1fr; } }
.doc .infocard {
  padding: 22px 22px 6px; border-radius: 18px;
  background: var(--bg-2); border: 1px solid var(--line); border-top: 3px solid var(--c);
}
.doc .infocard h2 { margin: 0 0 12px; padding: 0; border: 0; font-size: clamp(26px, 2.4vw, 32px); }
.doc .infocard h2::before { display: none; }
.doc .infocard p { font-size: 16px; }

.doc .principles { counter-reset: principle; }
.doc .principle { counter-increment: principle; position: relative; padding: clamp(26px, 4vw, 36px) 0 clamp(6px, 1.5vw, 12px); border-top: 1px solid var(--line); }
.doc .principle::before {
  content: counter(principle, decimal-leading-zero); display: block; margin: 0 0 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 0.9; letter-spacing: 0.01em; color: var(--c);
}
.doc .principle:first-child { border-top: 0; padding-top: 0; }
.doc .principle h2 { margin: 0 0 14px; padding: 0; border: 0; }
.doc .principle h2::before { display: none; }
@media (min-width: 720px) {
  .doc .principle { padding-left: 96px; }
  .doc .principle::before { position: absolute; left: 0; top: clamp(26px, 4vw, 36px); margin: 0; font-size: 56px; }
  .doc .principle:first-child::before { top: 0; }
}
@media (min-width: 1024px) {
  .doc .principles { margin-left: -112px; }
  .doc .principle { padding-left: 112px; }
  .doc .principle::before { font-size: 64px; }
}

.doc .closing {
  margin: clamp(48px, 7vw, 72px) 0 0; padding: 0;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.02; color: var(--ink); text-wrap: balance;
}
.doc .closing::before { content: ""; display: block; width: 44px; height: 3px; margin: 0 0 18px; border-radius: 2px; background: var(--brand-grad); }

.doc .signoff {
  display: flex; align-items: center; gap: 14px; margin: 26px 0 0;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute);
}
.doc .signoff::before { content: ""; flex: none; width: 32px; height: 2px; border-radius: 2px; background: var(--c); }

.doc .namesplit { display: flex; flex-wrap: wrap; margin: 20px 0 28px; }
.doc .namesplit__part { display: flex; flex-direction: column; padding: 0 clamp(14px, 3vw, 28px); border-left: 1px solid var(--line-2); }
.doc .namesplit__part:first-child { padding-left: 0; border-left: 0; }
.doc .namesplit__part::before {   /* the letters: data-part */
  content: attr(data-part);
  font-family: var(--font-body); font-weight: 900; font-size: clamp(46px, 7vw, 76px); line-height: 1.02; letter-spacing: -0.02em;
  background: var(--brand-grad); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.doc .namesplit__part:nth-child(2)::before { background-position: 50% 0; }
.doc .namesplit__part:nth-child(3)::before { background-position: 100% 0; }
.doc .namesplit__part::after {   /* the word: data-word */
  content: attr(data-word);
  margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute);
}

.getapp { position: relative; padding: clamp(0px, 1vw, 16px) 0 0; overflow-x: clip; }   /* the phone glows stop at the viewport edge */
.getapp__grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 4vw, 40px); align-items: center; }
.getapp__copy { text-align: center; }
.getapp__copy .lede { margin-left: auto; margin-right: auto; max-width: 44ch; }
.getapp__copy .cta-row { justify-content: center; }
.getapp__qr { display: none; align-items: center; gap: 16px; margin-top: 30px; color: var(--mute); text-decoration: none; font-size: 14px; line-height: 1.35; }
.getapp__qr img { display: block; flex: none; width: 116px; height: 116px; padding: 9px; background: #fff; border-radius: 14px; image-rendering: pixelated; }
.getapp__qr span { max-width: 13ch; }
.getapp__qr:hover span { color: var(--ink); }
.getapp__qr:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 16px; }
@media (min-width: 720px) { .getapp__qr { display: inline-flex; } }

.getapp__stage { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 2% 0 0; }
.getapp__phone { position: relative; flex: none; width: var(--pw); margin: 0; }
.getapp__phone::before {
  content: ""; position: absolute; z-index: 0; inset: -16% -44% 8%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow, #fff) 85%, transparent), color-mix(in srgb, var(--glow, #fff) 30%, transparent) 55%, transparent 100%);
  filter: blur(38px);
}
.getapp__screen {
  position: relative; z-index: 1; display: block;
  border-radius: calc(var(--pw) * 0.16); padding: calc(var(--pw) * 0.026);
  background: linear-gradient(160deg, #2C2F38 0%, #14161C 55%, #0B0C10 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(0, 0, 0, 0.8), 0 30px 70px rgba(0, 0, 0, 0.65);
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 96%);
}
.getapp__screen img { display: block; width: 100%; height: auto; border-radius: calc(var(--pw) * 0.135); background: #fff; }
.getapp__phone--front { --pw: clamp(196px, 52vw, 272px); z-index: 2; }
.getapp__phone--back { --pw: clamp(160px, 42vw, 224px); z-index: 1; margin: 12% calc(var(--pw) * -0.26) 0 0; transform: rotate(-6deg); }
.getapp__phone--back::before { opacity: 0.8; }
@media (prefers-reduced-motion: no-preference) {
  .getapp__phone::before { animation: getapp-breathe 7s ease-in-out infinite alternate; }
}
@keyframes getapp-breathe { from { opacity: 0.7; transform: scale(0.98); } to { opacity: 1; transform: scale(1.04); } }

.getapp__facts { list-style: none; margin: clamp(8px, 2vw, 16px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.getapp__facts li { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); }
.getapp__facts li:nth-child(odd) { border-right: 1px solid var(--line); }
.getapp__facts li:nth-child(even) { padding-left: 16px; }
.getapp__facts strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.3vw, 32px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--c); }
.getapp__facts span { font-size: 14px; line-height: 1.4; color: var(--mute); }
@media (min-width: 1024px) {
  .getapp__grid { grid-template-columns: 1.1fr 1fr; gap: 24px; }
  .getapp__copy { text-align: left; }
  .getapp__copy .lede { margin-left: 0; }
  .getapp__copy .cta-row { justify-content: flex-start; }
  .getapp__facts { grid-template-columns: repeat(4, 1fr); }
  .getapp__facts li, .getapp__facts li:nth-child(even) { padding: 20px 20px 20px 20px; border-bottom: 0; border-right: 1px solid var(--line); }
  .getapp__facts li:first-child { padding-left: 0; }
  .getapp__facts li:last-child { border-right: 0; }
}
/* ==== /company ==== */

/* ==== product ==== */
/* Product pages: whats-new (release timeline), roadmap (voting board), feature-request (form).
   Appended as reusable components; nothing above is rewritten. Where a rule refines one above, the comment says so.
     P1  .doc a.btn…      buttons inside the reading column keep their own colours (the .doc link colour was beating them)
     P2  .doc--split      intro left (sticky), content right from 960 px; stacks below. Opt-in on form pages.
     P3  .jumpnav         a labelled row of chips that jump within the page
     P4  .page--log       whats-new timeline: sticky build label left, notes right, one dot per build on the rail
     P5  .rm-*            roadmap board: header, segmented filter, vote rows, loading/empty states
     P6  .fr-*            feature-request form card and its thank-you state                                         */

/* ---------- P1. Buttons inside .doc ---------- */
.doc a.btn--primary, .doc a.btn-primary, .doc a.btn--primary:hover, .doc a.btn-primary:hover { color: #0B0D14; text-decoration: none; }
.doc a.btn--ghost, .doc a.btn-ghost, .doc a.btn--ghost:hover, .doc a.btn-ghost:hover { color: var(--ink); text-decoration: none; }

/* ---------- P2. Split layout: <article class="doc doc--split"> > .article__head + content ---------- */
@media (min-width: 960px) {
  .page .doc--split {
    max-width: 1080px;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 5vw, 80px); align-items: start;
  }
  .doc--split > * { grid-column: 2; }
  .doc--split > .article__head {
    grid-column: 1; grid-row: 1 / span 12; align-self: start;
    position: sticky; top: 104px;
    margin: 0; padding: 0; border: 0;
  }
  .doc--split > .article__head h1 { font-size: clamp(52px, 5vw, 72px); }
}

/* ---------- P3. Jump row: <nav class="jumpnav" aria-label="…"><span class="jumpnav__label">…</span><a class="chip" href="#…">…</a>… ---------- */
.jumpnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 clamp(36px, 5vw, 56px); }
.jumpnav__label { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-right: 6px; }
.doc .jumpnav a.chip { color: var(--mute); text-decoration: none; overflow-wrap: normal; }
.doc .jumpnav a.chip:hover { color: var(--ink); border-color: var(--c); }

/* ---------- P4. Release timeline (whats-new) ----------
   Markup is the page's own and is appended to by hand every build: .rel > h2 ("Version 1.0.0 <span.rel-tag>build N · Month
   YYYY</span>") + .rel-group (h3 + .rel-count, ul) … + optional p.rel-note. One .rel can hold several builds (245-240), so the
   dot lives on each h2, not on the .rel (refines section 13). Groups headed "New features"/"New" get .rel-group--new from
   the page script; without it every group label reads in the muted colour. */
.page--log .doc { max-width: 980px; }
.page--log .article__head > p { max-width: 62ch; }
.page--log .doc .rel-summary { margin-bottom: 22px; font-size: 16px; }
.page--log .doc .rel { position: relative; margin: 0; padding: 0 0 clamp(44px, 5vw, 60px) 34px; border: 0; }
.page--log .doc .rel::after { display: none; }
.page--log .doc .rel::before { left: 7px; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.page--log .doc > :not(.rel) + .rel::before { top: 12px; }
.page--log .doc .rel:last-of-type::before { background: linear-gradient(var(--line-2), transparent); }

.page--log .doc .rel > h2 {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  margin: 0 0 18px; padding: 0; border: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
.page--log .doc .rel > h2::before {
  content: ""; display: block; position: absolute; left: -34px; top: -1px; margin: 0;
  width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
  background: var(--bg); border: 3px solid var(--c);
  box-shadow: 0 0 0 4px var(--bg), 0 0 16px color-mix(in srgb, var(--c) 55%, transparent);
}
.page--log .doc > :not(.rel) + .rel > h2:first-child::before { background: var(--c); }
.page--log .doc .rel > h2 .rel-tag {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.4vw, 28px); line-height: 1.02; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--ink); text-wrap: balance;
}
.page--log .doc .rel > h2 ~ h2 { margin-top: clamp(40px, 5vw, 56px); }

.page--log .doc .rel-group { margin: 0 0 20px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.page--log .doc .rel > :last-child { margin-bottom: 0; }
.page--log .doc .rel-group h3 { margin: 0 0 10px; font-size: 14px; letter-spacing: 0.16em; color: var(--mute); }
.page--log .doc .rel-group--new h3 { color: var(--c); }
.page--log .doc .rel ul { margin: 0; padding-left: 18px; }
.page--log .doc .rel li { margin: 0 0 11px; padding-left: 3px; font-size: 16px; line-height: 1.6; }
.page--log .doc .rel li:last-child { margin-bottom: 0; }
.page--log .doc .rel-group--new li::marker { color: var(--c); }
.page--log .doc .rel > ul { padding-top: 16px; border-top: 1px solid var(--line); margin-bottom: 20px; }
.page--log .doc .rel-note { margin: 4px 0 0; padding: 11px 14px; font-size: 14.5px; line-height: 1.5; color: var(--mute); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 12px; }

@media (min-width: 960px) {
  .page--log .doc .rel { display: grid; grid-template-columns: 196px minmax(0, 1fr); column-gap: 44px; row-gap: 0; padding-left: 40px; }   /* 196: "SEPTEMBER 2026" holds one line */
  .page--log .doc .rel > * { grid-column: 2; }
  .page--log .doc .rel > h2 { grid-column: 1; grid-row: span 40; align-self: start; position: sticky; top: 92px; margin: 0; padding-top: 17px; }
  /* A box holding several builds (245-240) scrolls its labels: sticky is bounded by the whole .rel, so they would pile up. */
  .page--log .doc .rel > h2:not(:only-of-type) { position: relative; top: auto; }
  .page--log .doc .rel > h2::before { left: -40px; top: 16px; }
  .page--log .doc .rel > h2 ~ h2, .page--log .doc .rel > h2 ~ h2 + * { margin-top: 48px; }
  .page--log .doc > :not(.rel) + .rel::before { top: 28px; }
}

/* ---------- P5. Roadmap board ---------- */
.page--form .doc .rm-head { align-items: flex-end; margin: 0 0 clamp(24px, 3vw, 32px); padding-bottom: clamp(20px, 3vw, 30px); border-bottom: 1px solid var(--line); }
.page--form .doc .rm-head h1 { margin: 0 0 14px; }
.page--form .doc .rm-head .updated { font-size: clamp(17.5px, 1.35vw, 19.5px); color: var(--mute); }
.page--form .doc .rm-head .btn { flex: none; }

.doc .rm-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 20px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); }
.doc .rm-tab { padding: 9px 18px 8px; font-size: 14px; border: 0; transition: color 150ms ease, background-color 150ms ease; }
.doc .rm-tab.is-on { color: var(--bg); background: var(--c); }
@media (max-width: 519px) {
  /* R-consolidate-roadmap-tabs (2026-09-29): 2 tabs now (New/Shipped), was 4 (Top/New/Planned/Shipped). */
  .doc .rm-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .doc .rm-tab { padding: 9px 4px 8px; letter-spacing: 0.08em; }
}

.doc .rm-list { gap: 12px; }
.doc .rm-row {
  align-items: flex-start; gap: 18px; padding: 18px 22px 18px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.doc .rm-row:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.05); }
.doc .rm-vote { flex: none; width: 56px; min-width: 0; gap: 0; padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-2); }
.doc .rm-up, .doc .rm-down { width: 100%; padding: 7px 0; border-radius: 8px; font-size: 12px; color: var(--mute); transition: color 150ms ease, background-color 150ms ease; }
.doc .rm-up:hover, .doc .rm-up.on { color: var(--c-session); background: color-mix(in srgb, var(--c-session) 14%, transparent); }
.doc .rm-down:hover, .doc .rm-down.on { color: var(--c-watch); background: color-mix(in srgb, var(--c-watch) 14%, transparent); }
.doc .rm-up:disabled, .doc .rm-down:disabled { opacity: 0.5; cursor: progress; }
.doc .rm-score { display: block; padding: 3px 0 2px; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.doc .rm-body { padding-top: 2px; }
.doc .rm-title-row { gap: 6px 10px; }
.doc .rm-title { font-size: 17px; line-height: 1.35; }
.doc .rm-summary { margin: 6px 0 0; font-size: 15px; line-height: 1.55; max-width: 70ch; }
.doc .rm-empty { margin: 0; padding: 32px 20px; text-align: center; color: var(--mute); border: 1px dashed var(--line-2); border-radius: 16px; }
.doc #rm-turnstile:not([hidden]) { margin: 16px 0 0; }
@media (max-width: 519px) {
  .doc .rm-row { gap: 14px; padding: 16px 16px 16px 12px; }
  .doc .rm-vote { width: 50px; }
  .doc .rm-title { font-size: 16px; }
}

/* ---------- P6. Feature-request form ---------- */
.doc .fr-form { padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)); border-color: var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.doc .fr-form .fr-label { margin-top: 24px; }
.doc .fr-form .fr-label:first-child { margin-top: 0; }
.doc .fr-form .fr-chips { gap: 8px; }
.doc .fr-form .fr-input { background: var(--bg); }
.doc .fr-form .fr-fine { margin: 20px 0 0; }
.doc .fr-form .cf-turnstile:not(:empty) { margin: 20px 0 0; }   /* the page script swaps .fr-turnstile for .cf-turnstile */
.doc .fr-done { padding: 40px 24px 36px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--bg-2); }
.doc .fr-done p { color: var(--body); max-width: 44ch; margin: 0 auto 22px; }
/* ==== /product ==== */

/* ==== listings ==== */
/* Listing pages: guides (grouped guide cards), blog (post cards with screenshots), library (filterable cards).
   Appended as reusable components; nothing above is rewritten. Tokens only: every colour is a homepage accent.
     L1  topic tokens       --t-* = the homepage's per-feature accents; the library's facets, dots and card tops read them
     L2  .doc--listing      the listing column: the full container width, the page head keeps a reading measure
     L3  .signposts         the "Prefer to browse… / Looking for…" pointer paragraphs as side-by-side cards
     L4  .jumpnav--sticky   refines P3 .jumpnav: sticks under the header, one sideways-scrolling row on phones, a dot per chip
     L5  .listing           a titled group of cards: <section class="listing" id="…" style="--c: var(--c-…)">
                            > h2.listing__title, p.listing__sub, h3.listing__subtitle (a sub-group), ul.post-list
         .listing-groups    small groups side by side (three across from 1024 px)
     L6  .post-list--compact   3 across from 1024 px, summaries held to three lines (full text stays in the page)
         .post-list--feature   the first card spans the row with its screenshot beside the text
         .post-media           a card's image panel: the screenshot rises out of a glow in the card's accent;
                               .post-media--mark shows the Strathlon mark while a post waits for its screenshot
     L7  .page--library     the library: hero, toolbar, facet chips, topic-coloured cards, list view, mobile filter drawer
                            (moved here from the page's own <style>; the ids and classes its script uses are unchanged) */

/* ---------- L1. Topic tokens ---------- */
:root {
  --t-training: var(--c-plan);
  --t-nutrition: var(--c-fuel);
  --t-sports: var(--c-sport);
  --t-strength: var(--c-session);
  --t-recovery: var(--c-ready);
  --t-myths: var(--c-watch);
  --t-women: var(--c-coach);
  --t-supps: var(--c-plain);
  --t-features: var(--mute);
}

/* ---------- L2. The listing column ---------- */
.page .doc.doc--listing { max-width: none; }
.doc--listing .article__head { border-bottom: 0; padding-bottom: 0; margin-bottom: clamp(24px, 3vw, 32px); }
.doc--listing .article__head h1 { font-size: clamp(46px, 6.4vw, 88px); line-height: 0.92; margin-bottom: 20px; }
.doc--listing .article__head .updated { max-width: 64ch; }

/* ---------- L3. Signposts ---------- */
.signposts { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 clamp(28px, 4vw, 40px); }
@media (min-width: 720px) { .signposts { grid-template-columns: 1fr 1fr; gap: 14px; } }
.doc .signposts p {
  margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 14px;
  background: var(--bg-2); font-size: 15px; line-height: 1.55; color: var(--mute);
}
.doc .signposts a { color: var(--ink); font-weight: 600; text-decoration-color: var(--c); }

/* ---------- L4. Sticky jump row ---------- */
.jumpnav--sticky {
  position: sticky; top: 64px; z-index: 5;
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)) clamp(8px, 2vw, 16px); padding: 12px var(--gutter);
  background: rgba(6, 7, 11, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.jumpnav--sticky::-webkit-scrollbar { display: none; }
.jumpnav--sticky .chip { flex: none; white-space: nowrap; }
.jumpnav--sticky .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
@media (min-width: 1024px) { .jumpnav--sticky { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }

/* ---------- L5. Titled groups ---------- */
.listing { margin: clamp(44px, 6vw, 72px) 0 0; }
/* a jump lands the group's title below the 64 px header AND the sticky jump row (one row below 1024 px, two above);
   .doc .listing[id] outranks the generic .doc [id] { scroll-margin-top: 84px } */
.doc .listing[id] { scroll-margin-top: 140px; }
@media (min-width: 1024px) { .doc .listing[id] { scroll-margin-top: 184px; } }
.doc .listing__title {
  margin: 0 0 18px; padding: 0; border: 0;
  font-size: clamp(34px, 4vw, 52px); line-height: 0.95;
}
.doc .listing__title::before { width: 44px; margin-bottom: 14px; }
.doc .listing__sub { margin: -4px 0 8px; max-width: 62ch; font-size: 16px; color: var(--mute); }
.doc .listing__subtitle {
  display: flex; align-items: center; gap: 14px; margin: 30px 0 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c);
}
.doc .listing__subtitle::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.listing-groups { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media (min-width: 720px) { .listing-groups { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .listing-groups { grid-template-columns: repeat(3, 1fr); gap: 0 24px; } }
.listing-groups .listing { margin-top: clamp(36px, 5vw, 56px); }
.listing-groups .listing:first-child { margin-top: clamp(20px, 3vw, 32px); }
@media (min-width: 720px) { .listing-groups .listing:nth-child(2) { margin-top: clamp(20px, 3vw, 32px); } }
@media (min-width: 1024px) { .listing-groups .listing:nth-child(3) { margin-top: clamp(20px, 3vw, 32px); } }
.doc .listing-groups .listing__title { font-size: clamp(30px, 2.8vw, 38px); }
.doc .listing-groups .post-list { grid-template-columns: 1fr; }

/* ---------- L6. Card grids and the image panel ---------- */
@media (min-width: 1024px) { .doc--listing .post-list { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.doc .post-list--compact .post-card { padding: 16px 18px 14px; }
.doc .post-list--compact .post-card h2 { font-size: 22px; line-height: 1.02; }
.doc .post-list--compact .post-card p {
  font-size: 14.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.doc .post-list--compact .post-card .post-more { padding-top: 8px; }

.doc .post-card .post-media {
  position: relative; display: block; height: 200px; margin: -20px -20px 14px; overflow: hidden;
  border-radius: 13px 13px 0 0; border-bottom: 1px solid var(--line);
  background: radial-gradient(110% 80% at 50% 105%, color-mix(in srgb, var(--c) 38%, transparent), transparent 70%), var(--bg-2);
}
.doc .post-card .post-media .post-thumb {
  position: absolute; left: 50%; top: 24px; width: 56%; max-width: 200px; height: auto; margin: 0; object-fit: fill;
  transform: translate(-50%, var(--lift, 0%)); border: 0; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 5px #14161C, 0 0 0 6px rgba(255, 255, 255, 0.12), 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 60px color-mix(in srgb, var(--c) 30%, transparent);
  transition: transform 220ms ease;
}
.doc .post-card:hover .post-media .post-thumb { transform: translate(-50%, calc(var(--lift, 0%) - 6px)); }
/* a screenshot whose story sits mid-screen lifts inside its panel: <span class="post-media" style="--lift: -20%"> (a share of the image's height) */
.doc .post-card .post-media--mark {
  background:
    url("/img/strathlon-mark-256.png") center 46% / 112px 112px no-repeat,
    radial-gradient(110% 80% at 50% 105%, color-mix(in srgb, var(--c) 38%, transparent), transparent 70%), var(--bg-2);
  background-blend-mode: screen, normal, normal;   /* the mark's black ground sinks into the panel; the S is untouched */
}
.doc .post-list--feature { gap: 14px; }
@media (min-width: 640px) {
  .doc .post-list--feature > li:first-child { grid-column: 1 / -1; }
  .doc .post-list--feature > li:first-child .post-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: min-content; align-content: center;
    column-gap: clamp(24px, 4vw, 56px); padding: 28px clamp(22px, 3vw, 40px);
  }
  .doc .post-list--feature > li:first-child .post-card > :not(.post-media) { grid-column: 1; }
  .doc .post-list--feature > li:first-child .post-media {
    grid-column: 2; grid-row: 1 / span 5; align-self: stretch; height: auto; min-height: 300px;
    margin: -28px calc(-1 * clamp(22px, 3vw, 40px)) -28px 0; border-radius: 0 13px 13px 0; border-bottom: 0; border-left: 1px solid var(--line);
  }
  .doc .post-list--feature > li:first-child .post-media .post-thumb { width: 50%; max-width: 230px; top: 30px; }
  .doc .post-list--feature > li:first-child .post-card h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 0.96; margin: 6px 0 4px; }
  .doc .post-list--feature > li:first-child .post-card p { font-size: 16.5px; max-width: 46ch; }
  .doc .post-list--feature > li:first-child .post-card .post-more { margin-top: 12px; }
}

/* ---------- L7. The library ---------- */
.page--library .lib-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .page--library .lib-wrap { padding: 0 32px; } }

/* hero: the homepage's eyebrow, display title and lede */
.lib-hero { padding: 0 0 clamp(24px, 3vw, 36px); }
.lib-eyebrow { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); margin: 0 0 16px; }
.lib-hero h1 {
  margin: 0; max-width: 14em; color: var(--ink); text-wrap: balance;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.004em;
  font-size: clamp(46px, 6.4vw, 88px); line-height: 0.92;
}
.lib-hero p { margin: 22px 0 0; max-width: 60ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--mute); }

/* toolbar (desktop): count, search, sort, grid/list */
.lib-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lib-count { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; }
.lib-count b { color: var(--ink); font-weight: 800; }
.lib-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lib-search {
  display: flex; align-items: center; gap: 10px; height: 44px; min-width: 260px; padding: 0 14px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px;
}
.lib-search:focus-within { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.lib-search svg { flex: none; color: var(--mute); }
.lib-search input { flex: 1; width: 100%; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font: inherit; font-size: 16px; }
.lib-search input:focus-visible { outline: none; }   /* the box shows the focus ring */
.lib-search input::placeholder { color: var(--dim); }
select.lib-sort {
  height: 44px; padding: 0 38px 0 14px; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A3ABBB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
select.lib-sort:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.lib-viewtoggle { display: inline-flex; height: 44px; padding: 3px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; }
.lib-viewtoggle button { display: grid; place-items: center; width: 38px; border: 0; border-radius: 9px; background: none; color: var(--mute); cursor: pointer; }
.lib-viewtoggle button:hover { color: var(--ink); }
.lib-viewtoggle button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); color: var(--ink); }

/* phone bar: search + Filters */
.lib-mbar { display: none; gap: 10px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.lib-mbar .lib-search { flex: 1; min-width: 0; }
.lib-filters-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; flex: none; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
}
.lib-filters-btn .lib-badge { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--bg); background: var(--c); border-radius: 999px; padding: 1px 7px; }

/* layout: facet rail + card grid */
.lib-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding: 24px 0 0; align-items: start; }
.lib-rail { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 16px 2px; scrollbar-width: thin; }
.lib-railhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lib-railhead h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.lib-clear { padding: 4px 0; background: none; border: 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--c); }
.lib-clear:hover { color: var(--ink); }
.lib-clear[disabled] { color: var(--dim); cursor: default; }

/* facets: each option is a chip (the checkbox stays, visually hidden; the chip's body is the .lib-box behind the text) */
.lib-facet { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); }
.lib-facet h3 { flex: 1 0 100%; margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.lib-opt {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 6px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; color: var(--mute);
}
.lib-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.lib-box {
  position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.lib-opt:hover { color: var(--ink); }
.lib-opt:hover .lib-box { border-color: rgba(255, 255, 255, 0.4); }
.lib-opt input:checked + .lib-box { background: var(--ink); border-color: var(--ink); }
.lib-opt input:checked ~ .lib-lbl, .lib-opt input:checked ~ .lib-n { color: var(--bg); }
.lib-opt input:focus-visible + .lib-box { outline: 2px solid var(--c-plan); outline-offset: 2px; }
.lib-lbl { display: inline-flex; align-items: center; gap: 7px; }
.lib-lbl .lib-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--dim); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.lib-n { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: 0.75; font-variant-numeric: tabular-nums; }

/* cards: the homepage's card, its top edge in the article's topic colour */
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lib-grid.is-list { grid-template-columns: 1fr; gap: 10px; }
.lib-card {
  --c: var(--t-features);
  display: flex; flex-direction: column; gap: 10px; min-height: 196px; padding: 18px 18px 16px;
  border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-top: 3px solid var(--c);
  color: var(--body); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}
.lib-card[hidden] { display: none !important; }   /* filter/search hide: beats .lib-card's display:flex */
.lib-card:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); }
.lib-card[data-topic="Training"] { --c: var(--t-training); }
.lib-card[data-topic="Nutrition"] { --c: var(--t-nutrition); }
.lib-card[data-topic="Sports fuelling"] { --c: var(--t-sports); }
.lib-card[data-topic="Sports training"] { --c: var(--t-strength); }
.lib-card[data-topic="Recovery"] { --c: var(--t-recovery); }
.lib-card[data-topic="Myths"] { --c: var(--t-myths); }
.lib-card[data-topic="For women"] { --c: var(--t-women); }
.lib-card[data-topic="Supplements"] { --c: var(--t-supps); }
.lib-card[data-topic="App & features"] { --c: var(--t-features); }
.lib-toprow { display: flex; align-items: center; gap: 10px; }
.lib-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); }
.lib-tag .lib-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.lib-type { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.lib-h { font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.lib-ex { font-size: 14.5px; line-height: 1.5; color: var(--mute); }
.lib-meta { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.lib-meta .lib-rd { margin-left: auto; font-weight: 600; font-size: 14px; color: var(--c); }
.lib-grid.is-list .lib-card { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 0; gap: 6px 12px; }
.lib-grid.is-list .lib-toprow { flex: 1 1 100%; order: 1; }
.lib-grid.is-list .lib-h { flex: 1 1 100%; order: 2; font-size: 23px; }
.lib-grid.is-list .lib-ex { flex: 1 1 100%; order: 3; }
.lib-grid.is-list .lib-meta { flex: 1 1 100%; order: 4; }
.lib-empty { grid-column: 1 / -1; margin: 0; padding: 56px 20px; text-align: center; font-size: 16px; color: var(--mute); border: 1px dashed var(--line-2); border-radius: 16px; }

/* phone filter drawer (a sibling of <main>): a sheet over a scrim, above the sticky header */
.lib-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.lib-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 82vh; overflow: auto; overscroll-behavior: contain;
  padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg-2); border-top: 1px solid var(--line-2); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(102%); transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lib-grab { width: 38px; height: 4px; margin: 8px auto 6px; border-radius: 3px; background: var(--line-2); }
.lib-dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 10px; }
.lib-dhead h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--ink); }
.lib-done { padding: 12px 18px; border: 0; border-radius: 999px; cursor: pointer; background: var(--ink); color: #0B0D14; font-weight: 600; font-size: 15px; }
.lib-drawer .lib-railhead { justify-content: flex-end; margin: 0; }
.lib-drawer .lib-railhead h2 { display: none; }   /* the sheet's own heading already says "Filter by" */
body.lib-drawer-open .lib-scrim { opacity: 1; pointer-events: auto; }
body.lib-drawer-open .lib-drawer { transform: translateY(0); }

@media (max-width: 1100px) {
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  .lib-toolbar, .lib-rail { display: none; }
  .lib-mbar { display: flex; }
  .lib-layout { grid-template-columns: 1fr; padding-top: 16px; }
  .lib-grid { grid-template-columns: 1fr; gap: 12px; }
  .lib-card { min-height: 0; }
}
@media (min-width: 540px) and (max-width: 760px) { .lib-grid:not(.is-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 761px) { .lib-scrim, .lib-drawer { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .lib-card:hover { transform: none; }
  .doc .post-card:hover .post-media .post-thumb { transform: translate(-50%, var(--lift, 0%)); }
}
/* ==== /listings ==== */

/* ==== guide-stats ==== */
/* The user guide (userguide.html) and the stats hub (understanding-your-stats.html). Reusable components, appended;
   nothing above is rewritten. Tokens only.
     G1  .toc--chapters     a guide contents list whose numbers match the page's own numbered H2s:
                            <nav class="guide-toc toc--chapters"><ol><li data-n="3">… a numbered chapter (the number is
                            drawn from the attribute); <li class="toc-topic">… a topic that sits between chapters
     G2  .doc--rail         <article class="doc doc--rail">: from 1120 px the page's nav.guide-toc becomes a sticky
                            left column beside the reading column; /toc.js (opt-in: data-toc-spy on the nav) marks the
                            section being read with aria-current="location"
     G3  .toc-fab           the "Contents" button /toc.js adds below 1120 px once the contents box has scrolled away
     G4  .hub-toc           a hub's grouped contents: <nav class="hub-toc"> > h2 + .hub-toc__groups >
                            .hub-toc__group[style="--c: …"] > a.hub-toc__title + ul > li > a
     G5  .stat-group        a titled group of stat cards carrying its own accent: <section class="stat-group" id="…"
                            style="--c: var(--c-…)"> > .stat-group-head + .stat-group-sub + ul.stat-index
         .stat-index__wide  a card that spans the whole row (an entry explained in full on the hub, two columns inside)
     G6  .guide-section p.updated   a dek class used mid-article reads as a small note
     G7  .page-links        the closing "Guides · User guide · …" link row */

/* ---------- G1. Chapter contents ---------- */
.doc .toc--chapters ol { list-style: none; padding-left: 0; }
.doc .toc--chapters li { position: relative; margin: 0; padding: 5px 0 5px 34px; font-size: 15px; line-height: 1.4; }
.doc .toc--chapters li[data-n]::before {
  content: attr(data-n); position: absolute; left: 0; top: 5px; width: 22px; text-align: right;
  font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.2; color: var(--c); font-variant-numeric: tabular-nums;
}
.doc .toc--chapters li[data-n] > a { font-weight: 600; }
.doc .toc--chapters .toc-topic { padding-left: 52px; font-size: 14.5px; }
.doc .toc--chapters .toc-topic::before { content: ""; position: absolute; left: 34px; top: calc(5px + 0.7em); width: 9px; height: 1px; background: var(--dim); }
.doc .toc--chapters .toc-topic > a { color: var(--mute); }
.doc .toc--chapters a:hover, .doc .toc--chapters .toc-topic > a:hover { color: var(--c); }
.doc .toc--chapters a[aria-current] { color: var(--c); }
.doc .toc--chapters li:has(> a[aria-current])::after {   /* the section being read: a bar on the left edge */
  content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--c);
}

/* ---------- G2. Contents rail ---------- */
@media (min-width: 1120px) {
  .page .doc.doc--rail {
    max-width: none; display: grid; align-items: start; justify-content: center;
    grid-template-columns: 272px minmax(0, var(--measure)); column-gap: clamp(40px, 4vw, 64px);
  }
  .doc--rail > * { grid-column: 2; min-width: 0; }
  .doc--rail > p:not(:last-child) { margin-bottom: 0; }   /* grid items keep their margins (no collapsing): the next H2 already brings the gap */
  .doc--rail > .guide-toc {
    grid-column: 1; grid-row: 1 / span 200; align-self: start;
    position: sticky; top: 88px;
    margin: 4px 0 0; padding: 18px 14px 16px 22px;
    max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  }
  .doc--rail > .guide-toc ol { columns: 1; }
  .doc--rail .toc--chapters li { padding-top: 3px; padding-bottom: 3px; font-size: 14px; }
  .doc--rail .toc--chapters li[data-n]::before { top: 3px; font-size: 16px; }
  .doc--rail .toc--chapters .toc-topic { font-size: 13.5px; }
  .doc--rail .toc--chapters .toc-topic::before { top: calc(3px + 0.7em); }
}

/* ---------- G3. Floating contents button (phones and tablets) ---------- */
a.toc-fab {
  position: fixed; z-index: 40; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 17px 11px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(16, 19, 27, 0.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  color: var(--ink); text-decoration: none;
}
a.toc-fab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
a.toc-fab:hover { border-color: var(--c); }
a.toc-fab[hidden] { display: none; }
@media (min-width: 1120px) { a.toc-fab { display: none; } }

/* ---------- G4. Hub contents ---------- */
.doc .hub-toc { margin: 0 0 8px; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.doc .hub-toc h2 { margin: 0 0 16px; padding: 0; border: 0; font-size: 14px; letter-spacing: 0.16em; color: var(--mute); }
.doc .hub-toc h2::before { display: none; }
.hub-toc__groups { display: grid; grid-template-columns: 1fr; gap: 20px 40px; }
@media (min-width: 720px) { .hub-toc__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.doc .hub-toc__title {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.doc .hub-toc__title::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); flex: none; }
.doc .hub-toc__title:hover { color: var(--c); }
.doc .hub-toc ul { list-style: none; margin: 0; padding: 0 0 0 20px; }
.doc .hub-toc li { margin: 0; padding: 4px 0; font-size: 15px; line-height: 1.35; break-inside: avoid; }
.doc .hub-toc li a { color: var(--body); text-decoration: none; }
.doc .hub-toc li a:hover { color: var(--c); text-decoration: underline; text-decoration-color: var(--c); }
@media (max-width: 719px) { .doc .hub-toc ul { columns: 2; column-gap: 16px; } }

/* ---------- G5. Stat groups ---------- */
.doc .stat-group { scroll-margin-top: 84px; }
.doc .stat-group .stat-group-head { display: flex; align-items: center; gap: 12px; }
.doc .stat-group .stat-group-head::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 70%, transparent); flex: none; }
.doc .stat-group .stat-group-sub { max-width: 62ch; }
.doc--listing .article__head .stat-lede { max-width: 64ch; }
.doc .stat-group ~ .fr-fine { max-width: 96ch; }
@media (min-width: 1024px) {
  .doc .stat-index > .stat-index__wide { grid-column: 1 / -1; }
  .doc .stat-index__wide .stat-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-content: start; }
  .doc .stat-index__wide .stat-card .stat-head { grid-column: 1 / -1; margin-bottom: 6px; }
}

/* ---------- G6. A dek class used mid-article ---------- */
/* <p class="updated"> inside a .guide-section is a short note (e.g. which tier a feature belongs to), not the page's dek */
.doc .guide-section p.updated { font-size: 15px; line-height: 1.6; color: var(--mute); max-width: var(--measure); }

/* ---------- G7. Closing link row ---------- */
/* <p class="page-links"><a>Guides</a> · <a>User guide</a> · …</p> at the end of a page: quiet, still underlined */
.doc .page-links { font-size: 15px; line-height: 1.8; color: var(--dim); }
.doc .page-links a { color: var(--mute); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.doc .page-links a:hover { color: var(--c); text-decoration-color: currentColor; }

@media print { a.toc-fab { display: none !important; } .doc--rail > .guide-toc { position: static; max-height: none; } }
/* ==== /guide-stats ==== */

/* ---------- Small print (owner 2026-09-26): conditions live in footnotes, never in a headline, lede or description ----------
   Verbatim: "do the same for anything else throughout the website small print of better rather than add in the conditions to the
   title or descriptions". A claim gets <sup class="fn"><a href="#note-x" aria-label="Note on ...">*</a></sup> and the condition goes in
   a <section class="notes"> just above the footer. Same rules as home.css (the homepage loads only home.css). */
.notes { padding: 28px 0 44px; border-top: 1px solid var(--line); }
.notes p { font-size: 13px; line-height: 1.6; color: var(--mute); max-width: 76ch; margin: 6px auto; text-align: center; }
sup.fn { font-size: 0.6em; line-height: 0; }
sup.fn a { color: inherit; text-decoration: none; }
sup.fn a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Our Story's closing is the two-sentence Strathlon definition (owner-approved 2026-09-27). Owner 2026-09-28, question box:
   "Normal text, larger size" — nine lines of display capitals on a phone were hard to read, so this one closing is set in
   sentence case at the lede size; promise.html's short closing keeps the display style. */
.doc .closing.closing--text {
  font-family: inherit; font-weight: 600; text-transform: none; letter-spacing: 0;
  font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; text-wrap: pretty;
}