/* ═══════════════════════════════════════════════════════════════════════════
   site-ios.css — the website in the Mini App's design

   WHAT THIS IS
   The public website wearing the same design as the Mini App (css/ios.css):
   the same palette and colour families, the same typeface, Liquid Glass on
   everything that floats — the navigation bar, its menus, the search drawer,
   the footer, the back-to-top button — and soft colour light behind the
   page. A visitor moving website → Mini App sees one product.

   HOW IT IS LOADED
   One sheet, linked straight after css/site.css by every page: the homepage
   (landing.html) and every page site_render assembles, journals included.
   It is a layer, not a rewrite: site.css and the homepage's own styles are
   untouched, and removing the one <link> restores the previous design.
   Every selector starts at :root, which adds (0,1,0): enough to win a tie
   against the page's own one- and two-class rules — the homepage's inline
   sheet, a journal's inline sheet — without !important.

   TOKENS FIRST
   Section 1 re-points the site's tokens (--bg, --surface, --accent …) at the
   Mini App's values, which recolours every token-driven component at once:
   the kit, the mock-ups, the charts. The later sections only touch what the
   tokens cannot reach — shape, type, materials, the chrome.

   GLASS ONLY WHERE SOMETHING PASSES UNDERNEATH
   backdrop-filter is for the surfaces content scrolls under. A card that sits
   still over the fixed colour light gets a translucent fill instead: blurring
   a smooth gradient looks the same as not blurring it, and a page of a
   hundred blurred cards is a page that stutters on a phone.

   THE OLD BAR WAS OPAQUE FOR A REASON, and the reason is handled here: a
   weak blur under a strong saturation boost let chart bars passing under it
   smear their colour across it. The glass below is mostly fill, over a blur
   sized to the bar (see --gl-blur), so what passes underneath reads as soft
   light, not as colour.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outfit — the Mini App's typeface (SIL OFL 1.1, css/fonts/Outfit-OFL.txt).
   One variable file, weights 100–900, Latin and Latin Extended. */
@font-face {
  font-family: 'Outfit';
  src: url('/css/fonts/Outfit.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS
   ─────────────────────────────────────────────────────────────────────────── */
/* THE TYPEFACE. Outfit for every word and every figure, as in the Mini App;
   labels and figures that were set in Geist Mono are set in Outfit too, with
   tabular figures (section 3), so a column of numbers still lines up. Code
   keeps a monospace face: --font-code. Russian, Persian, Arabic, Chinese,
   Korean and Hindi set their own stacks in landing_i18n._locale_css, which
   loads after this sheet. */
:root {
  --font-display: 'Outfit', 'Geist', system-ui, sans-serif;
  --font-body:    'Outfit', 'Geist', system-ui, sans-serif;
  --font-mono:    'Outfit', 'Geist', system-ui, sans-serif;
  --font-code:    'Geist Mono', ui-monospace, monospace;

  --r-sm: 12px; --r-md: 22px; --r-lg: 28px;
  --gl-r-card: 24px;
  --gl-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --gl-pop: cubic-bezier(0.34, 1.32, 0.5, 1);
  /* Two strengths, by the height of what is blurred. A blur radius large
     next to the element's own height barely blurs at all in Chromium (the
     edges are mirrored into the kernel): at 26px a 60px bar showed the text
     under it crisp. Measured: 12px on a 60px bar keeps about a sixth of the
     detail behind it; 20px on a menu or a sheet, under a tenth. */
  --gl-blur: blur(12px) saturate(150%);
  --gl-blur-strong: blur(20px) saturate(150%);
}

/* ── The two dark themes share their colour families (as in ios.css) ─────── */
:root:is([data-theme="ocean"], [data-theme="dark"]) {
  --accent: #2ec4b3;
  --accent-glow: rgba(46, 196, 179, 0.24);
  --on-brand: #04211e;
  --gl-accent-hi: #4fd6c6;
  --gl-accent-shadow: rgba(46, 196, 179, 0.45);
  --gl-accent-ink: #5fe0d0;

  --blue: #6aa5ff;
  --green: #3fd68a;
  --red: #ff6b5e;
  --gold: #ffc53d;

  --c-teal: #2ec4b3;   --ink-teal: #5fe0d0;   --line-teal: rgba(46, 196, 179, 0.26);
  --c-coral: #ff7a59;  --ink-coral: #ff9474;  --line-coral: rgba(255, 122, 89, 0.24);
  --c-amber: #ffc53d;  --ink-amber: #ffd060;  --line-amber: rgba(255, 197, 61, 0.22);
  --c-blue: #5b9bff;   --ink-blue: #8ab8ff;   --line-blue: rgba(91, 155, 255, 0.26);
  --c-pink: #ff6fa8;   --ink-pink: #ff8fbd;   --line-pink: rgba(255, 111, 168, 0.24);
  --c-green: #3fd68a;  --ink-green: #5fe3a0;  --line-green: rgba(63, 214, 138, 0.22);
  --c-purple: #a98bff; --ink-purple: #c3adff; --line-purple: rgba(169, 139, 255, 0.26);
  --tile-glyph: rgba(6, 10, 18, 0.88);
}

/* ── Black ───────────────────────────────────────────────────────────────── */
:root[data-theme="ocean"] {
  --bg: #000000; --bg-deep: #07080c;
  --surface: rgba(255, 255, 255, 0.05); --surface2: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.09); --border-soft: rgba(255, 255, 255, 0.055);
  --text: #ffffff; --text2: #b9c0cc; --muted: #8b93a1;
  --redact: rgba(154, 163, 181, 0.18);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --mesh-1: none; --mesh-2: none; --mesh-3: none;

  --gl-card: rgba(255, 255, 255, 0.045);
  --gl-card-line: rgba(255, 255, 255, 0.08);
  --gl-card-hi: rgba(255, 255, 255, 0.07);
  --gl-card-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.95);
  --gl-bar: rgba(22, 25, 33, 0.62);
  --gl-menu: rgba(20, 23, 31, 0.8);
  --gl-sheet: rgba(18, 21, 29, 0.93);
  --gl-line: rgba(255, 255, 255, 0.12);
  --gl-hi: rgba(255, 255, 255, 0.10);
  --gl-float: 0 14px 34px -14px rgba(0, 0, 0, 0.85);
  --gl-raised: rgba(255, 255, 255, 0.07);
  --gl-raised-line: rgba(255, 255, 255, 0.11);
  --gl-hover: rgba(255, 255, 255, 0.07);
  --gl-lens: rgba(46, 196, 179, 0.16);
  --gl-lens-line: rgba(46, 196, 179, 0.30);
  --gl-scrim: rgba(0, 0, 0, 0.5);

  --wash-teal: linear-gradient(140deg, rgba(20, 70, 66, 0.55) 0%, rgba(14, 40, 48, 0.40) 100%);
  --wash-coral: linear-gradient(140deg, rgba(84, 38, 28, 0.55) 0%, rgba(52, 26, 36, 0.40) 100%);
  --wash-amber: linear-gradient(140deg, rgba(78, 60, 18, 0.55) 0%, rgba(48, 38, 22, 0.40) 100%);
  --wash-blue: linear-gradient(140deg, rgba(24, 52, 112, 0.55) 0%, rgba(20, 34, 72, 0.40) 100%);
  --wash-pink: linear-gradient(140deg, rgba(84, 26, 72, 0.55) 0%, rgba(50, 22, 54, 0.40) 100%);
  --wash-green: linear-gradient(140deg, rgba(20, 74, 50, 0.55) 0%, rgba(16, 48, 42, 0.40) 100%);
  --wash-purple: linear-gradient(140deg, rgba(52, 38, 110, 0.55) 0%, rgba(36, 30, 78, 0.40) 100%);

  --gl-glow-layer:
    radial-gradient(70% 42% at 0% 0%, rgba(46, 196, 179, 0.16) 0%, rgba(46, 196, 179, 0) 70%),
    radial-gradient(60% 38% at 100% 8%, rgba(91, 155, 255, 0.14) 0%, rgba(91, 155, 255, 0) 70%),
    radial-gradient(60% 40% at 0% 78%, rgba(169, 139, 255, 0.08) 0%, rgba(169, 139, 255, 0) 70%),
    radial-gradient(70% 42% at 100% 100%, rgba(255, 122, 89, 0.09) 0%, rgba(255, 122, 89, 0) 70%);
}

