/* =================================================================   FLAIRT PUBLIC SITE   Extracted from the per-page <style> blocks in users/templates.   Loaded after flairt.css, so the cascade order is unchanged.   Section modules are page-scoped by their own class prefixes   (.hero-*, .hiw-*, .sci-*, .pricing-*, .faq-*). Anything genuinely   shared belongs in flairt.css, not here.   ================================================================= */
/* ─── SHARED PUBLIC PRIMITIVES ──────────────────────────────────────
   These three were redefined in about.html, science.html and
   how_it_works.html with values that had already drifted apart. One
   definition here; the genuine variants are scoped by page class. */
.pub-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-3);
}
.pub-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: var(--space-4);
}
.pub-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
}
/* how-it-works runs a tighter heading and a looser body */
/* The three originals differed only in these values. */
.page-hiw .pub-h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.2; }
.page-about .pub-h2 { margin-bottom: var(--space-8); }
.page-hiw .pub-body { line-height: 1.75; margin-bottom: var(--space-6); }


/* =================================================================
   Header: floating pill nav
   ================================================================= */
  /* Floating pill nav: a full-width bar cuts every hero photograph in half.
     The pill sits on the image instead of slicing it. */
  .pub-header {
    position: fixed;
    top: var(--space-4); left: 0; right: 0;
    z-index: 100;
    pointer-events: none;
  }

  .pub-header-inner {
    pointer-events: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-5);
    height: 60px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-radius: var(--radius-pill);
    background: rgba(18,16,14,.62);
    border: 1px solid var(--dk-line);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    transition: background var(--dur-normal) var(--ease-standard),
                border-color var(--dur-normal) var(--ease-standard);
  }
  .pub-header.scrolled .pub-header-inner {
    background: rgba(18,16,14,.92);
    border-color: var(--dk-line-strong);
  }
  @media (max-width: 1240px) {
    .pub-header-inner { margin: 0 var(--space-4); }
  }

  /* Actions pushed to the far right within their 1fr cell */
  .pub-actions { justify-self: end; }

  .pub-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .pub-nav a {
    position: relative;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--dk-text-muted);
    text-decoration: none;
    padding: var(--space-2) 13px;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease-standard);
  }
  .pub-nav a:hover { color: var(--dk-text); }

  /* Current page carries a signal underline, so the reader always knows
     where they are. */
  .pub-nav a[aria-current="page"] { color: var(--dk-text); }
  .pub-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 13px; right: 13px; bottom: 2px;
    height: 1.5px;
    background: var(--dk-signal);
  }

  .pub-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2) + var(--space-1);
    gap: 10px;
    flex-shrink: 0;
  }

  /* Log in is a text link, not a second button. Two buttons side by side
     split the eye between them. */
  .pub-btn-login {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--dk-text-muted);
    text-decoration: none;
    padding: 9px var(--space-3);
    transition: color var(--dur-fast) var(--ease-standard);
  }
  .pub-btn-login:hover { color: var(--dk-text); }

  /* One primary action on the whole site, in bone on the warm canvas. */
  .pub-btn-join {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--dk-canvas);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    background: var(--dk-text);
    white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease-standard),
                background var(--dur-fast) var(--ease-standard);
  }
  .pub-btn-join:hover { transform: translateY(-1px); background: #fff; color: var(--dk-canvas); }
  .pub-btn-join:active { transform: translateY(0); }

  /* Menu button: a 3x3 dot grid. Three bars read as "hamburger" everywhere,
     which is exactly why they disappear; the dot grid is the one control on
     the mobile bar and should look like it. */
  .pub-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
  }
  .pub-hamburger .dots {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    gap: 4px;
  }
  .pub-hamburger .dots i {
    width: 4px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--dk-text);
    transition: background var(--dur-fast) var(--ease-standard);
  }
  .pub-hamburger.is-open .dots i { background: var(--dk-signal); }

  /* Mobile menu: a drawer that extends from the right edge and retracts the
     same way. It stays mounted so both directions animate; visibility keeps
     it out of the way while retracted. */
  .pub-mobile-menu {
    position: fixed;
    top: var(--pub-header-h);
    right: 0; bottom: 0; left: 0;
    background: var(--dk-canvas);
    z-index: 99;
    padding: var(--space-6) var(--space-6) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-exit),
                visibility 0s linear var(--dur-slow);
  }
  .pub-mobile-menu.open {
    visibility: visible;
    transform: translateX(0);
    transition: transform var(--dur-slow) var(--ease-enter),
                visibility 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .pub-mobile-menu { transition: visibility 0s linear var(--dur-fast); }
    .pub-mobile-menu.open { transition: visibility 0s; }
  }

  .pub-mobile-menu a {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--dk-text);
    text-decoration: none;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--dk-line);
    transition: color var(--dur-fast) var(--ease-standard);
  }
  .pub-mobile-menu a:hover { color: var(--dk-signal); }

  .pub-mobile-menu .mob-join {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    background: var(--dk-text);
    color: var(--dk-canvas);
    font-weight: 700;
    text-align: center;
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--space-4);
    margin-top: var(--space-6);
  }
  .pub-mobile-menu .mob-join:hover { color: var(--dk-canvas); }

  /* Zero-height marker at the top of the document. The header watches it
     instead of listening to scroll. */
  #pubHeaderSentinel { display: block; width: 100%; height: 1px; margin-bottom: -1px; }

  @media (max-width: 768px) {
    .pub-nav     { display: none; }
    .pub-actions { display: none; }
    .pub-hamburger { display: flex; justify-self: end; }

    /* On a phone the pill leaves a strip of hero showing above and beside it,
       which reads as a floating widget rather than the site's own bar. Full
       bleed, flush to the top edge, opaque. */
    .pub-header { top: 0; }
    .pub-header-inner,
    .pub-header.scrolled .pub-header-inner {
      margin: 0;
      max-width: none;
      height: var(--pub-header-h);
      padding: 0 var(--space-4);
      grid-template-columns: 1fr auto;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid var(--dk-line);
      background: var(--dk-canvas);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }


/* =================================================================
   Landing
   ================================================================= */
  /* ── Showcase (hero + gallery + before/after, one shared canvas) ── */
  .showcase-wrap {
    position: relative;
    overflow: hidden;
    background: var(--dk-canvas);
    color: var(--dk-text);
  }
  .showcase-label {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dk-text-faint);
    max-width: 1100px;
    margin: 0 auto var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--dk-line);
  }
  .showcase-label .count { margin-left: auto; color: var(--dk-signal); }

  /* ── Hero ─────────────────────────────────────────────── */
  .hero-main {
    min-height: 100dvh;
    padding: 96px var(--space-6) var(--space-12);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    isolation: isolate;
  }

  /* Golden-hour plate behind the hero. It is the ground, not the subject:
     heavily scrimmed so the headline and the verdict plate stay dominant. */
  .hero-plate {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--dk-canvas);
  }
  .hero-plate video,
  .hero-plate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 65%;
    display: block;
  }
  .hero-plate::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(18,16,14,.94) 0%, rgba(18,16,14,.86) 38%, rgba(18,16,14,.62) 100%),
      linear-gradient(180deg, rgba(18,16,14,.80) 0%, rgba(18,16,14,.30) 40%, rgba(18,16,14,.96) 100%);
  }
  @media (max-width: 860px) {
    .hero-plate::after {
      background: linear-gradient(180deg, rgba(18,16,14,.88) 0%, rgba(18,16,14,.72) 45%, rgba(18,16,14,.97) 100%);
    }
  }
  /* Full-bleed montage hero: the video is the whole canvas, type sits on it.
     The single-plate scrim was near-opaque on the left, which is right for a
     still but smothers a montage. This one only darkens where the type is. */
  .hero-cinema { align-items: flex-end; padding-bottom: var(--space-24); }
  /* A full-height portrait box crops a 16:9 montage down to about a quarter
     of its width. Shortening the hero on a phone widens that window to
     roughly a third, so each beat's subject has room to sit in frame.
     The horizontal framing per beat is set in ds2.js (HERO_MOBILE_BEATS). */
  @media (max-width: 860px) {
    .hero-cinema { min-height: 82dvh; }
  }
  .hero-cinema .hero-plate::after {
    background:
      linear-gradient(180deg, rgba(18,16,14,.66) 0%, rgba(18,16,14,.20) 34%, rgba(18,16,14,.86) 100%),
      linear-gradient(90deg, rgba(18,16,14,.72) 0%, rgba(18,16,14,.30) 46%, rgba(18,16,14,.10) 100%);
  }
  @media (max-width: 860px) {
    .hero-cinema .hero-plate::after {
      background: linear-gradient(180deg, rgba(18,16,14,.62) 0%, rgba(18,16,14,.38) 35%, rgba(18,16,14,.93) 100%);
    }
  }
  .hero-cinema .hero-inner { max-width: 1100px; }
  .hero-cinema .editorial-h { max-width: 15ch; }

  .hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
  }
  .hero-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--dk-text-muted);
    line-height: 1.6;
    max-width: 42ch;
    margin: 0 0 var(--space-8);
    text-wrap: pretty;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
  }

  /* Trust strip lives below the hero, not inside it. */
  .trust-strip {
    background: var(--dk-canvas);
    border-top: 1px solid var(--dk-line);
    border-bottom: 1px solid var(--dk-line);
    padding: var(--space-6) var(--space-6);
  }
  .trust-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dk-text-muted);
  }
  .trust-inner b { color: var(--dk-text); font-weight: 500; }

  /* ── Stats ────────────────────────────────────────────── */
  .stats-strip {
    background: var(--dk-canvas);
    padding: var(--space-24) var(--space-6);
  }
  .stats-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
  }
  .stat-item { border-top: 1px solid var(--dk-line-strong); padding-top: var(--space-5); }
  .stat-item .count-up {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(3rem, 7vw, 5.5rem);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--dk-text);
    line-height: 1;
  }
  .stat-label {
    font-size: var(--text-body);
    color: var(--dk-text-muted);
    max-width: 30ch;
    margin: var(--space-4) 0 0;
    line-height: 1.5;
  }
  @media (max-width: 720px) {
    .stats-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  }

  /* ── Photo gallery showcase ──────────────────────────────── */
  .gallery-section {
    padding: var(--space-10) var(--space-6);
    position: relative;
    z-index: 1;
  }
  .gallery-section .gp-wall { max-width: 1100px; margin: 0 auto; }

  /* ── Before / After section ───────────────────────────── */
  .ba2-section {
    padding: var(--space-10) var(--space-6) var(--space-24);
    position: relative;
    z-index: 1;
  }
  .ba2-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .ba2-header { max-width: 1100px; margin: 0 auto var(--space-16); }
  .ba2-lead { color: var(--dk-text-muted); font-size: var(--text-body); line-height: 1.7; max-width: 52ch; margin: 0; }
  .ba2-split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
  }
  .ba2-note {
    flex: 1;
    min-width: 240px;
    max-width: 340px;
  }
  .ba2-note-body {
    color: var(--dk-text-muted);
    font-size: var(--text-sm);
    line-height: 1.7;
    margin: var(--space-6) 0 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--dk-line);
  }

  /* Live readout for the compare slider. The copy used to sit on the
     photograph, covering the face it was describing. Each row carries both
     readings and swaps as the handle crosses that point's own x position,
     so the verdict is bad-or-good rather than on-or-off. */
  .ba2-read { margin: 0; }
  .ba2-read-row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--dk-line);
  }
  .ba2-read-row:last-child { border-bottom: 1px solid var(--dk-line); }
  .ba2-read dt {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding-top: 3px;
    display: flex;
    align-items: baseline;
    gap: 7px;
  }
  /* Semantic verdict states. These are the one documented exception to the
     single-accent rule: they report a judgement, not a brand. */
  .ba2-read dt::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
    transform: translateY(-1px);
  }
  .ba2-read-row.is-bad  dt { color: var(--dk-bad); }
  .ba2-read-row.is-good dt { color: var(--dk-good); }
  .ba2-read dd {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--dk-text-muted);
    max-width: 46ch;
    /* Both readings sit in the same grid cell, so the row is always as tall
       as the longer of the two at whatever width the device gives it. The
       verdict can then flip mid-drag without the block resizing and shoving
       the plate above it around. */
    display: grid;
    grid-template-areas: "reading";
  }
  .ba2-read dd .ba2-bad,
  .ba2-read dd .ba2-good {
    grid-area: reading;
    visibility: hidden;
  }
  .ba2-read-row.is-bad  dd .ba2-bad  { visibility: visible; }
  .ba2-read-row.is-good dd .ba2-good { visibility: visible; }


  /* ── Invisible disadvantage ───────────────────────────── */
  /* The best copy on the site, attributed to Adrian and given a portrait
     so it reads as somebody talking rather than a wall of body text. */
  .inv-section {
    background: var(--dk-canvas-2);
    padding: var(--space-24) var(--space-6);
    border-top: 1px solid var(--dk-line);
  }
  .inv-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
  }
  .inv-author { margin: 0; position: sticky; top: 120px; }
  /* The source is the full studio frame; the crop happens here so the framing
     can be tuned without re-exporting the asset. */
  .inv-author img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    border-radius: var(--dk-radius-plate);
    box-shadow: var(--dk-shadow-plate);
  }
  .inv-author figcaption {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--dk-line);
  }
  .inv-author-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--dk-text);
  }
  .inv-author-role {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--dk-text-muted);
  }
  .inv-author-handle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--dk-text-faint);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard);
  }
  .inv-author-handle:hover { color: var(--dk-signal); }

  .inv-pull {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--dk-text);
    max-width: 26ch;
    margin: 0 0 var(--space-8);
    text-wrap: balance;
  }
  .inv-body {
    font-size: var(--text-body);
    color: var(--dk-text-muted);
    line-height: 1.8;
    max-width: 62ch;
  }
  .inv-body p { margin: 0 0 var(--space-5); }
  .inv-closing {
    color: var(--dk-text);
    font-weight: 600;
    padding-top: var(--space-5);
    border-top: 1px solid var(--dk-line);
  }
  @media (max-width: 860px) {
    .inv-inner { grid-template-columns: 1fr; gap: var(--space-10); }
    .inv-author { position: static; max-width: 260px; }
  }


  /* ── Testimonials — sliding bento wall ────────────────── */
  .testi-section { background: var(--dk-canvas); padding: var(--space-24) 0; overflow: hidden; }
  .testi-inner   { max-width: 1240px; margin: 0 auto var(--space-24); padding: 0 var(--space-6); }
  .testi-header  { max-width: 1100px; margin: 0 auto var(--space-16); }

  .tm-wall, .gp-wall { display: flex; flex-direction: column; gap: var(--space-5); }
  .tm-viewport, .gp-viewport {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .gp-viewport { touch-action: pan-y; }
  .tm-track, .gp-track {
    display: flex;
    width: max-content;
    animation: tm-scroll var(--tm-dur, 72s) linear infinite;
  }
  .tm-track.tm-reverse, .gp-track.gp-reverse { animation-direction: reverse; }
  .tm-viewport.is-paused .tm-track, .gp-viewport.is-paused .gp-track { animation-play-state: paused; }
  .tm-viewport::after, .gp-viewport::after {
    content: "Paused";
    position: absolute; top: var(--space-3); left: 50%; transform: translateX(-50%);
    background: var(--color-brand); color: #fff;
    font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
    padding: 3px 12px; border-radius: var(--radius-pill);
    opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard);
    pointer-events: none; z-index: 2;
  }
  .tm-viewport.is-paused::after, .gp-viewport.is-paused::after { opacity: 1; }
  .tm-group, .gp-group { display: flex; gap: var(--space-5); padding-right: var(--space-5); }
  @keyframes tm-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  .tm-card {
    flex: 0 0 auto;
    box-sizing: border-box;
    background: var(--dk-panel);
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius-plate);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    height: 288px;
    transition: border-color var(--dur-fast) var(--ease-standard),
                background var(--dur-fast) var(--ease-standard);
  }
  .tm-card:hover { border-color: var(--dk-line-strong); background: var(--dk-panel-2); }
  .tm-s { width: 306px; }
  .tm-m { width: 372px; }
  .tm-l { width: 452px; }

  .tm-stars { display: flex; gap: 3px; color: var(--color-gold); font-size: .85rem; margin-bottom: var(--space-4); }
  .tm-quote {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--dk-text);
    line-height: 1.5;
    flex: 1;
    overflow: hidden;
  }
  .tm-person { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
  .tm-name { font-weight: 600; font-size: var(--text-sm); color: var(--dk-text); }
  .tm-meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    color: var(--dk-text-muted);
  }

  .tm-ava {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .tm-ava img { width: 100%; height: 100%; object-fit: cover; }
  .tm-ava-initial { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.15rem; }
  .tm-grad-1 { background: var(--dk-signal); }
  .tm-grad-2 { background: linear-gradient(135deg, var(--color-violet), var(--color-brand)); }
  .tm-grad-3 { background: linear-gradient(135deg, var(--color-brand), var(--color-gold)); }
  .tm-grad-4 { background: var(--gradient-golden); }
  .tm-grad-5 { background: linear-gradient(135deg, var(--color-gold), var(--color-violet)); }

  /* ── FAQ ──────────────────────────────────────────────── */
  /* Two columns, always open, hairline between rows. Nothing to click
     to read an answer. */
  .faq-section {
    background: var(--dk-canvas-2);
    border-top: 1px solid var(--dk-line);
    padding: var(--space-24) var(--space-6);
  }
  .faq-inner { max-width: 1100px; margin: 0 auto; }
  .faq-header { margin-bottom: var(--space-12); }

  /* ── Final CTA ────────────────────────────────────────── */
  /* A photograph, not a gradient band. */
  .final-section {
    position: relative;
    padding: var(--space-24) var(--space-6);
    min-height: 62vh;
    display: flex;
    align-items: flex-end;
    background: var(--dk-canvas);
    overflow: hidden;
  }
  .final-plate {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center 30%;
    z-index: 0;
  }
  .final-plate::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(18,16,14,.55) 0%, rgba(18,16,14,.72) 45%, rgba(18,16,14,.94) 100%);
  }
  .final-inner {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .final-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 500;
    color: var(--dk-text);
    line-height: 1.05;
    letter-spacing: -.025em;
    max-width: 16ch;
    margin: 0 0 var(--space-5);
    text-wrap: balance;
  }
  .final-sub {
    font-size: var(--text-body);
    color: var(--dk-text-muted);
    max-width: 46ch;
    margin: 0 0 var(--space-8);
    line-height: 1.6;
  }
  .final-note {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dk-text-muted);
    margin: var(--space-5) 0 0;
  }

  /* ── Responsive ───────────────────────────────────────── */
  @media (max-width: 640px) {
    .tm-s { width: 268px; }
    .tm-m { width: 300px; }
    .tm-l { width: 336px; }
    .tm-card { height: 320px; }
    .gp-card { width: 230px; height: 310px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tm-track, .gp-track { animation: none; }
    .tm-viewport, .gp-viewport { overflow-x: auto; -webkit-mask: none; mask: none; }
    .tm-group[aria-hidden="true"], .gp-group[aria-hidden="true"] { display: none; }
    .gp-viewport { touch-action: auto; }
  }
  @media (max-width: 768px) {
    .stat-divider { display: none; }
    .stat-item { padding: var(--space-3) var(--space-4); }
    .ba2-split { gap: var(--space-10); }
    .compare { max-width: 100%; }
  }


/* =================================================================
   How it works: pinned scrollytelling demo
   ================================================================= */
  /* ── Hero ── */
  .hiw-hero {
    background: var(--dk-canvas);
    padding: 160px var(--space-6) 96px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .hiw-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% -10%, rgba(232,20,122,.15) 0%, transparent 70%),
      radial-gradient(ellipse 50% 40% at 90% 80%, rgba(168,85,247,.10) 0%, transparent 70%);
    pointer-events: none;
  }
  .hiw-hero-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }

  .hiw-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-brand-light);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: var(--space-5);
  }
  .hiw-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin-bottom: var(--space-5);
  }
  .hiw-sub {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    color: rgba(255,255,255,.6);
    line-height: 1.65;
    max-width: 540px;
    margin: 0 auto;
  }

  /* ── Shared typography (used by recap + FAQ header) ── */


  /* ── Scrollytelling scroller (adapted from the how-it-works demo) ── */
  /* --hiw-header-offset clears the 68px fixed public header so pinned card
     tops aren't hidden beneath it while a stage is pinned to the viewport. */
  .hiw-scroller { position: relative; background: var(--color-bg-base); --hiw-header-offset: 88px; }

  .hiw-stage-wrap { position: relative; }
  .hiw-stage {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hiw-header-offset) var(--space-6) var(--space-6);
  }
  /* The audit, guide and AI-photo stages grow tall as their content reveals;
     top-align them below the header so the card top never slips underneath it. */
  #stage-report .hiw-stage,
  #stage-playbook .hiw-stage,
  #stage-ai-photos .hiw-stage { align-items: flex-start; }


  .hiw-handoff {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-6);
    color: var(--color-brand);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 700;
    text-align: center;
  }
  .hiw-handoff i { font-size: 1.5rem; color: var(--dk-signal); }

  /* The hero CTA came too early: the whole point of this page is the demo
     below, and the closing sections already carry the ask. */
  .hiw-hero-note {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dk-text-faint);
    text-align: center;
    margin: var(--space-8) 0 0;
  }

  /* ── Keep-scrolling cue ──────────────────────────────────────────
     Pairs with the rail: the rail reports progress, this says what to do.
     A pinned stage stops the page moving, which reads as broken without
     both. Quiet, bottom-centre, and it disappears the moment the stage
     finishes so it never nags. */
  .hiw-keep {
    position: fixed;
    left: 50%;
    bottom: var(--space-8);
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    background: rgba(18,16,14,.72);
    border: 1px solid var(--dk-line);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dk-text-muted);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease-standard);
  }
  .hiw-keep.is-visible { opacity: 1; }
  .hiw-keep-arrow { display: flex; color: var(--dk-signal); font-size: 1rem; line-height: 1; }
  .hiw-keep.is-visible .hiw-keep-arrow { animation: hiwKeepBob 1.7s ease-in-out infinite; }
  @keyframes hiwKeepBob {
    0%, 100% { transform: translateY(-2px); opacity: .55; }
    50%      { transform: translateY(3px);  opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hiw-keep.is-visible .hiw-keep-arrow { animation: none; }
  }
  @media (max-width: 1100px) {
    /* the rail becomes a bar under the header, so the cue keeps the bottom */
    .hiw-keep { bottom: var(--space-6); }
  }

  /* ── Stage rail ──────────────────────────────────────────────────
     Fixed readout of where you are in the demo and how much is left.
     Fades in only while the scroller is on screen. */
  .hiw-rail {
    position: fixed;
    right: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease-standard);
  }
  .hiw-rail.is-visible { opacity: 1; }
  .hiw-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
  .hiw-rail li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "n l" "t t";
    align-items: baseline;
    gap: 2px var(--space-2);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dk-text-faint);
    transition: color var(--dur-normal) var(--ease-standard);
  }
  .hiw-rail-n     { grid-area: n; }
  .hiw-rail-l     { grid-area: l; }
  .hiw-rail-track { grid-area: t; height: 1px; background: var(--dk-line-strong); margin-top: 5px; }
  .hiw-rail-fill  { display: block; height: 100%; width: 0; background: var(--dk-signal); }
  .hiw-rail li.is-done    { color: var(--dk-text-muted); }
  .hiw-rail li.is-done  .hiw-rail-fill { width: 100%; background: var(--dk-text-faint); }
  .hiw-rail li.is-active  { color: var(--dk-text); }

  @media (max-width: 1100px) {
    /* No room beside the card: the rail becomes a bar under the header. */
    .hiw-rail {
      right: 0; left: 0; top: 84px;
      transform: none;
      padding: 0 var(--space-5);
    }
    .hiw-rail ol { flex-direction: row; gap: var(--space-2); }
    .hiw-rail li { flex: 1; grid-template-areas: "n n" "t t"; }
    .hiw-rail-l { display: none; }
  }

  .hiw-card {
    position: relative;
    background: var(--color-bg-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-8);
    width: 100%;
    max-width: 640px;
  }

  .hiw-check {
    position: absolute;
    right: var(--space-5);
    bottom: var(--space-5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dk-panel);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    z-index: 5;
  }
  .hiw-check i { font-size: 1.4rem; color: var(--color-success); }

  .hiw-card-spinner {
    display: block;
    margin: var(--space-16) auto;
    animation: hiw-spin 2.4s linear infinite;
  }
  @keyframes hiw-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .hiw-card-spinner { animation: none; } }

  /* Podcast player */
  .hiw-podcast {
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
  }
  .hiw-podcast-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-h3);
    color: var(--color-text-primary);
  }
  .hiw-podcast-sub {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 4px 0 var(--space-4);
  }
  .hiw-podcast-row { display: flex; align-items: center; gap: var(--space-3); }
  .hiw-podcast-play {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--color-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .hiw-podcast-play:hover { background: var(--color-brand-dark); }
  .hiw-podcast-progress-wrap { flex: 1; display: flex; align-items: center; gap: var(--space-2); }
  .hiw-podcast-time {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
  }
  .hiw-podcast-range { flex: 1; accent-color: var(--color-brand); }
  .hiw-podcast-speeds { display: flex; gap: 6px; margin-top: var(--space-3); }
  .hiw-podcast-speeds button {
    border: 1px solid var(--color-border);
    background: var(--dk-panel);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    padding: 4px 10px;
    cursor: pointer;
  }
  .hiw-podcast-speeds button.active {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
  }

  .hiw-q-title {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 700;
    margin: 0 0 var(--space-2);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-4);
  }
  .hiw-q-subtitle {
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    margin: var(--space-3) 0 var(--space-6);
    font-variant: small-caps;
  }
  .hiw-q-list { display: flex; flex-direction: column; gap: var(--space-3); }
  .hiw-q-label {
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .hiw-q-answer {
    font-size: var(--text-body);
    color: var(--color-text-primary);
  }
  /* Reserve just enough height per answer's expected line count so the
     typewriter reveal never shifts the card. */
  .hiw-q-answer--short { min-height: calc(1.5em * 1 + 4px); }
  .hiw-q-answer--medium { min-height: calc(1.5em * 2 + 4px); }
  .hiw-q-answer--long { min-height: calc(1.5em * 4 + 4px); }
  .hiw-q-answer--xlong { min-height: calc(1.5em * 6 + 8px); }

  .hiw-upload-card { max-width: 560px; }
  .hiw-upload-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
  }
  .hiw-upload-title { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; margin: 0; }
  .hiw-upload-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .hiw-photo-cell {
    background: var(--dk-panel);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .hiw-photo-img-wrap { aspect-ratio: 3 / 4; background: var(--color-bg-muted); overflow: hidden; }
  .hiw-photo-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hiw-photo-meta { padding: var(--space-3); }
  .hiw-photo-filename { font-weight: 700; font-size: var(--text-sm); margin-bottom: 4px; overflow-wrap: break-word; }
  .hiw-photo-fileinfo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
  }
  .hiw-photo-fileinfo span { display: flex; align-items: center; gap: 3px; }

  /* Shared spinner -> reveal card content */
  .hiw-card-content { min-height: 200px; }
  .hiw-reveal-item { margin: 0 0 var(--space-5); }
  .hiw-reveal-item:last-child { margin-bottom: 0; }

  .hiw-report-title, .hiw-playbook-title {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 700;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: var(--space-3);
  }
  .hiw-report-p { font-size: var(--text-body); line-height: 1.75; color: var(--color-text-primary); }

  .hiw-report-photo-block { display: flow-root; }
  .hiw-report-inline-photo {
    float: right;
    width: 140px;
    border-radius: var(--radius-sm);
    margin: 0 0 var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
  }
  .hiw-report-section-h2 {
    font-family: var(--font-sans);
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--color-violet);
    margin: 0 0 var(--space-1);
  }
  .hiw-report-photo-field {
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
    font-weight: 700;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3);
  }
  .hiw-report-photo-bullets {
    margin: 0 0 var(--space-4);
    padding-left: 1.15rem;
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--color-text-primary);
  }
  .hiw-report-photo-bullets li { margin-bottom: 4px; }
  .hiw-report-bullet-label {
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    font-weight: 600;
  }
  .hiw-report-bullet-label::after { content: ':'; }
  .hiw-report-rating { color: var(--color-warning); }
  .hiw-report-platform { color: var(--color-success); }
  .hiw-report-tag { white-space: nowrap; }
  .hiw-tag-up { color: var(--color-success); margin-right: 1px; }
  .hiw-tag-down { color: var(--color-error); margin-right: 1px; }

  .hiw-report-fade-wrap { position: relative; max-height: 70px; overflow: hidden; }
  .hiw-report-fade-wrap::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-bg-surface));
  }
  .hiw-report-teaser { font-size: var(--text-sm); color: var(--color-brand); font-weight: 600; }
  .hiw-playbook-teaser { font-size: var(--text-sm); color: var(--color-gold); font-weight: 600; }

  .hiw-report-card { border-top: 3px solid var(--color-violet); }
  .hiw-playbook-card { border-top: 3px solid var(--color-gold); }
  .hiw-playbook-h3 {
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
    font-weight: 700;
    color: var(--color-success);
    margin: 0 0 var(--space-2);
  }

  .hiw-aip-title { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; margin: 0 0 var(--space-6); }
  .hiw-aip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  @media (max-width: 1024px) { .hiw-aip-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) {
    .hiw-aip-grid { grid-template-columns: 1fr; }
    .hiw-aip-card { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; }
  }

  .hiw-aip-card {
    background: var(--dk-panel);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .hiw-aip-photo-wrap { position: relative; aspect-ratio: 3 / 4; background: var(--color-bg-muted); }
  .hiw-aip-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--color-text-tertiary);
    background: rgba(168, 85, 247, 0.05);
  }
  .hiw-aip-placeholder i { font-size: 2rem; }
  .hiw-aip-placeholder-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-primary); }
  .hiw-aip-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: rgba(168, 85, 247, 0.12);
    overflow: hidden;
    opacity: 0;
  }
  .hiw-aip-progress-bar {
    position: absolute;
    inset: 0;
    width: 30%;
    background: var(--color-violet);
    animation: hiw-aip-progress-slide 1.5s ease-in-out infinite;
  }
  @keyframes hiw-aip-progress-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
  }
  .hiw-aip-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
  .hiw-aip-meta { padding: var(--space-4); }
  .hiw-aip-label { font-weight: 700; font-size: var(--text-sm); margin-bottom: 4px; }
  .hiw-aip-brief {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: var(--space-3);
  }
  .hiw-aip-refs { display: flex; gap: 6px; }
  .hiw-aip-refs .ref-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
  }

  .hiw-aip-explainer {
    margin: var(--space-6) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.65;
    text-align: center;
    opacity: 0;
  }

  /* ── Scroller outro ── */
  .hiw-outro {
    background: var(--dk-canvas);
    padding: 96px var(--space-6);
    text-align: center;
  }
  .hiw-outro-inner { max-width: 560px; margin: 0 auto; }
  .hiw-outro-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--space-4);
  }
  .hiw-outro-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: var(--space-5);
  }
  .hiw-outro-sub {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    margin-bottom: var(--space-6);
  }
  .hiw-outro-badge {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    display: inline-flex;
    margin-bottom: var(--space-8);
  }
  .hiw-outro-cta {
    background: var(--dk-panel);
    color: var(--color-brand);
    border: none;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-normal) var(--ease-standard);
  }
  .hiw-outro-cta:hover { color: var(--color-brand); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.2); }

  /* ── Recap: what we just achieved (4 steps, alternating alignment) ── */
  .hiw-recap { background: var(--color-bg-base); padding: 96px var(--space-6); border-top: 1px solid var(--color-border); }
  .hiw-recap-inner { max-width: 860px; margin: 0 auto; }
  .hiw-recap-head { text-align: center; margin-bottom: var(--space-16); }
  .hiw-recap-list { display: flex; flex-direction: column; gap: var(--space-16); }
  .hiw-recap-item { max-width: 480px; }
  .hiw-recap-item.align-left { margin-right: auto; text-align: left; }
  .hiw-recap-item.align-right { margin-left: auto; text-align: right; }
  .hiw-recap-num {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-3);
  }
  .hiw-recap-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-brand);
    margin-bottom: var(--space-2);
  }
  .hiw-recap-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-bottom: var(--space-3);
  }
  .hiw-recap-body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
  }
  .hiw-recap-body + .hiw-recap-body { margin-top: var(--space-3); }
  .hiw-recap-body strong { color: var(--color-text-primary); font-weight: 700; }
  @media (max-width: 640px) {
    .hiw-recap-item.align-right { text-align: left; }
  }

  /* ── CTA ── */
  .hiw-cta { background: var(--dk-canvas); padding: 80px var(--space-6); }
  .hiw-cta-inner { max-width: 560px; margin: 0 auto; }
  .hiw-cta-title {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: var(--space-4);
    letter-spacing: -.02em;
  }
  .hiw-cta-sub { font-family: var(--font-sans); font-size: var(--text-body); color: rgba(255,255,255,.75); margin-bottom: var(--space-8); }


