/* ═══════════════════════════════════════════════════════════════════════════
   UpTrended — design system  ·  "soft pop"
   ───────────────────────────────────────────────────────────────────────────
   Single stylesheet for the whole site. Named explicitly in vercel.ts's
   cache-header rule, so the filename must not change.

   Visual language: warm, dimensional and playful. Reference points are
   Klarna (colour-flooded full-bleed sections, huge bold type, pill buttons),
   Aave (soft gradient washes, fanned device clusters, rounded geometry),
   Corgi (tilted objects casting real shadows, serif-italic accent words) and
   MindMarket (a floating pill header detached from the top edge).

   The three ideas that carry it:
     1. Every section owns a colour. The page is a stack of flooded blocks,
        not one paper field.
     2. Depth is real. Layered shadows, tilted cards, stacked devices, and
        chunky offset "key" shadows on primary buttons.
     3. Type is loud. Weight 800 display sans, with an italic display serif
        for accent words.

   Performance contract (a low-end Android phone is the target device):
     · no backdrop-filter, anywhere — it repaints the viewport per scroll frame
     · no filter: blur()
     · shadows are static; hover and scroll depth crossfade a pseudo-element's
       opacity rather than animating box-shadow. The one exception is the
       focus ring on inputs, which fires once on focus and never on scroll.
     · only transform / opacity / colour are ever transitioned
   The motion primitives live in assets/motion.js.

   Contracts this file must honour:
     · assets/theme.js toggles `.open` on #mobile-menu and sets inline display
       on #icon-sun / #icon-moon / #icon-menu / #icon-x
     · assets/theme.js wraps FAQ bodies in .faq-body > .faq-body-inner
     · the blog auto-publish pipeline writes .article-* markup
     · consent.js reads --bg-card, --border, --text, --font
   ═══════════════════════════════════════════════════════════════════════════ */

@layer tokens, base, layout, components, utilities;