/* ── Midnight ────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg: #0d1422; --bg-deep: #090f1a;
  --surface: rgba(255, 255, 255, 0.055); --surface2: rgba(255, 255, 255, 0.085);
  --border: rgba(148, 170, 210, 0.16); --border-soft: rgba(148, 170, 210, 0.09);
  --text: #f2f5fb; --text2: #b4bfd1; --muted: #8591a6;
  --redact: rgba(148, 170, 210, 0.18);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -24px rgba(0, 4, 12, 0.85);
  --mesh-1: none; --mesh-2: none; --mesh-3: none;

  --gl-card: rgba(255, 255, 255, 0.05);
  --gl-card-line: rgba(160, 182, 222, 0.12);
  --gl-card-hi: rgba(255, 255, 255, 0.07);
  --gl-card-shadow: 0 24px 48px -30px rgba(0, 4, 12, 0.9);
  --gl-bar: rgba(27, 37, 58, 0.62);
  --gl-menu: rgba(22, 31, 49, 0.82);
  --gl-sheet: rgba(22, 31, 49, 0.94);
  --gl-line: rgba(255, 255, 255, 0.12);
  --gl-hi: rgba(255, 255, 255, 0.10);
  --gl-float: 0 14px 34px -14px rgba(0, 4, 12, 0.75);
  --gl-raised: rgba(255, 255, 255, 0.07);
  --gl-raised-line: rgba(255, 255, 255, 0.12);
  --gl-hover: rgba(255, 255, 255, 0.075);
  --gl-lens: rgba(46, 196, 179, 0.16);
  --gl-lens-line: rgba(46, 196, 179, 0.30);
  --gl-scrim: rgba(2, 6, 14, 0.5);

  --wash-teal: linear-gradient(140deg, rgba(26, 88, 86, 0.55) 0%, rgba(22, 52, 70, 0.45) 100%);
  --wash-coral: linear-gradient(140deg, rgba(104, 50, 40, 0.55) 0%, rgba(62, 36, 52, 0.45) 100%);
  --wash-amber: linear-gradient(140deg, rgba(96, 76, 30, 0.55) 0%, rgba(58, 50, 40, 0.45) 100%);
  --wash-blue: linear-gradient(140deg, rgba(36, 70, 140, 0.55) 0%, rgba(28, 46, 92, 0.45) 100%);
  --wash-pink: linear-gradient(140deg, rgba(104, 40, 88, 0.55) 0%, rgba(60, 34, 70, 0.45) 100%);
  --wash-green: linear-gradient(140deg, rgba(30, 94, 66, 0.55) 0%, rgba(26, 60, 58, 0.45) 100%);
  --wash-purple: linear-gradient(140deg, rgba(68, 52, 134, 0.55) 0%, rgba(46, 40, 96, 0.45) 100%);

  --gl-glow-layer:
    radial-gradient(78% 44% at 0% 0%, rgba(46, 196, 179, 0.22) 0%, rgba(46, 196, 179, 0) 70%),
    radial-gradient(62% 40% at 100% 10%, rgba(91, 155, 255, 0.20) 0%, rgba(91, 155, 255, 0) 70%),
    radial-gradient(66% 42% at 0% 70%, rgba(255, 111, 168, 0.10) 0%, rgba(255, 111, 168, 0) 70%),
    radial-gradient(70% 44% at 100% 98%, rgba(255, 122, 89, 0.11) 0%, rgba(255, 122, 89, 0) 70%);
}

/* ── Daylight ────────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg: #f6f4ef; --bg-deep: #ebe8e1;
  --surface: rgba(255, 255, 255, 0.72); --surface2: rgba(15, 26, 43, 0.05);
  --border: rgba(15, 26, 43, 0.10); --border-soft: rgba(15, 26, 43, 0.065);
  --blue: #2563d9; --accent: #0e7c76; --accent-glow: rgba(14, 124, 118, 0.20);
  --green: #138a4f; --red: #d63a2c; --gold: #a76b00;
  --text: #0f1a2b; --text2: #424b5c; --muted: #626a7b;
  --on-brand: #ffffff;
  --redact: rgba(15, 26, 43, 0.10);
  --card-shadow: 0 1px 2px rgba(15, 26, 43, 0.04), 0 14px 34px -18px rgba(15, 26, 43, 0.24);
  --mesh-1: none; --mesh-2: none; --mesh-3: none;

  --gl-accent-hi: #12a594;
  --gl-accent-shadow: rgba(14, 124, 118, 0.45);
  --gl-accent-ink: #0b6e69;

  --c-teal: #12a594;   --ink-teal: #0b6e69;   --line-teal: #c3e8e0;
  --c-coral: #f0613c;  --ink-coral: #b03a17;  --line-coral: #f8cdbf;
  --c-amber: #f5a524;  --ink-amber: #8a5700;  --line-amber: #f3d99a;
  --c-blue: #3b82f6;   --ink-blue: #2457c5;   --line-blue: #c9dafb;
  --c-pink: #e9508f;   --ink-pink: #b52a64;   --line-pink: #f5c6da;
  --c-green: #22a861;  --ink-green: #136f40;  --line-green: #bde6cd;
  --c-purple: #8b5cf6; --ink-purple: #5f3dc9; --line-purple: #d5c8fb;
  --tile-glyph: #ffffff;

  --gl-card: rgba(255, 255, 255, 0.66);
  --gl-card-line: rgba(15, 26, 43, 0.07);
  --gl-card-hi: rgba(255, 255, 255, 0.9);
  --gl-card-shadow: 0 1px 2px rgba(15, 26, 43, 0.04), 0 22px 44px -26px rgba(15, 26, 43, 0.30);
  --gl-bar: rgba(255, 255, 255, 0.74);
  --gl-menu: rgba(252, 251, 248, 0.84);
  --gl-sheet: rgba(252, 251, 248, 0.95);
  --gl-line: rgba(15, 26, 43, 0.09);
  --gl-hi: rgba(255, 255, 255, 0.95);
  --gl-float: 0 14px 30px -14px rgba(15, 26, 43, 0.30);
  --gl-raised: rgba(255, 255, 255, 0.80);
  --gl-raised-line: rgba(15, 26, 43, 0.10);
  --gl-hover: rgba(15, 26, 43, 0.055);
  --gl-lens: rgba(14, 124, 118, 0.12);
  --gl-lens-line: rgba(14, 124, 118, 0.20);
  --gl-scrim: rgba(15, 26, 43, 0.24);

  --wash-teal: linear-gradient(140deg, rgba(234, 248, 245, 0.92) 0%, rgba(213, 240, 234, 0.86) 100%);
  --wash-coral: linear-gradient(140deg, rgba(255, 242, 236, 0.92) 0%, rgba(253, 225, 215, 0.86) 100%);
  --wash-amber: linear-gradient(140deg, rgba(255, 247, 226, 0.92) 0%, rgba(253, 229, 176, 0.86) 100%);
  --wash-blue: linear-gradient(140deg, rgba(238, 244, 255, 0.92) 0%, rgba(219, 231, 255, 0.86) 100%);
  --wash-pink: linear-gradient(140deg, rgba(255, 240, 246, 0.92) 0%, rgba(252, 220, 234, 0.86) 100%);
  --wash-green: linear-gradient(140deg, rgba(236, 249, 242, 0.92) 0%, rgba(213, 241, 226, 0.86) 100%);
  --wash-purple: linear-gradient(140deg, rgba(244, 240, 255, 0.92) 0%, rgba(229, 220, 255, 0.86) 100%);

  --gl-glow-layer:
    radial-gradient(72% 40% at 0% 0%, rgba(255, 204, 128, 0.46) 0%, rgba(255, 204, 128, 0) 70%),
    radial-gradient(58% 34% at 100% 4%, rgba(255, 166, 150, 0.34) 0%, rgba(255, 166, 150, 0) 70%),
    radial-gradient(68% 42% at 0% 62%, rgba(124, 214, 190, 0.30) 0%, rgba(124, 214, 190, 0) 70%),
    radial-gradient(70% 44% at 100% 86%, rgba(140, 180, 250, 0.34) 0%, rgba(140, 180, 250, 0) 70%);
}

/* ───────────────────────────────────────────────────────────────────────────
   2. THE PAGE: colour light instead of the hexagon field
   The field site.css draws on body::before/::after (hexagons and a mesh) is
   replaced by the Mini App's light: soft colour glows fixed to the viewport,
   so they stay put while the page scrolls over them. Bands lose their tints
   and hairlines; the sections are told apart by their headings and their
   coloured icons, as screens are in the app.
   ─────────────────────────────────────────────────────────────────────────── */