/* =================================================================
   Science: wireframe head, study cards, references
   ================================================================= */
  /* ── Hero ── */
  .sci-hero {
    /* The head asset ships with its own navy ground baked in. Rather than
       matching the section to the image (which broke the theme lock), the
       image is screen-blended onto the warm canvas: screen drops any
       near-black background and keeps only the glowing wireframe, so the
       head floats on the darkroom ground with no seam and no navy. */
    background: var(--dk-canvas);
    padding: 96px var(--space-6) 96px;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  /* Screen drops the asset's own dark ground; the radial mask dissolves the
     square edge so the head floats on the canvas instead of sitting in a box. */
  .head-stage .head-bg {
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 48%, #000 50%, transparent 100%);
            mask-image: radial-gradient(ellipse 58% 58% at 50% 48%, #000 50%, transparent 100%);
  }
  /* now wraps the title/subtitle that sit *below* the head-stage, so it needs top spacing instead of centering itself */
  .sci-hero-inner { max-width: 720px; margin: var(--space-10) auto 0; position: relative; z-index: 1; }

  .sci-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin-bottom: var(--space-5);
  }
  /* .text-gradient / .focus-pull from flairt.css handle the gradient + blur-in span */
  .sci-sub {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
  }

  /* ── Head-stage (wireframe head + linked study cards) ── */
  .head-stage {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: 0 auto;
    min-height: 560px;
    /* z-index makes this a stacking context, so the screen-blended head
       composites against this element rather than the section. It needs
       the canvas colour explicitly or the blend falls back to black. */
    background: var(--dk-canvas);
  }
  .head-stage .head-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(520px, 72%);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
  }
  /* mild glitch overlay: duplicate the head image, screen-blended so only the glowing wireframe
     lines show (the near-black background is ignored by "screen"), hue-shifted per copy and offset
     briefly on a loop for an RGB channel-split flicker. Sits above the base image (z:0) but below
     the connector lines/dots/cards (z:2+), so it never touches the study cards. */
  .head-glitch-r, .head-glitch-c {
    mix-blend-mode: screen;
    opacity: 0;
    animation: headGlitch 7s steps(1) infinite;
  }
  .head-glitch-r { filter: brightness(1.3) saturate(3) hue-rotate(-40deg); }
  .head-glitch-c { filter: brightness(1.3) saturate(3) hue-rotate(140deg); }
  @keyframes headGlitch {
    0%, 15%, 100% { opacity: 0; transform: translate(-50%, -50%); }
    15.3% { opacity: .85; transform: translate(calc(-50% - 3px), -50%); }
    15.6% { opacity: 0; transform: translate(-50%, -50%); }
    16.4% { opacity: .85; transform: translate(calc(-50% + 3px), -50%); }
    16.7% { opacity: 0; transform: translate(-50%, -50%); }
  }
  /* momentary screen-tear: a band of random-color vertical stripes flashes and jumps horizontally,
     twice per cycle, at different heights each time, classic corrupted-signal look. Uses raw RGB/CRT
     colors rather than the brand palette on purpose, same as the flicker above. */
  .head-tear {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    background: repeating-linear-gradient(90deg,
        rgba(255,0,90,.9) 0px, rgba(255,0,90,.9) 3px,
        rgba(0,229,255,.9) 3px, rgba(0,229,255,.9) 6px,
        rgba(190,255,0,.9) 6px, rgba(190,255,0,.9) 9px,
        rgba(255,0,229,.9) 9px, rgba(255,0,229,.9) 12px,
        rgba(255,214,0,.9) 12px, rgba(255,214,0,.9) 15px);
    clip-path: inset(0 0 100% 0);
    animation: headTear 9s steps(1) infinite;
  }
  @keyframes headTear {
    0%, 20%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(0); }
    20.3% { opacity: .55; clip-path: inset(22% 0 61% 0); transform: translateX(-6px); }
    20.6% { opacity: 0; }
    21.4% { opacity: .5; clip-path: inset(58% 0 12% 0); transform: translateX(5px); }
    21.7% { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .head-glitch-r, .head-glitch-c, .head-tear { animation: none; opacity: 0; }
  }
  .pulse-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    background: var(--color-brand);
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    animation: pulse 2.2s ease-out infinite;
  }
  .pulse-dot.v { background: var(--color-violet); animation-delay: .6s; }
  .pulse-dot.g { background: var(--color-gold); animation-delay: 1.1s; }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(232,20,122,.55); }
    70%  { box-shadow: 0 0 0 16px rgba(232,20,122,0); }
    100% { box-shadow: 0 0 0 0 rgba(232,20,122,0); }
  }
  .head-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
  }
  .head-links polyline {
    fill: none;
    stroke: rgba(199,166,255,.9);
    stroke-width: 1.6;
    filter: drop-shadow(0 0 3px rgba(168,85,247,.55));
  }
  .head-links circle { fill: #fff; }
  .study-card {
    position: absolute;
    width: 230px;
    padding: 16px 18px;
    border-radius: var(--dk-radius-plate);
    z-index: 4;
    cursor: pointer;
    /* Left-aligned: centred multi-line body copy reads ragged. */
    text-align: left;
    background: rgba(18,16,14,.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--dk-line-strong);
    box-shadow: var(--dk-shadow-lift);
    color: var(--dk-text);
    transition: transform .2s var(--ease-standard), border-color .2s;
  }
  .study-card:hover {
    border-color: var(--dk-signal);
    transform: translateY(-2px);
  }
  .study-card .inst {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dk-signal);
  }
  .study-card .punch {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 6px 0 0;
  }
  .study-card .full {
    font-size: 12px;
    line-height: 1.55;
    color: var(--dk-text-muted);
    margin-top: 10px;
  }
  .study-card .more {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--dk-text-faint);
    margin-top: 10px;
  }
  @media (max-width: 768px) {
    .head-stage { min-height: 0; }
    .head-stage .head-bg { position: static; width: 64%; transform: none; margin: 0 auto var(--space-6); }
    .head-links, .pulse-dot, .head-glitch-r, .head-glitch-c, .head-tear { display: none; }
    .study-card { position: static; width: auto; left: auto !important; top: auto !important; margin-bottom: 12px; }
  }

  /* ── Institutions carousel ── */
  .institutions-section {
    background: var(--color-bg-base);
    padding: 56px var(--space-6);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
  }
  /* A logo wall wants the full width, not a 960px box that reads as a
     segment. The logos are dark-on-transparent SVGs, so on this canvas they
     have to be inverted to white rather than multiplied to black. */
  .institutions-inner { max-width: 1400px; margin: 0 auto; }
  .institutions-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dk-text-faint);
    text-align: center;
    margin: 0 0 var(--space-8);
  }
  .inst-carousel {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }
  .inst-track {
    display: flex;
    width: max-content;
    animation: instScroll 46s linear infinite;
  }
  .inst-group {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    padding-right: var(--space-16);
  }
  .inst-carousel:hover .inst-track { animation-play-state: paused; }
  .inst-logo { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
  .inst-logo img {
    height: 28px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    /* brightness(0) alone renders every logo black, which is invisible here */
    filter: brightness(0) invert(1);
    opacity: .58;
    transition: opacity var(--dur-normal) var(--ease-standard);
  }
  .inst-logo.crest img { height: 36px; }
  .inst-name {
    font-size: 1.05rem;
    letter-spacing: .01em;
    color: var(--dk-text-muted);
    transition: color var(--dur-normal) var(--ease-standard);
  }
  .inst-name.heritage {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: .02em;
  }
  .inst-name.science {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: .95rem;
    letter-spacing: .01em;
  }
  .inst-carousel:hover .inst-logo img { opacity: 1; }
  .inst-carousel:hover .inst-name { color: var(--dk-text); }
  @keyframes instScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .inst-track { animation: none; }
    .inst-carousel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .inst-group[aria-hidden="true"] { display: none; }
  }

  /* ── Evidence cards ── */
  .evidence-section { background: var(--color-bg-surface); padding: 96px var(--space-6); }
  .evidence-inner   { max-width: 1100px; margin: 0 auto; }
  .evidence-header  { text-align: center; margin-bottom: var(--space-16); }

  /* shared eyebrow / section title for public pages */
  .pub-eyebrow-light { color: var(--color-brand-light); }
  .pub-h2-light { color: #fff; }

  .evidence-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  @media (max-width: 768px) { .evidence-grid { grid-template-columns: 1fr; } }

  /* evidence card — extends .card, adds accent line on hover */
  .evidence-card {
    position: relative;
    overflow: hidden;
    transition: border-color var(--dur-normal) var(--ease-standard),
                box-shadow    var(--dur-normal) var(--ease-standard),
                transform     var(--dur-normal) var(--ease-standard);
  }
  .evidence-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--dk-signal);
    opacity: 0;
    transition: opacity var(--dur-normal) var(--ease-standard);
  }
  .evidence-card:hover {
    border-color: rgba(232,20,122,.2);
    box-shadow: var(--shadow-brand);
    transform: translateY(-4px);
  }
  .evidence-card:hover::before { opacity: 1; }

  .evidence-stat {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-1);
  }
  .evidence-finding {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
    line-height: 1.3;
  }
  .evidence-body {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-bottom: var(--space-5);
  }
  /* category tag above stat */
  .evidence-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
  }
  .evidence-cat i { font-size: .7rem; color: var(--color-brand); }

  /* publication footer */
  .evidence-source {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 6px;
  }
  .ev-icon { color: var(--color-text-tertiary); font-size: .7rem; margin-right: 2px; }
  .ev-year {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-brand);
  }
  .ev-sep {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-tertiary);
    opacity: .5;
  }
  .ev-author {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-primary);
  }
  .ev-title {
    font-family: var(--font-sans);
    font-size: 11px;
    font-style: italic;
    color: var(--color-text-secondary);
  }
  .ev-inst {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-text-tertiary);
  }
  /* make cards flex columns so footer always sits at bottom */
  .evidence-card {
    display: flex !important;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  .evidence-card:hover .ev-read {
    color: var(--color-brand);
    opacity: 1;
  }
  .ev-read {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    opacity: .5;
    transition: color var(--dur-fast) var(--ease-standard),
                opacity var(--dur-fast) var(--ease-standard);
    white-space: nowrap;
    align-self: center;
  }
  .evidence-body { flex: 1; }

  /* ── Deep dive ── */
  .deepdive-section {
    background: var(--dk-canvas);
    padding: 96px var(--space-6);
    position: relative;
    overflow: hidden;
  }
  .deepdive-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 30% 50%, rgba(168,85,247,.10) 0%, transparent 70%);
    pointer-events: none;
  }
  .deepdive-inner   { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
  .deepdive-grid    {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
  }
  @media (max-width: 768px) { .deepdive-grid { grid-template-columns: 1fr; gap: var(--space-10); } }

  .deepdive-quote {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-style: italic;
    color: #fff;
    line-height: 1.5;
    position: relative;
    padding-left: var(--space-7);
    padding-left: 28px;
  }
  .deepdive-quote::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    background: var(--dk-signal);
    border-radius: 2px;
  }

  .deepdive-list   { display: flex; flex-direction: column; gap: var(--space-5); }
  .deepdive-item   { display: flex; gap: 14px; align-items: flex-start; }
  .deepdive-item-icon {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    background: rgba(232,20,122,.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-brand-light);
    font-size: .85rem;
    flex-shrink: 0;
  }
  .deepdive-item-title {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--space-1);
  }
  .deepdive-item-body {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: rgba(255,255,255,.5);
    line-height: 1.55;
  }

  /* ── Science CTA ── */
  .sci-cta {
    background: var(--color-bg-base);
    padding: 80px var(--space-6);
    text-align: center;
    border-top: 1px solid var(--color-border);
  }
  .sci-cta-inner { max-width: 560px; margin: 0 auto; }
  .sci-cta-title {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
    margin-bottom: var(--space-4);
    letter-spacing: -.02em;
  }
  .sci-cta-sub {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    line-height: 1.6;
  }
  /* button: use .btn-brand from flairt.css + pill override */
  .btn-brand-pill { border-radius: var(--radius-pill) !important; padding: 16px 36px !important; }

  /* ── Science FAQ ── */
  .sci-faq-section {
    background: var(--color-bg-surface);
    padding: 96px var(--space-6);
    border-top: 1px solid var(--color-border);
  }
  .sci-faq-inner { max-width: 1100px; margin: 0 auto; }
  .sci-faq-list { max-width: 760px; margin: 0 auto; }