/* ═══ FONTS ════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/satoshi-variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Accent words only — never body copy. */
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Satoshi Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Roboto');
  size-adjust: 97%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@layer tokens {
  :root {
    /* ── Surfaces ─────────────────────────────────────────────────────── */
    --cream: #FDF8F1;
    --surface: #FFFFFF;
    --surface-2: #F7F1E8;

    /* ── Ink — warm, never pure black ─────────────────────────────────── */
    --ink: #17131C;
    --ink-soft: #57506180;
    --ink-muted: #5F5769;
    --ink-faint: #655C70;

    /* ── Section floods. Each section owns one. ───────────────────────── */
    --lav: #EBE4FE;
    --mint: #D4F0E0;
    --peach: #FFE0CC;
    --sky: #D8E8FF;
    --butter: #FFEFC2;
    --blush: #FFDEEB;

    /* ── Per-app accents ──────────────────────────────────────────────── */
    --divux: #F0502F;
    --divux-2: #FF7A5C;
    --divux-deep: #B8351A;
    --divux-tint: 240, 80, 47;
    --divux-text: #A82D13;
    --streamsim: #7A3BEA;
    --streamsim-2: #A377F6;
    --streamsim-deep: #55219F;
    --streamsim-tint: 122, 59, 234;
    --streamsim-text: #5A1FBF;
    --daywear: #E5A200;
    --daywear-2: #FFC53D;
    --daywear-deep: #A06F00;
    --daywear-tint: 229, 162, 0;

    /* ── Semantic ─────────────────────────────────────────────────────── */
    --accent-red: #DC2626;
    --accent-orange: #EA580C;
    --accent-yellow: #CA8A04;
    --accent-green: #12A150;
    /* Darkened for text use: #12A150 is only 2.73:1 on the lilac flood. */
    --accent-green-text: #0B6B34;
    --accent-blue: #2563EB;

    --tint: 23, 19, 28;
    --hairline: rgba(23, 19, 28, .10);
    --hairline-strong: rgba(23, 19, 28, .18);

    /* ── Slab: surfaces that stay dark in BOTH themes ─────────────────────
       The CTA block, the footer, primary buttons and device frames are dark
       panels by design. They must not follow --ink, which inverts — doing
       that turned the whole CTA white-on-white in dark mode.

       Neutral, not plum: these panels are the one dark surface a light-mode
       visitor sees, so a violet cast here made the two themes disagree once
       dark mode moved to a grey ramp. */
    --slab: #17171C;
    --slab-lift: #3A3A44;
    --on-slab: #FFFFFF;

    /* ── Depth. Static; never transitioned. ───────────────────────────── */
    --sh-sm: 0 1px 2px rgba(23, 19, 28, .05), 0 3px 8px rgba(23, 19, 28, .05);
    --sh: 0 2px 4px rgba(23, 19, 28, .04), 0 10px 24px rgba(23, 19, 28, .08);
    --sh-lg: 0 4px 8px rgba(23, 19, 28, .05), 0 20px 48px rgba(23, 19, 28, .11);
    --sh-xl: 0 10px 20px rgba(23, 19, 28, .06), 0 36px 80px rgba(23, 19, 28, .16);

    /* ── Space ────────────────────────────────────────────────────────── */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
    --s-6: 24px;  --s-7: 32px;  --s-8: 40px;  --s-9: 48px;  --s-10: 56px;
    --s-12: 72px; --s-14: 88px; --s-16: 112px; --s-18: 136px; --s-20: 160px;

    /* ── Type ─────────────────────────────────────────────────────────── */
    --t-2xs: .75rem;
    --t-xs: .8125rem;
    --t-sm: .875rem;
    --t-base: .9375rem;
    --t-md: 1.0625rem;
    --t-lg: 1.1875rem;
    --t-xl: 1.5rem;
    --t-2xl: clamp(1.75rem, 3vw, 2.35rem);
    --t-3xl: clamp(2.2rem, 4.4vw, 3.4rem);
    --t-4xl: clamp(2.6rem, 5.6vw, 4.2rem);
    --t-5xl: clamp(3rem, 7.4vw, 5.6rem);

    --tr-display: -.035em;
    --tr-tight: -.02em;
    --tr-wide: .04em;
    --tr-wider: .1em;

    --lh-display: 0.98;
    --lh-tight: 1.12;
    --lh-snug: 1.45;
    --lh-body: 1.62;
    --lh-relaxed: 1.75;

    /* ── Radii — generous everywhere ──────────────────────────────────── */
    --r-xs: 8px;
    --r-sm: 14px;
    --r: 22px;
    --r-lg: 32px;
    --r-xl: 44px;
    --r-pill: 999px;

    /* Device frames. Every phone on the site — hero cluster, feature rows,
       galleries — shares one outer radius so a 190px screenshot reads as the
       same hardware as a 260px one. The screen inside is concentric, not
       equal: inner = outer − frame padding, or the two curves fight. Each
       frame sets its own --r-screen from its own padding. */
    --r-device: 38px;

    /* ── Motion ───────────────────────────────────────────────────────── */
    --dur-fast: 150ms;
    --dur: 260ms;
    --dur-slow: 480ms;
    --dur-draw: 620ms;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
    --ease-inout: cubic-bezier(.4, 0, .2, 1);

    /* ── Layout ───────────────────────────────────────────────────────── */
    /* Matches anthropic.com's content width: their shell caps at 89.5rem
       (1432px) with fluid 32-80px side margins that hit the 80px cap around
       ~1600px viewport, netting 1272px on any screen wider than that. Rather
       than reproduce their whole clamp() formula, take the number it settles
       on — a single token flows to every section, the footer, and nav. */
    --content-max: 1272px;
    /* Left narrow on purpose: this governs blog body-text width, not the page
       shell, and 1272px of prose would run far past a readable line length. */
    --article-max: 700px;
    --gutter: var(--s-6);
    --nav-h: 66px;
    --nav-gap: 18px;

    --font: 'Satoshi', 'Satoshi Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ── Compatibility aliases (consent.js and legacy markup) ─────────── */
    --bg: var(--cream);
    --bg-card: var(--surface);
    --bg-card-2: var(--surface-2);
    --border: var(--hairline);
    --border-glow: var(--hairline-strong);
    --glow: rgba(23, 23, 28, .06);
    --text: var(--ink);
    --text-muted: var(--ink-muted);
    --text-faint: var(--ink-faint);
    --primary: var(--ink);
    --primary-mid: #3A3A44;
    --primary-light: var(--ink-muted);
    --btn-text: #FFFFFF;
    --nav-bg: var(--surface);
    --grad: linear-gradient(135deg, #17171C 0%, #3A3A44 100%);
    --grad-sub: linear-gradient(135deg, rgba(23, 19, 28, .05), rgba(23, 19, 28, .02));
    --divux-grad: linear-gradient(135deg, #F0502F 0%, #FF9A5C 100%);
    --streamsim-grad: linear-gradient(135deg, #7A3BEA 0%, #C55CF6 100%);
    --daywear-grad: linear-gradient(135deg, #E5A200 0%, #FFD166 100%);
    --icon-bg: var(--surface-2);
    --icon-rim: var(--hairline);
    --icon-rim-top: transparent;
    --icon-shadow: none;
    --shadow-card: var(--sh-sm);
    --shadow-card-hover: var(--sh);
    --shadow-cta: var(--sh-lg);
    --shadow-btn: var(--sh-sm);
  }

  /* ── Dark: a neutral grey ramp, not a plum one. The palette used to carry
     a violet cast through the canvas, surfaces, slab and muted text, which
     tinted every page and fought the warm accents (divux orange, daywear
     yellow). Neutral greys sit under all four brand hues equally.

     The section floods keep their role — alternating bands still separate —
     but they separate by lightness rather than hue, so a page reads as dark
     grey throughout instead of purple, teal, and rust. ─────────────────── */
  html.dark {
    --cream: #0E0E11;
    --surface: #18181C;
    --surface-2: #212127;

    --ink: #F6F6F8;
    --ink-muted: #A9A9B2;
    --ink-faint: #8B8B95;

    --lav: #1B1B20;
    --mint: #17191B;
    --peach: #1E1B19;
    --sky: #181A1F;
    --butter: #1D1C17;
    --blush: #1D181B;

    --divux: #FF7A5C;
    --divux-2: #FF9E86;
    --divux-deep: #C4442A;
    --divux-tint: 255, 122, 92;
    --divux-text: #FF9E86;
    --streamsim: #B18AFF;
    --streamsim-2: #CBB0FF;
    --streamsim-deep: #7A3BEA;
    --streamsim-tint: 177, 138, 255;
    --streamsim-text: #CBB0FF;
    --daywear: #FFC53D;
    --daywear-2: #FFD98A;
    --daywear-deep: #B37F00;
    --daywear-tint: 255, 197, 61;

    --accent-red: #F87171;
    --accent-orange: #FB923C;
    --accent-yellow: #FBBF24;
    --accent-green: #4ADE80;
    /* Already 8.54:1 on the dark canvas — no separate value needed. */
    --accent-green-text: #4ADE80;
    --status-live-text: #7BE8A6;
    --accent-blue: #7BA6FF;

    --tint: 255, 255, 255;
    --hairline: rgba(255, 255, 255, .10);
    --hairline-strong: rgba(255, 255, 255, .20);

    /* Lifted off the page so a dark slab still reads as a panel on a dark
       background, rather than dissolving into it. */
    --slab: #1F1F24;
    --slab-lift: #3C3C45;
    --on-slab: #FFFFFF;

    --sh-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 3px 8px rgba(0, 0, 0, .3);
    --sh: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .4);
    --sh-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 20px 48px rgba(0, 0, 0, .5);
    --sh-xl: 0 10px 20px rgba(0, 0, 0, .45), 0 36px 80px rgba(0, 0, 0, .6);

    --primary-mid: #E4E4E8;
    --btn-text: #0E0E11;
    --grad: linear-gradient(135deg, #F6F6F8 0%, #D2D2D8 100%);
  }

  html.dark .logo-full,
  html.dark .footer-logo img { filter: invert(1); }
}

@layer base {
  ut-nav, ut-footer { display: contents; }

  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    color-scheme: light;
    background: var(--cream);
  }
  html.dark { color-scheme: dark; }

  body {
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    /* The floating header sits above the page rather than in the flow. */
    padding-top: calc(var(--nav-h) + var(--nav-gap) * 2);
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--t-md);
    line-height: var(--lh-body);
    font-weight: 450;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  body > * { min-width: 0; width: 100%; max-width: 100%; }
  main { flex: 1; }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 800;
    letter-spacing: var(--tr-display);
    line-height: var(--lh-tight);
    text-wrap: balance;
  }

  p { margin: 0; text-wrap: pretty; }
  a { color: inherit; text-decoration: none; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  ul, ol { margin: 0; }
  button, input, textarea, select { font: inherit; color: inherit; margin: 0; }
  button { background: none; border: none; cursor: pointer; }
  hr { border: none; border-top: 1px solid var(--hairline); margin: var(--s-9) 0; }

  ::selection { background: var(--divux); color: #fff; }

  a:focus-visible, button:focus-visible, summary:focus-visible,
  [role="button"]:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }
  summary:focus:not(:focus-visible) { outline: none; }

  :target, [id] { scroll-margin-top: calc(var(--nav-h) + var(--s-9)); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer layout {
  .container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  main.site-content { padding-bottom: var(--s-16); }

  .cv-auto { content-visibility: auto; contain-intrinsic-size: auto 700px; }

  /* ── Sections are colour-flooded blocks ──────────────────────────────
     Each one owns a background and rounds into the next. This is the
     structural idea of the whole design. */
  .section {
    position: relative;
    padding-block: var(--s-16);
    background: var(--cream);
  }
  .section-bordered { border-top: none; }

  .sec-lav    { background: var(--lav); }
  .sec-mint   { background: var(--mint); }
  .sec-peach  { background: var(--peach); }
  .sec-sky    { background: var(--sky); }
  .sec-butter { background: var(--butter); }
  .sec-white  { background: var(--surface); }
  .sec-ink    { background: var(--slab); color: var(--on-slab); }
  .sec-ink .section-sub, .sec-ink .feat-desc, .sec-ink p { color: rgba(255,255,255,.72); }

  /* Big rounded shoulders where a flood begins or ends. */
  .sec-round      { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .sec-round-both { border-radius: var(--r-xl); }
  .sec-round-b    { border-radius: 0 0 var(--r-xl) var(--r-xl); }

  /* The container is unconstrained; the title and sub carry their own
     measures. Constraining the wrapper made 800-weight display type wrap at
     arbitrary points mid-phrase. */
  .section-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    margin-bottom: var(--s-10);
  }
  .section-head.center { align-items: center; text-align: center; }
  .section-head .section-title { max-width: 20ch; }
  .section-head .section-sub { max-width: 48ch; }
  .section-head.center .section-title,
  .section-head.center .section-sub { margin-inline: auto; }

  .section-title {
    font-size: var(--t-3xl);
    font-weight: 800;
    letter-spacing: var(--tr-display);
    line-height: var(--lh-display);
  }
  .section-sub {
    color: var(--ink-muted);
    font-size: var(--t-lg);
    line-height: var(--lh-snug);
    font-weight: 450;
  }

  /* Legacy hairline grid, restyled as gapped rounded cards. */
  .rule-grid { display: grid; gap: var(--s-5); }
  .rule-grid > * {
    background: var(--surface);
    border-radius: var(--r);
    padding: var(--s-7);
    box-shadow: var(--sh-sm);
  }
  .rule-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .rule-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .rule-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .rule { height: 1px; background: var(--hairline); border: none; margin: 0; transform-origin: left center; }

  /* ── Page header — a flooded band under the floating nav ───────────── */
  .page-header {
    margin-top: calc(-1 * (var(--nav-h) + var(--nav-gap) * 2));
    padding-top: calc(var(--nav-h) + var(--nav-gap) * 2 + var(--s-14));
    padding-bottom: var(--s-16);
    background: var(--lav);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    margin-bottom: var(--s-12);
    text-align: center;
  }
  .page-header .container { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
  .page-title {
    font-size: var(--t-4xl);
    font-weight: 800;
    letter-spacing: var(--tr-display);
    line-height: var(--lh-display);
  }
  .page-sub {
    color: var(--ink-muted);
    font-size: var(--t-lg);
    line-height: var(--lh-snug);
    max-width: 52ch;
  }

  @media (max-width: 900px) {
    .rule-grid-3, .rule-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .section { padding-block: var(--s-12); }
  }
  @media (max-width: 640px) {
    :root { --r-xl: 30px; }
    .rule-grid-2, .rule-grid-3, .rule-grid-4 { grid-template-columns: 1fr; }
    .section-head { margin-bottom: var(--s-8); }
    .page-header { padding-block: var(--s-10) var(--s-12); margin-bottom: var(--s-9); }
  }
}

@layer components {
  /* ═══ FLOATING HEADER ═══════════════════════════════════════════════════
     Detached from the top edge and constrained to the same max-width as the
     page content, so it reads as an object sitting on the page rather than a
     bar attached to the browser chrome. Solid surface — deliberately no
     backdrop-filter, which is what made the old nav repaint the whole
     viewport on every scroll frame. */

  nav, .nav {
    position: fixed;
    top: var(--nav-gap);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: min(calc(100% - var(--gutter) * 2), var(--content-max));
    height: var(--nav-h);
    background: var(--surface);
    border-radius: var(--r-pill);
    box-shadow: var(--sh);
  }
  /* The nav deepens once you scroll. Crossfading a second shadow layer's
     opacity keeps this on the compositor; transitioning box-shadow itself
     would repaint a fixed, full-width element mid-scroll — exactly the kind
     of work this design is trying to avoid on a low-end phone. */
  nav::before, .nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: var(--sh-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-inout);
  }
  nav.is-scrolled::before, .nav.is-scrolled::before { opacity: 1; }
  .nav-inner { position: relative; }

  .nav-inner {
    height: 100%;
    padding-inline: var(--s-6) var(--s-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
  }

  .logo { display: inline-flex; align-items: center; flex-shrink: 0; }
  .logo-full { height: 25px; width: auto; }

  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-links a {
    display: inline-flex;
    align-items: center;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    font-size: var(--t-base);
    font-weight: 600;
    color: var(--ink-muted);
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  .nav-links a:hover { color: var(--ink); background: var(--surface-2); }
  .nav-links a.active { color: var(--ink); background: var(--surface-2); }

  .nav-right { display: flex; align-items: center; gap: var(--s-2); }

  /* Chunky "key" button — the offset shadow is the 3D cue. */
  .btn-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    height: 44px;
    padding-inline: var(--s-6);
    border-radius: var(--r-pill);
    background: var(--slab);
    color: var(--on-slab);
    font-size: var(--t-base);
    font-weight: 700;
    letter-spacing: var(--tr-tight);
    white-space: nowrap;
    box-shadow: 0 4px 0 var(--slab-lift);
    transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .btn-nav:hover { filter: brightness(1.12); }
  .btn-nav:active { transform: translateY(4px); box-shadow: 0 0 0 var(--slab-lift); filter: none; }

  .theme-toggle, .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease-pop), background-color var(--dur-fast) var(--ease);
  }
  .theme-toggle:hover, .nav-toggle:hover { transform: scale(1.08) rotate(-8deg); }
  .theme-toggle svg, .nav-toggle svg { width: 18px; height: 18px; pointer-events: none; }
  .nav-toggle { display: none; }

  /* ── Mobile menu — a floating card under the nav pill ─────────────── */
  .mobile-menu {
    position: fixed;
    top: calc(var(--nav-gap) + var(--nav-h) + var(--s-2));
    left: 50%;
    transform: translateX(-50%) translateY(-10px) scale(.97);
    transform-origin: top center;
    z-index: 99;
    width: min(calc(100% - var(--gutter) * 2), var(--content-max));
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
    padding: var(--s-4);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--dur) var(--ease-pop),
                opacity var(--dur) var(--ease),
                visibility var(--dur);
  }
  .mobile-menu.open { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; visibility: visible; }
  .mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: 0; }
  .mobile-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-sm);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--ink);
    transition: background-color var(--dur-fast) var(--ease);
  }
  .mobile-menu a:hover, .mobile-menu a.active { background: var(--surface-2); }
  .mobile-menu a svg { width: 18px; height: 18px; opacity: .45; }

  .nav-cta { display: inline-flex; }

  @media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-toggle { display: inline-flex; }
    .nav-inner { padding-inline: var(--s-5) var(--s-3); }
  }
  /* Below ~640px the pill can't hold the CTA and the hamburger together. */
  @media (max-width: 640px) {
    .nav-cta { display: none; }
    :root { --nav-h: 60px; --nav-gap: 12px; }
    .logo-full { height: 22px; }
  }

  /* ═══ BUTTONS ═══════════════════════════════════════════════════════════ */

  .btn, .btn-primary, .btn-ghost, .btn-submit, .app-btn,
  .store-btn, .load-more-btn, .btn-google, .btn-signin, .resend-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    min-height: 54px;
    padding: var(--s-3) var(--s-8);
    border-radius: var(--r-pill);
    border: none;
    font-family: var(--font);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: var(--tr-tight);
    text-align: center;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease);
  }

  /* Primary carries a chunky offset "ledge" shadow, like a keycap. Lifting it
     further on hover only widened the gap above that ledge and read as
     broken — a keycap should press DOWN into its base, not float further
     away from it. Hover now just brightens; press is the only thing that
     moves, and it moves down exactly far enough to sit flush on the ledge. */
  .btn-primary, .btn-submit, .store-btn, .app-btn-primary {
    background: var(--slab);
    color: var(--on-slab);
    box-shadow: 0 5px 0 var(--slab-lift);
    transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
  }
  .btn-primary:hover, .btn-submit:hover, .store-btn:hover, .app-btn-primary:hover {
    filter: brightness(1.12);
  }
  .btn-primary:active, .btn-submit:active, .store-btn:active, .app-btn-primary:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 var(--slab-lift);
    filter: none;
  }

  .btn-ghost, .app-btn-ghost, .store-btn-ghost, .store-btn-light,
  .load-more-btn, .btn-google, .btn-signin, .resend-btn {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--sh-sm);
  }
  .btn-ghost:hover, .app-btn-ghost:hover, .store-btn-ghost:hover, .store-btn-light:hover,
  .load-more-btn:hover, .btn-google:hover, .btn-signin:hover, .resend-btn:hover {
    transform: translateY(-3px);
  }

  .btn:disabled, .btn-submit:disabled, .btn-primary:disabled, .app-btn:disabled {
    opacity: .45; cursor: not-allowed; transform: none;
  }
  .btn-block { width: 100%; }
  .store-btn svg, .btn svg, .app-btn svg, .btn-primary svg, .btn-ghost svg {
    width: 19px; height: 19px; flex-shrink: 0;
  }

  .link-btn, .link-btn-inline, .forgot-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--ink);
    font-weight: 700;
    font-size: var(--t-md);
    cursor: pointer;
    border-bottom: 2px solid var(--divux);
    padding-bottom: 1px;
    transition: color var(--dur-fast) var(--ease);
  }
  .link-btn:hover, .link-btn-inline:hover, .forgot-link:hover { color: var(--divux); }
  .link-btn svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
  .link-btn:hover svg { transform: translateX(4px); }

  /* ═══ EYEBROW — a soft pill, no longer monospace ═════════════════════════ */

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--sh-sm);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    color: var(--ink-muted);
  }
  .eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--divux);
  }

  .section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--surface-2);
    font-size: var(--t-sm);
    font-weight: 800;
    color: var(--ink-muted);
    margin-bottom: var(--s-5);
  }

  .mono, .doc-meta, .app-id-meta {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink-faint);
  }
  /* Sits inside a button — inherit the button's own colour. */
  .btn-label { font-size: inherit; font-weight: inherit; color: inherit; }

  /* ═══ BADGES / TAGS ═════════════════════════════════════════════════════ */

  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--sh-sm);
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--ink);
  }
  .badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-green); flex-shrink: 0;
  }
  .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }

  .tag, .blog-tag, .article-tag, .blog-featured-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    white-space: nowrap;
    color: var(--ink-muted);
  }
  .tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    font-size: var(--t-2xs);
    font-weight: 700;
    white-space: nowrap;
  }
  .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
  .status-live { background: rgba(18, 161, 80, .16); color: var(--status-live-text, #0A6B34); }
  .status-soon { background: var(--surface-2); color: var(--ink-muted); }

  /* ═══ APP CARDS — chunky, colour-filled, liftable ════════════════════════ */

  .app-card, .app-card-static {
    --accent: var(--card-accent, var(--ink));
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform var(--dur) var(--ease-pop);
  }
  /* Depth crossfade: a second shadow layer fading in is compositor-only,
     where transitioning box-shadow itself would repaint. */
  .app-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: var(--sh-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  .app-card[data-href] { cursor: pointer; }
  .app-card[data-href]:hover { transform: translateY(-8px); }
  .app-card[data-href]:hover::after { opacity: 1; }

  /* Colour-washed head panel carrying the icon. */
  .app-card-body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-7); flex: 1; }
  .app-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin: calc(var(--s-7) * -1) calc(var(--s-7) * -1) var(--s-2);
    padding: var(--s-7);
    background: linear-gradient(160deg, rgba(var(--card-accent-rgb, var(--tint)), .16), rgba(var(--card-accent-rgb, var(--tint)), .04));
  }
  /* The inset ring keeps light app artwork (DayWear's is near-white) from
     disappearing into the tile. */
  .app-icon {
    width: 68px; height: 68px;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--sh), inset 0 0 0 1px var(--hairline);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    transform: rotate(-4deg);
    transition: transform var(--dur) var(--ease-pop);
  }
  .app-card:hover .app-icon { transform: rotate(4deg) scale(1.05); }
  .app-icon img { width: 100%; height: 100%; object-fit: cover; }

  .app-name { font-size: var(--t-xl); font-weight: 800; letter-spacing: var(--tr-display); }
  .app-tagline { color: var(--ink-muted); font-size: var(--t-base); line-height: var(--lh-snug); flex: 1; }

  .app-card-footer { padding: 0 var(--s-7) var(--s-7); margin-top: auto; }
  .app-card-footer-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
  .app-card-footer-row .app-btn {
    flex: 1; min-width: 130px; min-height: 46px;
    font-size: var(--t-base); white-space: nowrap; padding-inline: var(--s-5);
  }
  /* The on-site action carries more weight than the store shortcut, so the
     pair reads as a hierarchy rather than as two equal, unrelated choices. */
  .app-card-footer-row .app-btn-lead { flex: 1.6; }

  .apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-6); }
  a.app-link { color: inherit; font-weight: inherit; text-decoration: none; }

  .app-card-soon {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: var(--s-3); min-height: 280px;
    padding: var(--s-9) var(--s-7);
    border: 2px dashed var(--hairline-strong);
    border-radius: var(--r-lg);
  }
  .soon-title { font-size: var(--t-md); font-weight: 700; color: var(--ink-muted); }
  .soon-sub { font-size: var(--t-sm); color: var(--ink-faint); }

  .app-id { display: flex; align-items: center; gap: var(--s-4); }
  .app-id-icon {
    width: 62px; height: 62px; border-radius: 18px; overflow: hidden;
    flex-shrink: 0; box-shadow: var(--sh); transform: rotate(-4deg);
  }
  .app-id-icon img { width: 100%; height: 100%; object-fit: cover; }
  .app-id-name { font-size: var(--t-xl); font-weight: 800; letter-spacing: var(--tr-display); }

  /* ═══ HERO — centred, with a fanned device cluster ═══════════════════════ */

  .hero {
    position: relative;
    margin-top: calc(-1 * (var(--nav-h) + var(--nav-gap) * 2));
    padding-top: calc(var(--nav-h) + var(--nav-gap) * 2 + var(--s-10));
    background: var(--lav);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    overflow: hidden;
    text-align: center;
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-5);
  }
  .hero-title {
    font-size: var(--t-5xl);
    font-weight: 800;
    letter-spacing: var(--tr-display);
    line-height: var(--lh-display);
    max-width: 15ch;
  }
  .hero-sub {
    color: var(--ink-muted);
    font-size: var(--t-lg);
    line-height: var(--lh-snug);
    max-width: 46ch;
    font-weight: 450;
  }
  .hero-actions { display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center; margin-top: var(--s-2); }
  .hero-note { color: var(--ink-faint); font-size: var(--t-sm); font-weight: 600; }

  /* ── The device cluster: three phones, fanned, with real depth ─────── */
  .phone-wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: calc(var(--s-6) * -1);
    margin-top: var(--s-7);
    padding-bottom: 0;
    width: 100%;
  }
  /* Devices are clipped by their own frame rather than by the section, so
     the cluster reads as three phones rising out of the flood instead of
     three phones sliced in half by it. */
  .phone {
    position: relative;
    width: 250px;
    max-height: 400px;
    flex-shrink: 0;
    /* Flat bottom on purpose: these screenshots are meant to bleed off the
       bottom edge like a cropped photo, not curve back inward. */
    border-radius: var(--r-device) var(--r-device) 0 0;
    padding: 5px 5px 0;
    background: var(--slab);
    box-shadow: var(--sh-xl);
    overflow: hidden;
    z-index: 2;
  }
  .phone img, .phone-screen {
    width: 100%; height: auto; display: block;
    border-radius: calc(var(--r-device) - 5px) calc(var(--r-device) - 5px) 0 0;
  }

  /* Side phones sit behind, rotated and dropped. Named classes rather than
     :first-child/:last-child — the actual last child of .phone-wrap is
     .chip-row, so :last-child never matched the right-hand phone and it
     rendered with no tilt at all. */
  .phone-side {
    width: 210px;
    max-height: 330px;
    z-index: 1;
  }
  .phone-side-left  { transform: rotate(-9deg) translate(34px, 26px);  transform-origin: bottom right; }
  .phone-side-right { transform: rotate(9deg)  translate(-34px, 26px); transform-origin: bottom left; }

  /* Floating metric chips. */
  .chip {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: var(--sh-lg);
    white-space: nowrap;
    text-align: left;
  }
  .chip-lbl { font-size: var(--t-2xs); font-weight: 700; color: var(--ink-faint); letter-spacing: var(--tr-wide); }
  .chip-val { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--tr-tight); }
  .chip-val svg { width: 18px; height: 18px; color: var(--accent); }
  /* Chips are anchored to the centre of the device cluster, not to the edges
     of the section. Percentage offsets from the edge look fine at 1280px and
     then fling the chips into the far corners of a 1900px monitor, where they
     read as unrelated floating debris instead of labels on the phones. The
     cluster is a fixed ~600px wide, so the offsets are fixed too. */
  /* The device cluster spans +/-346px from centre and the wrap reaches +/-566,
     so the chips have real margin to sit in. They are pushed out to clip the
     outer edge of a side phone by roughly 25px — enough to read as pinned to
     the hardware, not so much that they cover the screenshot underneath. */
  .chip-a { top: 12%;    left: 50%; transform: translateX(-452px) rotate(-5deg); --accent: var(--divux); }
  .chip-b { top: 30%;    left: 50%; transform: translateX(321px)  rotate(4deg);  --accent: var(--accent-blue); }
  .chip-c { bottom: 16%; left: 50%; transform: translateX(-438px) rotate(3deg);  --accent: var(--accent-green); }
  .chip-row { display: contents; }

  /* The margin runs out before the cluster does, so step the chips back in
     rather than letting them push past the content edge. Only a small step:
     at 1000px the wrap still reaches +/-476, which clears these by ~17px. */
  @media (max-width: 1120px) {
    .chip-a { transform: translateX(-445px) rotate(-5deg); }
    .chip-b { transform: translateX(312px)  rotate(4deg); }
    .chip-c { transform: translateX(-430px) rotate(3deg); }
  }

  /* Below 1000px the side phones drop out and the cluster narrows to a single
     250px device, so the chips have to come in with it. */
  @media (max-width: 1000px) {
    .phone-side { display: none; }
    .chip-a { transform: translateX(-255px) rotate(-5deg); }
    .chip-b { transform: translateX(115px)  rotate(4deg); }
    .chip-c { transform: translateX(-235px) rotate(3deg); }
  }
  @media (max-width: 720px) {
    .hero { padding-block: var(--s-10) 0; }
    .phone-wrap { flex-direction: column; align-items: center; gap: var(--s-5); margin-top: var(--s-8); }
    .phone { width: min(230px, 68vw); }
    .chip-row { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
    .chip { position: static; transform: none; box-shadow: var(--sh); }
  }

  /* ═══ STATS — chunky pills, not a hairline row ═══════════════════════════ */

  .stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--s-4);
  }
  .stat-card {
    background: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    padding: var(--s-7) var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    text-align: center;
    align-items: center;
  }
  .stat-num { font-size: var(--t-2xl); font-weight: 800; letter-spacing: var(--tr-display); line-height: 1; }
  .stat-lbl { font-size: var(--t-sm); font-weight: 600; color: var(--ink-muted); }

  /* ═══ FEATURE CARDS — colour-tinted, big icon chips ══════════════════════ */

  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
  }
  .feat-card {
    position: relative;
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: var(--s-8) var(--s-7);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    box-shadow: var(--sh-sm);
    transition: transform var(--dur) var(--ease-pop);
  }
  .feat-card:hover { transform: translateY(-6px); }
  .feat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 18px;
    background: var(--chip, var(--lav));
    color: var(--ink);
    margin-bottom: var(--s-4);
    transform: rotate(-5deg);
    transition: transform var(--dur) var(--ease-pop);
  }
  .feat-card:hover .feat-icon { transform: rotate(5deg) scale(1.08); }
  .feat-icon svg { width: 26px; height: 26px; }
  .feat-name { font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--tr-tight); }
  .feat-desc { color: var(--ink-muted); font-size: var(--t-base); line-height: var(--lh-snug); }

  /* Rotating chip colours so a grid never reads as one flat block. */
  .feat-card:nth-child(6n+1) .feat-icon { --chip: var(--peach); }
  .feat-card:nth-child(6n+2) .feat-icon { --chip: var(--mint); }
  .feat-card:nth-child(6n+3) .feat-icon { --chip: var(--sky); }
  .feat-card:nth-child(6n+4) .feat-icon { --chip: var(--butter); }
  .feat-card:nth-child(6n+5) .feat-icon { --chip: var(--blush); }
  .feat-card:nth-child(6n+6) .feat-icon { --chip: var(--lav); }

  @media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } }

  /* ═══ GENERIC CARDS ═════════════════════════════════════════════════════ */

  .card, .mini-card, .contact-card, .intro-box, .aud-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    box-shadow: var(--sh-sm);
  }
  .card-icon, .mini-icon, .aud-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 16px;
    background: var(--chip, var(--lav));
    color: var(--ink);
    margin-bottom: var(--s-5);
    transform: rotate(-5deg);
  }
  .card-icon svg, .mini-icon svg, .aud-icon svg, .feat-icon svg { width: 24px; height: 24px; }
  .mini-card:nth-child(3n+1) .mini-icon, .aud-card:nth-child(3n+1) .aud-icon { --chip: var(--peach); }
  .mini-card:nth-child(3n+2) .mini-icon, .aud-card:nth-child(3n+2) .aud-icon { --chip: var(--mint); }
  .mini-card:nth-child(3n+3) .mini-icon, .aud-card:nth-child(3n+3) .aud-icon { --chip: var(--sky); }

  .card-title, .mini-title, .aud-title { font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--tr-tight); }
  .card-sub, .mini-desc, .aud-desc {
    color: var(--ink-muted); font-size: var(--t-base);
    line-height: var(--lh-snug); margin-top: var(--s-2);
  }
  .mini-grid, .audience-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s-5);
  }

  .callout {
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--sh-sm);
    border-left: 5px solid var(--hairline-strong);
    padding: var(--s-6) var(--s-7);
    color: var(--ink-muted);
    font-size: var(--t-base);
    line-height: var(--lh-snug);
  }
  .callout-green { border-left-color: var(--accent-green); }
  .callout-info  { border-left-color: var(--accent-blue); }
  .callout-warn  { border-left-color: var(--accent-orange); }

  /* ═══ CTA — a full colour-flooded block ═════════════════════════════════ */

  .cta-wrap { padding-block: var(--s-12) var(--s-16); }
  .cta-box {
    position: relative;
    max-width: var(--content-max);
    margin-inline: auto;
    border-radius: var(--r-xl);
    background: var(--slab);
    color: var(--on-slab);
    padding: var(--s-16) var(--s-8);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-5);
    overflow: hidden;
    box-shadow: var(--sh-xl);
  }
  /* Soft colour bloom in the corner — a gradient, not a blur filter.
     Held back from the original .38/.40: those were tuned against a plum
     slab that already carried the hue, so on a neutral slab the same values
     read as two coloured corners rather than a warm-to-cool drift. */
  .cta-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 80% at 12% 0%, rgba(240, 80, 47, .26), transparent 62%),
      radial-gradient(ellipse 60% 80% at 88% 100%, rgba(122, 59, 234, .22), transparent 62%);
    pointer-events: none;
  }
  .cta-box > * { position: relative; }
  .cta-title { font-size: var(--t-4xl); font-weight: 800; letter-spacing: var(--tr-display); line-height: var(--lh-display); color: #fff; }
  .cta-sub { color: rgba(255, 255, 255, .74); font-size: var(--t-lg); line-height: var(--lh-snug); max-width: 44ch; }
  .cta-btns { display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center; margin-top: var(--s-3); }
  /* On the dark slab the button inverts: white fill, slab-coloured label.
     --slab rather than --ink, because --ink is light in dark mode and the
     label would vanish into the button. */
  .cta-box .store-btn {
    background: #fff;
    color: var(--slab);
    box-shadow: 0 5px 0 rgba(0, 0, 0, .35);
  }
  .cta-box .store-btn-ghost {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: none;
  }

  @media (max-width: 640px) {
    .cta-box { padding: var(--s-12) var(--s-6); }
    .cta-btns { width: 100%; flex-direction: column; }
    .cta-btns > * { width: 100%; }
  }

  /* ═══ FOOTER — a dark rounded slab ══════════════════════════════════════ */

  footer { padding: 0 var(--gutter) var(--s-6); border: none; }
  .footer-inner, .footer-minimal {
    max-width: var(--content-max);
    margin-inline: auto;
    background: var(--slab);
    color: var(--on-slab);
    border-radius: var(--r-xl);
    /* Symmetric block padding. This was 72px top against 40px bottom, which
       sat the content visibly high in the slab. 56px both ends keeps the
       footer exactly as tall as it was (72+40 = 56+56) and centres it. */
    padding: var(--s-10) var(--s-9);
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--s-8);
    padding-bottom: var(--s-10);
  }
  .footer-logo { display: inline-flex; align-items: center; }
  .footer-logo img { height: 26px; width: auto; filter: invert(1); }
  html.dark .footer-logo img { filter: invert(1); }
  .footer-desc { margin-top: var(--s-5); color: rgba(255, 255, 255, .62); font-size: var(--t-base); line-height: var(--lh-snug); max-width: 32ch; }
  .footer-col-title { font-size: var(--t-sm); font-weight: 700; color: rgba(255, 255, 255, .66); margin-bottom: var(--s-4); letter-spacing: var(--tr-wide); }
  .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
  .footer-links a, .footer-links-row a {
    color: rgba(255, 255, 255, .78);
    font-size: var(--t-base);
    font-weight: 600;
    transition: color var(--dur-fast) var(--ease);
  }
  .footer-links a:hover, .footer-links-row a:hover { color: #fff; }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--s-4);
    padding-top: var(--s-6);
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  /* The compact footer's first row: no rule above it, matching padding
     below so the divider sits exactly midway between the two rows. */
  .footer-row-top { border-top: none; padding-top: 0; padding-bottom: var(--s-6); }
  .footer-links-row { display: flex; gap: var(--s-6); flex-wrap: wrap; align-items: center; }
  .footer-copy, .sep, .footer-sep { font-size: var(--t-sm); font-weight: 600; color: rgba(255, 255, 255, .68); }
  .sep, .footer-sep { opacity: .5; margin-inline: var(--s-2); }
  .footer-minimal {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: var(--s-1); text-align: center;
    padding: var(--s-8) var(--s-6);
  }
  .footer-minimal a { color: rgba(255, 255, 255, .78); font-size: var(--t-sm); font-weight: 600; }
  .footer-minimal a:hover { color: #fff; }

  @media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
  @media (max-width: 560px) {
    .footer-top { grid-template-columns: 1fr; }
    .footer-inner { padding: var(--s-9) var(--s-6) var(--s-6); }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }

  /* ═══ FILTERS ═══════════════════════════════════════════════════════════ */

  .filter-row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
  .section > .filter-row { justify-content: center; margin-bottom: var(--s-7); }
  /* A section that opens directly with a filter row (apps.html) doesn't
     need the full section rhythm above it — that gap was the "too much
     space above the pills" the stats row butted into. */
  .section-flush-top { padding-top: var(--s-7); }
  .filter-row-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filter-row-scroll::-webkit-scrollbar { display: none; }
  .filter-row-scroll .filter-btn { flex-shrink: 0; }

  .filter-btn {
    min-height: 44px;
    padding: var(--s-2) var(--s-6);
    border: none;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--sh-sm);
    color: var(--ink-muted);
    font-family: var(--font);
    font-size: var(--t-base);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  .filter-btn:hover { transform: translateY(-2px); color: var(--ink); }
  .filter-btn.active { background: var(--slab); color: var(--on-slab); }

  /* ═══ SEARCH ════════════════════════════════════════════════════════════ */

  .blog-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-5); flex-wrap: wrap; padding-block: var(--s-8);
  }
  .search-wrap { position: relative; display: flex; align-items: center; min-width: 240px; flex: 1; max-width: 380px; }
  .search-wrap svg { position: absolute; left: var(--s-5); width: 18px; height: 18px; color: var(--ink-faint); pointer-events: none; }
  .search-input {
    width: 100%; min-height: 52px;
    padding: var(--s-3) var(--s-5) var(--s-3) var(--s-10);
    border: none; border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--sh-sm);
    color: var(--ink);
    font-family: var(--font); font-size: var(--t-md); font-weight: 500;
    transition: box-shadow var(--dur-fast) var(--ease);
  }
  .search-input::placeholder { color: var(--ink-faint); }
  .search-input:focus { outline: none; box-shadow: var(--sh), 0 0 0 3px var(--ink); }

  /* ═══ BLOG CARDS ════════════════════════════════════════════════════════ */

  .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-6); padding-block: var(--s-6) var(--s-10); }

  .blog-card {
    --accent: var(--ink);
    --accent-tint: var(--tint);
    position: relative;
    display: flex; flex-direction: column;
    border-radius: var(--r-lg);
    background: var(--surface);
    color: inherit;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--sh-sm);
    transition: transform var(--dur) var(--ease-pop);
  }
  .blog-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: var(--sh-lg); opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  .blog-card:hover { transform: translateY(-8px); }
  .blog-card:hover::after { opacity: 1; }

  .blog-cover {
    position: relative;
    aspect-ratio: 16 / 10;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--s-6);
    overflow: hidden; flex-shrink: 0;
    background: linear-gradient(155deg, rgba(var(--accent-tint), .30), rgba(var(--accent-tint), .10));
  }
  /* Soft geometric bloom — pure gradient, costs nothing to paint. */
  .blog-cover::after {
    content: '';
    position: absolute;
    top: -30%; right: -18%;
    width: 68%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-tint), .55), transparent 68%);
    pointer-events: none;
  }
  .blog-cover-divux     { --accent: var(--divux);     --accent-text: var(--divux-text);     --accent-tint: var(--divux-tint); }
  .blog-cover-streamsim { --accent: var(--streamsim); --accent-text: var(--streamsim-text); --accent-tint: var(--streamsim-tint); }

  .blog-cover-label {
    position: relative; z-index: 1;
    align-self: flex-start;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--sh-sm);
    font-size: var(--t-2xs); font-weight: 700; color: var(--accent-text, var(--accent));
  }
  .blog-cover-badges { position: absolute; top: var(--s-4); left: var(--s-5); z-index: 2; }

  .blog-card-body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-7) var(--s-7); flex: 1; }
  .blog-card-title { font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--tr-tight); line-height: var(--lh-tight); }
  .blog-card-excerpt {
    color: var(--ink-muted); font-size: var(--t-base); line-height: var(--lh-snug); flex: 1;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .blog-card-meta {
    display: flex; align-items: center; gap: var(--s-2);
    font-size: var(--t-sm); font-weight: 600; color: var(--ink-faint); margin-top: auto;
  }
  .blog-featured-tag { background: var(--slab); color: var(--on-slab); }

  .blog-hero { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); padding-block: var(--s-6); }
  .blog-hero-card .blog-cover { aspect-ratio: 2 / 1; }
  .blog-hero-card .blog-card-title { font-size: var(--t-2xl); }
  .blog-hero-card .blog-card-excerpt { -webkit-line-clamp: 2; }

  .blog-empty { padding: var(--s-16) 0; text-align: center; color: var(--ink-muted); }
  .load-more-wrap { display: flex; justify-content: center; padding-block: var(--s-4) var(--s-16); }

  @media (max-width: 800px) { .blog-hero { grid-template-columns: 1fr; } }

  /* ═══ ARTICLE ═══════════════════════════════════════════════════════════ */

  .article-wrap { max-width: var(--article-max); margin-inline: auto; padding: var(--s-10) var(--gutter) var(--s-16); }

  .breadcrumb {
    display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
    font-size: var(--t-sm); font-weight: 600; color: var(--ink-faint); margin-bottom: var(--s-7);
  }
  .breadcrumb a { color: var(--ink-faint); transition: color var(--dur-fast) var(--ease); }
  .breadcrumb a:hover { color: var(--ink); }

  .article-tag { margin-bottom: var(--s-5); }
  .article-tag-divux     { background: rgba(var(--divux-tint), .16);     color: var(--divux-text); }
  .article-tag-streamsim { background: rgba(var(--streamsim-tint), .16); color: var(--streamsim-text); }

  .article-title { font-size: var(--t-3xl); font-weight: 800; letter-spacing: var(--tr-display); line-height: var(--lh-tight); margin-bottom: var(--s-5); }
  .article-dek { font-size: var(--t-lg); line-height: var(--lh-snug); color: var(--ink-muted); margin-bottom: var(--s-6); }
  .article-meta { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); font-weight: 600; color: var(--ink-faint); padding-bottom: var(--s-7); }

  .article-cover {
    --accent: var(--ink); --accent-tint: var(--tint);
    position: relative; aspect-ratio: 21 / 9;
    margin-block: 0 var(--s-9);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--s-7);
    font-size: 0;
    background: linear-gradient(155deg, rgba(var(--accent-tint), .30), rgba(var(--accent-tint), .10));
    box-shadow: var(--sh-sm);
  }
  .article-cover::after {
    content: ''; position: absolute; top: -40%; right: -12%;
    width: 52%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-tint), .5), transparent 68%);
  }
  .article-cover-divux     { --accent: var(--divux);     --accent-text: var(--divux-text);     --accent-tint: var(--divux-tint); }
  .article-cover-streamsim { --accent: var(--streamsim); --accent-text: var(--streamsim-text); --accent-tint: var(--streamsim-tint); }
  .article-cover-label {
    position: relative; z-index: 1; align-self: flex-start;
    padding: var(--s-2) var(--s-5); border-radius: var(--r-pill);
    background: var(--surface); box-shadow: var(--sh-sm);
    font-size: var(--t-sm); font-weight: 700; color: var(--accent-text, var(--accent));
  }
  .article-cover-index {
    position: absolute; top: var(--s-6); right: var(--s-7); z-index: 1;
    font-size: var(--t-sm); font-weight: 700; color: var(--ink-muted);
  }

  .article-body { font-size: var(--t-md); line-height: var(--lh-relaxed); color: var(--ink-muted); }
  .article-body p { margin-bottom: var(--s-6); }
  .article-body strong { color: var(--ink); font-weight: 700; }
  .article-body h2 {
    color: var(--ink); font-size: var(--t-2xl); font-weight: 800;
    letter-spacing: var(--tr-display); margin: var(--s-12) 0 var(--s-5);
  }
  .article-body h3 { color: var(--ink); font-size: var(--t-xl); font-weight: 800; letter-spacing: var(--tr-tight); margin: var(--s-9) 0 var(--s-4); }
  .article-body ul, .article-body ol { padding-left: var(--s-6); margin-bottom: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
  .article-body li::marker { color: var(--divux); }
  .article-body blockquote {
    margin: var(--s-8) 0; padding: var(--s-6) var(--s-7);
    border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-sm);
    border-left: 5px solid var(--divux);
    font-size: var(--t-lg); line-height: var(--lh-snug);
  }
  .article-body code {
    font-family: var(--font-mono); font-size: .86em;
    background: var(--surface-2); border-radius: var(--r-xs); padding: .14em .42em;
  }
  .article-body table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-6); font-size: var(--t-base); }
  .article-body th, .article-body td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hairline); }
  .article-body th { color: var(--ink); font-weight: 700; }
  .article-body a {
    color: var(--ink); font-weight: 700;
    border-bottom: 2px solid var(--divux);
    transition: color var(--dur-fast) var(--ease);
  }
  .article-body a:hover { color: var(--divux); }
  .article-body a.app-link, .article-body .store-btn { border-bottom: none; }

  .article-cta-wrap { margin-top: var(--s-12); padding-inline: 0; }
  .cta-box.article-cta { --accent: var(--ink); max-width: var(--article-max); padding: var(--s-12) var(--s-8); }
  .cta-box.article-cta .cta-title { font-size: var(--t-2xl); }
  .cta-box.article-cta-divux::before {
    background: radial-gradient(ellipse 70% 90% at 15% 0%, rgba(240, 80, 47, .55), transparent 65%);
  }
  .cta-box.article-cta-streamsim::before {
    background: radial-gradient(ellipse 70% 90% at 15% 0%, rgba(122, 59, 234, .55), transparent 65%);
  }

  /* ═══ FAQ ═══════════════════════════════════════════════════════════════ */

  .faq-list { display: flex; flex-direction: column; gap: var(--s-3); }
  .container > .faq-list { max-width: 780px; margin-inline: auto; }
  .faq-item {
    background: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    padding-inline: var(--s-7);
  }
  .faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
    padding: var(--s-6) 0; list-style: none; cursor: pointer;
    color: var(--ink); font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--tr-tight);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: '';
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--surface-2);
    background-image:
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor);
    background-size: 12px 2px, 2px 12px;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    transition: transform var(--dur) var(--ease-pop);
  }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-item p { color: var(--ink-muted); line-height: var(--lh-body); padding-bottom: var(--s-6); margin: 0; max-width: 68ch; }
  .faq-body { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-inout); }
  .faq-body-inner { min-height: 0; }
  .faq-item[open] .faq-body { grid-template-rows: 1fr; }

  /* ═══ FORMS ═════════════════════════════════════════════════════════════ */

  .field, .field-wrap { display: flex; flex-direction: column; gap: var(--s-2); }
  .field-row, .name-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .field label, .field-row-label, .field > span:first-child {
    font-size: var(--t-sm); font-weight: 700; color: var(--ink);
  }
  .field input, .field textarea, .field select, .select-wrap select {
    width: 100%; min-height: 54px;
    padding: var(--s-3) var(--s-5);
    border: 2px solid transparent; border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink); font-family: var(--font); font-size: var(--t-md);
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  .field textarea { min-height: 140px; resize: vertical; line-height: var(--lh-snug); padding-top: var(--s-4); }
  .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
  .field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--ink); background: var(--surface);
  }
  .field input[aria-invalid="true"] { border-color: var(--accent-red); }

  .field-msg { display: none; font-size: var(--t-sm); font-weight: 600; color: var(--accent-red); }
  .field-msg.show { display: block; }
  .field-error, .err { font-size: var(--t-sm); font-weight: 600; color: var(--accent-red); }

  .select-wrap { position: relative; }
  .checkbox-row, .switch-line {
    display: flex; align-items: flex-start; gap: var(--s-3);
    font-size: var(--t-base); color: var(--ink-muted); line-height: var(--lh-snug);
  }
  .checkbox-row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--divux); flex-shrink: 0; }

  .toggle-pw {
    position: absolute; right: var(--s-4); bottom: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    color: var(--ink-faint);
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  .toggle-pw:hover { color: var(--ink); background: var(--surface); }

  .or-divider { display: flex; align-items: center; gap: var(--s-4); color: var(--ink-faint); font-size: var(--t-sm); font-weight: 600; }
  .or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

  .strength-wrap { display: flex; flex-direction: column; gap: var(--s-2); }
  .strength-bars { display: flex; gap: var(--s-1); }
  .s-seg { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--surface-2); transition: background-color var(--dur-fast) var(--ease); }
  .strength-text { font-size: var(--t-sm); font-weight: 600; color: var(--ink-muted); }
  .req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-sm); color: var(--ink-muted); }
  .req-item { display: flex; align-items: center; gap: var(--s-2); }
  .req-item.unmet { color: var(--ink-faint); }

  .file-input-wrap { position: relative; }
  .file-input-label {
    display: flex; align-items: center; gap: var(--s-3);
    min-height: 54px; padding: var(--s-3) var(--s-5);
    border: 2px dashed var(--hairline-strong); border-radius: var(--r-sm);
    color: var(--ink-muted); font-size: var(--t-base); font-weight: 600; cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .file-input-label:hover { border-color: var(--ink); color: var(--ink); }
  .file-preview { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); color: var(--ink-muted); }
  .file-preview-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .file-preview-remove { color: var(--accent-red); font-size: var(--t-sm); font-weight: 700; }

  /* ═══ ALERTS / STATES ═══════════════════════════════════════════════════ */

  .alert {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-5) var(--s-6); border-radius: var(--r);
    background: var(--surface-2); font-size: var(--t-base); line-height: var(--lh-snug); color: var(--ink-muted);
  }
  .alert-error { background: rgba(220, 38, 38, .10); color: var(--accent-red); font-weight: 600; }

  .toast {
    position: fixed; left: 50%; bottom: var(--s-8); z-index: 300;
    transform: translateX(-50%) translateY(10px);
    padding: var(--s-4) var(--s-7); border-radius: var(--r-pill);
    background: var(--slab); color: var(--on-slab); font-size: var(--t-base); font-weight: 600;
    box-shadow: var(--sh-lg); opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-pop), visibility var(--dur);
  }
  .toast.is-visible, .toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .toast-ok { background: var(--accent-green); }
  .toast-err { background: var(--accent-red); }

  .spinner, .verify-spinner, .spin {
    width: 18px; height: 18px;
    border: 3px solid rgba(255, 255, 255, .35); border-top-color: currentColor;
    border-radius: 50%; animation: ut-spin .7s linear infinite; flex-shrink: 0;
  }
  @keyframes ut-spin { to { transform: rotate(360deg); } }

  .success-icon-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(18, 161, 80, .14); color: var(--accent-green); margin-bottom: var(--s-5);
  }
  .success-icon { width: 28px; height: 28px; }
  .success-title, .verify-title { font-size: var(--t-2xl); font-weight: 800; letter-spacing: var(--tr-display); }
  .success-sub, .verify-sub { color: var(--ink-muted); line-height: var(--lh-snug); margin-top: var(--s-3); }
  .success-email, .token-email { font-weight: 700; color: var(--ink); }
  .success-checklist { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
  .success-check-item { display: flex; align-items: flex-start; gap: var(--s-3); color: var(--ink-muted); font-size: var(--t-base); }

  /* ═══ DOC / LEGAL ═══════════════════════════════════════════════════════ */

  .doc-wrap, .layout, .wrap { max-width: var(--article-max); margin-inline: auto; padding: var(--s-4) var(--gutter) var(--s-16); }
  .doc-title { font-size: var(--t-3xl); font-weight: 800; letter-spacing: var(--tr-display); }
  .doc-meta { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); }
  .doc-meta-item { display: inline-flex; align-items: center; gap: var(--s-2); }

  .doc-section { padding-top: var(--s-9); }
  .doc-section p, .doc-section li { color: var(--ink-muted); line-height: var(--lh-body); }
  .doc-section > * + * { margin-top: var(--s-5); }
  .doc-section ul, .doc-section ol { padding-left: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
  .doc-section li::marker { color: var(--divux); }
  .doc-section a { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--divux); }
  .doc-section a:hover { color: var(--divux); }

  .section-heading {
    display: flex; align-items: baseline; gap: var(--s-4);
    color: var(--ink); font-size: var(--t-xl); font-weight: 800;
    letter-spacing: var(--tr-tight); margin-bottom: var(--s-5);
  }

  .toc { border-radius: var(--r); padding: var(--s-7); background: var(--surface); box-shadow: var(--sh-sm); }
  .toc-title { font-size: var(--t-sm); font-weight: 700; color: var(--ink-faint); margin-bottom: var(--s-4); letter-spacing: var(--tr-wide); }
  .toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
  .toc-list a { color: var(--ink-muted); font-size: var(--t-base); font-weight: 600; }
  .toc-list a:hover { color: var(--ink); }

  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border-radius: var(--r); }
  .cookie-table, .info-table { width: 100%; border-collapse: collapse; font-size: var(--t-base); background: var(--surface); }
  .table-scroll > .cookie-table, .table-scroll > .info-table { min-width: 460px; }
  .cookie-table th, .info-table th {
    text-align: left; padding: var(--s-4) var(--s-5);
    background: var(--surface-2);
    font-size: var(--t-sm); font-weight: 700; color: var(--ink); white-space: nowrap;
  }
  .cookie-table td, .info-table td {
    padding: var(--s-4) var(--s-5); border-top: 1px solid var(--hairline);
    color: var(--ink-muted); vertical-align: top;
  }

  /* ═══ ERROR / 404 ═══════════════════════════════════════════════════════ */

  .error-wrap {
    min-height: 58vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    gap: var(--s-5); padding: var(--s-16) var(--gutter);
  }
  .error-head { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
  .error-badge {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-5); border-radius: var(--r-pill);
    background: var(--surface); box-shadow: var(--sh-sm);
    font-size: var(--t-sm); font-weight: 700; color: var(--ink-muted);
  }
  .error-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-orange); }
  .error-code { font-size: var(--t-5xl); font-weight: 800; letter-spacing: var(--tr-display); color: var(--divux); line-height: 1; }
  .error-title { font-size: var(--t-3xl); font-weight: 800; letter-spacing: var(--tr-display); }
  .error-sub { color: var(--ink-muted); font-size: var(--t-lg); max-width: 46ch; }
  .error-actions { display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center; margin-top: var(--s-2); }
  .quick-links { display: flex; gap: var(--s-5); flex-wrap: wrap; justify-content: center; margin-top: var(--s-7); }
  .quick-links a, .back-link {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--t-sm); font-weight: 700; color: var(--ink-muted);
    transition: color var(--dur-fast) var(--ease);
  }
  .quick-links a:hover, .back-link:hover { color: var(--ink); }

  /* ═══ MULTI-STEP / MISC ═════════════════════════════════════════════════ */

  .step { display: none; }
  .step.active { display: block; }
  .loading-state { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-12) 0; color: var(--ink-muted); }
  .card-heading { font-size: var(--t-xl); font-weight: 800; letter-spacing: var(--tr-tight); margin-bottom: var(--s-5); }
  .no-toggle { padding-right: var(--s-5) !important; }
  .resend-hint { font-size: var(--t-sm); color: var(--ink-muted); }
  .verify-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); padding: var(--s-12) 0; }
  .invalid-icon { width: 44px; height: 44px; color: var(--accent-red); }
  .token-badge {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); background: var(--surface-2);
  }

  .tab-switcher {
    position: relative; display: inline-flex; gap: var(--s-1);
    padding: 5px; border-radius: var(--r-pill);
    background: var(--surface-2); margin-bottom: var(--s-8);
  }
  .tab-indicator {
    position: absolute; top: 5px; bottom: 5px; left: 0;
    border-radius: var(--r-pill); background: var(--surface);
    box-shadow: var(--sh-sm); pointer-events: none;
    transition: transform var(--dur) var(--ease-pop), width var(--dur) var(--ease-pop);
  }
  .tab-btn {
    position: relative; z-index: 1; min-height: 42px;
    padding: var(--s-2) var(--s-6); border: none; border-radius: var(--r-pill);
    background: transparent; color: var(--ink-muted);
    font-family: var(--font); font-size: var(--t-base); font-weight: 700;
    white-space: nowrap; cursor: pointer;
    transition: color var(--dur-fast) var(--ease);
  }
  .tab-btn.active { color: var(--ink); }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  .app-badge {
    display: inline-flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-6); border-radius: var(--r-pill);
    background: var(--surface); box-shadow: var(--sh-sm); margin-bottom: var(--s-6);
  }
  .app-badge-icon { width: 32px; height: 32px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
  .app-badge-icon img { width: 100%; height: 100%; object-fit: cover; }
  .app-badge-text { font-size: var(--t-base); font-weight: 700; letter-spacing: var(--tr-tight); }

  /* ═══ PRODUCT PAGE ══════════════════════════════════════════════════════ */

  .section-alt { background: var(--surface); }

  .feature-row {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; gap: var(--s-12);
    padding-block: var(--s-12);
  }
  .feature-row.reverse .feature-visual { order: 2; }
  .feature-visual { display: flex; justify-content: center; }
  .feature-phone {
    width: 260px; max-width: 100%;
    border-radius: var(--r-device); padding: 9px;
    background: var(--slab); box-shadow: var(--sh-xl);
    transform: rotate(-3deg);
    transition: transform var(--dur) var(--ease-pop);
  }
  .feature-row.reverse .feature-phone { transform: rotate(3deg); }
  .feature-phone:hover { transform: rotate(0) scale(1.02); }
  .feature-phone img {
    width: 100%; height: auto; display: block;
    border-radius: calc(var(--r-device) - 9px);
  }

  .feature-eyebrow {
    display: inline-flex; align-items: center;
    padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
    background: var(--surface-2);
    font-size: var(--t-sm); font-weight: 700; color: var(--ink-muted);
  }
  .feature-title { font-size: var(--t-2xl); font-weight: 800; letter-spacing: var(--tr-display); margin-block: var(--s-5) var(--s-4); }
  .feature-desc { color: var(--ink-muted); font-size: var(--t-lg); line-height: var(--lh-snug); }
  .feature-list { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
  .feature-list li {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-4) var(--s-5); border-radius: var(--r-sm);
    background: var(--surface); box-shadow: var(--sh-sm);
    color: var(--ink); font-size: var(--t-base); font-weight: 600;
  }
  .feature-list svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-green); }

  .gallery, .shot-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-5); }
  .gallery-phone, .shot-card {
    border-radius: var(--r-device); padding: 7px;
    background: var(--slab); box-shadow: var(--sh);
    transition: transform var(--dur) var(--ease-pop);
  }
  .gallery-phone:nth-child(odd), .shot-card:nth-child(odd) { transform: rotate(-2deg); }
  .gallery-phone:nth-child(even), .shot-card:nth-child(even) { transform: rotate(2deg); }
  .gallery-phone:hover, .shot-card:hover { transform: rotate(0) translateY(-6px); }
  .gallery-phone img, .shot-card img {
    width: 100%; height: auto; display: block;
    border-radius: calc(var(--r-device) - 7px);
  }

  .skins { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-9); }
  .skin-pill {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
    background: var(--surface); box-shadow: var(--sh-sm);
    font-size: var(--t-sm); font-weight: 700; color: var(--ink);
  }
  .sd { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

  @media (max-width: 900px) {
    .feature-row { grid-template-columns: 1fr; gap: var(--s-8); padding-block: var(--s-9); }
    .feature-row.reverse .feature-visual { order: 0; }
  }

  /* ═══ QUOTE ═════════════════════════════════════════════════════════════ */

  .quote-section { padding-block: var(--s-16); }
  .quote {
    font-size: var(--t-3xl); font-weight: 800;
    letter-spacing: var(--tr-display); line-height: var(--lh-tight);
    max-width: 20ch;
  }
  .section-head > .quote { margin-bottom: 0; }
}