:root body {
  background: var(--bg);
  background-image: none;
  line-height: 1.6;
  /* Same face for labels and figures as for text now (section 3), with
     tabular figures, so a column of prices still lines up as it ticks. */
  font-variant-numeric: tabular-nums;
}
:root body::before {
  background-image: var(--gl-glow-layer);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
:root body::after { background-image: none; }

:root .deep-band,
:root .soft-band { background: none; border-block: 0; }
:root .band + .band { border-top: 0; }
:root .close-cta { border-top: 0; }

/* THE RHYTHM. A band's padding was sized for bands that were slabs, each
   with its own tint and hairlines, where the padding was what kept the slab
   from crowding its edges. Over one continuous light the padding of two
   bands simply adds up, and it measured ~180px of nothing between every
   pair of sections at desktop width. Half that is the gap now (about 94px
   at 1440, 64px on a phone): enough to start a new subject, never a hole. */
:root .band { padding-block: clamp(32px, 1.6vw + 24px, 52px); }
:root .band.pub-band { padding-block: clamp(22px, 1.2vw + 14px, 34px); }
:root .close-cta { padding-block: clamp(40px, 2.4vw + 26px, 68px); }
/* A page's own head sits under a bar that already holds 74px of the top. */
:root .page-head { padding-block: clamp(30px, 2.4vw + 18px, 56px) clamp(22px, 1.6vw + 14px, 38px); }

/* ───────────────────────────────────────────────────────────────────────────
   3. TYPE
   ─────────────────────────────────────────────────────────────────────────── */
:root h1, :root h2, :root h3, :root h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
:root h1 { font-weight: 700; }
:root h2 { font-weight: 700; }
:root h3 { font-weight: 650; letter-spacing: -0.012em; }

/* The emphasised words of a headline in the tint, running into blue: the
   one gradient on the page, and only on type set large enough to carry it.
   Plain tint where text cannot be clipped to a background. */
:root h1 em, :root h2 em { font-style: normal; color: var(--accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  :root h1 em, :root h2 em {
    background: linear-gradient(100deg, var(--gl-accent-hi) 0%, var(--accent) 38%, var(--blue) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
}

/* Labels and figures that were monospace are in the text face now (see
   --font-mono); code stays monospace. */
:root code, :root pre, :root kbd, :root samp,
:root .mk-code, :root .pv-code { font-family: var(--font-code); }

/* The eyebrow, as the Mini App sets a card's eyebrow: the section's own
   colour, bold, a little tracking. The dot is its light. */
:root .eyebrow {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--sec-ink, var(--gl-accent-ink));
}
:root .eyebrow::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sec-c, var(--accent)); opacity: 1;
  box-shadow: 0 0 10px var(--sec-c, var(--accent));
}
/* site.css's eyebrow is inline-block with no gap; the homepage's is a flex
   row. Both get the dot, so both become the row. */
:root .eyebrow { display: inline-flex; align-items: center; gap: 9px; }

:root .lede { color: var(--text2); }

/* ───────────────────────────────────────────────────────────────────────────
   4. BUTTONS — capsules; the primary one glows in its own colour
   ─────────────────────────────────────────────────────────────────────────── */
:root .btn {
  font: 600 15px/1 var(--font-display);
  letter-spacing: -0.005em;
  padding: 14px 24px;
  border-radius: 999px;
  transition: transform .22s var(--gl-spring), box-shadow .22s ease,
              background .18s ease, border-color .18s ease, color .18s ease;
}
:root .btn-primary {
  color: var(--on-brand);
  background: linear-gradient(180deg, var(--gl-accent-hi) 0%, var(--accent) 100%);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
              0 10px 26px -10px var(--gl-accent-shadow),
              0 0 0 0 var(--accent-glow);
}
:root .btn-primary:hover {
  background: linear-gradient(180deg, var(--gl-accent-hi) 0%, var(--gl-accent-hi) 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32),
              0 14px 32px -10px var(--gl-accent-shadow),
              0 0 0 5px var(--accent-glow);
}
:root .btn-primary:active { transform: translateY(0) scale(0.98); }
:root .btn-ghost {
  color: var(--text);
  background: var(--gl-raised);
  border-color: var(--gl-raised-line);
  box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-float);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
:root .btn-ghost:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--gl-raised-line));
  transform: translateY(-1px);
}
:root .linkout { color: var(--gl-accent-ink); }
:root .linkout:hover { border-bottom-color: currentColor; }

/* ───────────────────────────────────────────────────────────────────────────
   5. THE NAVIGATION BAR — a floating capsule of Liquid Glass
   The header itself is a transparent sticky strip; the bar is the capsule
   inside it, held 12px off the top and the sides so the page shows around
   it. The strip lets clicks through everywhere the capsule is not.
   ─────────────────────────────────────────────────────────────────────────── */