/* =================================================================
   Pricing: conversational quiz and plan table
   ================================================================= */
  /* ── Hero ── */
  .pricing-hero {
    background: var(--dk-canvas);
    padding: 160px var(--space-6) 96px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .pricing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% -10%, rgba(232,20,122,.15) 0%, transparent 70%),
      radial-gradient(ellipse 50% 40% at 90% 80%, rgba(168,85,247,.10) 0%, transparent 70%);
    pointer-events: none;
  }
  .pricing-hero-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }

  .pricing-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-brand-light);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: var(--space-5);
  }
  .pricing-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin-bottom: var(--space-5);
  }
  .pricing-sub {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    color: rgba(255,255,255,.6);
    line-height: 1.65;
    max-width: 520px;
    margin: 0 auto;
  }

  /* ── Plans Section ── */
  .plans-section {
    background: var(--color-bg-base);
    padding: 80px var(--space-6);
  }
  .plans-inner {
    max-width: 1100px;
    margin: 0 auto;
  }
  /* All three cards share the same outer wrapper so the grid rows are always identical */
  .plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    align-items: stretch;
  }
  .plan-card-outer {
    display: flex;
    flex-direction: column;
  }
  .plan-badge-wrap {
    height: 28px;          /* fixed height — same for visible & hidden badges */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
  }

  /* Plan card base */
  .plan-card {
    background: var(--color-bg-surface);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    flex: 1;
    transition: box-shadow var(--dur-normal) var(--ease-standard),
                transform  var(--dur-normal) var(--ease-standard);
  }
  .plan-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

  /* Featured (Full Rebuild) card */
  .plan-card-featured {
    border: 2px solid transparent;
    background:
      linear-gradient(var(--color-bg-surface), var(--color-bg-surface)) padding-box,
      var(--gradient-brand) border-box;
    box-shadow: var(--shadow-brand);
  }
  .plan-card-featured:hover { box-shadow: var(--shadow-brand-lg); }

  .plan-tier {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
  }
  .plan-card-featured .plan-tier { color: var(--color-brand); }

  .plan-price {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: var(--space-2);
  }
  .plan-price-free { color: var(--color-text-secondary); font-size: 2rem; }
  .plan-price-original {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-tertiary);
    text-decoration: line-through;
    margin-bottom: var(--space-1);
  }

  .plan-price-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-5);
  }

  .plan-headline {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
    line-height: 1.25;
  }

  .plan-tagline {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
  }

  /* Feature list */
  .plan-features { list-style: none; padding: 0; margin: 0 0 var(--space-6); flex: 1; }
  .plan-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: 7px 0;
    line-height: 1.45;
  }
  .plan-feature-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .icon-check  { background: rgba(16,185,129,.12); color: var(--color-success); }
  .icon-x      { background: rgba(107,114,128,.08); color: var(--color-text-tertiary); }
  .icon-lock   { background: rgba(245,158,11,.10); color: var(--color-warning); }

  /* Locked section */

  /* Plan verdict */
  .plan-verdict {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-6);
    text-align: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-muted);
    border-radius: var(--radius-btn);
  }
  .plan-card-featured .plan-verdict {
    background: rgba(232,20,122,.05);
    color: var(--color-text-secondary);
  }

  .plan-cta { margin-top: auto; }

  /* ── Comparison Table ── */
  .compare-section {
    background: var(--color-bg-surface);
    padding: 80px var(--space-6);
  }
  .compare-inner {
    max-width: 900px;
    margin: 0 auto;
  }
  .section-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-brand);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: var(--space-3);
  }
  .section-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-bottom: var(--space-4);
  }
  .section-sub {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.65;
    max-width: 560px;
    margin: 0 auto var(--space-12);
  }

  .compare-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
  }
  .compare-table th, .compare-table td {
    padding: 14px 20px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
  }
  .compare-table th {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    background: var(--color-bg-base);
  }
  .compare-table th:first-child, .compare-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }
  .compare-table .col-featured {
    background: rgba(232,20,122,.04);
  }
  .compare-table th.col-featured {
    color: var(--color-brand);
    background: rgba(232,20,122,.07);
  }
  .compare-table tbody tr:last-child td { border-bottom: none; }
  .compare-table .icon-yes { color: var(--color-success); font-size: 1rem; }
  .compare-table .icon-no  { color: var(--color-text-tertiary); font-size: .85rem; }
  .compare-table .icon-partial { color: var(--color-warning); font-size: .85rem; }
  .compare-table .compare-note { font-size: var(--text-xs); color: var(--color-text-tertiary); }

  /* ── Value Section ── */
  .value-section {
    background: var(--dk-canvas);
    padding: 80px var(--space-6);
    position: relative;
    overflow: hidden;
  }
  .value-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 0% 100%, rgba(232,20,122,.07) 0%, transparent 70%),
      radial-gradient(ellipse 50% 50% at 100% 0%, rgba(168,85,247,.07) 0%, transparent 70%);
    pointer-events: none;
  }
  .value-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .value-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    text-align: center;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-bottom: var(--space-4);
  }
  .value-sub {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: rgba(255,255,255,.55);
    text-align: center;
    line-height: 1.65;
    max-width: 540px;
    margin: 0 auto var(--space-12);
  }
  .value-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
  .value-pillar {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius-card);
    padding: var(--space-6);
  }
  .value-pillar-num {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-brand-light);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
  }
  .value-pillar-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--space-3);
  }
  .value-pillar-body {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: rgba(255,255,255,.5);
    line-height: 1.6;
  }

  /* ── CTA ── */
  .pricing-cta { background: var(--dk-canvas); padding: 80px var(--space-6); }
  .pricing-cta-inner { max-width: 560px; margin: 0 auto; }
  .pricing-cta-title {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: var(--space-4);
    letter-spacing: -.02em;
  }
  .pricing-cta-sub { font-family: var(--font-sans); font-size: var(--text-body); color: rgba(255,255,255,.75); margin-bottom: var(--space-8); }
  .pricing-cta-note {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: rgba(255,255,255,.55);
    margin-top: var(--space-4);
  }

  /* ── Pricing Quiz ── */
  .pricing-quiz-section { background: var(--color-bg-base); padding: 80px var(--space-6); }
  .pricing-quiz-inner { max-width: 580px; margin: 0 auto; }
  .pricing-quiz-retest { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6) 32px; }

  /* ── Responsive ── */
  @media (max-width: 900px) {
    .plans-grid  { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .value-pillars { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .compare-table th, .compare-table td { padding: 10px 12px; font-size: var(--text-xs); }
  }


/* =================================================================
   About
   ================================================================= */
  /* ── Hero ── */
  .about-hero {
    background: var(--dk-canvas);
    padding: 160px var(--space-6) 80px;
    position: relative;
    overflow: hidden;
  }
  .about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 20% 50%, rgba(168,85,247,.12) 0%, transparent 70%),
      radial-gradient(ellipse 40% 40% at 80% 20%, rgba(232,20,122,.10) 0%, transparent 70%);
    pointer-events: none;
  }
  .about-hero-inner { max-width: 760px; position: relative; z-index: 1; margin: 0 auto; }

  .about-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-brand-light);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: var(--space-5);
  }
  .about-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin-bottom: var(--space-5);
  }
  .about-hero-sub {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
    max-width: 580px;
  }

  /* ── Story ── */
  .story-section { background: var(--color-bg-surface); padding: 96px var(--space-6); }
  .story-inner   { max-width: 800px; margin: 0 auto; }


  .story-body { font-family: var(--font-sans); font-size: 1.0625rem; color: var(--color-text-secondary); line-height: 1.8; }
  .story-body p + p { margin-top: var(--space-5); }
  .story-body strong { color: var(--color-text-primary); font-weight: 600; }

  .story-highlight {
    background: var(--color-bg-base);
    border-left: 3px solid var(--color-brand);
    border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
    padding: var(--space-6) 28px;
    margin: var(--space-8) 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--color-text-primary);
    line-height: 1.5;
  }

  .method-badges { display: flex; flex-wrap: wrap; gap: var(--space-2) + var(--space-1); gap: 10px; margin-top: var(--space-6); }
  /* method badges extend .badge-neutral */


  /* ── Contact ── */
  .contact-section {
    background: var(--dk-canvas);
    padding: 80px var(--space-6);
    position: relative;
    overflow: hidden;
  }
  .contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(232,20,122,.06) 0%, transparent 70%);
    pointer-events: none;
  }
  .contact-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
  /* Closing section, so the heading centres over the row beneath it. */
  .contact-header { margin-bottom: var(--space-10); text-align: center; }

  /* Three addresses read as a row, not a stack. The grid rule used to be
     swallowed by a pair of orphaned selectors above it. */
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--dk-line);
  }
  .contact-card {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) var(--space-6) 0;
    border-bottom: 1px solid var(--dk-line);
    text-decoration: none;
    transition: background var(--dur-normal) var(--ease-standard);
  }
  .contact-card + .contact-card { padding-left: var(--space-6); border-left: 1px solid var(--dk-line); }
  .contact-card:hover { background: rgba(245,241,236,.04); }
  .contact-card-icon {
    color: var(--dk-signal);
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
  }
  .contact-card-type {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dk-text-faint);
    margin-bottom: 6px;
  }
  .contact-card-email {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--dk-text);
  }
  .contact-card:hover .contact-card-email { color: var(--dk-signal); }
  @media (max-width: 760px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-card + .contact-card { padding-left: 0; border-left: 0; }
  }

  /* ── People (Team and Partners) ── */
  .people-section {
    background: var(--dk-canvas);
    border-top: 1px solid var(--dk-line);
    padding: var(--space-24) var(--space-6);
  }
  .people-section + .people-section { border-top: 1px solid var(--dk-line); }
  .people-inner { max-width: 1100px; margin: 0 auto; }
  .people-head { margin-bottom: var(--space-12); }
  .people-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dk-text-faint);
    margin: var(--space-3) 0 0;
  }
  .people-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
  }
  .person { margin: 0; display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .person img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    border-radius: var(--dk-radius-plate);
    background: var(--dk-panel);
  }
  .person-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--dk-text);
    margin: 0;
  }
  .person-role {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dk-signal);
    margin: 6px 0 var(--space-4);
  }
  .person-bio {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--dk-text-muted);
    margin: 0;
  }
  .person-handle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--dk-text-faint);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard);
  }
  .person-handle:hover { color: var(--dk-signal); }
  @media (max-width: 900px) {
    .people-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  }
  @media (max-width: 520px) {
    .person { grid-template-columns: 1fr; }
    .person img { max-width: 200px; }
  }

  /* ── Disclaimer ── */
  .about-disclaimer {
    background: var(--color-bg-base);
    border-top: 1px solid var(--color-border);
    padding: var(--space-8) var(--space-6);
    text-align: center;
  }
  .about-disclaimer p { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--color-text-tertiary); max-width: 600px; margin: 0 auto; line-height: 1.6; }