@layer utilities {
  /* Italic display serif for accent words. */
  .serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
  }

  /* Colour-highlighted words. */
  /* Text-safe accents, not the raw brand colours. The brand values are tuned
     for fills and hairlines, where contrast is not a text requirement; over
     the lilac hero flood --divux lands at 2.89:1, under the 3:1 that even
     large text needs. The --*-text variants exist for exactly this and clear
     AA for body copy too, so a highlight stays legible at any size. */
  .hl        { color: var(--divux-text); }
  .hl-purple { color: var(--streamsim-text); }
  .hl-green  { color: var(--accent-green-text); }

  /* Marker-pen highlight behind a word. */
  .mark {
    background: linear-gradient(transparent 58%, rgba(var(--divux-tint), .32) 58%);
    padding-inline: .08em;
  }

  .fade-up, .rule-draw, .mask-reveal > span { will-change: auto; }

  html.js .fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease-pop);
  }
  html.js .fade-up.is-visible, html.js .fade-up.visible { opacity: 1; transform: none; }

  .delay-1 { transition-delay: 70ms; }
  .delay-2 { transition-delay: 140ms; }
  .delay-3 { transition-delay: 210ms; }
  .delay-4 { transition-delay: 280ms; }
  .delay-5 { transition-delay: 350ms; }
  .delay-6 { transition-delay: 420ms; }

  html.js .rule-draw { transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-draw) var(--ease); }
  html.js .rule-draw.is-visible { transform: scaleX(1); }

  html.js .mask-reveal > span {
    display: block;
    clip-path: inset(0 0 110% 0);
    transform: translateY(.14em);
    transition: clip-path 820ms var(--ease), transform 820ms var(--ease);
  }
  html.js .mask-reveal.is-ready > span { clip-path: inset(0 0 -25% 0); transform: none; }
  html.js .mask-reveal.is-ready > span:nth-child(2) { transition-delay: 90ms; }
  html.js .mask-reveal.is-ready > span:nth-child(3) { transition-delay: 180ms; }

  @media (prefers-reduced-motion: reduce) {
    html.js .fade-up { opacity: 1 !important; transform: none !important; }
    html.js .rule-draw { transform: scaleX(1) !important; }
    html.js .mask-reveal > span { clip-path: none !important; transform: none !important; }
  }

  body.glow::after { content: none; }

  .grad-text {
    background: linear-gradient(100deg, var(--divux), var(--streamsim));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .hidden { display: none !important; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* width is pinned to the label: left-offset + a full-width box put the
     right edge 16px past the viewport, which Chromium and WebKit hide behind
     body{overflow-x:hidden} but Firefox still counts in
     documentElement.scrollWidth — enough to make any "does this page scroll
     sideways?" check report a phantom overflow on every page. */
  .skip-link {
    position: absolute; left: var(--s-4); top: -100px; z-index: 101;
    width: max-content; max-width: calc(100% - var(--s-4) * 2);
    padding: var(--s-3) var(--s-6); border-radius: var(--r-pill);
    background: var(--slab); color: var(--on-slab); font-size: var(--t-base); font-weight: 700;
    transition: top var(--dur-fast) var(--ease);
  }
  .skip-link:focus { top: var(--s-4); }

  .text-muted { color: var(--ink-muted); }
  .text-faint { color: var(--ink-faint); }
  .text-center { text-align: center; }
  .flex-center { display: flex; align-items: center; justify-content: center; }
  .stack { display: flex; flex-direction: column; }
  .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
  .gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); }
}