:root .topbar {
  background: transparent;
  border-bottom: 0;
  padding: 12px 12px 0;
  pointer-events: none;
}
:root .topbar > * { pointer-events: auto; }
:root .topbar-in {
  position: relative;
  isolation: isolate;
  height: 62px;
  max-width: var(--maxw);
  padding-inline: 22px 9px;
  gap: 10px;
  border-radius: 999px;
}
/* THE GLASS IS A LAYER UNDER THE BAR, NOT THE BAR ITSELF. An element with
   backdrop-filter is the backdrop root of everything inside it, so a menu
   opening from a glass bar could only blur the bar's own empty inside — it
   rendered as a plain tint over crisp text. With the material on ::before,
   the menus blur the page like the bar does. Same arrangement as the Mini
   App's sheets (ios.css). */
:root .topbar-in::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--gl-bar);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-line);
  box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-float);
  transition: box-shadow .3s ease;
  pointer-events: none;
}
:root .topbar.scrolled .topbar-in::before {
  box-shadow: inset 0 1px 0 var(--gl-hi), 0 18px 40px -16px rgba(0, 0, 0, 0.55);
}
:root[data-theme="light"] .topbar.scrolled .topbar-in::before {
  box-shadow: inset 0 1px 0 var(--gl-hi), 0 18px 36px -16px rgba(15, 26, 43, 0.28);
}
/* In-page links land below the floating bar, not under it. */
:root :target,
:root section[id], :root [id^="checkmark"], :root h2[id], :root h3[id] { scroll-margin-top: 92px; }

/* The brand. */
:root .topbar-brand { gap: 10px; }
:root .topbar-brand .mark { width: 24px; height: 24px; }
:root .topbar-brand .wordmark { font-size: 15.5px; letter-spacing: 0.12em; font-weight: 700; }

/* The links: capsules, a lens under the open one. */
:root .topbar-nav { gap: 2px; }
:root .topbar-nav > a:not(.btn),
:root .nav-group > button {
  padding: 10px 14px;
  border-radius: 999px;
  font: 500 15px/1 var(--font-display);
  color: var(--text2);
  transition: background .18s ease, color .18s ease;
}
:root .topbar-nav > a:not(.btn):hover,
:root .nav-group > button:hover { color: var(--text); background: var(--gl-hover); }
:root .nav-group > button[aria-expanded="true"] {
  color: var(--gl-accent-ink);
  background: var(--gl-lens);
  box-shadow: inset 0 0 0 1px var(--gl-lens-line);
}
/* The group the current page is in reads as the current one. */
:root .nav-group:has(a[aria-current="page"]) > button { color: var(--text); }
:root .nav-group:has(a[aria-current="page"]) > button::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}

/* The menus: glass panels that pop from the bar. Each destination carries a
   colour dot, the families cycling as the Mini App's sidebar icons do. */
:root .nav-menu {
  top: calc(100% + 22px);
  z-index: 2;
  min-width: 268px;
  padding: 8px;
  border-radius: 24px;
  background: var(--gl-menu);
  -webkit-backdrop-filter: var(--gl-blur-strong); backdrop-filter: var(--gl-blur-strong);
  border: 1px solid var(--gl-line);
  box-shadow: inset 0 1px 0 var(--gl-hi), 0 26px 60px -20px rgba(0, 0, 0, 0.6);
  gap: 1px;
  transform-origin: top center;
  animation: gl-menu-in .26s var(--gl-pop) backwards;
}
:root[data-theme="light"] .nav-menu {
  box-shadow: inset 0 1px 0 var(--gl-hi), 0 26px 56px -22px rgba(15, 26, 43, 0.32);
}
/* `backwards`, never `both`: an animation that keeps filling after it ends
   keeps its element composited as an opacity effect, and that makes it the
   backdrop root of everything inside — the search results under the drawer
   then could not blur the page. */
@keyframes gl-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes gl-menu-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
/* Menus open under the pointer (site_chrome.script). The one being left
   plays a quick exit while the next one pops in, and a bridge under an open
   group spans the 22px between its button and its menu, so the pointer can
   travel down into the menu without leaving the group. */
@media (min-width: 941px) {
  :root .nav-menu.is-leaving {
    z-index: 1;                  /* under the menu taking its place */
    animation: gl-menu-out .14s cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
  }
  :root .nav-group.is-open::after {
    content: '';
    position: absolute; top: 100%; inset-inline: -12px;
    height: 26px;
  }
}
:root .nav-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 16px;
  font: 500 14.5px/1.3 var(--font-display);
  color: var(--text);
  transition: background .15s ease;
}
:root .nav-menu a::before {
  content: '';
  flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--dot, var(--c-teal));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--c-teal)) 18%, transparent),
              0 0 12px color-mix(in srgb, var(--dot, var(--c-teal)) 60%, transparent);
}
:root .nav-menu a:nth-child(7n+1) { --dot: var(--c-teal); }
:root .nav-menu a:nth-child(7n+2) { --dot: var(--c-blue); }
:root .nav-menu a:nth-child(7n+3) { --dot: var(--c-purple); }
:root .nav-menu a:nth-child(7n+4) { --dot: var(--c-amber); }
:root .nav-menu a:nth-child(7n+5) { --dot: var(--c-coral); }
:root .nav-menu a:nth-child(7n+6) { --dot: var(--c-green); }
:root .nav-menu a:nth-child(7n+7) { --dot: var(--c-pink); }
:root .nav-menu a:hover { background: var(--gl-hover); color: var(--text); }
:root .nav-menu a[aria-current="page"] {
  color: var(--gl-accent-ink);
  background: var(--gl-lens);
}
:root .lang-tag {
  margin-inline-start: auto;
  font: 600 10px/1 var(--font-display); letter-spacing: .06em;
  padding: 3px 6px; border-radius: 999px;
  color: var(--muted); background: var(--gl-hover);
}

/* The round controls in the bar: search, and the menu on a phone. */
:root .ss-trigger,
:root .nav-toggle {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: var(--gl-hover);
  color: var(--text);
  transition: background .18s ease, box-shadow .18s ease;
}
:root .ss-trigger:hover,
:root .nav-toggle:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
:root .ss-trigger[aria-expanded="true"],
:root .nav-toggle[aria-expanded="true"] {
  background: var(--gl-lens);
  border-color: var(--gl-lens-line);
  color: var(--gl-accent-ink);
}

/* The call to action, at the end of the capsule. */
:root .topbar-cta { padding: 12px 20px; font-size: 14.5px; }