/* =================================================================
   FAQ
   ================================================================= */
  .faq-hero {
    background: var(--dk-canvas);
    padding: 160px var(--space-6) 72px;
    position: relative;
    overflow: hidden;
  }
  .faq-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 20% 50%, rgba(168,85,247,.12) 0%, transparent 70%),
      radial-gradient(ellipse 40% 40% at 80% 20%, rgba(232,20,122,.10) 0%, transparent 70%);
    pointer-events: none;
  }
  .faq-hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
  .faq-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-brand-light);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: var(--space-5);
  }
  .faq-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin-bottom: var(--space-5);
  }
  .faq-hero-sub {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    color: rgba(255,255,255,.62);
    line-height: 1.7;
    max-width: 580px;
  }
  .faq-hero-sub a { color: var(--color-brand-light); text-decoration: underline; text-underline-offset: 3px; }
  /* Renamed from .faq-body: the accordion partial already uses that class
     for its answer paragraph, and this rule is no longer page-local. */
  .faq-list { background: var(--color-bg-surface); padding: 80px var(--space-6); }
  .faq-list-inner { max-width: 760px; margin: 0 auto; }
  .faq-group { margin-bottom: var(--space-12); }
  .faq-group:last-of-type { margin-bottom: 0; }
  .faq-group-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -.015em;
    margin-bottom: var(--space-5);
  }
  .faq-closing {
    max-width: 760px;
    margin: var(--space-12) auto 0;
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-bg-base);
    text-align: center;
  }
  .faq-closing-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
  }
  .faq-closing-body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    line-height: 1.65;
    max-width: 480px;
    margin: 0 auto var(--space-6);
  }
  .faq-closing-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
  }
  .faq-closing-links {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }
  .faq-closing-links a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }


/* =================================================================
   Footer
   ================================================================= */
  .pub-footer {
    background: var(--dk-canvas);
    border-top: 1px solid var(--dk-line);
  }
  .pub-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-16) var(--space-6) var(--space-8);
  }
  /* Two columns, not three. The third column was one link away from
     being the second column. */
  .pub-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-12);
    align-items: start;
    margin-bottom: var(--space-16);
  }
  .pub-footer-brand { max-width: 320px; }

  .pub-footer-tagline {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--dk-text-muted);
    line-height: 1.6;
    margin: var(--space-4) 0 var(--space-6);
  }

  .pub-footer-socials { display: flex; gap: var(--space-5); }
  .pub-social-link {
    color: var(--dk-text-faint);
    text-decoration: none;
    font-size: 1.05rem;
    line-height: 1;
    transition: color var(--dur-fast) var(--ease-standard);
  }
  .pub-social-link:hover { color: var(--dk-text); }

  .pub-footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-16);
  }
  .pub-footer-link {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--dk-text-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard);
  }
  .pub-footer-link:hover { color: var(--dk-text); }

  .pub-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: baseline;
    justify-content: space-between;
    padding-top: var(--space-6);
    border-top: 1px solid var(--dk-line);
  }
  .pub-footer-copy,
  .pub-footer-disclaimer {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--dk-text-faint);
    margin: 0;
  }

  @media (max-width: 720px) {
    .pub-footer-top { grid-template-columns: 1fr; gap: var(--space-10); }
  }