/* ── On a phone: a compact capsule, and the menu as a glass sheet under it ── */
@media (max-width: 940px) {
  :root .topbar { padding: 10px 10px 0; }
  :root .topbar-in { padding-inline: 18px 8px; gap: 6px; }
  :root .nav-toggle { flex: 0 0 auto; }
  :root .topbar-nav {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline: 0;
    padding: 10px;
    gap: 2px;
    border: 1px solid var(--gl-line);
    border-radius: 28px;
    background: var(--gl-menu);
    -webkit-backdrop-filter: var(--gl-blur-strong); backdrop-filter: var(--gl-blur-strong);
    box-shadow: inset 0 1px 0 var(--gl-hi), 0 30px 60px -24px rgba(0, 0, 0, 0.65);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform-origin: top center;
    animation: gl-menu-in .3s var(--gl-pop) backwards;
  }
  :root[data-theme="light"] .topbar-nav {
    box-shadow: inset 0 1px 0 var(--gl-hi), 0 30px 60px -26px rgba(15, 26, 43, 0.35);
  }
  :root .nav-group > button {
    width: 100%;
    padding: 14px 14px;
    border-radius: 18px;
    font-size: 16px; font-weight: 600;
    color: var(--text);
  }
  :root .nav-menu {
    position: static;
    min-width: 0;
    margin: 2px 0 8px;
    padding: 6px;
    border: 0;
    border-radius: 20px;
    background: var(--gl-hover);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
    animation: none;
  }
  /* The menu's own call to action. Matched through the nav, because the
     nav's link rule would otherwise paint its label in the link grey. */
  :root .topbar-nav > a.nav-cta {
    margin-top: 10px; padding: 15px 20px;
    font: 600 15.5px/1 var(--font-display);
    color: var(--on-brand);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   6. SEARCH — a glass card under the bar, results in a glass panel
   ─────────────────────────────────────────────────────────────────────────── */
:root .ss-drawer {
  top: calc(100% + 10px);
  inset-inline: 12px;
  max-width: var(--maxw);
  margin-inline: auto;
  border: 0;
  border-radius: 26px;
  background: none;
  box-shadow: none;
  animation: gl-menu-in .26s var(--gl-pop) backwards;
}
/* The material on a layer, so the results panel inside can blur the page
   too (see .topbar-in::before). */
:root .ss-drawer::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  /* Denser than a menu: a field you type into, over text that keeps moving,
     has to read first and look like glass second. */
  background: var(--gl-sheet);
  -webkit-backdrop-filter: var(--gl-blur-strong); backdrop-filter: var(--gl-blur-strong);
  border: 1px solid var(--gl-line);
  box-shadow: inset 0 1px 0 var(--gl-hi), 0 26px 56px -22px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
:root .ss-drawer-in { padding: 10px 10px 10px 12px; max-width: none; }
:root .ss-input {
  padding-block: 13px;
  padding-inline: 42px 40px;
  font: 400 16px/1.2 var(--font-display);
  border-radius: 999px;
  background: var(--gl-hover);
  border: 1px solid transparent;
}
:root .ss-input:focus-visible {
  border-color: var(--gl-lens-line);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
:root .ss-icon { inset-inline-start: 15px; }
:root .ss-clear { inset-inline-end: 10px; width: 26px; height: 26px; }
:root .ss-close {
  width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: var(--gl-hover); color: var(--text);
}
/* The narrowest phones: the field gives back the room its rounding took, so
   the longest placeholder (Russian, Spanish) still fits at 320px. */
@media (max-width: 420px) {
  :root .ss-drawer { inset-inline: 8px; }
  :root .ss-drawer-in { padding: 6px; gap: 6px; }
  :root .ss-input { font-size: 14px; padding-inline: 36px 30px; }
  :root .ss-icon { inset-inline-start: 13px; }
  :root .ss-clear { inset-inline-end: 6px; }
  :root .ss-close { width: 38px; height: 38px; }
}
:root .ss-panel {
  top: calc(100% + 10px);
  padding: 6px;
  border-radius: 20px;
  border: 1px solid var(--gl-line);
  background: var(--gl-sheet);
  -webkit-backdrop-filter: var(--gl-blur-strong); backdrop-filter: var(--gl-blur-strong);
  box-shadow: 0 26px 56px -22px rgba(0, 0, 0, 0.6);
}
:root .ss-row { border-radius: 14px; padding: 10px 12px; }
:root .ss-row:hover, :root .ss-row.is-sel { background: var(--gl-hover); }
:root .ss-row.is-sel { outline: 1px solid var(--gl-lens-line); }
:root .ss-kind { border-radius: 999px; padding: 4px 8px; background: var(--gl-hover); }
:root .ss-title mark { color: var(--gl-accent-ink); }
:root .ssp-input {
  padding: 14px 16px 14px 44px;
  border-radius: 999px;
  background: var(--gl-card);
  border-color: var(--gl-card-line);
}
:root .ssp-input:focus-visible { border-color: var(--gl-lens-line); box-shadow: 0 0 0 4px var(--accent-glow); }
:root .ssp-form .ss-icon { inset-inline-start: 17px; }
:root .ssp-list { gap: 8px; }
:root .ssp-list .ss-row {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--gl-card);
  border: 1px solid var(--gl-card-line);
}

/* ───────────────────────────────────────────────────────────────────────────
   7. SURFACES — cards that float, washed in a colour family
   A card is a translucent pane with a hairline, a light top edge and a soft
   shadow under it. Cards in a grid are washed in the colour families in
   turn — teal, blue, purple, amber, coral, green, pink — so a page of them
   reads in colour, as the Mini App's screens do; each card's index, eyebrow
   and icon take its family's ink.
   ─────────────────────────────────────────────────────────────────────────── */
:root .card,
:root .tile,
:root .chain-step,
:root .cando > div,
:root .fact,
:root .callout,
:root .route-card,
:root .rm-step,
:root .econ-step,
:root .flow-step {
  border-radius: var(--gl-r-card);
  background: var(--gl-wash, var(--gl-card));
  border: 1px solid var(--gl-family-line, var(--gl-card-line));
  box-shadow: inset 0 1px 0 var(--gl-card-hi), var(--gl-card-shadow);
}
:root .fact { border-radius: 18px; }
/* A card that is a link lifts under the pointer, its shadow taking its
   colour; a card that is only text stays put. */
:root :is(a.card, .route-card, a.tile) {
  transition: transform .3s var(--gl-spring), box-shadow .3s ease;
}
:root :is(a.card, .route-card, a.tile):hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 var(--gl-card-hi), var(--gl-card-shadow),
              0 18px 40px -22px color-mix(in srgb, var(--fam-c, var(--accent)) 55%, transparent);
}

/* The families, in turn. */
:root :is(.grid, .tiles, .chain, .facts, .cando, .cards) > :nth-child(7n+1) { --fam-c: var(--c-teal); --fam-ink: var(--ink-teal); --gl-wash: var(--wash-teal); --gl-family-line: var(--line-teal); }
:root :is(.grid, .tiles, .chain, .facts, .cando, .cards) > :nth-child(7n+2) { --fam-c: var(--c-blue); --fam-ink: var(--ink-blue); --gl-wash: var(--wash-blue); --gl-family-line: var(--line-blue); }
:root :is(.grid, .tiles, .chain, .facts, .cando, .cards) > :nth-child(7n+3) { --fam-c: var(--c-purple); --fam-ink: var(--ink-purple); --gl-wash: var(--wash-purple); --gl-family-line: var(--line-purple); }
:root :is(.grid, .tiles, .chain, .facts, .cando, .cards) > :nth-child(7n+4) { --fam-c: var(--c-amber); --fam-ink: var(--ink-amber); --gl-wash: var(--wash-amber); --gl-family-line: var(--line-amber); }
:root :is(.grid, .tiles, .chain, .facts, .cando, .cards) > :nth-child(7n+5) { --fam-c: var(--c-coral); --fam-ink: var(--ink-coral); --gl-wash: var(--wash-coral); --gl-family-line: var(--line-coral); }
:root :is(.grid, .tiles, .chain, .facts, .cando, .cards) > :nth-child(7n+6) { --fam-c: var(--c-green); --fam-ink: var(--ink-green); --gl-wash: var(--wash-green); --gl-family-line: var(--line-green); }
:root :is(.grid, .tiles, .chain, .facts, .cando, .cards) > :nth-child(7n+7) { --fam-c: var(--c-pink); --fam-ink: var(--ink-pink); --gl-wash: var(--wash-pink); --gl-family-line: var(--line-pink); }
/* Facts are many and small: a hairline and an ink in the family, not a wash. */
:root .facts > * { --gl-wash: var(--gl-card); }

:root .card .idx,
:root .chain-step .idx {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: .06em;
  color: var(--fam-ink, var(--gl-accent-ink));
}
:root .card .idx::before,
:root .chain-step .idx::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fam-c, var(--accent));
  box-shadow: 0 0 10px var(--fam-c, var(--accent));
}
:root .fact > b { color: var(--fam-ink, var(--text)); font-weight: 650; }
:root .card h3, :root .tile h3, :root .chain-step h3 { color: var(--text); }
:root .card p, :root .tile p, :root .chain-step p { color: var(--text2); }