/* =================================================================
   Terms
   ================================================================= */

  .legal-hero {
    background: var(--dk-canvas);
    padding: 140px var(--space-6) var(--space-16);
    position: relative;
  }
  .legal-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
  }
  .legal-hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
  .legal-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--dk-signal);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
  }
  .legal-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin-bottom: 12px;
  }
  .legal-hero-meta {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--dk-text-muted);
  }

  /* Legal body */
  .legal-body-section {
    background: var(--color-bg-surface);
    padding: var(--space-16) var(--space-6) 96px;
  }
  .legal-body-inner {
    max-width: 760px;
    margin: 0 auto;
  }

  /* Twenty magenta links in a bordered card was a wall of pink and the
     opposite of the accent rule. Numbered hairline rows instead: the number
     carries the signal colour, the label reads as text. */
  .legal-toc {
    background: none;
    border: 0;
    border-top: 1px solid var(--dk-line);
    border-radius: 0;
    padding: var(--space-6) 0 0;
    margin-bottom: var(--space-16);
  }
  .legal-toc-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dk-text-faint);
    margin-bottom: var(--space-5);
  }
  .legal-toc-list {
    columns: 2;
    column-gap: var(--space-12);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (max-width: 620px) { .legal-toc-list { columns: 1; } }
  .legal-toc-list li { break-inside: avoid; }
  .legal-toc-list a {
    display: block;
    padding: 7px 0;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--dk-text-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--dk-line);
    transition: color var(--dur-fast) var(--ease-standard);
  }
  .legal-toc-list a:hover { color: var(--dk-text); }

  .legal-section {
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-border);
  }
  .legal-section:last-child { border-bottom: none; margin-bottom: 0; }

  .legal-section-num {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-brand);
    letter-spacing: .1em;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .legal-section-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    line-height: 1.25;
  }
  .legal-text {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    line-height: 1.8;
  }
  .legal-text p + p { margin-top: 14px; }
  .legal-text strong { color: var(--color-text-primary); font-weight: 600; }
  .legal-text ul {
    margin: 14px 0 14px 20px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .legal-text ul li {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    line-height: 1.65;
  }

  /* legal-warning reuses .alert-error semantics */
  .legal-warning {
    background: rgba(239,68,68,.04);
    border: 1px solid rgba(239,68,68,.15);
    border-radius: var(--radius-btn);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-4) 0;
  }
  .legal-warning p {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-error);
    line-height: 1.6;
  }

  /* legal-note reuses .alert-info semantics */
  .legal-note {
    background: rgba(168,85,247,.04);
    border: 1px solid rgba(168,85,247,.12);
    border-radius: var(--radius-btn);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-4) 0;
  }
  .legal-note p {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-violet-dark);
    line-height: 1.6;
  }