/* The callout keeps its accent edge, as a glowing bar inside the radius. */
:root .callout {
  position: relative;
  border-inline-start-width: 1px;
  padding-inline-start: 26px;
  overflow: hidden;
}
:root .callout::before {
  content: '';
  position: absolute; inset-block: 14px; inset-inline-start: 11px;
  width: 4px; border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
:root .callout.warn::before { background: var(--gold); box-shadow: 0 0 12px var(--gold); }

/* The concept chain's connectors and the step lists, in the tint. */
:root .steps li { border-top-color: var(--border-soft); }
:root .steps li::before {
  font-family: var(--font-display); font-weight: 700;
  color: var(--gl-accent-ink);
}
:root .weight-bar { height: 8px; background: var(--surface2); }
:root .weight-bar i {
  background: linear-gradient(90deg, var(--accent), var(--blue));
  box-shadow: 0 0 10px var(--accent-glow);
}
:root .weight-pct { font-family: var(--font-display); font-weight: 600; }

/* Tables: an inset grouped list. */
:root .scroll-x > table {
  border-collapse: separate; border-spacing: 0;
  background: var(--gl-card);
  border: 1px solid var(--gl-card-line);
  border-radius: 20px;
  overflow: hidden;
}
:root .scroll-x th { background: var(--gl-hover); }
:root .scroll-x tr:last-child > td { border-bottom: 0; }

/* The FAQ: grouped rows on a glass pane. */
:root .faq {
  background: var(--gl-card);
  border: 1px solid var(--gl-card-line);
  border-radius: var(--gl-r-card);
  box-shadow: inset 0 1px 0 var(--gl-card-hi), var(--gl-card-shadow);
  padding-inline: 22px;
}
:root .faq details { border-top: 1px solid var(--border-soft); }
:root .faq details:first-of-type { border-top: 0; }
:root .faq details:last-of-type { border-bottom: 0; }
:root .faq summary { font-weight: 600; }
:root .faq summary::after {
  content: '+';
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  font: 500 18px/1 var(--font-display);
  color: var(--gl-accent-ink);
  background: var(--gl-lens);
  margin-top: -2px;
}
:root .faq details[open] summary::after { content: '\2212'; transform: none; }
:root .faq-home .faq details { border-top: 1px solid var(--border-soft); }
:root .faq-home .faq details:first-of-type { border-top: 0; }
:root .faq-home .faq details:last-of-type { border-bottom: 0; }
:root .faq-home .faq summary::after {
  content: '+';
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  font: 500 18px/1 var(--font-display);
  color: var(--gl-accent-ink);
  background: var(--gl-lens);
}
:root .faq-home .faq details[open] summary::after { content: '\2212'; }

/* ───────────────────────────────────────────────────────────────────────────
   8. THE KIT AND THE MOCK-UPS — drawn as the Mini App now looks
   Panels round off and float; chips are capsules; a phone has the radius of
   a phone. The demonstrations are pictures of the app, so they follow it.
   ─────────────────────────────────────────────────────────────────────────── */
:root .pv-panel,
:root .mk-panel {
  border-radius: 20px;
  background: var(--gl-card);
  border-color: var(--gl-card-line);
  box-shadow: inset 0 1px 0 var(--gl-card-hi), var(--gl-card-shadow);
}
:root .pv-head, :root .mk-head {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em;
}
:root .pv-chip, :root .mk-chip {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 999px;
}
:root .pv-metric b, :root .mk-metric b { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
:root .pv-metric span, :root .mk-metric span { font-family: var(--font-display); letter-spacing: .05em; }
:root .pv-note, :root .mk-note { font-family: var(--font-display); letter-spacing: .02em; }
:root .pv-bar i, :root .mk-bar i { background: linear-gradient(90deg, var(--accent), var(--blue)); }
:root .pv-bar.full i, :root .mk-bar.full i { background: var(--gold); }
:root .mk-btn {
  background: linear-gradient(180deg, var(--gl-accent-hi), var(--accent));
  color: var(--on-brand);
  box-shadow: 0 6px 14px -6px var(--gl-accent-shadow);
}
:root .mk-btn.ghost { background: var(--gl-raised); color: var(--text); box-shadow: none; }

:root .pv-phone,
:root .mk-phone {
  border-radius: 38px;
  padding: 12px 10px 16px;
  background: var(--bg);
  background-image: var(--gl-glow-layer);
  background-size: 100% 100%;
  border: 1px solid var(--gl-line);
  box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--text) 4%, transparent),
              0 30px 60px -28px rgba(0, 0, 0, 0.75);
}
:root[data-theme="light"] .pv-phone,
:root[data-theme="light"] .mk-phone {
  box-shadow: inset 0 0 0 5px rgba(15, 26, 43, 0.04), 0 30px 60px -30px rgba(15, 26, 43, 0.35);
}
:root .pv-phone-notch, :root .mk-phone-notch { width: 64px; height: 6px; background: var(--border); }
:root .pv-phone-bar, :root .mk-phone-bar { font-family: var(--font-display); letter-spacing: .08em; }
:root .mk-tabs span,
:root .pv-lb .tabs span {
  font-family: var(--font-display);
  letter-spacing: .04em;
}
:root .mk-tabs span.on,
:root .pv-lb .tabs span.on {
  color: var(--gl-accent-ink);
  background: var(--gl-lens);
  border-color: var(--gl-lens-line);
}
:root .shot {
  border-radius: 38px;
  padding: 8px 8px 2px;
  background: var(--gl-card);
  border-color: var(--gl-line);
  box-shadow: inset 0 1px 0 var(--gl-card-hi), 0 30px 60px -28px rgba(0, 0, 0, 0.7);
}
:root .shot img { border-radius: 30px; }

/* Each section's demonstration sits in a soft light of the section's own
   colour, and its panels take a breath of that colour — so the page reads
   section by section in colour, as the Mini App's screens do. */
:root { --halo: 20%; }
:root[data-theme="light"] { --halo: 24%; }
:root .band :is(.visual, .shots),
:root .head-visual { position: relative; isolation: isolate; }
:root .band :is(.visual, .shots)::before,
:root .head-visual::before {
  content: '';
  position: absolute; z-index: -1;
  /* Sideways by no more than the page gutter, or the light itself would
     widen the document on a phone. */
  inset-block: -16%; inset-inline: max(-10%, -16px);
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sec-c, var(--accent)) var(--halo), transparent), transparent);
}
:root .band .visual :is(.mk-panel, .pv-panel),
:root .head-visual .pv-panel {
  background: color-mix(in srgb, var(--sec-c, var(--accent)) 5%, var(--gl-card));
  border-color: color-mix(in srgb, var(--sec-c, var(--accent)) 18%, var(--gl-card-line));
}
:root .shot figcaption { font-family: var(--font-display); letter-spacing: .06em; }
:root .mk-sig, :root .pv-msg { border-radius: 14px; }
:root .mk-code, :root .pv-code { border-radius: 14px; }

/* The section icon: a solid colour tile with a shadow of its own colour,
   as the Mini App's icon tiles are. */
:root .glyph {
  width: 42px; height: 42px;
  border-radius: 13px;
  color: var(--tile-glyph);
  background: linear-gradient(160deg, color-mix(in srgb, var(--sec-c, var(--c-teal)) 82%, #fff) 0%, var(--sec-c, var(--c-teal)) 100%);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
              0 10px 22px -10px var(--sec-c, var(--c-teal));
}
:root .tile .glyph { --sec-c: var(--fam-c); }
:root .glyph svg { width: 20px; height: 20px; stroke-width: 2; }

/* The homepage's sections, each in a family: its eyebrow and its icon. */
:root #hero, :root #evaluate, :root #pricing, :root #cta         { --sec-c: var(--c-teal);   --sec-ink: var(--ink-teal); }
:root #published, :root #signals, :root #leaderboard               { --sec-c: var(--c-amber);  --sec-ink: var(--ink-amber); }
:root #problem, :root #manual                                       { --sec-c: var(--c-coral);  --sec-ink: var(--ink-coral); }
:root #how, :root #analytics, :root #journals                       { --sec-c: var(--c-blue);   --sec-ink: var(--ink-blue); }
:root #providers, :root #algo, :root #why                           { --sec-c: var(--c-purple); --sec-ink: var(--ink-purple); }
:root #verification, :root #autotrade, :root #security              { --sec-c: var(--c-green);  --sec-ink: var(--ink-green); }
:root #marketplace                                                   { --sec-c: var(--c-pink);   --sec-ink: var(--ink-pink); }
/* Every other page: its sections take the families in turn. */
:root main > section:nth-of-type(7n+1) { --sec-c: var(--c-teal);   --sec-ink: var(--ink-teal); }
:root main > section:nth-of-type(7n+2) { --sec-c: var(--c-blue);   --sec-ink: var(--ink-blue); }
:root main > section:nth-of-type(7n+3) { --sec-c: var(--c-purple); --sec-ink: var(--ink-purple); }
:root main > section:nth-of-type(7n+4) { --sec-c: var(--c-amber);  --sec-ink: var(--ink-amber); }
:root main > section:nth-of-type(7n+5) { --sec-c: var(--c-coral);  --sec-ink: var(--ink-coral); }
:root main > section:nth-of-type(7n+6) { --sec-c: var(--c-green);  --sec-ink: var(--ink-green); }
:root main > section:nth-of-type(7n+7) { --sec-c: var(--c-pink);   --sec-ink: var(--ink-pink); }

/* ───────────────────────────────────────────────────────────────────────────
   9. THE HOMEPAGE
   ─────────────────────────────────────────────────────────────────────────── */
:root .hero h1 { font-weight: 750; letter-spacing: -0.032em; }
:root .hero-cta .quiet { font-family: var(--font-display); font-weight: 600; letter-spacing: .08em; }
:root .hero-trust {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .06em;
  border-top-color: var(--border-soft);
}
:root .hero-trust i { box-shadow: 0 0 8px var(--green); }
:root .composite::before {
  background:
    radial-gradient(50% 44% at 64% 34%, var(--accent-glow), transparent 72%),
    radial-gradient(40% 40% at 30% 70%, color-mix(in srgb, var(--c-blue) 22%, transparent), transparent 72%);
}
:root .composite .scene-mkt {
  background: color-mix(in srgb, var(--gl-menu) 70%, transparent);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
}
:root .composite .scene-exec {
  background: var(--gl-menu);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
}

/* The Published Strategies board: a glass pane with the total in its light. */
:root .pub-board {
  border-radius: var(--gl-r-card);
  background: var(--gl-card);
  border: 1px solid var(--gl-card-line);
  box-shadow: inset 0 1px 0 var(--gl-card-hi), var(--gl-card-shadow);
}
:root .pub-total .pub-n {
  color: var(--accent);
  text-shadow: 0 0 24px var(--accent-glow);
}

/* The figures strip: four tiles in four colours. */
:root .factstrip {
  gap: 12px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
:root .factstrip div {
  border-radius: 22px;
  background: var(--fs-wash, var(--gl-card));
  border: 1px solid var(--fs-line, var(--gl-card-line));
  box-shadow: inset 0 1px 0 var(--gl-card-hi), var(--gl-card-shadow);
}
:root .factstrip div:nth-child(4n+1) { --fs-wash: var(--wash-teal);   --fs-line: var(--line-teal);   --fs-ink: var(--ink-teal); }
:root .factstrip div:nth-child(4n+2) { --fs-wash: var(--wash-blue);   --fs-line: var(--line-blue);   --fs-ink: var(--ink-blue); }
:root .factstrip div:nth-child(4n+3) { --fs-wash: var(--wash-amber);  --fs-line: var(--line-amber);  --fs-ink: var(--ink-amber); }
:root .factstrip div:nth-child(4n+4) { --fs-wash: var(--wash-purple); --fs-line: var(--line-purple); --fs-ink: var(--ink-purple); }
:root .factstrip b { font-family: var(--font-display); font-weight: 700; color: var(--fs-ink, var(--text)); }
:root .why3 div { border-top-color: var(--border-soft); }

:root .prices div { border-radius: 12px; font-family: var(--font-display); }
:root .qr { border-radius: 22px; }

/* The Telegram handoff: a glass sheet over a blurred page. */
:root .modal-scrim {
  background: var(--gl-scrim);
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
}
:root .modal-card {
  border-radius: 32px;
  background: var(--gl-menu);
  -webkit-backdrop-filter: var(--gl-blur-strong); backdrop-filter: var(--gl-blur-strong);
  border: 1px solid var(--gl-line);
  box-shadow: inset 0 1px 0 var(--gl-hi), 0 40px 80px -30px rgba(0, 0, 0, 0.7),
              0 0 70px -24px var(--accent-glow);
}
:root .modal-mark {
  color: var(--tile-glyph);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-blue) 80%, #fff), var(--c-blue));
  border: 0;
  box-shadow: 0 12px 26px -10px var(--c-blue);
}
:root .modal-x { background: var(--gl-hover); color: var(--text2); }

/* The phone's call to action: a floating capsule, as the Mini App's tab bar. */
@media (max-width: 620px) {
  :root .sticky-cta {
    inset-inline: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 7px;
    border: 1px solid var(--gl-line);
    border-radius: 999px;
    background: var(--gl-bar);
    -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
    box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-float);
    transform: translateY(140%);
  }
  :root .sticky-cta.show { transform: none; }
  :root .sticky-cta.show ~ .to-top {
    bottom: calc(var(--tt-gap) + 74px + env(safe-area-inset-bottom, 0px));
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   10. THE SUPPORTING PAGES
   ─────────────────────────────────────────────────────────────────────────── */
:root .page-head h1 { font-weight: 750; letter-spacing: -0.03em; }
:root .crumbs a:hover { color: var(--gl-accent-ink); }

/* ── A Provider's journal (journal_page.py) ─────────────────────────────── */
/* The chapter bar sits under the site bar: --jnav-top is where it sticks,
   and the journal derives its anchor landings, its reading line and its side
   panel from the same variable. The site bar now floats 12px down (10px on
   a phone) and is 62px tall, so the chapter bar sticks 8px under it.
   html:root, because the journal declares its own value after this sheet. */
html:root { --jnav-top: 82px; }
@media (max-width: 940px) { html:root { --jnav-top: 80px; } }
/* The chapter bar itself: a glass capsule like the site bar, the chapter you
   are in under a lens. */
:root .jnav { background: transparent; border-bottom: 0; }
:root .jnav ol {
  width: fit-content; max-width: 100%;
  padding: 5px; gap: 2px;
  border-radius: 999px;
  background: var(--gl-bar);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-line);
  box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-float);
}
:root .jnav a {
  padding: 9px 13px;
  border-radius: 999px;
  border-bottom: 0;
}
:root .jnav a:hover { background: var(--gl-hover); }
:root .jnav a[aria-current] {
  color: var(--gl-accent-ink);
  background: var(--gl-lens);
  box-shadow: inset 0 0 0 1px var(--gl-lens-line);
}
:root .jside {
  background: var(--gl-card);
  border-color: var(--gl-card-line);
  border-radius: var(--gl-r-card);
  box-shadow: inset 0 1px 0 var(--gl-card-hi), var(--gl-card-shadow);
}

/* ───────────────────────────────────────────────────────────────────────────
   11. THE FOOTER — a glass pane floating above the bottom edge
   ─────────────────────────────────────────────────────────────────────────── */
:root .site-footer {
  background: none;
  border-top: 0;
  padding: clamp(34px, 4vw, 56px) 12px 14px;
}
:root .site-footer > .wrap {
  max-width: var(--maxw);
  padding: clamp(28px, 3.4vw, 44px) clamp(20px, 3.4vw, 40px) clamp(22px, 2.6vw, 30px);
  border-radius: 32px;
  background: var(--gl-bar);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-line);
  box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-float);
}
:root .footer-cols { border-bottom-color: var(--border-soft); }
:root .footer-col h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: .08em;
  color: var(--fc-ink, var(--muted));
  display: flex; align-items: center; gap: 8px;
}
:root .footer-col h4::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fc-c, var(--accent)); box-shadow: 0 0 8px var(--fc-c, var(--accent));
}
:root .footer-col:nth-child(4n+1) { --fc-c: var(--c-teal);   --fc-ink: var(--ink-teal); }
:root .footer-col:nth-child(4n+2) { --fc-c: var(--c-blue);   --fc-ink: var(--ink-blue); }
:root .footer-col:nth-child(4n+3) { --fc-c: var(--c-purple); --fc-ink: var(--ink-purple); }
:root .footer-col:nth-child(4n+4) { --fc-c: var(--c-amber);  --fc-ink: var(--ink-amber); }
:root .footer-col a { color: var(--text2); transition: color .15s ease; }
:root .footer-col a:hover { color: var(--text); }
:root .social-link {
  width: 38px; height: 38px;
  border-color: transparent;
  background: var(--gl-hover);
  color: var(--text2);
  transition: background .18s ease, color .18s ease, transform .2s var(--gl-spring);
}
:root .social-link:hover { color: var(--text); background: var(--gl-lens); transform: translateY(-2px); }
:root .lang-switch a { color: var(--muted); }
:root .lang-switch a:hover { color: var(--text); }
:root .lang-switch a[aria-current="true"] { color: var(--gl-accent-ink); font-weight: 600; }
:root .footer-contact a { color: var(--gl-accent-ink); border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent); }
:root .footer-updated { font-family: var(--font-display); }
:root .theme-cycle {
  padding: 8px 14px 8px 10px;
  font: 600 12px/1 var(--font-display);
  letter-spacing: .06em;
  background: var(--gl-raised);
  border-color: var(--gl-raised-line);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--gl-hi);
}
:root .theme-cycle:hover { border-color: var(--gl-lens-line); }
:root .theme-cycle .swatch {
  width: 10px; height: 10px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 10px var(--accent);
}