/* =================================================================
   Privacy
   ================================================================= */

  .legal-hero {
    background: var(--dk-canvas);
    padding: 140px var(--space-6) var(--space-16);
    position: relative;
  }
  .legal-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
  }
  .legal-hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
  .legal-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--dk-signal);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
  }
  .legal-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin-bottom: 12px;
  }
  .legal-hero-meta {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--dk-text-muted);
  }

  .legal-body-section {
    background: var(--color-bg-surface);
    padding: var(--space-16) var(--space-6) 96px;
  }
  .legal-body-inner {
    max-width: 760px;
    margin: 0 auto;
  }

  /* GDPR badge — extends .badge-success pattern */
  .legal-gdpr-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(16,185,129,.06);
    border: 1px solid rgba(16,185,129,.2);
    border-radius: var(--radius-pill);
    padding: var(--space-2) 18px;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-success);
    margin-bottom: var(--space-10);
  }

  .legal-toc {
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 28px var(--space-8);
    margin-bottom: 56px;
  }
  .legal-toc-title {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
  }

  .legal-section {
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-border);
  }
  .legal-section:last-child { border-bottom: none; margin-bottom: 0; }

  .legal-section-num {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-brand);
    letter-spacing: .1em;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .legal-section-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    line-height: 1.25;
  }
  .legal-text {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    line-height: 1.8;
  }
  .legal-text p + p { margin-top: 14px; }
  .legal-text strong { color: var(--color-text-primary); font-weight: 600; }
  .legal-text ul {
    margin: 14px 0 14px 20px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .legal-text ul li {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    line-height: 1.65;
  }

  .legal-rights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-4);
  }
  @media (max-width: 500px) { .legal-rights-grid { grid-template-columns: 1fr; } }

  /* right card extends .card */
  .legal-right-card {
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    padding: var(--space-4) 18px;
  }
  .legal-right-title {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .legal-right-title i { color: var(--color-brand); }
  .legal-right-body {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.55;
  }

  /* legal-note extends .alert-info pattern */
  .legal-note {
    background: rgba(168,85,247,.04);
    border: 1px solid rgba(168,85,247,.12);
    border-radius: var(--radius-btn);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-4) 0;
  }
  .legal-note p {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-violet-dark);
    line-height: 1.6;
  }

  .cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-4) 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
  }
  .cookie-table th {
    background: var(--color-bg-base);
    padding: var(--space-2) 14px;
    text-align: left;
    font-weight: 700;
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-border);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .cookie-table td {
    padding: var(--space-3) 14px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    line-height: 1.55;
  }
  .cookie-table tr:last-child td { border-bottom: none; }


/* =================================================================
   AUTH
   Sign in, register, and the four password-reset steps. Shared shell
   in users/auth_base.html.
   ================================================================= */

.auth-layout {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--dk-canvas);
}

/* ── Left: the plate ─────────────────────────────────────────────── */
/* Sticky, so the caption stays in view while a long form scrolls past it
   instead of sitting a screen below the fold. */
.auth-plate {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-10);
  isolation: isolate;
}
.auth-plate-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.auth-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(18,16,14,.72) 0%, rgba(18,16,14,.34) 38%, rgba(18,16,14,.92) 100%),
    linear-gradient(90deg, rgba(18,16,14,.55) 0%, rgba(18,16,14,.12) 60%);
}
.auth-plate-logo { font-size: 1.6rem; align-self: flex-start; }

.auth-plate-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 34ch;
}
.auth-plate-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--dk-text);
  text-wrap: pretty;
}
.auth-plate-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dk-text-muted);
  padding-top: var(--space-3);
  border-top: 1px solid var(--dk-line);
}

/* ── Right: the form ─────────────────────────────────────────────── */
.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-10);
  background: var(--dk-canvas);
}
.auth-form-wrap { width: 100%; max-width: 400px; }
.auth-mobile-logo { display: none; font-size: 1.5rem; margin-bottom: var(--space-10); }

.auth-head { margin-bottom: var(--space-8); }
.auth-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--dk-text);
  margin: 0;
  text-wrap: balance;
}
.auth-sub {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--dk-text-muted);
  margin: var(--space-3) 0 0;
  max-width: 44ch;
}
.auth-sub:empty { display: none; }

/* ── Controls on the dark canvas ─────────────────────────────────── */
/* White ground: the Google mark was drawn for a light surface, and a
   transparent button left it floating on a coloured square of its own. */
body.auth-page .btn-social {
  background: #FFFFFF;
  color: #1F1F1F;
  border: 1px solid #FFFFFF;
  border-radius: var(--radius-pill);
  padding: 15px 20px;
  font-weight: 600;
  box-shadow: none;
}
body.auth-page .btn-social:hover {
  background: #E9E5E0;
  border-color: #E9E5E0;
  color: #1F1F1F;
  box-shadow: none;
  transform: translateY(-1px);
}
body.auth-page .btn-social:active { transform: translateY(0); }

body.auth-page .divider-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dk-text-faint);
  margin: var(--space-6) 0;
}
body.auth-page .divider-text::before,
body.auth-page .divider-text::after { border-top: 1px solid var(--dk-line); }

/* ── Floating-label fields ───────────────────────────────────────── */
/* The label starts where the placeholder would be and lifts into the top
   of the control on focus or once the field has a value. One control, one
   line of text, nothing stacked above it.
   `placeholder=" "` on the input is load-bearing: the lift is driven by
   :placeholder-shown, so the placeholder must exist and be blank. The lift
   scales rather than changing font-size, which keeps the label box height
   constant so the translate distance stays predictable. */
.field { position: relative; margin-bottom: var(--space-4); }

.field-input {
  width: 100%;
  height: 62px;
  padding: 25px 18px 8px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.25;
  color: var(--dk-text);
  background: var(--dk-panel);
  border: 1px solid var(--dk-line);
  border-radius: 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
.field-input::placeholder { color: transparent; }
.field-input:hover { border-color: var(--dk-line-strong); }
.field-input:focus {
  border-color: var(--dk-signal);
  background: var(--dk-panel-2);
  box-shadow: 0 0 0 3px var(--dk-signal-wash);
}
/* Chrome paints its own canary background over autofilled inputs; the inset
   shadow is the only way to override it. */
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--dk-text);
  -webkit-box-shadow: 0 0 0 1000px var(--dk-panel-2) inset;
  caret-color: var(--dk-text);
}

/* Anchored to half the control height, not 50% of the container, so an
   inline error message below the input does not drag the label down with it. */
.field-label {
  position: absolute;
  left: 19px;
  top: 31px;
  transform: translateY(-50%);
  transform-origin: left center;
  font-size: 15px;
  line-height: 1;
  color: var(--dk-text-faint);
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 38px);
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    transform var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.field-input:focus ~ .field-label,
.field-input:not(:placeholder-shown) ~ .field-label,
.field-input:-webkit-autofill ~ .field-label {
  transform: translateY(calc(-50% - 20px)) scale(.72);
}
.field-input:focus ~ .field-label { color: var(--dk-signal); }

/* Trailing controls: password reveal, and the password-rules callout. */
.field-suffix {
  position: absolute;
  right: 9px;
  top: 31px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
}
.field.has-suffix .field-input { padding-right: 54px; }
.field.has-suffix-2 .field-input { padding-right: 88px; }
.field-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--dk-text-faint);
  cursor: pointer;
  font-size: .95rem;
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.field-icon-btn:hover { color: var(--dk-text); background: rgba(245,241,236,.07); }

.field.has-error .field-input { border-color: var(--dk-bad); }
.field.has-error .field-input:focus { box-shadow: 0 0 0 3px rgba(232,133,58,.16); }
.field.has-error .field-label { color: var(--dk-bad); }
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--dk-bad);
  margin: 6px 0 0 4px;
}

body.auth-page .form-error { color: var(--dk-bad); }
body.auth-page .help-tooltip { margin-left: 0; }
body.auth-page .help-tooltip i { color: var(--dk-text-faint); font-size: .95rem; }
/* Anchor right so a 260px callout on a 400px column stays on screen. */
body.auth-page .help-tooltip-body {
  left: auto;
  right: -4px;
  background: var(--dk-panel-2);
  border: 1px solid var(--dk-line-strong);
  border-radius: 12px;
  color: var(--dk-text-muted);
  box-shadow: var(--dk-shadow-plate);
}
/* Django hands us a real <ul> of the active password validators. Let it be
   a list instead of a run-on sentence. */
body.auth-page .help-tooltip-body ul {
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
}
body.auth-page .help-tooltip-body li { margin: 0 0 5px; line-height: 1.45; }
body.auth-page .help-tooltip-body li:last-child { margin-bottom: 0; }