/* Back to top: a round glass button. */
:root .to-top {
  width: 46px; height: 46px;
  background: var(--gl-bar);
  background-image: none;
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-line);
  box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-float);
  color: var(--text);
}
:root .to-top:hover { color: var(--gl-accent-ink); border-color: var(--gl-lens-line); }

/* ───────────────────────────────────────────────────────────────────────────
   12. ACCESSIBILITY AND FALLBACKS
   ─────────────────────────────────────────────────────────────────────────── */
/* Without backdrop-filter the glass would be a see-through tint over moving
   content: the floating surfaces go nearly opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="ocean"] { --gl-bar: rgba(18, 21, 29, 0.97); --gl-menu: rgba(16, 19, 26, 0.98); }
  :root[data-theme="dark"]  { --gl-bar: rgba(24, 34, 54, 0.97); --gl-menu: rgba(20, 29, 46, 0.98); }
  :root[data-theme="light"] { --gl-bar: rgba(252, 251, 248, 0.97); --gl-menu: rgba(252, 251, 248, 0.98); }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="ocean"] { --gl-bar: #14171f; --gl-menu: #12151c; --gl-sheet: #12151c; }
  :root[data-theme="dark"]  { --gl-bar: #1b253a; --gl-menu: #172133; --gl-sheet: #172133; }
  :root[data-theme="light"] { --gl-bar: #fcfbf8; --gl-menu: #fcfbf8; --gl-sheet: #fcfbf8; }
  :root .topbar-in::before, :root .nav-menu, :root .topbar-nav, :root .ss-drawer::before,
  :root .ss-panel, :root .site-footer > .wrap, :root .to-top, :root .modal-card,
  :root .sticky-cta, :root .btn-ghost {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  :root .topbar-in::before, :root .nav-menu, :root .topbar-nav, :root .ss-drawer::before,
  :root .site-footer > .wrap { border-color: var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  :root .nav-menu, :root .nav-menu.is-leaving, :root .topbar-nav, :root .ss-drawer { animation: none; }
  :root :is(a.card, .route-card, a.tile):hover,
  :root .btn-primary:hover, :root .btn-ghost:hover, :root .social-link:hover { transform: none; }
}