/* Links and footnotes under the form */
.auth-note {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--dk-text-faint);
  margin: var(--space-4) 0 0;
}
.auth-alt {
  font-size: var(--text-sm);
  color: var(--dk-text-muted);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--dk-line);
}
.auth-note a,
.auth-alt a,
.auth-forgot {
  color: var(--dk-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.auth-note a:hover,
.auth-alt a:hover,
.auth-forgot:hover { color: var(--dk-signal); }
.auth-forgot {
  display: inline-block;
  font-size: var(--text-sm);
  margin: calc(var(--space-2) * -1) 0 var(--space-6);
}
.auth-actions { margin-top: var(--space-6); }

/* ── Mobile: the plate becomes a band, the form takes the page ───── */
@media (max-width: 860px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-plate { display: none; }
  .auth-mobile-logo { display: inline-flex; }
  .auth-form-panel {
    align-items: flex-start;
    padding: var(--space-10) var(--space-6) var(--space-16);
    min-height: 100dvh;
  }
  .auth-form-wrap { max-width: 460px; margin-inline: auto; }
}


/* =================================================================
   BLOG
   The blog kept the v1 light system after the public pages moved to
   darkroom, and it never linked this stylesheet at all, which is why
   the shared footer rendered unstyled.

   Nothing here changes blog markup or article copy. The --blog-*
   token set is reassigned inside the scope so the 40-odd rules that
   already read those tokens follow for free; below that, only the
   rules that hardcoded a literal colour need restating.
   ================================================================= */

body.darkroom {
  --blog-bg:             var(--dk-canvas);
  --blog-surface:        var(--dk-panel);
  --blog-text:           var(--dk-text);
  --blog-text-muted:     var(--dk-text-muted);
  --blog-border:         var(--dk-line);
  --blog-placeholder-bg: var(--dk-panel-2);
}

/* ── Header ──────────────────────────────────────────────────── */
body.darkroom .blog-header {
  background: rgba(18,16,14,.72);
  border-bottom: 1px solid var(--dk-line);
}
body.darkroom .blog-header.scrolled {
  background: rgba(18,16,14,.94);
  border-bottom-color: var(--dk-line-strong);
}
body.darkroom .blog-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--dk-text-faint);
}
body.darkroom .blog-label:hover { color: var(--dk-text); }
body.darkroom .blog-logo-divider { background: var(--dk-line-strong); height: 16px; }
body.darkroom .blog-header-back {
  color: var(--dk-text-muted);
  border-color: var(--dk-line-strong);
}
body.darkroom .blog-header-back:hover {
  color: var(--dk-text);
  border-color: var(--dk-text-faint);
  background: rgba(245,241,236,.06);
}

/* The wordmark box is trimmed of the descent Newsreader reserves but never
   uses (see .flairt-logo in flairt.css), so centring the row now lines the
   mark, the letters, the rule and the label up on their ink rather than on
   boxes of different heights. Measured spread across the four: 0.5px. */
body.darkroom .blog-logo-wrap {
  align-items: center;
  gap: var(--space-3);
}

/* ── Index hero ──────────────────────────────────────────────── */
body.darkroom.blog-index-page { background: var(--dk-canvas); }
body.darkroom .blog-index-hero {
  text-align: left;
  max-width: 1160px;
  padding-top: var(--space-20);
  padding-bottom: var(--space-12);
}
body.darkroom .blog-index-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--dk-text-faint);
}
body.darkroom .blog-index-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.2vw, 3.4rem);
  letter-spacing: -.018em;
  line-height: 1.06;
  color: var(--dk-text);
}
body.darkroom .blog-index-hero-sub {
  margin: 0;
  max-width: 52ch;
  color: var(--dk-text-muted);
}

/* ── Card grid ───────────────────────────────────────────────── */
/* Plates, not floating white cards: one flat panel, a hairline, and
   the two-radius scale. The lift on hover is the only motion. */
body.darkroom .blog-card {
  background: var(--dk-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius-plate);
  box-shadow: none;
}
body.darkroom .blog-card:hover {
  background: var(--dk-panel-2);
  border-color: var(--dk-line-strong);
  box-shadow: var(--dk-shadow-lift);
}
body.darkroom .blog-card-img-fade {
  background: linear-gradient(to bottom, transparent, var(--dk-panel));
}
body.darkroom .blog-card:hover .blog-card-img-fade {
  background: linear-gradient(to bottom, transparent, var(--dk-panel-2));
}
body.darkroom .blog-card-excerpt-fade {
  background: linear-gradient(to bottom, transparent, var(--dk-panel));
}
body.darkroom .blog-card:hover .blog-card-excerpt-fade {
  background: linear-gradient(to bottom, transparent, var(--dk-panel-2));
}
body.darkroom .blog-card-category {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  background: none;
  padding: 0;
  color: var(--dk-signal);
}
body.darkroom .blog-card-date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--dk-text-faint);
}
body.darkroom .blog-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--dk-text);
}
body.darkroom .blog-card:hover .blog-card-title { color: var(--dk-text); }
body.darkroom .blog-card-excerpt { color: var(--dk-text-muted); }
body.darkroom .blog-card-read-more { color: var(--dk-text-muted); }
body.darkroom .blog-card:hover .blog-card-read-more { color: var(--dk-signal); }

/* ── Article ─────────────────────────────────────────────────── */
body.darkroom.article-page { background: var(--dk-canvas); }
body.darkroom .article-hero-img,
body.darkroom .article-hero-placeholder {
  border-radius: var(--dk-radius-plate);
  box-shadow: var(--dk-shadow-plate);
}
body.darkroom .article-category {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  background: none;
  padding: 0;
  color: var(--dk-signal);
}
body.darkroom .article-read-time,
body.darkroom .article-byline-date { color: var(--dk-text-faint); }
body.darkroom .article-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.06;
  color: var(--dk-text);
}
body.darkroom .article-byline { border-color: var(--dk-line); }
body.darkroom .article-byline-name { color: var(--dk-text); }
body.darkroom .article-body { color: var(--dk-text-muted); }
body.darkroom .article-body p { color: var(--dk-text-muted); }
body.darkroom .article-body h2,
body.darkroom .article-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--dk-text);
}
body.darkroom .article-body strong { color: var(--dk-text); }
/* Prose links are underlined; buttons that happen to sit in the prose are not. */
body.darkroom .article-body a:not([class*="btn-"]) {
  color: var(--dk-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body.darkroom .article-body a:not([class*="btn-"]):hover { color: var(--dk-signal); }
body.darkroom .article-img-caption { color: var(--dk-text-faint); }

/* Pull quote: a rule and space, not a tinted box. */
body.darkroom .article-pullquote {
  background: none;
  border-left: 2px solid var(--dk-signal);
  border-radius: 0;
}
body.darkroom .article-pullquote p {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  color: var(--dk-text);
}
body.darkroom .article-pullquote cite { color: var(--dk-text-faint); }

body.darkroom .article-data-box {
  background: var(--dk-panel);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius-plate);
}
body.darkroom .article-data-box-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--dk-text-faint);
}
body.darkroom .article-stat-value {
  font-family: var(--font-display);
  color: var(--dk-signal);
}
body.darkroom .article-stat-label { color: var(--dk-text-muted); }

/* The CTA band carried a magenta-plus-violet wash. One accent only. */
body.darkroom .article-cta {
  background: var(--dk-canvas-2);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius-plate);
}
body.darkroom .article-cta::before {
  background: radial-gradient(ellipse 70% 90% at 0% 50%, var(--dk-signal-wash) 0%, transparent 68%);
}
body.darkroom .article-cta-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--dk-signal);
}
body.darkroom .article-cta .article-cta-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--dk-text);
}
body.darkroom .article-cta-body { color: var(--dk-text-muted); }

body.darkroom .article-references { border-top: 1px solid var(--dk-line); }
body.darkroom .article-references-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--dk-text-faint);
}
body.darkroom .article-references li { color: var(--dk-text-faint); }

body.darkroom .article-faq-title,
body.darkroom .article-related-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--dk-text);
}
body.darkroom .article-faq-item {
  background: var(--dk-panel);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius-plate);
}
body.darkroom .article-faq-item[open] { border-color: var(--dk-line-strong); }
body.darkroom .article-faq-q { color: var(--dk-text); }
body.darkroom .article-faq-a { color: var(--dk-text-muted); }

body.darkroom .article-related-card {
  background: var(--dk-panel);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius-plate);
}
body.darkroom .article-related-card:hover {
  background: var(--dk-panel-2);
  border-color: var(--dk-line-strong);
  box-shadow: var(--dk-shadow-lift);
}
body.darkroom .article-related-category {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--dk-signal);
}
body.darkroom .article-related-headline {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--dk-text);
}
body.darkroom .article-related-more { color: var(--dk-text-faint); }

/* Podcast player. The Spotify green stays: it is that service's mark,
   not a second accent of ours. */
body.darkroom .article-podcast-player {
  background: var(--dk-panel);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius-plate);
}
body.darkroom .article-podcast-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--dk-text-faint);
}
body.darkroom .article-podcast-time { color: var(--dk-text-faint); }
body.darkroom .article-podcast-speed-label { color: var(--dk-text-faint); }
body.darkroom .article-podcast-speed-btn {
  border-color: var(--dk-line-strong);
  color: var(--dk-text-muted);
  background: none;
}
body.darkroom .article-podcast-speed-btn:hover {
  border-color: var(--dk-text-faint);
  color: var(--dk-text);
}
body.darkroom .article-podcast-progress { background: var(--dk-line-strong); }

/* ── Podcast banner on the index (was an inline <style> block) ──── */
.blog-podcast-banner {
  max-width: 1160px;
  margin: 0 auto var(--space-12);
  padding: 0 var(--space-6);
}
.blog-podcast-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--dk-radius-plate);
  background: var(--dk-panel);
  border: 1px solid var(--dk-line);
  flex-wrap: wrap;
}
.blog-podcast-icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1DB954;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #08130B;
  font-size: 1.15rem;
}
.blog-podcast-text { flex: 1; min-width: 180px; }
.blog-podcast-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dk-text-faint);
  margin: 0 0 4px;
}
.blog-podcast-desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--dk-text-muted);
  line-height: 1.55;
  margin: 0;
}
.blog-podcast-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  background: #1DB954;
  color: #08130B;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.blog-podcast-cta:hover {
  background: #24D164;
  color: #08130B;
  text-decoration: none;
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .blog-podcast-inner { flex-direction: column; align-items: flex-start; }
  .blog-podcast-cta { width: 100%; justify-content: center; }
}

/* The article CTA buttons carry an inline style="color:#fff" in every
   article file. On the v1 magenta button that was right; on the darkroom
   cream button it is white on cream, 1.12:1. The article markup is not
   ours to rewrite here, so the inline declaration is overridden instead. */
body.darkroom .article-cta .btn-brand,
body.darkroom .article-cta .btn-brand:hover {
  color: var(--dk-canvas) !important;
}

/* White on Spotify green is 2.6:1 at 12px. Their mark keeps the green;
   the label goes dark so it can actually be read. */
body.darkroom .article-podcast-spotify,
body.darkroom .article-podcast-spotify:hover { color: #08130B; }

/* Buttons never carry a text underline, wherever they land in the article.
   .article-page / .blog-index-page sit on <body> itself, so these are
   compound selectors, not descendant ones. */
body.darkroom.article-page a[class*="btn-"],
body.darkroom.blog-index-page a[class*="btn-"] { text-decoration: none; }