/* ---------------------------------------------------------------------------
   Self-hosted fonts (build/08 §6). No third-party round-trip in front of the LCP
   element, and no visitor IP handed to a font CDN.

   Barlow Condensed (display) and IBM Plex Sans (body) replaced Playfair Display
   and DM Sans on 2026-09-02 by founder direction: the site reads as a
   close-protection dossier, and a condensed signage grotesque plus IBM's own
   document face carry that where an editorial serif did not.

   These are STATIC per-weight cuts, not variable faces. Google's CSS API serves
   one variable file for every requested weight, which made 500 and 600 render as
   browser-synthesised fake bold at identical advance widths; the per-weight
   statics were fetched instead and verified to render as three distinct weights.
   Licence: SIL Open Font License 1.1 — self-hosting is permitted.

   RETIRED 2026-09-18: apple.css sets the system face (SF Pro on Apple devices), so
   these faces are no longer declared or shipped. The files stay in site-src/fonts/
   for the video harness, which burns its label with IBM Plex Sans 600.
   --------------------------------------------------------------------------- */

:root {
  /* ===== LAYER 1 — PRIMITIVES. Components never reference these. =====
     GOLD: hue band Lab h 83–87 at the ink steps — below metallic gold (88.7),
     far below brass (97.3) and mustard (91.3). Chroma PEAKS at L* 65–79, which
     is where the ink and the fills live. Gold is a b*-axis colour: it is spent
     on AREA and LARGE TYPE, never rationed onto hairlines or 12px labels.
     Rationing gold to small elements does not make it precious. It makes it
     invisible, and what survives is the luminance, which is silver. */
  --gold-50:  #f6e7bf;  /* L* 92.0  C* 19.9  h 87.3 — rim light, specular stop, focus ring */
  --gold-100: #f0cf82;  /* L* 85.9  C* 35.9  h 85.9 — gradient top stop, arrowheads */
  --gold-200: #c9a84c;  /* L* 79.0  C* 62.2  h 84.8 — GOLD INK. Default gold. */
  --gold-300: #c9a84c;  /* L* 72.1  C* 66.2  h 83.3 — numerals, display, icon strokes */
  --gold-400: #c9a84c;  /* L* 65.1  C* 65.9  h 81.3 — button fill top, glow source */
  --gold-500: #b8963f;  /* L* 57.1  C* 61.1  h 78.2 — button fill bottom, gold edges */
  --gold-600: #8b6914;  /* L* 48.0  C* 54.0  h 76.0 — secondary edge (3:1 to s-3 only) */
  --gold-700: #6f5410;  /* L* 38.1  C* 46.1  h 73.1 — ORNAMENT ONLY. Fails 3:1. */
  --gold-800: #4a3609;  /* L* 26.9  C* 36.8  h 69.3 — inset shadow tint */
  --gold-900: #2c1f05;  /* L* 16.9  C* 26.9  h 63.3 — bronze floor for gradients */

  /* NEUTRALS: warm STONE, hue 58–78 okH — a different hue family from gold
     (85 okH), not a paler version of it. Chroma rises at the dark end (room
     temperature) and falls at the light end (dinginess). This inversion is the
     single change that lets gold be the only saturated thing on the page. */
  --n-000: #000000;  /* L*  0.0  — wells and insets ONLY. Never the page. */
  --n-050: #080807;  /* L*  3.2  C* 3.6 — PAGE */
  --n-100: #0d0c0a;  /* L*  6.9  C* 5.0 — band, table body */
  --n-200: #131210;  /* L* 11.0  C* 6.3 — card */
  --n-300: #1a1814;  /* L* 15.9  C* 8.0 — raised / featured / table head / device screen */
  --n-350: #231f18;  /* L* 20.8  C* 8.9 — floating: nav-on-scroll, chips, hover top  [NEW] */
  --n-400: #2b261d;  /* L* 27.5  C* 9.8 — decorative hairline inside a card */
  --n-500: #3d362a;  /* L* 35.6  C*11.2 — decorative edge */
  --n-600: #776c5c;  /* L* 51.6  C*11.9 — INTERACTIVE edge (3:1 gate) */
  --n-700: #9a8d78;  /* L* 66.5  C*11.2 — text-subtle */
  --n-800: #b2a58d;  /* L* 78.9  C* 9.8 — text-muted */
  --n-900: #f6f0e7;  /* L* 91.9  C* 9.1 — body ink */
  --n-950: #fbf7f0;  /* L* 98.5  C* 3.1 — text-max (was #ffffff) */

  /* ===== LAYER 2 — SEMANTIC. This is the layer components use. ===== */
  --surface-well: var(--n-000);
  --surface-0:    var(--n-050);   /* CHANGED: the page is no longer #000000 */
  --surface-1:    var(--n-100);
  --surface-2:    var(--n-200);
  --surface-3:    var(--n-300);
  --surface-4:    var(--n-350);   /* CHANGED: was n-300, now its own step */

  --text-max:    var(--n-950);    /* h1, h2 only */
  --text:        var(--n-900);
  --text-muted:  var(--n-800);
  --text-subtle: var(--n-700);

  --edge-hair:   var(--n-400);    /* decorative only */
  --edge:        var(--n-500);    /* decorative only */
  --edge-strong: var(--n-600);    /* interactive rest border — 3:1 gate */
  --edge-gold:   var(--gold-600);
  --rule-gold:   var(--gold-600);

  --gold-ink:         var(--gold-200);
  --gold-ink-strong:  var(--gold-300);
  --gold-fill-top:    var(--gold-400);
  --gold-fill:        var(--gold-400);
  --gold-fill-bottom: var(--gold-500);
  --on-gold:          #080807;    /* L* 4.5 — warm ink, never #000 on gold */
  --focus-ring:       var(--gold-50);

  --ok:     #7ccf9b;  /* was #8fb89b — Lab h 152.3 -> 130.4, off the cool sage axis */
  --danger: #d46b55;  /* was #d99b86 — h 44.6 -> 46.4, chroma +3.4 */

  /* ===== MATERIAL — see §2 ===== */
  --rim:         inset 0 1px 0 rgba(246,240,231,.10);
  --rim-strong:  inset 0 1px 0 rgba(246,240,231,.16);
  --rim-gold:    inset 0 1px 0 rgba(201,168,76,.30);
  --seat:        inset 0 -1px 0 rgba(0,0,0,.55);   /* surface-3 / surface-4 ONLY */
  --tint-gold:        rgba(202,149,25,.10);
  --tint-gold-strong: rgba(202,149,25,.16);
  --rim-light:        rgba(246,240,231,.10);        /* legacy alias, repointed */
  --scrim: rgba(0,0,0,.72);
  --shadow-contact: 0 12px 32px -14px rgba(0,0,0,.80);
  --shadow-float:   0 18px 44px -18px rgba(0,0,0,.90);
  --glow-gold:       0 10px 44px -8px rgba(201,168,76,.18);
  --glow-gold-hover: 0 12px 52px -8px rgba(201,168,76,.24);
  --shadow-1: 0 1px 2px rgba(0,0,0,.6);
  --shadow-2: var(--shadow-float);

  /* ===== TYPE — unchanged except the two lines marked ===== */
  --font-display: "Barlow Condensed", "Arial Narrow", Haettenschweiler, sans-serif;
  --font-heading: var(--font-display);   /* was USED but never DEFINED — see note below */
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1:    clamp(42px, 5.1vw, 65px);
  --fs-h2:    clamp(30px, 3.2vw, 42px);
  --fs-h3:    clamp(23px, 1.9vw, 27px);
  --fs-h4:    20px;
  --fs-lead:  clamp(19px, 1.5vw, 21px);
  --fs-body:  17px;
  --fs-small: 14px;
  --fs-label: 14px;                       /* CHANGED from 12px — see §1.4 */
  --fs-numeral: clamp(40px, 4.2vw, 52px);   /* NEW — workflow ordinals */
  --fs-price: clamp(32px, 3.2vw, 42px);
  --text-xs: 14px;
  --text-sm: 14px;          /* USED but never DEFINED */
  --font-body: var(--font-ui);   /* USED but never DEFINED */
  --space-7: 28px;          /* USED but never DEFINED */          /* USED but never DEFINED — .cta-microcopy fell back to inherit */
  --target-min: 44px;       /* USED but never DEFINED — min tap target */
  --lh-h1: 1.05; --lh-h2: 1.08; --lh-h3: 1.15; --lh-h4: 1.35;
  --lh-lead: 1.5; --lh-body: 1.65;
  --tr-h1: -.005em; --tr-h2: 0em; --tr-h3: 0em;
  --tr-label: .12em;                      /* CHANGED from .14em — see §1.4 */

  /* ===== MOTION — see §3 ===== */
  --dur-press: 90ms;  --dur-in: 140ms;  --dur-out: 140ms;
  --dur-state: 260ms; --dur-reveal: 420ms; --dur-draw: 900ms;
  --dur-frame: 180ms; --rise: 6px;
  --stagger: 70ms;  --lift: 14px;  --lift-lg: 20px;
  --ease-std:   cubic-bezier(.2, 0, .2, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-soft:  cubic-bezier(.22, .61, .36, 1);
  --ease-press: cubic-bezier(.3, 0, .1, 1);
  --motion-fast: var(--dur-out);   /* legacy alias, ~30 consumers */
  --ease: var(--ease-std);         /* legacy alias */

  /* ===== LAYER 3 — LEGACY ALIASES. ~289 var() consumers repaint from here. ===== */
  --gold:               var(--gold-200);
  --gold-light:         var(--gold-100);
  --gold-dark:          var(--gold-600);
  --black:              var(--surface-well);
  --charcoal:           var(--surface-1);
  --panel:              var(--surface-2);
  --panel-2:            var(--surface-3);
  --border:             var(--edge-hair);     /* dossier: sheet edges are the hairline */
  --border-soft:        var(--edge-hair);
  --border-interactive: var(--edge-strong);  /* 3:1 gate */
  --muted:              var(--text-muted);
  --dim:                var(--text-subtle);

  --max: 1160px;
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;
  --radius-xs: 2px; --radius-sm: 2px; --radius-md: 3px;
  --radius-lg: 3px; --radius-xl: 3px; --radius-pill: 2px;
  --r-device: 28px; --r-screen: 22px;   /* the phone only: the one rounded object */
  --measure: 68ch;

  /* A second, near-identical copy of this legacy alias block used to sit here and
     silently won on every name it re-declared — including --border, which it
     pointed at the decorative --edge instead of the accessible --edge-strong.
     Removed 2026-09-02; the aliases are declared once, above. */

  /* The duplicate type block that used to sit here re-declared --font-display as
     Playfair/Georgia/serif and reset the scale, silently overriding the values
     above (same :root, later wins). Removed 2026-09-02: the canonical type
     tokens are declared once, further up. */
}


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-ui);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .32;
  mask-image: linear-gradient(to bottom, #000 0, transparent 76%);
}

img,
svg {
  max-width: 100%;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 40px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(8, 8, 7, .94);
  backdrop-filter: blur(16px);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--target-min);
  color: var(--gold-light);
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

/* Square viewBox now, so the 50x36 box from the old wide mark would squash it. */
.logo-mark {
  width: 30px;
  height: 30px;
  color: var(--gold-ink);
  display: inline-flex;
  flex: none;
}

.logo-mark svg,
.logo-mark img {
  width: 100%;
  height: 100%;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.nav-links > .nav-launch-mobile {
  display: none;
}

.nav-links a,
.footer-links a,
.blog-sidebar a,
.text-link {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}

.nav-links > a,
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

.nav-links a:hover,
.footer-links a:hover,
.blog-sidebar a:hover,
.text-link:hover {
  color: var(--gold-light);
}

.text-link.secondary {
  opacity: .8;
}

.text-link.secondary:hover {
  opacity: 1;
}

.nav-actions,
.hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* psychology/05 §2: the focal element needs surrounding empty space, not a
   10px neighbour. Applies to the hero pair only; nav stays tight. */
.hero-actions {
  gap: var(--space-6);
  margin-top: var(--space-8);
}

/* V7 / psychology/05 §14: 44x44 minimum tap target. */
.nav-launch {
  min-height: 44px;
  padding: 12px 18px;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--border);
  background: var(--charcoal);
  color: var(--gold-light);
  border-radius: var(--radius-sm);
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.btn svg,
.text-link svg,
.feature-icon svg,
.pricing-card li svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-gold {
  background: var(--gold);
  color: var(--on-gold);
  box-shadow: none;
}

.btn-gold:hover {
  background: var(--gold-light);
}

/* V6 (psychology/06 §4): .42 alpha measured 2.34:1 against the 3:1 gate for
   interactive edges. V5: the fill made this read as a peer of the primary. */
.btn-outline,
.btn-ghost {
  color: var(--gold-ink);
  border-color: var(--edge-gold);
  background: transparent;
}

.btn-outline:hover,
.btn-ghost:hover {
  border-color: var(--gold);
  background: rgba(201, 168, 76, .1);
}

.btn-lg {
  min-height: 50px;
  padding: 14px 24px;
}

/* psychology/05 §2: the focal element gets the largest local size jump.
   Measured: the outline CTA carries an arrow icon, so the gold button needs
   more horizontal padding than eyeballing suggests to actually win on width. */
.btn-lg.btn-gold {
  padding: 16px 46px;
}

.hero,
.page-hero,
.workflow,
.features,
.comparison,
.pricing,
.solution-map,
.pain,
.objections,
.fit,
.content-hub,
.faq,
.blog-decision-paths,
.blog-layout,
.article-shell,
.landing-shell,
.start-steps,
.start-shell,
.start-plans,
.start-support,
.final-cta {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.hero {
  display: grid;
  place-items: center;
  gap: 28px;
  padding: 72px 0 8px;
  text-align: center;
}

.hero-copy {
  max-width: 880px;
  margin: 0 auto;
}

/* Label sits 12px from its own h2 and 48px from whatever precedes it, so it
   reads as belonging to the heading below rather than floating between two. */
.eyebrow,
.section-label {
  margin: 0 0 var(--space-3);
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tr-label);
}

/* break-word, not anywhere: `anywhere` allows hyphen-less mid-word breaks and
   skews grid min-content sizing. */
h1,
h2,
h3,
h4 {
  margin: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 {
  font: 600 var(--fs-h1)/var(--lh-h1) var(--font-display);
  letter-spacing: var(--tr-h1);
  color: var(--text-max);
  max-width: 20ch;
  margin: 0 auto;
}

h2 {
  font: 600 var(--fs-h2)/var(--lh-h2) var(--font-display);
  letter-spacing: var(--tr-h2);
  color: var(--text-max);
}

h3 {
  font: 600 var(--fs-h3)/var(--lh-h3) var(--font-display);
  letter-spacing: var(--tr-h3);
  color: var(--text);
}

/* h4 previously had no size at all — it inherited body, so rank 4 was invisible. */
h4 {
  font: 700 var(--fs-h4)/var(--lh-h4) var(--font-ui);
  color: var(--text);
}

p {
  margin: 0;
  text-wrap: pretty;
}

.hero-sub,
.page-hero p,
.section-head > p:last-child,
.final-cta p:not(.section-label):not(.cta-assurance),
.article-header > p {
  color: var(--text-muted);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-lead);
}

.hero-sub {
  max-width: 760px;
  margin: 22px auto 30px;
}

.hero-cta-block {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.hero-secondary {
  min-height: var(--target-min);
  padding: 0 var(--space-3);
}

.cta-microcopy {
  max-width: 38rem;
  color: var(--dim);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.hero-actions {
  justify-content: center;
}

.proof-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.proof-strip span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--charcoal);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
}

#features,
#pricing,
#faq,
#next-steps,
#setup-routes,
#plans,
.landing-section,
.start-plans .pricing-card {
  scroll-margin-top: 96px;
}

.product-stage {
  position: relative;
  width: min(100%, 980px);
  min-height: 350px;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 18px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(212, 186, 112, .08), transparent 38%),
    var(--charcoal);
}

.dashboard-card,
.phone-card,
.gate-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(16, 15, 12, .95);
}

.dashboard-main {
  min-height: 290px;
  padding: 16px;
  text-align: left;
}

.card-top,
.member-row,
.metrics-row {
  display: grid;
  align-items: center;
  gap: 12px;
}

.card-top {
  grid-template-columns: auto 1fr auto;
  color: var(--muted);
  font-size: 13px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}

.card-top strong {
  color: var(--text);
}

/* Honesty rail: neutral, not a green "live" signal. */
.card-top .sample-tag {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.status-dot {
  width: 9px;
  height: 9px;
  background: var(--ok);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(124, 207, 155, .1);
}

.metrics-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 0;
}

.metrics-row div {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 14px;
  background: var(--charcoal);
}

.metrics-row span,
.gate-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.metrics-row strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  font-family: "Playfair Display", Georgia, serif;
}

.member-table {
  display: grid;
  gap: 8px;
}

.member-row {
  grid-template-columns: 1.1fr .9fr auto;
  min-height: 42px;
  padding: 9px 12px;
  background: var(--charcoal);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
}

.member-row.head {
  background: transparent;
  border: 0;
  min-height: 24px;
  color: var(--muted);
}

.member-row b {
  justify-self: end;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
}

.ok {
  color: var(--ok);
  background: rgba(124, 207, 155, .1);
}

.warn {
  color: var(--gold-light);
  background: rgba(172, 134, 43, .1);
}

.bad {
  color: var(--danger);
  background: rgba(212, 107, 85, .1);
}

.phone-card {
  position: relative;
  min-height: 280px;
  padding: 36px 14px 16px;
  background: linear-gradient(180deg, #141924 0%, var(--charcoal) 100%);
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 6px;
  border-radius: 999px;
  background: #282b33;
}

.chat-head {
  color: var(--gold-light);
  font-weight: 700;
  margin-bottom: 16px;
}

.chat-bubble {
  width: fit-content;
  max-width: 100%;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 13px;
  text-align: left;
}

.chat-bubble.dark {
  background: #202225;
  color: #d8e0eb;
}

/* psychology/05 §2: this was a byte-identical clone of .btn-gold sitting in the
   same viewport as the real primary CTA. Demoted to a tint so one gold button wins. */
.chat-bubble.gold {
  margin-left: auto;
  background: rgba(172, 134, 43, .14);
  border: 1px solid rgba(172, 134, 43, .3);
  color: var(--gold-light);
  font-weight: 600;
}

.gate-card {
  position: absolute;
  left: 48px;
  bottom: 18px;
  width: 260px;
  padding: 14px;
  text-align: left;
}

.gate-card strong {
  display: block;
  margin-top: 4px;
}

.gate-line {
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--ok));
}

section {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.workflow {
  padding-top: 16px;
}

.band {
  width: 100%;
  max-width: none;
  padding-left: max(24px, calc((100vw - var(--max)) / 2));
  padding-right: max(24px, calc((100vw - var(--max)) / 2));
  background: var(--charcoal);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.section-head {
  max-width: 760px;
  margin-bottom: 36px;
}

.section-head.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head h2 {
  margin-bottom: var(--space-4);
}

.section-subhead {
  max-width: 720px;
  margin: 34px 0 18px;
}

.section-subhead h3 {
  font-size: 24px;
}

.section-subhead p {
  margin-top: 8px;
  color: var(--muted);
}

.pain-grid,
.workflow-grid,
.feature-grid,
.pricing-grid,
.solution-grid,
.topic-grid,
.article-grid,
.glossary-grid,
.search-results {
  display: grid;
  gap: var(--space-8);
}

.pain-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pain-grid article,
.workflow-step,
.feature-card,
.pricing-card,
.solution-card,
.topic-card,
.landing-section,
.landing-sidebar,
.article-card,
.blog-row,
.glossary-card,
.search-result,
.takeaways,
.faq-list details,
.faq-inline details {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.pain-grid article {
  padding: 22px;
}

.pain-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--gold-light);
}

.pain-grid span,
.workflow-step p,
.feature-card p,
.pricing-card p,
.article-card p,
.blog-row p,
.glossary-card p,
.search-result p,
.article-content p,
.article-content li,
.faq-list p,
.faq-inline p {
  color: var(--muted);
}

.workflow-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workflow-step {
  padding: 22px;
  min-height: 210px;
}

.workflow-step span {
  color: var(--gold-ink-strong);
  -webkit-text-stroke: 0;
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-2);
}

.workflow-step h3,
.feature-card h3,
.pricing-card h3,
.article-card h3 {
  margin-bottom: 10px;
}

/* build/08 §3.6: 3, 4 or 6 — six browse-cards read as 3x2, not a 2x4 wall. */
.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
  padding: 22px;
  min-height: 228px;
  transition: border-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.feature-card:hover,
.solution-card:hover,
.topic-card:hover,
.article-card:hover,
.blog-row:hover,
.glossary-card:hover,
.search-result:hover {
  border-color: rgba(172, 134, 43, .55);
  transform: translateY(-1px);
}

.feature-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--gold-light);
  background: #10100c;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.feature-extension {
  display: grid;
  grid-template-columns: 1.15fr repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
  margin-top: var(--space-4);
}

.feature-extension > div,
.feature-extension > article {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--charcoal);
  padding: var(--space-5);
}

.feature-extension > article {
  display: flex;
  gap: var(--space-4);
}

.feature-extension .feature-icon {
  flex: 0 0 42px;
  margin-bottom: 0;
}

.feature-extension h3,
.feature-extension h4 {
  margin-bottom: var(--space-2);
}

.feature-extension p {
  color: var(--muted);
}

.compare-table {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.compare-table > div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  border-bottom: 1px solid var(--border-soft);
}

.compare-table > div:last-child {
  border-bottom: 0;
}

.compare-table span {
  padding: 16px;
  color: var(--muted);
}

.compare-table span:first-child,
.compare-table span:last-child {
  color: var(--text);
}

.compare-head span {
  background: var(--charcoal);
  color: var(--gold-light);
  font-weight: 800;
}

.pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-grid-paid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-jump {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 760px;
  margin: 0 auto var(--space-4);
}

.pricing-jump a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--charcoal);
  color: var(--muted);
  text-decoration: none;
}

.pricing-jump a.featured {
  border-color: var(--gold);
  color: var(--text);
}

.pricing-jump strong {
  color: var(--gold-light);
  font-family: var(--font-heading);
  font-size: 1.35rem;
}

.pricing-jump small {
  margin-left: 2px;
  color: var(--dim);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
}

.free-plan-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr) minmax(210px, .7fr);
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--charcoal);
}

.free-plan-card h3 {
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.65rem;
}

.free-plan-card p,
.free-plan-card li {
  color: var(--muted);
}

.free-plan-card ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.free-plan-card li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.free-plan-card li svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--gold-light);
  fill: none;
  stroke: currentColor;
}

.pricing-card {
  position: relative;
  padding: 22px;
  display: flex;
  flex-direction: column;
  min-height: 430px;
}

/* psychology/07 §5: isolate the target tier with ONE device. Deliberate deviation
   written down per 00-START-HERE precedence rule 5: the gold border is the device,
   and the "Recommended" badge stays because it is a vendor statement rather than
   an empirical claim. The previous stack — border + darker fill + glow shadow
   + negative-margin lift + badge — read as advertising, not as the choice. */
.pricing-card.featured {
  border-color: var(--gold);
}

.pricing-card.custom-tier {
  grid-column: 1 / -1;
}

.popular {
  align-self: flex-start;
  margin-bottom: 12px;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 12px;
  font-weight: 900;
}

.plan-role {
  color: var(--muted);
  font-style: italic;
}

/* Exact cost-per-member at each tier's own limit - the honest comparison that makes
   Empire the obvious value. The billed monthly price always sits directly above it. */
.price-per-member {
  margin: 6px 0 0;
  font-size: var(--fs-label, 13px);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0 0 4px;
}

/* psychology/07 §6: price sits after the benefits, with whitespace around it —
   crowding reads as cheap. margin-top:auto keeps price+CTA aligned across cards. */
.price-block {
  margin-top: auto;
  padding-top: 18px;
}

.plan-outcome {
  font-size: 16px;
  margin: 10px 0 16px;
}

.price-annual {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 14px;
}

.story {
  padding: 0;
}

.story-panel {
  max-width: var(--max);
  margin: 0 auto;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--panel-2), var(--charcoal));
  padding: 40px 44px;
}

.story-panel h2 {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--text);
  margin: 10px 0 14px;
}

.story-panel p {
  color: var(--muted);
  max-width: 70ch;
}

.story-highlight {
  color: var(--gold-light) !important;
  font-weight: 600;
}

/* Calm/premium dial (psychology/07 §0.1, §6): the price sits in body ink at a modest
   size and the tier name carries the card. The one saturated accent is spent on the CTA. */
.price strong {
  color: var(--text);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

/* psychology/07 §6: currency symbol 60–70% of digit size, superscript-aligned. */
.price-symbol {
  font-size: 17px;
  font-weight: 600;
  vertical-align: super;
  margin-right: 1px;
}

.price span {
  color: var(--muted);
}

.pricing-card ul,
.takeaways ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-card li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--muted);
  margin: 10px 0;
}

.pricing-card li svg {
  width: 16px;
  height: 16px;
  color: var(--gold-light);
  margin-top: 4px;
}

.pricing-card .btn {
  margin-top: 14px;
}

/* psychology/07 §6: "Tier name ≥ price in visual weight — name at heading size,
   price one step below." The name gets the display face; the price does not. */
.pricing-card h3 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--text-max);
  margin-bottom: var(--space-1);
}

.plan-action,
.final-cta-action {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
}

.plan-action .cta-microcopy,
.final-cta-action .cta-microcopy {
  text-align: center;
}

.controlled-test {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: var(--space-6);
  align-items: end;
}

.controlled-test h2 {
  max-width: 760px;
  margin-bottom: var(--space-3);
}

.controlled-test p:last-child {
  max-width: 760px;
  color: var(--muted);
}

.controlled-test-actions {
  display: grid;
  justify-items: start;
}

.content-hub .section-head {
  max-width: 820px;
}

.content-hub.compact-hub {
  padding-top: 12px;
}

.content-hub.compact-hub .section-head {
  margin-bottom: 20px;
}

.blog-decision-paths {
  padding-top: 24px;
  padding-bottom: 44px;
}

.blog-decision-paths .section-head {
  max-width: 820px;
}

.decision-path-grid,
.decision-path-featured {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.decision-path-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100%;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 38%),
    linear-gradient(145deg, rgba(172, 134, 43, .08), transparent 48%),
    var(--panel);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.decision-path-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(212, 186, 112, .18));
  opacity: .76;
}

.decision-path-card > * {
  position: relative;
  z-index: 1;
}

.decision-path-card:hover {
  border-color: rgba(172, 134, 43, .5);
  transform: translateY(-1px);
}

.decision-path-card > span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.decision-path-card h3 {
  margin: 10px 0;
  font-size: 24px;
}

.decision-path-card p {
  color: var(--muted);
}

.decision-path-card div {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.decision-path-card a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding-top: 8px;
  border-top: 1px solid rgba(172, 134, 43, .14);
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}

.decision-path-card a:hover {
  border-color: rgba(212, 186, 112, .5);
  color: var(--text);
  transform: translateX(2px);
}

.decision-path-card a svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.decision-path-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.decision-path-mini {
  position: relative;
  display: grid;
  grid-template-columns: minmax(126px, .42fr) minmax(0, 1fr) minmax(176px, .64fr);
  gap: 14px;
  align-items: center;
  padding: 16px 18px 16px 20px;
  overflow: hidden;
  border: 1px solid rgba(172, 134, 43, .14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(172, 134, 43, .06), transparent 36%),
    rgba(255, 255, 255, .025);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.decision-path-mini::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--gold), rgba(212, 186, 112, .2));
}

.decision-path-mini > * {
  position: relative;
  z-index: 1;
}

.decision-path-mini:hover {
  border-color: rgba(172, 134, 43, .44);
  background:
    linear-gradient(90deg, rgba(172, 134, 43, .1), transparent 40%),
    rgba(255, 255, 255, .035);
  transform: translateY(-1px);
}

.decision-path-mini > span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.decision-path-mini h3 {
  margin: 0 0 5px;
  font-size: 18px;
}

.decision-path-mini p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.decision-path-mini nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: flex-end;
}

.decision-path-mini a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(212, 186, 112, .16);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}

.decision-path-mini a:hover {
  border-color: rgba(212, 186, 112, .72);
  color: var(--text);
  transform: translateX(2px);
}

.decision-path-mini a svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.solution-map .section-head {
  max-width: 860px;
}

.compact-map {
  padding-top: 28px;
  padding-bottom: 44px;
}

.topic-brief {
  padding-top: 62px;
  padding-bottom: 62px;
}

.topic-brief-inner,
.topic-brief-answers {
  width: min(100%, var(--max));
  margin-left: auto;
  margin-right: auto;
}

.topic-brief-inner {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: 28px;
  align-items: start;
}

.topic-brief-copy h2 {
  max-width: 680px;
  margin-bottom: 14px;
}

.topic-brief-copy > p:last-of-type {
  max-width: 690px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 300;
}

.topic-checks {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.topic-checks article,
.topic-brief-answers details {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.topic-checks article {
  padding: 18px;
}

.topic-checks h3 {
  margin-bottom: 8px;
  color: var(--gold-light);
}

.topic-checks p {
  color: var(--muted);
}

.topic-diagram {
  margin: 0;
}

.topic-brief-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.topic-brief-answers details {
  padding: 18px;
}

.topic-brief-answers p {
  color: var(--muted);
}

.solution-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-grid.tight {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-card {
  transition: border-color .16s ease, transform .16s ease;
}

.topic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.compact-topics {
  margin-bottom: 16px;
}

.topic-card {
  background: var(--charcoal);
  transition: border-color .16s ease, transform .16s ease;
}

.solution-card a,
.topic-card a {
  display: block;
  height: 100%;
  padding: 22px;
  text-decoration: none;
}

.solution-card span,
.topic-card span {
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
}

.solution-card h3,
.topic-card h3 {
  margin: 10px 0;
}

.solution-card p,
.topic-card p {
  color: var(--muted);
}

.solution-card small,
.topic-card small {
  display: block;
  margin-top: 16px;
  color: var(--muted);
}

.article-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.article-card {
  position: relative;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.article-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, rgba(172, 134, 43, .82), rgba(212, 186, 112, .16));
  opacity: .62;
}

.article-card:hover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}

.article-card a,
.blog-row a {
  display: block;
  height: 100%;
  padding: 22px;
  text-decoration: none;
}

.article-card a {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.article-card span,
.blog-row span,
.article-meta,
.breadcrumbs {
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-1);
}

.article-card h3,
.blog-row h2,
.blog-row h3 {
  margin: 10px 0;
}

.article-card small,
.blog-row small {
  color: var(--muted);
}

.article-card small {
  margin-top: auto;
  padding-top: 16px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--target-min);
  margin-top: var(--space-4);
  padding: var(--space-2) 0;
  color: var(--gold-light);
  font-weight: 800;
}

.faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

details {
  padding: 18px 20px;
}

summary {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  cursor: pointer;
  font-weight: 800;
}

details p {
  margin-top: 12px;
}

.final-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(172, 134, 43, .12), var(--tint-gold)),
    var(--charcoal);
}

.final-cta h2 {
  max-width: 720px;
  margin-bottom: 10px;
}

.final-cta-action {
  min-width: 250px;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(480px, 1.05fr);
  gap: var(--space-7);
  align-items: start;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding: 48px 0 34px;
  border-top: 1px solid var(--border-soft);
}

.footer-brand p,
.footer-copy {
  color: var(--muted);
  font-size: 13px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  font-size: var(--text-sm);
}

.footer-links > div {
  display: grid;
  align-content: start;
}

.footer-links h2 {
  margin-bottom: var(--space-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.footer-copy {
  grid-column: 1 / -1;
}

.page-hero {
  padding-top: 72px;
  padding-bottom: 44px;
}

.page-hero.compact {
  max-width: 900px;
}

.page-hero h1 {
  margin: 0;
  max-width: 850px;
  font-size: 56px;
}

.page-hero p:last-child {
  margin-top: 18px;
}

.landing-hero {
  padding-bottom: 34px;
}

.blog-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

.blog-sidebar {
  position: sticky;
  top: 96px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
}

.blog-sidebar h2 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  margin-bottom: 12px;
}

.blog-sidebar a {
  display: block;
  padding: 9px 0;
  border-top: 1px solid var(--border-soft);
}

.blog-list {
  display: grid;
  gap: 34px;
}

.blog-row {
  transition: border-color .16s ease, transform .16s ease;
}

.blog-cluster {
  display: grid;
  gap: 16px;
  scroll-margin-top: 96px;
}

.blog-cluster-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.blog-cluster-head span {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.blog-cluster-head h2 {
  margin-bottom: 8px;
  font-size: 34px;
}

.blog-cluster-head p {
  max-width: 720px;
  color: var(--muted);
}

.blog-cluster-head a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--gold-light);
  font-weight: 900;
  text-decoration: none;
}

.blog-cluster-head svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-cluster-list {
  display: grid;
  gap: 16px;
}

.search-hero {
  padding-bottom: 28px;
}

.search-form {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  max-width: 820px;
}

.search-form label {
  color: var(--gold-light);
  font-weight: 800;
}

.search-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.search-form input {
  min-width: 0;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--charcoal);
  color: var(--text);
  padding: 0 15px;
  font: inherit;
}

.search-form input::placeholder {
  color: var(--muted);
}

.search-panel,
.glossary-grid,
.comparison-matrix,
.methodology-list,
.answer-index,
.answer-list,
.alternative-grid,
.guide-directory,
.checklist-layout,
.decision-grid,
.intent-overview,
.intent-matrix,
.intent-proof,
.resource-intents,
.resource-map,
.tool-grid,
.tool-workbench,
.tool-example {
  width: min(var(--max), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.resource-intents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.resource-intents article {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(172, 134, 43, .06), transparent 44%),
    var(--panel);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.resource-intents article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, rgba(172, 134, 43, .78), rgba(212, 186, 112, .14));
}

.resource-intents article > * {
  position: relative;
  z-index: 1;
}

.resource-intents article:hover {
  border-color: rgba(172, 134, 43, .48);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
  transform: translateY(-1px);
}

.resource-intents span {
  display: block;
  margin-bottom: 12px;
  color: var(--gold-light);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0;
}

.resource-intents p {
  color: var(--muted);
}

.resource-intents div {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(172, 134, 43, .14);
}

.resource-intents a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(212, 186, 112, .16);
  color: var(--gold-light);
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}

.resource-intents a:hover {
  border-color: rgba(212, 186, 112, .72);
  color: var(--text);
  transform: translateX(2px);
}

.resource-map {
  padding-bottom: 50px;
}

.resource-lanes {
  display: grid;
  gap: 34px;
}

.resource-lane {
  display: grid;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.resource-lane-head {
  display: grid;
  grid-template-columns: minmax(132px, .34fr) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.resource-lane-head > span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.resource-lane-head h3 {
  margin: 0 0 8px;
  font-size: 26px;
}

.resource-lane-head p {
  max-width: 780px;
  color: var(--muted);
}

.resource-lane-head strong {
  justify-self: end;
  min-width: max-content;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--gold-light);
  font-size: 12px;
  line-height: 1;
}

.resource-card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.resource-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, .024);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.resource-card:hover {
  border-color: rgba(212, 186, 112, .45);
  background: rgba(172, 134, 43, .07);
  transform: translateY(-1px);
}

.resource-card > span {
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.resource-card strong {
  line-height: 1.2;
}

.resource-card small {
  display: block;
  margin-top: 7px;
  color: var(--gold-light);
  font-weight: 800;
  line-height: 1.35;
}

.resource-card p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.intent-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 34px;
}

.intent-overview article,
.intent-card,
.intent-proof {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.intent-overview article {
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(172, 134, 43, .08), transparent 52%),
    var(--panel);
}

.intent-overview span,
.intent-card > span {
  display: block;
  margin-bottom: 12px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.intent-overview h2 {
  font-size: 24px;
  margin-bottom: 12px;
}

.intent-overview p,
.intent-card h3,
.intent-proof p {
  color: var(--muted);
}

.intent-matrix {
  padding-bottom: 34px;
}

.intent-board {
  display: grid;
  gap: 16px;
}

.intent-card {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.8fr);
  gap: 20px;
  padding: 24px;
}

.intent-card h3 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.45;
}

.intent-query-list {
  counter-reset: intent-link;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.intent-query-list a {
  counter-increment: intent-link;
  position: relative;
  display: block;
  min-height: 100%;
  padding: 15px 15px 15px 46px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, .025);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.intent-query-list a::before {
  content: counter(intent-link, decimal-leading-zero);
  position: absolute;
  left: 14px;
  top: 16px;
  color: var(--gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.intent-query-list a:hover {
  border-color: rgba(212, 186, 112, .45);
  background: rgba(172, 134, 43, .08);
  transform: translateY(-1px);
}

.intent-query-list strong,
.intent-query-list small,
.intent-query-list em {
  display: block;
}

.intent-query-list strong {
  line-height: 1.25;
}

.intent-query-list small {
  margin-top: 6px;
  color: var(--gold-light);
  font-weight: 800;
  line-height: 1.35;
}

.intent-query-list em {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.intent-proof {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  margin-bottom: 54px;
}

.intent-proof h2 {
  margin-bottom: 10px;
  font-size: 30px;
}

.intent-proof p {
  max-width: 820px;
}

.resource-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  overflow-x: auto;
}

.resource-row {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 1.8fr) 1fr .92fr;
  min-width: 980px;
  color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
}

.resource-row:last-child {
  border-bottom: 0;
}

.resource-row span {
  padding: 16px;
  border-right: 1px solid var(--border-soft);
}

.resource-row span:last-child {
  border-right: 0;
}

.resource-row strong {
  display: block;
  color: var(--text);
  line-height: 1.2;
}

.resource-row small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.5;
}

.resource-row:not(.resource-head) {
  transition: background .16s ease, color .16s ease;
}

.resource-row:not(.resource-head):hover {
  background: rgba(172, 134, 43, .07);
  color: var(--text);
}

.resource-head {
  background: var(--charcoal);
}

.resource-head span {
  color: var(--gold-light);
  font-weight: 900;
}

.comparison-matrix {
  display: grid;
  gap: 0;
  margin-bottom: 50px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  overflow-x: auto;
}

.matrix-row {
  display: grid;
  grid-template-columns: 1.08fr repeat(4, minmax(156px, 1fr));
  min-width: 980px;
  border-bottom: 1px solid var(--border-soft);
}

.matrix-row:last-child {
  border-bottom: 0;
}

.matrix-row > span,
.matrix-row > div {
  padding: 16px;
  border-right: 1px solid var(--border-soft);
  color: var(--muted);
}

.matrix-row > span:last-child,
.matrix-row > div:last-child {
  border-right: 0;
}

.matrix-head {
  background: var(--charcoal);
}

.matrix-head span {
  color: var(--gold-light);
  font-weight: 900;
}

.matrix-row strong {
  display: block;
  color: var(--text);
}

.matrix-row small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.alternative-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 56px;
}

.alternative-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)), var(--panel);
}

.alternative-card > span {
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.alternative-card h2 {
  margin-top: 13px;
  font-size: clamp(24px, 2.2vw, 32px);
}

.alternative-card p,
.alternative-card small {
  color: var(--muted);
}

.alternative-card ul {
  display: grid;
  gap: 9px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.alternative-card li {
  position: relative;
  padding-left: 20px;
  color: var(--text);
  line-height: 1.45;
}

.alternative-card li::before {
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  content: "";
}

.alternative-card small {
  display: block;
  margin-top: auto;
  padding-top: 6px;
  line-height: 1.5;
}

.alternative-card .text-link {
  margin-top: 18px;
}

.guide-directory {
  margin-bottom: 58px;
}

.guide-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.guide-group {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(172, 134, 43, .055), transparent 46%),
    var(--panel);
}

.guide-group > span {
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.guide-group h3 {
  margin-top: 12px;
  font-size: 24px;
}

.guide-group p {
  color: var(--muted);
}

.guide-link-list {
  counter-reset: guide-link;
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.guide-link-list a {
  counter-increment: guide-link;
  position: relative;
  display: block;
  padding: 14px 15px 14px 46px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, .025);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.guide-link-list a::before {
  content: counter(guide-link, decimal-leading-zero);
  position: absolute;
  left: 14px;
  top: 15px;
  color: var(--gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.guide-link-list a:hover {
  border-color: rgba(212, 186, 112, .45);
  background: rgba(172, 134, 43, .08);
  transform: translateY(-1px);
}

.guide-link-list strong {
  display: block;
  line-height: 1.25;
}

.guide-link-list small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.45;
}

.guide-directory > .text-link {
  margin-top: 22px;
}

.alternative-decision {
  padding-top: 62px;
  padding-bottom: 70px;
}

.decision-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.decision-grid article {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.decision-grid h3 {
  font-size: 20px;
}

.decision-grid p {
  margin-top: 12px;
  color: var(--muted);
}

.decision-grid a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--gold-light);
  font-weight: 800;
}

@media (max-width: 760px) {
  .resource-table,
  .comparison-matrix {
    display: grid;
    gap: 12px;
    overflow-x: visible;
    border: 0;
    background: transparent;
  }

  .resource-head,
  .matrix-head {
    display: none;
  }

  .resource-row,
  .matrix-row {
    grid-template-columns: 1fr;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    overflow: hidden;
  }

  .resource-row span,
  .matrix-row > span,
  .matrix-row > div {
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .resource-row span:last-child,
  .matrix-row > span:last-child,
  .matrix-row > div:last-child {
    border-bottom: 0;
  }

  .resource-row span::before,
  .matrix-row:not(.matrix-head) > span::before,
  .matrix-row:not(.matrix-head) > div::before {
    display: block;
    margin-bottom: 7px;
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
  }

  .resource-row span:nth-child(1)::before {
    content: "Intent";
  }

  .resource-row span:nth-child(2)::before {
    content: "Resource";
  }

  .resource-row span:nth-child(3)::before {
    content: "Primary query";
  }

  .resource-row span:nth-child(4)::before {
    content: "Type";
  }

  .matrix-row:not(.matrix-head) > div::before {
    content: "Criterion";
  }

  .matrix-row:not(.matrix-head) > span:nth-child(2)::before {
    content: "Manual admin";
  }

  .matrix-row:not(.matrix-head) > span:nth-child(3)::before {
    content: "Generic bot";
  }

  .matrix-row:not(.matrix-head) > span:nth-child(4)::before {
    content: "Membership platform";
  }

  .matrix-row:not(.matrix-head) > span:nth-child(5)::before {
    content: "KickThemBot fit";
  }
}

.methodology-list {
  display: grid;
  gap: 16px;
  padding-bottom: 44px;
}

.privacy-overview,
.privacy-commitments-inner,
.privacy-scope {
  width: min(var(--max), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.privacy-overview {
  padding-top: 24px;
}

.privacy-lede {
  max-width: 900px;
  margin-bottom: 64px;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--gold);
}

.privacy-lede h2 {
  margin-bottom: 12px;
  font-size: 34px;
}

.privacy-lede > p:last-child,
.privacy-event-grid p,
.privacy-commitment-grid p,
.privacy-scope > p {
  color: var(--muted);
}

.privacy-event-grid,
.privacy-commitment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.privacy-event-grid article,
.privacy-commitment-grid article {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.privacy-event-grid span {
  display: block;
  margin-bottom: 20px;
  color: var(--gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  font-weight: 900;
}

.privacy-event-grid h3,
.privacy-commitment-grid h3 {
  margin-bottom: 10px;
  color: var(--gold-light);
}

.privacy-commitments-inner .section-head {
  max-width: 820px;
}

.privacy-scope {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
  gap: 48px;
  align-items: start;
}

.privacy-scope h2 {
  font-size: 34px;
}

.privacy-scope > p {
  padding-top: 29px;
  font-size: 18px;
}

.methodology-list article {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.methodology-list span {
  color: var(--gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 38px;
  font-weight: 900;
  opacity: .72;
}

.methodology-list h2 {
  margin-bottom: 8px;
  font-size: 28px;
}

.methodology-list p {
  color: var(--muted);
}

.answer-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 26px;
}

.answer-index article,
.answer-list article,
.checklist-layout article {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.answer-index article {
  padding: 20px;
  background:
    linear-gradient(145deg, rgba(172, 134, 43, .08), transparent 46%),
    var(--panel);
}

.answer-index h2 {
  margin-bottom: 10px;
  font-size: 22px;
}

.answer-index a {
  display: block;
  padding: 9px 0;
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  text-decoration: none;
  transition: color .16s ease, padding-left .16s ease;
}

.answer-index a:hover,
.answer-index a:focus-visible {
  color: var(--gold-light);
  padding-left: 6px;
}

.answer-list {
  display: grid;
  gap: 16px;
  padding-bottom: 46px;
}

.answer-list article {
  scroll-margin-top: 96px;
  padding: 24px;
  border-left: 3px solid rgba(172, 134, 43, .5);
  transition: border-color .16s ease, transform .16s ease;
}

.answer-list article:hover {
  border-color: rgba(172, 134, 43, .55);
  transform: translateY(-1px);
}

.answer-list span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.answer-list h2 {
  margin: 8px 0 10px;
  font-size: 30px;
}

.answer-list p {
  max-width: 880px;
  color: var(--muted);
}

.answer-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.answer-list div a {
  padding: 7px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--gold-light);
  background: var(--charcoal);
  font-size: 13px;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease;
}

.answer-list div a:hover,
.answer-list div a:focus-visible {
  border-color: rgba(172, 134, 43, .5);
  background: rgba(172, 134, 43, .08);
}

.answer-detail-shell,
.answer-detail-card,
.answer-related-grid {
  width: min(var(--max), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.answer-detail-hero {
  margin-left: auto;
  margin-right: auto;
}

.answer-detail-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(172, 134, 43, .1), transparent 42%),
    var(--panel);
}

.answer-detail-card > span {
  display: block;
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.answer-detail-card h2 {
  margin-bottom: 12px;
  font-size: 34px;
}

.answer-detail-card > p {
  max-width: 900px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.55;
}

.answer-source-note {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}

.answer-source-note strong {
  color: var(--gold-light);
}

.answer-source-note p {
  max-width: 860px;
  color: var(--muted);
}

.answer-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-top: 28px;
  padding-bottom: 46px;
}

.answer-related-grid > div {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.answer-related-grid h2 {
  margin-bottom: 16px;
  font-size: 28px;
}

.answer-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.answer-link-list a {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--charcoal);
  color: var(--gold-light);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease;
}

.answer-link-list a:hover,
.answer-link-list a:focus-visible {
  border-color: rgba(172, 134, 43, .5);
  background: rgba(172, 134, 43, .08);
}

.start-hero {
  max-width: 920px;
}

.start-launch-note {
  max-width: 680px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 13px;
}

.start-steps {
  padding-bottom: 64px;
}

.start-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.start-step-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}

.start-step-action p {
  max-width: 560px;
  color: var(--muted);
}

.start-shell {
  padding-bottom: 48px;
}

.start-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.start-route-card,
.start-support {
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(172, 134, 43, .08), transparent 44%),
    var(--panel);
}

.start-route-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 24px;
}

.start-route-card > span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.start-route-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  line-height: 1.08;
}

.start-route-card p,
.start-route-card li,
.start-support p {
  color: var(--muted);
}

.start-route-card ol {
  margin: 0;
  padding-left: 20px;
}

.start-route-card li + li {
  margin-top: 8px;
}

.compact-pricing {
  padding-bottom: 0;
}

.start-support {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: 24px;
  align-items: center;
  padding: 28px;
  margin-bottom: 48px;
}

.start-support h2 {
  margin-bottom: 12px;
  max-width: 760px;
}

.start-support-links {
  display: grid;
  gap: 10px;
}

.start-support-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--charcoal);
  color: var(--gold-light);
  font-weight: 900;
  text-decoration: none;
}

.checklist-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 48px;
}

.checklist-layout article {
  padding: 24px;
}

.checklist-layout span {
  display: block;
  color: var(--gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 38px;
  font-weight: 900;
  opacity: .72;
}

.checklist-layout h2 {
  margin: 8px 0 14px;
  font-size: 28px;
}

.checklist-layout ol {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.checklist-layout li + li {
  margin-top: 10px;
}

.tool-grid .section-head {
  grid-column: 1 / -1;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 48px;
}

.tool-card,
.tool-panel,
.tool-notes article {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.tool-card {
  transition: border-color .16s ease, transform .16s ease;
}

.tool-card:hover {
  border-color: rgba(172, 134, 43, .55);
  transform: translateY(-1px);
}

.tool-card a {
  display: grid;
  gap: 8px;
  min-height: 230px;
  padding: 22px;
  text-decoration: none;
}

.tool-card span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.tool-card h3 {
  font-size: 26px;
}

.tool-card p,
.tool-card small {
  color: var(--muted);
}

.tool-workbench {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-bottom: 48px;
}

.tool-workbench > div:first-child {
  position: sticky;
  top: 96px;
}

.tool-panel {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.tool-example {
  padding-top: 0;
  padding-bottom: 48px;
}

.tool-example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tool-example-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.tool-example-card span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.tool-example-card p,
.tool-example-card li {
  color: var(--muted);
}

.tool-example-card ul,
.tool-example-card ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.tool-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tool-form label,
.permission-list label {
  display: grid;
  gap: 7px;
  color: var(--gold-light);
  font-weight: 800;
}

.tool-form input,
.tool-form select {
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--charcoal);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
}

.permission-list {
  display: grid;
  gap: 12px;
}

.permission-list label {
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--charcoal);
  color: var(--muted);
}

.permission-list input {
  margin-top: 6px;
  accent-color: var(--gold);
}

.tool-output {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(172, 134, 43, .28);
  border-radius: 8px;
  background: var(--charcoal);
  padding: 18px;
}

.tool-output strong {
  color: var(--gold-light);
}

.tool-output p,
.tool-output li {
  color: var(--muted);
}

.tool-output ol {
  margin: 0;
  padding-left: 20px;
}

.tool-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tool-metrics span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}

.tool-metrics b {
  color: var(--gold-light);
  font-size: 24px;
}

.tool-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tool-notes article {
  padding: 18px;
}

.tool-notes p {
  color: var(--muted);
}

.search-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.search-result,
.glossary-card {
  transition: border-color .16s ease, transform .16s ease;
}

.search-result a {
  display: grid;
  gap: 8px;
  min-height: 178px;
  padding: 22px;
  text-decoration: none;
}

.search-result span,
.glossary-card span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.search-result h3 {
  font-size: 24px;
}

.muted-note {
  margin-top: 18px;
  color: var(--muted);
}

.glossary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 10px;
  padding-bottom: 44px;
}

.glossary-card {
  scroll-margin-top: 96px;
  padding: 22px;
  min-height: 238px;
}

.glossary-card h2 {
  margin: 9px 0 10px;
  font-size: 26px;
}

.glossary-card small {
  display: block;
  margin-top: 16px;
  color: var(--muted);
}

.article-shell {
  padding-top: 56px;
  padding-bottom: 48px;
}

.article-header {
  max-width: 860px;
  margin-bottom: 38px;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--target-min);
  margin-bottom: 18px;
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}

.article-header h1 {
  margin: 0 0 18px;
  max-width: 900px;
  font-size: 58px;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  color: var(--muted);
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.article-byline span,
.article-byline a {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--charcoal);
  padding: 7px 10px;
}

.article-byline a {
  color: var(--gold-light);
}

.article-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.toc {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
}

.toc strong {
  color: var(--gold-light);
}

.toc a {
  color: var(--muted);
  text-decoration: none;
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
  font-size: 14px;
}

.article-content {
  max-width: 800px;
  min-width: 0;
}

.article-content section {
  padding: 0 0 38px;
}

.article-content h2 {
  font-size: 32px;
  margin-bottom: 14px;
}

.article-content p + p {
  margin-top: var(--space-6);
}

.article-decision-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 34px;
  padding-bottom: 0 !important;
}

.article-decision-summary article {
  min-height: 100%;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(172, 134, 43, .08), transparent 52%),
    var(--charcoal);
}

.article-decision-summary span {
  display: block;
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.article-decision-summary strong {
  display: block;
  color: var(--text);
  line-height: 1.25;
}

.article-decision-summary p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

.article-decision-summary a {
  color: var(--gold-light);
  font-weight: 800;
}

.article-intent-owner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 34px;
  border: 1px solid rgba(172, 134, 43, .32);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: var(--charcoal);
}

.article-content .article-intent-owner {
  padding: 24px;
}

.article-intent-owner span {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.article-intent-owner h2 {
  margin-bottom: 8px;
  font-size: 27px;
}

.article-intent-owner p {
  color: var(--muted);
}

.article-intent-owner .btn {
  min-width: 220px;
}

.landing-shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-top: 32px;
}

.landing-sidebar {
  position: sticky;
  top: 96px;
  padding: 20px;
}

.landing-sidebar strong,
.sidebar-links span {
  display: block;
  color: var(--gold-light);
  font-weight: 900;
}

.landing-sidebar p {
  margin: 8px 0 18px;
  color: var(--muted);
}

.sidebar-links {
  display: grid;
  gap: 9px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

.sidebar-links a {
  color: var(--muted);
  text-decoration: none;
}

.sidebar-links a:hover {
  color: var(--gold-light);
}

.landing-main {
  display: grid;
  gap: 16px;
}

.landing-section {
  padding: 26px;
}

.landing-section h2 {
  font-size: 32px;
  margin-bottom: 12px;
}

.landing-section p {
  color: var(--muted);
}

.landing-section ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 20px 0 0;
}

.landing-section li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--charcoal);
  padding: 12px;
  font-size: 14px;
}

.landing-section li svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--gold-light);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.landing-proof {
  margin-top: 36px;
  margin-bottom: 8px;
}

.landing-proof-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.landing-proof .section-head p:last-child {
  color: var(--muted);
}

.tool-comparison-hub {
  margin-top: 36px;
}

#tool-category-comparison,
#comparison-sources,
#primary-comparison-hub,
#evidence-table {
  scroll-margin-top: 90px;
}

.tool-comparison-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.tool-comparison-hub .section-head p:last-child {
  color: var(--muted);
}

.comparison-method {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 30px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.comparison-method > div {
  padding: 20px 24px 20px 0;
}

.comparison-method > div + div {
  border-left: 1px solid var(--border);
  padding-left: 24px;
}

.comparison-method span {
  display: block;
  margin-bottom: 7px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.comparison-method p {
  color: var(--muted);
}

.tool-comparison-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.tool-comparison-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
}

.tool-comparison-table caption {
  padding: 16px 18px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 14px;
}

.tool-comparison-table th,
.tool-comparison-table td {
  padding: 18px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.tool-comparison-table tr > :last-child {
  border-right: 0;
}

.tool-comparison-table tbody tr:last-child > * {
  border-bottom: 0;
}

.tool-comparison-table thead th {
  color: var(--gold-light);
  background: var(--black);
  font-size: 13px;
  font-weight: 900;
}

.tool-comparison-table tbody th {
  background: var(--charcoal);
}

.tool-comparison-table tbody th strong,
.tool-comparison-table tbody th span,
.tool-comparison-table tbody th a {
  display: block;
}

.tool-comparison-table tbody th strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.3;
}

.tool-comparison-table tbody th span {
  margin: 5px 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.tool-comparison-table tbody th a {
  color: var(--gold-light);
  font-size: 13px;
  text-decoration: none;
}

.tool-comparison-table tbody th a + a {
  margin-top: 8px;
}

.tool-comparison-table tbody th svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  vertical-align: -2px;
}

.tool-comparison-table .tool-guide-link {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tool-comparison-table td {
  color: var(--muted);
  font-size: 14px;
}

.comparison-sources {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
  gap: 28px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

.comparison-sources h3 {
  margin-bottom: 10px;
  font-size: 26px;
}

.comparison-sources > div > p:last-child,
.comparison-reviewed {
  color: var(--muted);
}

.comparison-sources ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  margin: 0;
  padding-left: 22px;
}

.comparison-sources li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--gold);
}

.comparison-sources li a,
.comparison-sources li span {
  display: block;
}

.comparison-sources li a {
  color: var(--gold-light);
  font-weight: 800;
}

.comparison-sources li span {
  color: var(--muted);
  font-size: 13px;
}

.comparison-reviewed {
  grid-column: 1 / -1;
  margin-top: 0;
  font-size: 14px;
}

.lifecycle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.lifecycle-grid article {
  min-height: 210px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.lifecycle-grid span {
  display: block;
  margin-bottom: 14px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.lifecycle-grid h3 {
  margin-bottom: 10px;
  font-size: 24px;
}

.lifecycle-grid p {
  color: var(--muted);
}

.ops-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  border: 1px solid rgba(172, 134, 43, .28);
  border-radius: 8px;
  background: var(--charcoal);
  padding: 18px;
}

.ops-console-main {
  display: grid;
  gap: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--black);
  padding: 18px;
}

.ops-console-main .ops-flow {
  margin-top: 0;
}

.ops-console-main .text-link {
  justify-self: start;
  margin: 0;
}

.sidebar-toc {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}

.sidebar-toc a {
  color: var(--muted);
  text-decoration: none;
  line-height: 1.35;
}

.sidebar-toc a:hover,
.sidebar-toc a:focus-visible {
  color: var(--gold-light);
}

.ops-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.ops-flow span {
  position: relative;
  min-height: 86px;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 800;
}

.ops-flow span::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: 28px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--ok));
}






.takeaways {
  padding: 22px !important;
  margin-bottom: 34px;
}

.anchor-offset {
  position: relative;
  top: -112px;
  display: block;
  height: 0;
  visibility: hidden;
}

.article-trust {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 186, 112, .24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(212, 186, 112, .08), rgba(20, 18, 14, .96) 42%),
    var(--charcoal);
  padding: 24px;
  margin-bottom: 34px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
}

.article-trust::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold-light), rgba(212, 186, 112, .18));
}

.article-content .article-trust {
  padding: 24px;
}

.article-trust-head {
  max-width: 680px;
  margin-bottom: 18px;
}

.article-trust-head span {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.article-trust-head h2 {
  margin-bottom: 10px;
}

.article-trust-head p {
  color: var(--muted);
}

.article-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.article-trust-grid article {
  border: 1px solid rgba(212, 186, 112, .18);
  border-radius: 8px;
  background: rgba(8, 8, 7, .72);
  padding: 18px;
  min-height: 100%;
}

.article-trust-grid span {
  display: block;
  margin-bottom: 10px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.article-trust-grid p {
  color: var(--muted);
  font-size: 15px;
}

.article-diagram {
  margin: 0 0 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.article-diagram img {
  display: block;
  width: 100%;
  height: auto;
  background: #080807;
}

.article-diagram figcaption {
  border-top: 1px solid var(--border-soft);
  padding: 14px 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.article-evidence {
  margin-bottom: 34px;
  padding-bottom: 0 !important;
}

.article-evidence-heading {
  margin-bottom: 16px;
}

.article-evidence-heading span {
  display: block;
  margin-bottom: 7px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.article-evidence-heading h2 {
  margin-bottom: 0;
}

.article-evidence-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.article-evidence table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

.article-evidence caption {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  text-align: left;
  font-size: 14px;
}

.article-evidence th,
.article-evidence td {
  padding: 15px 16px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.article-evidence tr > :last-child {
  border-right: 0;
}

.article-evidence tbody tr:last-child > * {
  border-bottom: 0;
}

.article-evidence thead th {
  color: var(--gold-light);
  background: #0b0a08;
  font-size: 13px;
}

.article-evidence tbody th {
  color: var(--text);
  background: #11100d;
  font-size: 14px;
}

.article-evidence td {
  color: var(--muted);
  font-size: 14px;
}

.howto-steps {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 22px !important;
  margin-bottom: 34px;
}

.howto-steps ol {
  list-style: none;
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.howto-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  color: var(--muted);
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}

.howto-steps li::before {
  content: counter(step, decimal-leading-zero);
  color: var(--gold-light);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.takeaways li {
  position: relative;
  padding-left: 22px;
  margin: 10px 0;
}

.takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.related .article-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.related.cluster-related {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border-soft);
}

@media (max-width: 1180px) and (min-width: 1041px) {
  .site-nav {
    gap: 16px;
    padding-inline: 24px;
  }

  .nav-links {
    gap: 14px;
  }
}

@media (max-width: 1040px) {
  .site-nav {
    grid-template-columns: auto auto;
  }

  .nav-toggle {
    display: inline-flex;
    justify-self: end;
    align-items: center;
  }

  .nav-links,
  .nav-actions {
    display: none;
  }

  .nav-links.open {
    grid-column: 1 / -1;
    display: grid;
    justify-content: stretch;
    gap: 0;
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
  }

  .nav-links.open a {
    padding: 12px 0;
  }

  .nav-links.open .nav-launch-mobile {
    display: inline-flex;
    justify-content: center;
    margin-top: 8px;
    border: 1px solid var(--gold-dark);
    border-radius: 8px;
    color: var(--gold-light);
  }

  .workflow-grid,
  .feature-grid,
  .pricing-grid,
  .start-step-grid,
  .lifecycle-grid,
  .ops-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-extension {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-extension > div:first-child {
    grid-column: 1 / -1;
  }

  .free-plan-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .free-plan-card .plan-action {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .controlled-test {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .solution-grid,
  .solution-grid.tight,
  .topic-grid,
  .article-grid,
  .article-decision-summary,
  .decision-path-grid,
  .decision-path-featured,
  .alternative-grid,
  .guide-group-grid,
  .intent-overview,
  .intent-query-list,
  .resource-intents,
  .resource-card-list,
  .glossary-grid,
  .answer-index,
  .checklist-layout,
  .decision-grid,
  .privacy-event-grid,
  .privacy-commitment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decision-path-compact {
    grid-template-columns: 1fr;
  }

  .decision-path-mini {
    grid-template-columns: minmax(116px, .4fr) minmax(0, 1fr);
  }

  .decision-path-mini nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .phone-card {
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
  }

  .resource-lane-head {
    grid-template-columns: minmax(116px, .34fr) minmax(0, 1fr);
  }

  .resource-lane-head strong {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .blog-layout,
  .article-body,
  .landing-shell,
  .start-route-grid,
  .start-support,
  .ops-console,
  .topic-brief-inner,
  .intent-card,
  .intent-proof,
  .tool-workbench {
    grid-template-columns: 1fr;
  }

  .intent-proof {
    display: grid;
    align-items: start;
  }

  .blog-sidebar,
  .toc,
  .landing-sidebar,
  .tool-workbench > div:first-child {
    position: static;
  }

  .blog-cluster-head {
    display: grid;
    align-items: start;
  }
}

@media (max-width: 760px) {
  .site-nav {
    padding: 14px 20px;
  }

  .hero,
  .page-hero,
  .workflow,
  .features,
    .comparison,
    .pricing,
    .solution-map,
    .blog-decision-paths,
    .content-hub,
    .faq,
    .blog-layout,
    .article-shell,
    .landing-shell,
    .start-steps,
    .start-shell,
    .start-plans,
    .start-support,
    .search-panel,
    .alternative-grid,
    .guide-directory,
    .decision-grid,
    .intent-overview,
    .intent-matrix,
    .intent-proof,
    .resource-intents,
    .resource-map,
    .topic-brief-inner,
    .topic-brief-answers,
    .glossary-grid,
    .comparison-matrix,
    .methodology-list,
    .privacy-overview,
    .privacy-commitments-inner,
    .privacy-scope,
    .answer-detail-shell,
    .answer-detail-card,
    .answer-related-grid,
    .answer-index,
    .answer-list,
    .checklist-layout,
    .tool-grid,
    .tool-workbench,
    .tool-example,
    .final-cta,
    .site-footer {
    width: min(100% - 32px, var(--max));
  }

  section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  h1,
  .page-hero h1,
  .article-header h1 {
    font-size: 40px;
  }

  .answer-detail-hero h1 {
    font-size: 36px;
    line-height: 1.08;
  }

  h2 {
    font-size: 31px;
  }

  .hero {
    min-height: auto;
    gap: 24px;
    padding: 36px 0 24px;
  }

  .hero-actions {
    display: grid;
    width: 100%;
  }

  .hero-actions .btn,
  .hero-actions .text-link {
    width: 100%;
  }

  .hero-sub,
  .page-hero p,
  .section-head > p:last-child,
  .final-cta p,
  .article-header > p {
    font-size: 16px;
  }

  .product-stage {
    grid-template-columns: 1fr;
    padding: 12px;
    min-height: 0;
  }

  .phone-card,
  .gate-card {
    display: none;
  }

  .dashboard-main {
    min-height: 0;
    padding: 14px;
  }

  .metrics-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 12px 0;
  }

  .metrics-row div {
    padding: 9px 7px;
  }

  .metrics-row span {
    font-size: 10px;
  }

  .metrics-row strong {
    font-size: 22px;
  }

  .member-table .member-row:nth-child(n + 3) {
    display: none;
  }

  .member-row,
  .pain-grid,
    .workflow-grid,
    .feature-grid,
    .pricing-grid,
    .solution-grid,
    .solution-grid.tight,
    .topic-grid,
    .article-grid,
    .article-decision-summary,
    .decision-path-grid,
    .decision-path-featured,
    .decision-path-compact,
    .search-results,
    .alternative-grid,
    .guide-group-grid,
    .intent-overview,
    .intent-query-list,
    .decision-grid,
    .topic-brief-answers,
    .answer-related-grid,
    .start-route-grid,
    .start-step-grid,
    .article-trust-grid,
    .resource-intents,
    .resource-card-list,
    .glossary-grid,
    .answer-index,
    .checklist-layout,
    .tool-grid,
    .tool-example-grid,
    .tool-form,
    .tool-metrics,
    .tool-notes,
    .lifecycle-grid,
    .ops-flow,
    .related .article-grid,
    .landing-section ul,
    .article-intent-owner,
    .comparison-method,
    .comparison-sources,
    .comparison-sources ul {
    grid-template-columns: 1fr;
  }

  .feature-extension,
  .free-plan-card {
    grid-template-columns: 1fr;
  }

  .pricing-jump {
    gap: var(--space-2);
  }

  .pricing-jump a {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 0;
    padding: var(--space-2) var(--space-1);
    text-align: center;
  }

  .pricing-jump strong {
    font-size: 1.1rem;
  }

  .pricing-jump small {
    display: block;
    margin: 0;
  }

  .feature-extension > div:first-child,
  .free-plan-card .plan-action {
    grid-column: auto;
  }

  .free-plan-card ul {
    grid-template-columns: 1fr;
  }

  .plan-action .btn,
  .final-cta-action .btn,
  .footer-cta {
    width: 100%;
  }

  .start-step-action {
    align-items: stretch;
    flex-direction: column;
  }

  .start-step-action .btn {
    width: 100%;
  }

  .article-intent-owner .btn {
    width: 100%;
    min-width: 0;
  }

  .comparison-method > div {
    padding: 18px 0;
  }

  .comparison-method > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
    padding-left: 0;
  }

  .tool-comparison-scroll {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .tool-comparison-table,
  .tool-comparison-table tbody,
  .tool-comparison-table tr,
  .tool-comparison-table th,
  .tool-comparison-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .tool-comparison-table thead {
    display: none;
  }

  .tool-comparison-table caption {
    display: block;
    margin-bottom: 12px;
    border: 0;
    padding: 0;
  }

  .tool-comparison-table tbody tr {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
  }

  .tool-comparison-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .tool-comparison-table th,
  .tool-comparison-table td,
  .tool-comparison-table tbody tr:last-child > * {
    border: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .tool-comparison-table tbody tr > :last-child {
    border-bottom: 0;
  }

  .tool-comparison-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
  }

  .article-evidence-scroll {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .article-evidence table,
  .article-evidence tbody,
  .article-evidence tr,
  .article-evidence th,
  .article-evidence td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .article-evidence thead {
    display: none;
  }

  .article-evidence caption {
    display: block;
    margin-bottom: 12px;
    border: 0;
    padding: 0;
  }

  .article-evidence tbody tr {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
  }

  .article-evidence tbody tr:last-child {
    margin-bottom: 0;
  }

  .article-evidence th,
  .article-evidence td,
  .article-evidence tbody tr:last-child > * {
    border: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .article-evidence tbody tr > :last-child {
    border-bottom: 0;
  }

  .article-evidence tbody th::before,
  .article-evidence td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 900;
  }

  .comparison-sources ul {
    padding-left: 20px;
  }

  .comparison-reviewed {
    grid-column: auto;
  }

  .decision-path-mini {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .decision-path-mini nav {
    justify-content: flex-start;
  }

  .decision-path-mini a {
    white-space: normal;
  }

  .start-route-card,
  .start-support {
    padding: 20px;
  }

  .start-route-card h3 {
    font-size: 25px;
  }

  .resource-lane-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .resource-lane-head h3 {
    font-size: 23px;
  }

  .ops-console {
    padding: 12px;
  }

  .ops-flow span {
    min-height: 72px;
  }

  .search-form > div {
    grid-template-columns: 1fr;
  }

  .methodology-list article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .privacy-event-grid,
  .privacy-commitment-grid,
  .privacy-scope {
    grid-template-columns: 1fr;
  }

  .privacy-lede {
    margin-bottom: 48px;
    padding-left: 18px;
  }

  .privacy-scope {
    gap: 18px;
  }

  .privacy-scope > p {
    padding-top: 0;
  }

  .member-row.head {
    display: none;
  }

  .member-row {
    gap: 5px;
  }

  .compare-table {
    gap: 12px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .compare-head {
    display: none !important;
  }

  .compare-table > div {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--panel);
  }

  .compare-table span {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
  }

  .compare-table span:last-child {
    border-bottom: 0;
    background: var(--charcoal);
  }

  .compare-table span::before {
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
  }

  .compare-table span:nth-child(1)::before {
    content: "Need";
  }

  .compare-table span:nth-child(2)::before {
    content: "Manual setup";
  }

  .compare-table span:nth-child(3)::before {
    content: "KickThemBot";
  }

  .final-cta {
    display: grid;
    padding: 24px;
  }

  .final-cta-action {
    min-width: 0;
  }

  .site-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  h1,
  .page-hero h1,
  .article-header h1 {
    font-size: 36px;
    line-height: 1.08;
  }

  .article-header {
    max-width: 100%;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  h1,
  .page-hero h1,
  .article-header h1 {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   V6 — interactive boundaries only (psychology/06 §4: 3:1 gate).
   Decorative card edges deliberately keep --border; that is not a WCAG gate.
   --------------------------------------------------------------------------- */
.search-form input,
.tool-form input,
.tool-form select,
.tool-form textarea,
.permission-list label,
.nav-toggle {
  border-color: var(--border-interactive);
}

.pricing-card .pricing-card .price-annual {
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
   V7 — 44x44 tap targets on text-style controls (psychology/05 §14).
   Padding absorbs the height; type sizes are unchanged.
   --------------------------------------------------------------------------- */
/* :not(.nav-launch-mobile) — that link is display:none until the mobile menu
   opens, and a bare `.nav-links a` rule outranks it and forces it visible. */
.nav-links a:not(.nav-launch-mobile),
.footer-links a,
.text-link,
.toc a,
.blog-sidebar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-links {
  gap: var(--space-2) var(--space-5);
}

/* ---------------------------------------------------------------------------
   V13 — assurance + freedom-to-choose under the primary action (build/08 §3.13).
   --------------------------------------------------------------------------- */
.final-cta-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.cta-assurance {
  color: var(--muted);
  font-size: 14px;
  max-width: 34ch;
}

/* ---------------------------------------------------------------------------
   V10 — grouped footer (build/08 §3.14) replacing the 17-link flat farm.
   --------------------------------------------------------------------------- */
.footer-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

.footer-group {
  display: flex;
  flex-direction: column;
}

.footer-group strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: var(--space-2);
}

.footer-group a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
}

.footer-group a:hover {
  color: var(--gold-light);
}

.legal-shell {
  width: min(var(--measure), calc(100% - 48px));
  margin: 0 auto;
}

@media (max-width: 760px) {
  .footer-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   V3 — problem / objections / fit (build/08 §3.4, §3.8, §3.9).
   .pain-grid was already styled with zero producers; it now has one.
   --------------------------------------------------------------------------- */
.pain-grid article h3 {
  margin-bottom: var(--space-2);
}

.objection-list {
  display: grid;
  gap: var(--space-3);
  max-width: 860px;
  margin: 0 auto;
}

.objection-list details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: var(--space-5) var(--space-6);
}

.objection-list summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  font-size: 17px;
}

.objection-list details[open] summary {
  margin-bottom: var(--space-3);
}

.objection-list p {
  color: var(--muted);
  max-width: 68ch;
}

/* build/08 §3.9: both columns at the same visual weight — the "not for you"
   side must not read as a token whisper. */
.fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.fit-col {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: var(--space-6);
}

.fit-col h2 {
  font-size: 22px;
  margin-bottom: var(--space-5);
}

.fit-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.fit-col li {
  display: flex;
  gap: var(--space-2);
  color: var(--muted);
}

.fit-col svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--gold);
}

@media (max-width: 760px) {
  .fit {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   S3 — skip link (build/09 §8). Visible on keyboard focus, never for mouse users.
   --------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--motion-fast) var(--ease);
}

.skip-link:focus-visible {
  top: var(--space-4);
}

main:focus {
  outline: none;
}

/* ---------------------------------------------------------------------------
   Billing period toggle + per-day line.
   --------------------------------------------------------------------------- */
.billing-toggle {
  display: inline-flex;
  gap: var(--space-1);
  margin: 0 auto var(--space-8);
  padding: var(--space-1);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-pill);
  background: var(--panel);
}

.pricing .billing-toggle {
  display: flex;
  width: fit-content;
}

.billing-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}

.billing-option:hover {
  color: var(--text);
}

.billing-option.is-active {
  background: var(--gold-fill);
  color: var(--on-gold);
}

.billing-option span {
  font-size: 12px;
  font-weight: 600;
  opacity: .85;
}

.billing-option.is-active span {
  opacity: 1;
}

/* The exact billed amount, per psychology/07 §8 — never a bare "$X a day". */
.price-note {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 var(--space-1);
}

/* An explicit display: value in author CSS beats the UA [hidden] rule, so the
   yearly price rendered alongside the monthly one. Restore the intent. */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   REDESIGN — hero, artifact band, workflow layout.
   The hero now holds exactly one focal point: H1 -> CTA. The illustration was
   the highest-density region on the page and won every fixation after the
   first, so it moved below the fold where it becomes the reward for scrolling.
   --------------------------------------------------------------------------- */
.hero {
  min-height: 0;
  padding: var(--space-32) 0 var(--space-20);
  display: block;
  text-align: center;
}

/* No ch-based cap here: ch resolves against THIS element's 17px UI font, which
   throttles the 76px display h1 inside it to ~180px and splits words mid-syllable.
   The h1 carries its own measure, in its own font. */
.hero-copy {
  max-width: 900px;
  margin: 0 auto;
}

.hero-sub {
  max-width: 60ch;
  margin: var(--space-6) auto var(--space-10);
  color: var(--text);
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

/* Secondary action is a text link, never a second button. Two buttons of
   similar weight is the most common way a hero loses its focal point. */
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--gold-ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.hero-link:hover {
  border-bottom-color: var(--gold-ink);
}

.hero-link svg {
  width: 16px;
  height: 16px;
}

.hero-assurance {
  margin-top: var(--space-6);
  color: var(--text-subtle);
  font-size: var(--fs-small);
}

.workflow-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12);
  align-items: start;
}

/* Ordinals are decoration carrying no information the heading lacks — outlined
   so they sit behind the text in the visual stack, and aria-hidden in markup. */
.workflow-step span {
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-ink-strong);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 1040px) {
  .workflow-layout {
    grid-template-columns: 1fr;
  }
  .workflow-layout .phone-card {
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .hero {
    padding: var(--space-16) 0 var(--space-12);
  }
  .hero-copy {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   REDESIGN step 3 — RHYTHM. Section padding stops being a uniform 96/96 and
   starts encoding whether a section continues the previous argument or opens a
   new chapter. Heading ladder is 12 -> 16 -> 48; it was 20 -> 12 -> 36, which
   put the label FURTHER from its own h2 than the h2 was from its body, so the
   label read as belonging to nothing.
   --------------------------------------------------------------------------- */
section[data-flow="continue"] {
  padding-top: var(--space-16);
}

section[data-flow="chapter"] {
  padding-top: var(--space-32);
}

.band + section,
section + .band {
  padding-top: var(--space-16);
}

.section-head {
  margin-bottom: var(--space-12);
  max-width: 62ch;
}

.section-head.centered {
  margin-left: auto;
  margin-right: auto;
}

.feature-grid,
.solution-grid,
.topic-grid,
.article-grid {
  gap: var(--space-8) var(--space-5);
}

.feature-card,
.pricing-card,
.fit-col,
.pain-grid article,
.workflow-step {
  padding: var(--space-6);
}

.pain-grid {
  gap: var(--space-12);
}

/* ---------------------------------------------------------------------------
   REDESIGN step 5 — PRICING. Highest commercial leverage on the page.
   --------------------------------------------------------------------------- */
.pricing {
  --max: 1240px;
}

.pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

/* The price is LARGER than the tier name but ranked BELOW it, because the ink
   ramp does the ranking (white name, cream price). Shrinking the price to win
   that comparison makes it read as apologetic. */
.price strong {
  font: 700 var(--fs-price)/1 var(--font-display);
  color: var(--text);
  letter-spacing: -.02em;
}

/* BUG FIX: .price is display:flex, so vertical-align:super on the symbol did
   nothing — the superscript has never actually rendered. Flex needs align-self. */
.price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0 0 var(--space-1);
}

.price-symbol {
  font-size: .6em;
  font-weight: 600;
  color: var(--text-muted);
  align-self: flex-start;
  margin-top: .22em;
  line-height: 1;
  vertical-align: baseline;
}

.price span {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}

/* "Test it / Start selling / For serious admins / Scale up" is the fastest
   self-selection device in the block; it should not be the quietest thing. */
.plan-role {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gold-ink-strong);
  font-style: normal;
  margin-bottom: var(--space-4);
}

/* limits[0] is the member cap on every plan — the one variable that actually
   discriminates between tiers. It already forms a horizontal row across the
   grid; nothing marked it, so the reader ran four vertical scans instead of
   one saccade. */
.pricing-card li:first-child {
  color: var(--text-max);
  font-weight: 600;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--edge-hair);
  margin-bottom: var(--space-3);
}

/* ONE isolation device: surface lift + gold wash + rim. No gold border and no
   gold-filled badge — stacked emphasis reads as advertising, and advertising
   gets discounted. */
.pricing-card.featured {
  background:
    linear-gradient(var(--tint-gold-strong), var(--tint-gold-strong)),
    var(--surface-3);
  border-color: var(--edge);
  box-shadow: inset 0 1px 0 var(--rim-light), var(--shadow-2);
}

.popular {
  align-self: flex-start;
  margin-bottom: var(--space-4);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gold-ink-strong);
  background: transparent;
  color: var(--gold-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Custom leaves the choice grid. It was the largest object in the block and is
   the tier almost nobody buys. */
.pricing-custom-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
}

.pricing-custom-strip h3 {
  margin-bottom: var(--space-1);
}

.pricing-custom-strip p {
  color: var(--text-muted);
  max-width: 60ch;
}

@media (max-width: 1040px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .pricing-card.featured {
    order: -1;
  }
}

/* ---------------------------------------------------------------------------
   REDESIGN step 6/8 — the comparison is now a real semantic <table>. Previously
   role="table" with bare <span> cells and no role="cell"/"columnheader", so a
   screen reader announced a 5-row table with no columns.
   --------------------------------------------------------------------------- */
table.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-6);
}

table.compare-table th,
table.compare-table td {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--edge-hair);
  vertical-align: top;
}

table.compare-table thead th {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  color: var(--gold-ink-strong);
  border-bottom-color: var(--edge);
}

table.compare-table tbody th {
  font-weight: 600;
  color: var(--text);
  width: 34%;
}

table.compare-table tbody td {
  color: var(--text-muted);
}

/* The outcome column is the payoff — it gets the one bit of emphasis. */
table.compare-table tbody td:last-child {
  color: var(--text);
}

.compare-note {
  margin-top: var(--space-6);
  color: var(--text-muted);
  max-width: 68ch;
}

.compare-note a {
  color: var(--gold-ink);
}

.fit .section-head {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  table.compare-table,
  table.compare-table thead,
  table.compare-table tbody,
  table.compare-table tr,
  table.compare-table th,
  table.compare-table td {
    display: block;
  }
  table.compare-table thead {
    display: none;
  }
  table.compare-table tr {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--edge-hair);
  }
  table.compare-table th,
  table.compare-table td {
    width: auto;
    padding: var(--space-1) 0;
    border: 0;
  }
}

/* ---------------------------------------------------------------------------
   Gold where it can actually be seen. Gold is a b*-axis colour and the S-cone
   pathway resolves almost no chroma above ~4-6 cycles/degree, so gold on 1px
   rules and 12px labels renders as its luminance — grey. It belongs on AREA
   and LARGE TYPE. The hero display line is the largest type on the site.
   --------------------------------------------------------------------------- */
.hero h1 {
  color: var(--text-max);
}

/* Fallback: if background-clip:text is unsupported the gradient would paint a
   block, so only opt in where it is supported. */


/* Section headings keep ink; only the hero carries the gold display treatment,
   so it stays an event rather than a texture. */
.hero .eyebrow {
  color: var(--gold-ink);
}


/* ===== Locked brand pass (2026-09-02). Source: BRAND-BRIEF.md (owner Simon) and the
   ClickUp feedback on Abdul's build — "remove the problem section", "all those small
   things - remove". Homepage order: hero → product → trust → how it works → features →
   plans → FAQ → one final CTA. ===== */
.trust-band {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding: 8px 0 0;
}
.trust-band ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 16px;
}
.trust-band li {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.trust-band strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}
.trust-band span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.guides-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: center;
  margin-top: 28px;
}
.final-cta-action .cta-microcopy {
  text-align: left;
}
/* Mobile: the secondary link centres under the full-width primary. */
@media (max-width: 760px) {
  .hero-actions .text-link {
    justify-content: center;
    text-align: center;
  }
}

/* ===========================================================================
   PROTOCOL DOSSIER — surface language (2026-09-02, founder direction).
   The page is the close-protection team's own paperwork: a black dossier with
   an ID badge clipped to it. An 8px dot grid you feel rather than see, a
   desk-lamp spotlight over the hero copy, thin gold rules and registration
   ticks, tracked uppercase micro-labels, tabular figures, sharp corners.
   Gold stays ink, rule and the single CTA fill — never a wash.
   Layered last so it overrides the earlier component rules by cascade order.
   =========================================================================== */

/* --- the paper stock: 8px dot grid at ~1.10:1 against the page --- */
:root { --dot: rgba(246, 240, 231, .055); --dot-pitch: 8px; --spot: rgba(246, 240, 231, .05); }

body {
  background-color: var(--surface-0);
  background-image: radial-gradient(circle at 1px 1px, var(--dot) .5px, transparent 1.1px);
  background-size: var(--dot-pitch) var(--dot-pitch);
  font-variant-numeric: tabular-nums lining-nums;
}

/* the pitch equals the layout baseline, so the texture IS the grid */
body::before { display: none; }

/* --- desk lamp over the hero copy column, neutral so gold stays the accent --- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(720px 520px at 22% 0%, var(--spot), transparent 70%);
}

/* --- nav: a ruled index tab, CTA demoted to outline --- */
.site-nav { border-bottom: 1px solid var(--edge-hair); }
.logo { font-family: var(--font-display); letter-spacing: 0; font-weight: 600; color: var(--text-max); }
.logo-mark { color: var(--gold-ink); }
.nav-links a {
  font: 500 var(--fs-label)/1 var(--font-display);
  letter-spacing: var(--tr-label);
}
.nav-launch { border-color: var(--edge-strong); color: var(--text); background: transparent; }
.nav-launch:hover { border-color: var(--gold-ink); color: var(--gold-light); }

/* --- eyebrow and section labels: the tie clip --- */
.eyebrow,
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  color: var(--gold-ink);
}
.eyebrow::before,
.section-label::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--rule-gold);
  flex: none;
}
.section-head.centered .eyebrow,
.section-head.centered .section-label { justify-content: center; }

/* --- buttons: the primary is the one saturated element per viewport --- */
.btn { border-radius: var(--radius-md); font-family: var(--font-ui); }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-fill) 0%, var(--gold-fill-bottom) 100%);
  color: var(--on-gold);
  font-weight: 600;
  box-shadow: var(--rim);
}
.btn-gold:hover { background: var(--gold-light); box-shadow: var(--glow-gold); }
.btn-outline, .btn-ghost { border-color: var(--edge-strong); color: var(--text); font-weight: 500; }
.btn-outline:hover, .btn-ghost:hover { border-color: var(--gold-ink); color: var(--gold-light); background: transparent; }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.btn svg { stroke-linecap: square; stroke-linejoin: miter; }

/* "See Plans" is a quiet link: colour AND a gold hairline, never colour alone */
.hero-secondary {
  font: 500 var(--fs-body)/1 var(--font-ui);
  color: var(--text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-gold);
}
.hero-secondary:hover { color: var(--gold-light); border-color: var(--gold-ink); }

/* --- sheets: registration ticks at the corners, flat on the desk --- */
.feature-card,
.workflow-step,
.pricing-card,
.free-plan-card,
.trust-band li,
.article-card,
.topic-card,
.solution-card,
.start-route-card {
  position: relative;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.feature-card::after,
.workflow-step::after,
.pricing-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  --t: var(--rule-gold);
  --l: 10px;
  background:
    linear-gradient(var(--t), var(--t)) 0 0 / var(--l) 1px,
    linear-gradient(var(--t), var(--t)) 0 0 / 1px var(--l),
    linear-gradient(var(--t), var(--t)) 100% 0 / var(--l) 1px,
    linear-gradient(var(--t), var(--t)) 100% 0 / 1px var(--l),
    linear-gradient(var(--t), var(--t)) 0 100% / var(--l) 1px,
    linear-gradient(var(--t), var(--t)) 0 100% / 1px var(--l),
    linear-gradient(var(--t), var(--t)) 100% 100% / var(--l) 1px,
    linear-gradient(var(--t), var(--t)) 100% 100% / 1px var(--l);
  background-repeat: no-repeat;
}

/* --- workflow ordinals: the one place gold is spent as large type --- */
.workflow-step span[aria-hidden] {
  display: block;
  font: 500 var(--fs-numeral)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--gold-ink);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--edge-hair);
  margin-bottom: 20px;
}

/* --- trust band: bounded by hairlines so no claim sits over a void --- */
.trust-band {
  border-top: 1px solid var(--edge-hair);
  border-bottom: 1px solid var(--edge-hair);
  background: var(--surface-1);
  padding: 32px 0;
}
.trust-band li { padding-top: 20px; background: transparent; border: 0; box-shadow: none; }
.trust-band li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 1px;
  background: var(--rule-gold);
}

/* --- pricing: Boss centre-stage as a folder tab, one gold button --- */
.pricing-card { border-radius: var(--radius-sm); }
.pricing-card.featured {
  background: var(--surface-3);
  border-color: var(--rule-gold);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .6), var(--rim);
}
.pricing-card.featured::after { --t: var(--gold-ink); }
.popular {
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  border: 1px solid var(--rule-gold);
  border-bottom: 0;
  background: var(--surface-3);
  color: var(--gold-ink);
  font: 500 var(--fs-label)/1 var(--font-display);
  letter-spacing: var(--tr-label);
}
.price strong { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.price-annual, .price-note { font-variant-numeric: tabular-nums; }
.pricing-jump a { border-radius: var(--radius-xs); font-variant-numeric: tabular-nums; }
.pricing-jump strong { font-family: var(--font-display); font-weight: 600; }
.plan-role {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  font-size: var(--fs-label);
  color: var(--text-subtle);
}

/* --- FAQ: native details, a gold plus that rotates --- */
.faq-list details { border-bottom: 1px solid var(--edge-hair); }
.faq-list summary { font: 500 var(--fs-body)/1.4 var(--font-ui); color: var(--text-max); }
.faq-list summary:hover { color: var(--gold-light); }
.faq-list summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --- section rules: neutral hairline with a 64px gold segment at the text edge --- */
.band { border-top: 1px solid var(--edge-hair); }
.final-cta { border: 1px solid var(--edge-hair); border-radius: var(--radius-sm); background: var(--surface-1); }

/* --- footer --- */
.site-footer { border-top: 1px solid var(--edge-hair); background: var(--surface-1); }
.site-footer .section-label { color: var(--text-subtle); }
.site-footer .section-label::before { background: var(--edge); }

/* --- status colour is never the only cue: every chip keeps its word --- */
.member-row b { font-family: var(--font-display); font-weight: 500; letter-spacing: 0; font-size: var(--fs-label); }

/* ===========================================================================
   Mini App walkthrough video (homepage hero, v4 2026-09-13). A real screen recording
   of the Mini App sits beside the headline. Above it: "Mini App", then "Sample data"
   with the recorded admin's KickThemBot plan. Directly under the phone: the note that
   Telegram's button is simulated, so it sits next to the simulated button at every width.
   On a solid sheet beside the phone: the chapter LABELS as a list and only the active
   chapter's caption, so never more than two sentences sit beside the video. The phone
   is the single rounded object in the dossier; its width follows the viewport height,
   so the device and the note under it fit on screen beside the headline on desktop.
   Where the figure and the sheet go at each width: "Hero layout" at the end of this file.
   site.js plays it once when half visible; it rests on its last frame and never loops.
   =========================================================================== */
.hero { padding-bottom: 24px; }

.app-device {
  padding: 9px;
  border: 1px solid var(--edge);
  border-radius: var(--r-device);
  background: var(--surface-well);
  box-shadow: var(--shadow-float);
}

.app-screen {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-screen);
  background: var(--surface-0);
}

/* The recording is 780x1632, so the phone's width is the usable height x 780/1632. The usable
   height leaves room for the nav, the hero padding, the head above the phone and the note
   under it. Set on the hero, whose grid sizes the phone's column from it. */
.hero-flow { --app-video-w: clamp(210px, calc((100vh - 290px) * .4779), 288px); }
@supports (height: 100svh) {
  .hero-flow { --app-video-w: clamp(210px, calc((100svh - 290px) * .4779), 288px); }
}

.app-video {
  container: app-video / inline-size;
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.app-video-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: 32px;
  font: 500 var(--fs-label)/1 var(--font-display);
  letter-spacing: var(--tr-label);
}
.app-video-title { color: var(--text); }
.app-video-sample {
  padding: 5px 8px 4px;
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-muted);
}

.app-video-device { justify-self: center; }

.app-video-screen {
  /* 20px is the device's padding and border, so the phone never outgrows its column */
  width: min(var(--app-video-w), calc(100cqw - 20px));
  aspect-ratio: 780 / 1632;
}

.app-video-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--surface-0);
}

/* Reduced motion, or a browser that blocks autoplay: the poster plus one clear action. */
.app-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: 0 18px 0 14px;
  border: 1px solid var(--gold-ink);
  border-radius: var(--radius-md);
  background: rgba(8, 8, 7, .9);
  color: var(--text);
  font: 500 var(--fs-small)/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-float);
}
.app-video-play svg { flex: none; width: 12px; height: 12px; max-width: none; fill: var(--gold-ink); }

/* The simulated-button note, 8px under the phone and centred on it. */
.app-video-note {
  justify-self: center;
  max-width: 100%;
  margin: calc(var(--space-1) * -1) 0 0;
  color: var(--text-muted);
  font: 400 var(--fs-small)/1.5 var(--font-ui);
  text-align: center;
  text-wrap: balance;
}

/* The chapters sheet is solid, so the gold field never runs behind small labels. */
.app-video-side {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1px solid var(--edge-hair);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
}

.app-video-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 36px;
}
.app-video-bar-title {
  color: var(--text-subtle);
  font: 500 var(--fs-label)/1 var(--font-display);
  letter-spacing: var(--tr-label);
}

.app-video-toggle {
  min-width: 76px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font: 500 var(--fs-small)/1 var(--font-ui);
  cursor: pointer;
}
@media (pointer: coarse) {
  .app-video-toggle { min-height: var(--target-min); }
}

.app-video-toggle:hover,
.app-video-play:hover,
.fv button[class$="-replay"]:hover { border-color: var(--gold-ink); color: var(--gold-light); }
.app-video-toggle:focus-visible,
.app-video-play:focus-visible,
.app-video-chapter:focus-visible,
.fv button[class$="-replay"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.app-video-chapters {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-video-chapters li + li { border-top: 1px solid var(--edge-hair); }

.app-video-chapter {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 8px 0 8px 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font: 500 var(--fs-label)/1.2 var(--font-display);
  letter-spacing: var(--tr-label);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-state) var(--ease-std), color var(--dur-state) var(--ease-std);
}
@media (pointer: coarse) {
  .app-video-chapter { min-height: var(--target-min); }
}
.app-video-chapter:disabled { cursor: default; }
.app-video-chapter-time { color: var(--text-subtle); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.app-video-chapter:not(:disabled):not(.is-on):hover { color: var(--text); }
.app-video-chapter.is-on { border-left-color: var(--gold-ink); color: var(--gold-ink); }
.app-video-chapter.is-on .app-video-chapter-time { color: var(--gold-ink); }

/* The one visible caption: the active chapter's. Room for the longest caption is reserved
   (four lines in the narrow desktop column, two in the wider sheets below), so the sheet
   keeps its height from chapter to chapter. */
.app-video-caption {
  min-height: calc(4 * 1.5em);
  margin: 0;
  color: var(--text);
  font: 400 var(--fs-small)/1.5 var(--font-ui);
  text-wrap: pretty;
}
.app-video-fallback { margin: 0; font: 500 var(--fs-small)/1.4 var(--font-ui); }
.app-video-fallback a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .app-video-chapter,
  .app-video-chapter-time { transition: none; }
}

/* The workflow row used to put the four ordinal cards and the reminder phone side by
   side, which squeezed the cards to two or three words a line. The cards now take the
   full measure and the phone sits under them, centred: the section reads left to right
   as 01–04, then shows what the member actually receives. */
.workflow-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  justify-items: center;
}
.workflow-layout > .workflow-grid { width: 100%; }
.workflow-layout > .phone-card { margin: 0; }
.workflow-step { padding: 24px 26px 28px; }

/* The paid trio used auto-fit, which allocated four columns at 1160px and filled
   three, leaving a dead column on the right. Three explicit columns instead, and
   Boss moves to the top of the stack on mobile so centre stage survives the
   collapse (pack 05 §10). */
.pricing-grid-paid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 900px) {
  .pricing-grid-paid { grid-template-columns: minmax(0, 1fr); }
  .pricing-grid-paid .pricing-card.featured { order: -1; }
}

/* ===========================================================================
   Homepage flow sections (2026-09-13, Simon: "visualize the flow", one feature per
   section, at most two sentences). One visual per section, sides alternate. The
   visuals themselves live in site-src/flow-visuals/ and are appended at build time.
   =========================================================================== */
/* The original .hero sets place-items: center. On a grid that shrinks each item to
   its content, and the flow visuals use inline-size container queries, so a
   shrink-to-fit parent collapses them to a sliver. Stretch explicitly. */
/* The hero's grid itself is defined in "Hero layout" at the end of this file. */
.hero-flow .hero-copy { max-width: 600px; margin: 0; }
/* margin 0: the base h1 centres itself (margin auto), which put the headline in the middle
   of the left-aligned hero column once the hero stacks. */
.hero-flow h1 { font-size: clamp(40px, 5.2vw, 66px); margin: 0; }
.hero-flow .hero-sub { max-width: none; margin: var(--space-6) 0 var(--space-8); }
.hero-flow .hero-cta-block { justify-items: start; }
.hero-flow .hero-actions { justify-content: flex-start; }
.hero-media,
.flow-media { min-width: 0; width: 100%; justify-self: stretch; }

.flow-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: var(--space-12);
  align-items: center;
}
/* The flow sections had no page gutter, so from 2026-09-13 their copy and visuals ran to the
   viewport edge. Same measure as the hero and the trust band. */
.flow-section { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
@media (max-width: 760px) {
  .flow-section { width: min(100% - 32px, var(--max)); }
}
.flow-section.is-flipped { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); }
.flow-section.is-flipped .flow-copy { order: 2; }
.flow-copy { max-width: 470px; }
.flow-copy h2 { margin: var(--space-2) 0 var(--space-4); }
.flow-copy p:not(.section-label) { color: var(--muted); }
.flow-copy p + p:not(.section-label) { margin-top: var(--space-3); }

/* How it works (v4, restored from the 3331f2b homepage): heading, the lifecycle visual as
   the picture of the four moments, then the four gold-numbered steps as its captions. */
.workflow .section-head { margin-bottom: var(--space-10); }
.workflow-visual { display: grid; justify-items: center; margin: 0 auto var(--space-12); }
.workflow-visual .fv-hero { max-width: 760px; }
.workflow .workflow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.workflow .workflow-step { min-height: 0; }
@media (max-width: 1040px) {
  .workflow .workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .workflow .workflow-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Group heading over consecutive feature sections ("For larger operations"). The sections
   inside use h3, styled one step under the group's h2. */
.flow-group { padding: 0; }
.flow-group-head {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding-top: var(--space-24);
  text-align: center;
}
.flow-group-head > .section-label { justify-content: center; }
.flow-group-head h2 { max-width: 30ch; margin: 0 auto; }
.flow-group-head + .flow-section { padding-top: var(--space-16); }
.flow-copy .flow-title {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--text-max);
  font: 600 clamp(28px, 2.9vw, 38px)/var(--lh-h2) var(--font-display);
  letter-spacing: var(--tr-h2);
}
@media (max-width: 760px) {
  .flow-group-head { width: min(100% - 32px, var(--max)); padding-top: var(--space-16); }
}

/* Member lookup: two real Mini App stills side by side, the second a step lower. */
.app-stills { display: grid; gap: var(--space-3); width: 100%; max-width: 540px; margin: 0 auto; }
.app-stills-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.app-still { padding: 7px; }
.app-still:nth-child(2) { margin-top: var(--space-8); }
.app-still img { display: block; width: 100%; height: auto; }
.app-stills-caption { margin: 0; color: var(--text-muted); font: 400 var(--fs-small)/1.5 var(--font-ui); }
/* Phones: one still per row, centred, with each screen as wide as the hero video's (288px:
   the 304px column less 7px padding and a 1px edge each side), and no stagger. Side by side
   they were about 160px wide at 390px, too small to read the member names or the removal
   note (final founder review, 2026-09-13). */
@media (max-width: 760px) {
  .app-stills-row { grid-template-columns: minmax(0, 304px); justify-content: center; gap: var(--space-5); }
  .app-still:nth-child(2) { margin-top: 0; }
}

@media (max-width: 960px) {
  .flow-section,
  .flow-section.is-flipped { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .flow-section.is-flipped .flow-copy { order: 0; }
  .flow-copy { max-width: 640px; }
}

/* Flow visuals share one replay-control look, which the walkthrough video's Pause /
   Replay button uses too. Size and placement stay with each visual: several head bars
   are built around their own button. */
.fv button[class$="-replay"] {
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

/* ===========================================================================
   SITE POLISH — FINAL: CONFIDENT GOLD FIELD + reading pass (2026-09-13).
   Simon: "the background of the website so its goldish dots and dark black and
   text must pop up nicely also visually improve the text sizes and all".

   Chosen from three dot strengths (noticeable / confident / bold) at 1x on laptop
   and phone. Starts from site-polish-checked.css: type scale, ink, layout and all
   five critic corrections are kept (1 pools anchored by top + height, 2 page h1
   32px phone floor, 3 outline buttons on page ink, 4 44px tap targets, 5 was for the
   retired Mini App replay and is dropped in v4). The faint masked dot pools become one field:

   1. FABRIC. One gold-200 dot grid on the page canvas (body background), so it runs
      unbroken under nav, main and footer: 28px pitch (24px on phones), 1.7px core.
      Every dot sits on the one grid, so nothing doubles or beats.
   2. LAMPS. Behind the hero and each heading block a colour-dodge radial multiplies
      the page's own dots (about x1.5 at the centre). Dodge leaves black black, so a
      lamp brightens dots and nothing else, and stays on the grid.
   3. VEILS. Reading copy and small labels sit on a feathered page-black ::after at
      z-index -1 (82% lanes, 92% for labels): dots fade to under a fifth behind words,
      never cover text, and vanish inside solid cards.

   Measured on rendered pixels (DPR 1 and 2): open dot core rgb(80 67 31), lum .058;
   lamp peak rgb(124 104 48), lum .148 (under .156 for body ink and .169 for headings
   at 4.5:1 on the worst pixel); veiled dots below R 40. No images, no motion, no
   background-attachment, no fixed layers.
   =========================================================================== */

:root {
  /* Page one step deeper. Surfaces 1-4 are unchanged, so cards separate more. */
  --n-050: #050504;   /* PAGE, was #080807 */

  /* The fabric: gold-200 at 38%. */
  --field-ink: rgb(201 168 76 / .38);
  --field-ink-0: rgb(201 168 76 / 0);
  --field-pitch: 28px;
  --field-dot: 1.7px;     /* solid core radius */
  --field-edge: 2.5px;    /* anti-aliased rim */

  /* Pool lamp for colour-dodge: grey g multiplies the dots by 1 / (1 - g). */
  --pool-lamp: radial-gradient(closest-side, rgb(96 96 96) 0%, rgb(84 84 84) 34%, rgb(48 48 48) 66%, rgb(14 14 14) 88%, rgb(0 0 0) 100%);

  /* Veils: page-black, feathered. Set to transparent to switch every veil off. */
  --veil: rgb(5 5 4 / .82);
  --veil-tight: rgb(5 5 4 / .92);

  /* Type scale: 17 / 19 / 23 / 32 / 42 on phones, 18 / 22 / 28 / 45 / 67 at 1280. */
  --fs-body: 17px;
  --lh-body: 1.65;
  --fs-lead: clamp(19px, 14.6px + 1.1vw, 22px);
  --lh-lead: 1.5;
  --fs-flow: clamp(19px, 1.6vw, 20.5px);   /* flow-section copy: between body and lead */
  --fs-h1: clamp(42px, 5.2vw, 68px);
  --fs-h1-page: clamp(32px, 22.4px + 2.75vw, 58px);
  --fs-h2: clamp(32px, 3.5vw, 46px);
  --fs-h3: clamp(23px, 2.15vw, 28px);
  --fs-small: 15px;
  --fs-label: 15px;
  --tr-label: .13em;
}

@media (min-width: 900px) {
  :root { --fs-body: 18px; --lh-body: 1.62; }
}

@media (max-width: 760px) {
  /* Phones: a slightly finer weave so the grid keeps ~16 columns at 390. */
  :root { --field-pitch: 24px; --field-dot: 1.5px; --field-edge: 2.3px; }
}

/* --- 1. the fabric ------------------------------------------------------- */
body {
  background-color: var(--surface-0);
  background-image: radial-gradient(circle at center, var(--field-ink) var(--field-dot), var(--field-ink-0) var(--field-edge));
  background-size: var(--field-pitch) var(--field-pitch);
  background-position: 50% 0;
  background-repeat: repeat;
}
/* The old fixed hairline grid overlay is retired: the dots are the texture now. */
body::before { content: none; }
.site-nav { background: rgb(5 5 4 / .9); }

/* The pools blend with the canvas, so main must not isolate them. overflow-x: clip
   trims the horizontal bleed without making main a scroll container. */
main { position: relative; isolation: auto; overflow-x: clip; }
@supports not (overflow: clip) { main { overflow-x: hidden; } }

/* The old neutral desk lamp was clipped to the column and left visible edges. */
.hero { overflow: visible; }
.hero::before { content: none; }

/* Bands and the footer sit on the fabric, divided by hairlines. */
.band,
.site-footer { background: transparent; }
.band { overflow: clip; }
.final-cta {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
}

/* --- 2. the pools: a lamp over the fabric, anchored to each heading block --- */
.hero-copy,
.flow-copy,
.section-head,
.flow-group-head,
.page-hero,
.article-header,
.final-cta > div:first-child {
  position: relative;
}

.hero-copy::before,
.flow-copy::before,
.section-head::before,
.flow-group-head::before,
.page-hero::before,
.article-header::before,
.final-cta > div:first-child::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--spot-inset, -160px -280px);
  pointer-events: none;
  background: var(--pool-lamp);
  mix-blend-mode: color-dodge;
}

/* Pool centred on the headline. */
.hero-copy { --spot-inset: -260px -300px -60px; }
.flow-copy { --spot-inset: -230px -300px -90px; }
.section-head,
.flow-group-head { --spot-inset: -200px -320px -100px; }
.band > .section-head { --spot-inset: -110px -320px -90px; }
.page-hero { --spot-inset: -120px -40px -40px -300px; }
.article-header { --spot-inset: -120px -120px -40px -300px; }
.final-cta > div:first-child { --spot-inset: -120px -200px; }

/* Anchor by top + height so the centre is the heading whatever follows it. */
.section-head::before,
.flow-group-head::before { inset: auto -320px auto; top: -150px; height: 440px; }
.band > .section-head::before { top: -110px; height: 340px; }
.page-hero::before { inset: auto -40px auto -300px; top: -60px; height: min(520px, calc(100% + 80px)); }
/* min(): a short compact hero (search, tools, blog index) must not carry its lamp into
   the next section's lamp. Dodge lamps multiply, so an overlap put the /blog/ h2 on
   x1.85 dots (4.25:1 worst pixel). Capped, the worst overlap anywhere is x1.51. */

@media (max-width: 760px) {
  .hero-copy::before { inset: auto -24px auto; top: -145px; height: 460px; }
  .flow-copy::before,
  .section-head::before,
  .flow-group-head::before { inset: auto -24px auto; top: -150px; height: 440px; }
  .band > .section-head::before { top: -90px; height: 320px; }
  .page-hero::before { inset: auto -24px auto; top: -60px; height: min(520px, calc(100% + 80px)); }
  .article-header::before { inset: auto -24px auto; top: -85px; height: 520px; }
  .final-cta > div:first-child::before { inset: auto -24px auto; top: -128px; height: 380px; }
}

/* --- 3. the veils: words first, fabric second ----------------------------- */
/* Each veil is an ::after at z-index -1 on its text block. It paints in the page's
   bottom layer: above the fabric and the lamps, below every card, button and word.
   So a veil can never cover a neighbour's text (flex and grid items paint in turn),
   and inside a solid card it is simply hidden. :where() keeps specificity at zero,
   so any existing position rule (absolute captions) still wins. */
:where(
  .hero-sub,
  .flow-copy > p:not(.section-label),
  .section-head > p:not(.section-label):not(.eyebrow),
  .page-hero > p:not(.eyebrow),
  .article-header > p:not(.eyebrow),
  .final-cta > div:first-child > p:not(.section-label),
  .article-content,
  .faq-list,
  .privacy-lede,
  .privacy-scope > p,
  .topic-brief-copy > p,
  .related.cluster-related > p,
  .comparison-method,
  .comparison-sources,
  .resource-lane-head,
  .blog-cluster-head,
  .tool-workbench > div > p,
  .start-step-action > div > p:not(.cta-microcopy),
  .privacy-scope > div > p:not(.section-label),
  .footer-brand,
  .footer-links,
  .footer-copy,
  .hero-copy > .eyebrow,
  .flow-copy > .section-label,
  .section-head > .section-label,
  .section-head > .eyebrow,
  .flow-group-head > .section-label,
  .page-hero > .eyebrow,
  .article-header > .eyebrow,
  .final-cta > div:first-child > .section-label,
  .topic-brief-copy > .section-label,
  .hero-cta-block > .cta-microcopy,
  .hero-actions > .text-link,
  .hero-assurance,
  .final-cta-action > p,
  .page-hero > .breadcrumbs,
  .page-hero > .article-meta,
  .article-header > .breadcrumbs,
  .article-header > .article-meta,
  .fv > figcaption,
  .app-stills > figcaption,
  .app-video-head > .app-video-title,
  .app-video > .app-video-note,
  .start-step-action > div > .cta-microcopy,
  .privacy-scope > div > .section-label,
  .search-form > label,
  .guides-strip > .text-link,
  .content-hub > .text-link,
  .guide-directory > .text-link
) { position: relative; }

:where(
  .hero-sub,
  .flow-copy > p:not(.section-label),
  .section-head > p:not(.section-label):not(.eyebrow),
  .page-hero > p:not(.eyebrow),
  .article-header > p:not(.eyebrow),
  .final-cta > div:first-child > p:not(.section-label),
  .article-content,
  .faq-list,
  .privacy-lede,
  .privacy-scope > p,
  .topic-brief-copy > p,
  .related.cluster-related > p,
  .comparison-method,
  .comparison-sources,
  .resource-lane-head,
  .blog-cluster-head,
  .tool-workbench > div > p,
  .start-step-action > div > p:not(.cta-microcopy),
  .privacy-scope > div > p:not(.section-label),
  .footer-brand,
  .footer-links,
  .footer-copy,
  .hero-copy > .eyebrow,
  .flow-copy > .section-label,
  .section-head > .section-label,
  .section-head > .eyebrow,
  .flow-group-head > .section-label,
  .page-hero > .eyebrow,
  .article-header > .eyebrow,
  .final-cta > div:first-child > .section-label,
  .topic-brief-copy > .section-label,
  .hero-cta-block > .cta-microcopy,
  .hero-actions > .text-link,
  .hero-assurance,
  .final-cta-action > p,
  .page-hero > .breadcrumbs,
  .page-hero > .article-meta,
  .article-header > .breadcrumbs,
  .article-header > .article-meta,
  .fv > figcaption,
  .app-stills > figcaption,
  .app-video-head > .app-video-title,
  .app-video > .app-video-note,
  .start-step-action > div > .cta-microcopy,
  .privacy-scope > div > .section-label,
  .search-form > label,
  .guides-strip > .text-link,
  .content-hub > .text-link,
  .guide-directory > .text-link
)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 8px;
}

/* Reading copy: an 82% page-black lane with a long feather (~70px): a fade, not a box. */
:where(
  .hero-sub,
  .flow-copy > p:not(.section-label),
  .section-head > p:not(.section-label):not(.eyebrow),
  .page-hero > p:not(.eyebrow),
  .article-header > p:not(.eyebrow),
  .final-cta > div:first-child > p:not(.section-label),
  .article-content,
  .faq-list,
  .privacy-lede,
  .privacy-scope > p,
  .topic-brief-copy > p,
  .related.cluster-related > p,
  .comparison-method,
  .comparison-sources,
  .resource-lane-head,
  .blog-cluster-head,
  .tool-workbench > div > p,
  .start-step-action > div > p:not(.cta-microcopy),
  .privacy-scope > div > p:not(.section-label),
  .footer-brand,
  .footer-links,
  .footer-copy
)::after {
  background: var(--veil);
  box-shadow: 0 0 44px 26px var(--veil);
}

/* Labels, microcopy, captions, crumbs and lone links: a tight 92% veil that hugs
   the words, so the lamp stays bright right around the headline. */
:where(
  .hero-copy > .eyebrow,
  .flow-copy > .section-label,
  .section-head > .section-label,
  .section-head > .eyebrow,
  .flow-group-head > .section-label,
  .page-hero > .eyebrow,
  .article-header > .eyebrow,
  .final-cta > div:first-child > .section-label,
  .topic-brief-copy > .section-label,
  .hero-cta-block > .cta-microcopy,
  .hero-actions > .text-link,
  .hero-assurance,
  .final-cta-action > p,
  .page-hero > .breadcrumbs,
  .page-hero > .article-meta,
  .article-header > .breadcrumbs,
  .article-header > .article-meta,
  .fv > figcaption,
  .app-stills > figcaption,
  .app-video-head > .app-video-title,
  .app-video > .app-video-note,
  .start-step-action > div > .cta-microcopy,
  .privacy-scope > div > .section-label,
  .search-form > label,
  .guides-strip > .text-link,
  .content-hub > .text-link,
  .guide-directory > .text-link
)::after {
  background: var(--veil-tight);
  box-shadow: 0 0 14px 9px var(--veil-tight);
}

/* A full-width label veil read as a dark stripe through the lamp; hug the words. */
.hero-copy > .eyebrow,
.flow-copy > .section-label,
.section-head > .section-label,
.section-head > .eyebrow,
.flow-group-head > .section-label,
.page-hero > .eyebrow,
.article-header > .eyebrow,
.final-cta > div:first-child > .section-label,
.topic-brief-copy > .section-label,
.privacy-scope > div > .section-label {
  width: fit-content;
  max-width: 100%;
}
.section-head.centered > .section-label,
.section-head.centered > .eyebrow,
.flow-group-head > .section-label {
  margin-left: auto;
  margin-right: auto;
}

/* --- solid surfaces: no dots inside cards, chips, tables or buttons -------- */
.resource-card { background-color: var(--surface-1); }
.resource-card:hover { background-color: var(--surface-2); }
.tool-comparison-table,
.tool-comparison-scroll { background-color: var(--surface-1); }
/* Cards and chips that painted a translucent white or gold wash: the same wash now
   sits on a solid ink, so hover and focus keep their tint without showing the fabric. */
.decision-path-mini,
.intent-query-list a,
.guide-link-list a { background-color: var(--surface-1); }
.decision-path-mini:hover {
  background-color: var(--surface-1);
  background-image: linear-gradient(90deg, rgba(172, 134, 43, .1), transparent 40%), linear-gradient(rgba(255, 255, 255, .035), rgba(255, 255, 255, .035));
}
.intent-query-list a:hover,
.guide-link-list a:hover,
.answer-list div a:hover,
.answer-list div a:focus-visible,
.answer-link-list a:hover,
.answer-link-list a:focus-visible,
.resource-row:not(.resource-head):hover {
  background-color: var(--surface-1);
  background-image: linear-gradient(rgba(172, 134, 43, .08), rgba(172, 134, 43, .08));
}
/* The hero visual's Replay button is transparent text on the page. */
.fv.fv-hero .fv-hero-replay { background-color: var(--surface-0); }   /* beats the flow-visual rule bundled after site.css */
.btn-ghost { background-color: var(--surface-0); }
.btn-ghost:hover {
  background-color: var(--surface-0);
  background-image: linear-gradient(rgba(201, 168, 76, .1), rgba(201, 168, 76, .1));
}
/* Outline buttons are transparent, so the fabric showed inside the button box. */
.hero .btn-outline,
.page-hero .btn-outline,
.final-cta .btn-outline,
.site-footer .btn-outline { background-color: var(--surface-0); }

/* Decorative only: no field, lamps or veils for high-contrast, forced colours, print. */
@media (prefers-contrast: more), (forced-colors: active), print {
  :root { --veil: transparent; --veil-tight: transparent; }
  body { background-image: none; }
  .hero-copy::before,
  .flow-copy::before,
  .section-head::before,
  .flow-group-head::before,
  .page-hero::before,
  .article-header::before,
  .final-cta > div:first-child::before { content: none; }
}

/* --- ink: primary reading copy in body ink; muted stays for cards, meta, footer --- */
.hero-sub,
.flow-copy p:not(.section-label),
.section-head > p:not(.section-label):last-child,
.final-cta p:not(.section-label):not(.cta-assurance),
.page-hero p:not(.eyebrow):not(.breadcrumbs):not(.article-meta),
.article-header > p:not(.eyebrow),
.article-content p,
.article-content li,
.legal-shell p,
.legal-shell li,
.faq-list p,
.faq-inline p,
.takeaways li {
  color: var(--text);
}

/* --- type: distinct steps, every size from the token scale --- */
h1,
.hero-flow h1 { font-size: var(--fs-h1); }
.page-hero h1,
.article-header h1 { font-size: var(--fs-h1-page); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.article-content h2 { font-size: clamp(27px, 2.5vw, 34px); }

/* Plan names: display face at a real 600 (800 was synthesised bold). */
.pricing-card h3 { font-size: clamp(26px, 2.4vw, 32px); font-weight: 600; }

.hero-sub,
.page-hero p,
.section-head > p:last-child,
.final-cta p:not(.section-label):not(.cta-assurance),
.article-header > p {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}
.flow-copy p:not(.section-label) {
  font-size: var(--fs-flow);
  line-height: 1.55;
}
.article-header > p { max-width: 54ch; }
.page-hero h1 + p { margin-top: var(--space-4); }

/* Condensed uppercase labels: a weight step so 15px survives on the deeper black. */
.eyebrow,
.section-label { font-weight: 600; }
.page-hero .eyebrow,
.article-header > .eyebrow {
  font: 600 var(--fs-label)/1 var(--font-display);
  letter-spacing: var(--tr-label);
  color: var(--gold-ink);
}

/* Reassurance a buyer reads before tapping: 15px on the muted tier, not subtle. */
.cta-microcopy,
.hero-assurance { font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); }
.final-cta .final-cta-action p.cta-microcopy:not(.section-label) {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Legal prose: 56ch holds ~72 characters a line at 18px, sharing the h1's frame. */
.legal-shell { width: min(900px, calc(100% - 48px)); }
.legal-shell > .article-content { max-width: 56ch; }

.article-meta,
.breadcrumbs { font-size: 14px; font-weight: 500; }
.article-decision-summary p { font-size: 16px; }
.toc a { font-size: var(--fs-small); }

.faq-list summary { font-size: clamp(18px, 1.45vw, 20px); }

.trust-band strong { font-size: 17px; }
.trust-band span { font-size: 16px; line-height: 1.55; }

.footer-brand p,
.footer-copy { font-size: var(--fs-small); line-height: 1.6; }
.footer-links { font-size: var(--fs-small); }
.footer-links h2 {
  font: 600 var(--fs-label)/1.2 var(--font-display);
  letter-spacing: var(--tr-label);
  color: var(--text);
}

/* Tap targets: byline chips measured 37px and answer-link chips 36px. */
.article-byline span,
.article-byline a,
.answer-link-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


/* --- adversarial check fixes (2026-09-13) ----------------------------------
   A. Tool pages at 900px+: the left column is position: sticky, so its reading
      veils paint in the positioned layer, and the 70px feather fell across the
      left 40px of the solid .tool-panel (a dark smear on the card, peak -13).
      Positioning the panel (no z-index, so no new stacking context) paints it
      after the column, over the feather. Veils inside the panel stay hidden.
   B. Ops console flow tiles: the 18px body step made two-line labels
      ("Checkout confirmed", "Telegram ID bound") climb into the gold-to-green
      status bar at top 12px (worst pixel 1.05:1). Tighter leading plus a
      reserved top band keeps every label clear of the bar at any wrap. */
.tool-workbench > .tool-panel { position: relative; }
.ops-flow span { line-height: 1.3; padding-top: 28px; }
/* C. Resource map lane counters ("27 resources") are bordered pills with no fill,
      so the fabric showed inside the pill (peak +13 under the lane veil). Page ink
      fill, same look as the pill had on the old flat band. */
.resource-lane-head strong { background-color: var(--surface-0); }

/* ===========================================================================
   Homepage v4 integration (2026-09-13), layered after the gold field.
   =========================================================================== */
/* Text for screen readers only (each walkthrough chapter's caption inside its button). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* ===========================================================================
   Hero layout (v4 merge fixes, 2026-09-13). Three grid children: the copy, the figure
   (.hero-media: head, phone, simulated-button note) and the chapters sheet (.app-video-side).
   - 1181px and up: copy | phone | chapters in one row, as reviewed.
   - 961-1180px: the copy column keeps its width, so the locked H1 stays on two lines, and
     the chapters sheet moves into that column under the call to action, beside the phone.
     Labels in one row, the active caption with Pause / Play / Replay beside it: the labels,
     the caption and the note under the phone all sit in an 800px-tall first screen.
   - 761-960px: the copy on top, then the phone and the chapters side by side.
   - 760px and below: one column. The copy's children join the hero grid, so the reassurance
     line can follow the walkthrough and the video starts in the first screen; See Plans sits
     beside Start Free. Nothing locked changes: eyebrow, H1, subhead, Start Free, See Plans
     keep their text and order.
   =========================================================================== */
.hero.hero-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-12) calc(var(--app-video-w) + 20px) var(--space-6) minmax(0, 228px);
  grid-template-areas: "copy . media . side";
  gap: 0;
  place-items: center stretch;
  padding: var(--space-20) 0 var(--space-16);
  text-align: left;
}
.hero-flow > .hero-copy { grid-area: copy; }
.hero-flow > .hero-media { grid-area: media; }
.hero-flow > .app-video-side { grid-area: side; }

@media (min-width: 961px) and (max-width: 1180px) {
  .hero.hero-flow {
    grid-template-columns: minmax(0, 1fr) var(--space-10) calc(var(--app-video-w) + 20px);
    grid-template-rows: auto var(--space-6) auto 1fr;
    grid-template-areas: "copy . media" ". . media" "side . media" ". . media";
    align-items: start;
    padding-top: var(--space-16);
  }
  .hero-flow > .app-video-side { max-width: 600px; }
  /* one row of six labels; under it the active caption with the toggle beside it */
  .hero-flow > .app-video-side {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) var(--space-4) var(--space-3);
  }
  .hero-flow .app-video-bar { grid-column: 2; grid-row: 2; align-self: center; min-height: 0; }
  .hero-flow .app-video-bar-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hero-flow .app-video-chapters { grid-column: 1 / -1; grid-row: 1; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hero-flow .app-video-caption { grid-column: 1; grid-row: 2; align-self: center; min-height: calc(2 * 1.5em); }
  .hero-flow .app-video-fallback { grid-column: 1 / -1; }
}

@media (min-width: 761px) and (max-width: 960px) {
  .hero.hero-flow {
    grid-template-columns: minmax(0, 1fr) calc(var(--app-video-w) + 20px) var(--space-6) minmax(0, 228px) minmax(0, 1fr);
    grid-template-rows: auto var(--space-10) auto;
    grid-template-areas: "copy copy copy copy copy" ". . . . ." ". media . side .";
  }
}

/* Compact chapter labels (time over label, a gold underline on the active one) wherever the
   sheet is wider than a desktop column. */
@media (max-width: 760px), (min-width: 961px) and (max-width: 1180px) {
  .hero-flow .app-video-chapters { column-gap: var(--space-2); }
  .hero-flow .app-video-chapters li + li { border-top: 0; }
  .hero-flow .app-video-chapter {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: var(--target-min);
    padding: 6px 2px 7px;
    border-left: 0;
    border-bottom: 2px solid var(--edge-hair);
  }
  .hero-flow .app-video-chapter.is-on { border-bottom-color: var(--gold-ink); }
  .hero-flow .app-video-chapter-time { font-size: 13px; }
}

@media (max-width: 760px) {
  .hero.hero-flow {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: none;
    padding: var(--space-6) 0 var(--space-12);
  }
  .hero-flow > .hero-copy { display: contents; }
  /* The lamp was anchored to .hero-copy, which now has no box; .hero anchors it, so move it
     down by the hero's top padding to keep it on the headline. */
  .hero-flow > .hero-copy::before { top: calc(-145px + var(--space-6)); }
  .hero-flow > .hero-copy > *,
  .hero-flow > .hero-media,
  .hero-flow > .app-video-side { grid-area: auto; min-width: 0; }
  .hero-flow .hero-sub { margin: var(--space-5) 0 0; }
  .hero-flow .hero-cta-block { gap: var(--space-2); }
  .hero-flow .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    width: 100%;
    margin-top: var(--space-8);
  }
  .hero-flow .hero-actions .btn { flex: 1 1 auto; width: auto; padding-left: var(--space-6); padding-right: var(--space-6); }
  .hero-flow .hero-actions .text-link { flex: 0 0 auto; width: auto; }
  .hero-flow > .hero-media { order: 1; margin-top: var(--space-4); }
  .hero-flow > .app-video-side { order: 2; margin-top: var(--space-3); }
  /* 2026-09-14: the free-plan reassurance sits under its call to action again (it was 960px
     below it, after the walkthrough); the video still starts in the first screen. */
  .hero-flow .hero-assurance { margin-top: var(--space-2); }
  .hero-flow .hero-agent { margin-top: var(--space-4); }
  .hero-flow .app-video,
  .hero-flow > .app-video-side { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
  .hero-flow .app-video { gap: var(--space-2); }
  .hero-flow .app-video-head { min-height: 0; }
  .hero-flow .app-video-note { margin-top: 0; }
  /* The sheet under the phone: labels in three columns, two lines kept for the caption
     (the longest caption's real maximum), so the phone's screen, the labels and the
     caption fit together in one screen under the nav. */
  .hero-flow > .app-video-side { gap: var(--space-2); padding: var(--space-1) var(--space-4) var(--space-3); }
  .hero-flow .app-video-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-flow .app-video-caption { min-height: calc(2 * 1.5em); }
  /* The locked H1 in two lines down to 360px (40px there instead of 42px). */
  .hero-flow h1 { font-size: min(var(--fs-h1), 11.1vw); }
}
@media (max-width: 380px) {
  .hero.hero-flow { padding-top: var(--space-4); }
  .hero-flow > .hero-copy::before { top: calc(-145px + var(--space-4)); }
  .hero-flow .hero-sub { margin-top: var(--space-4); }
  .hero-flow .hero-actions { margin-top: var(--space-6); }
  .hero-flow > .hero-media { margin-top: var(--space-3); }
}
@media (max-width: 340px) {
  .hero-flow .app-video-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* See Plans beside Start Free (final review, 2026-09-13). The .text-link rule's 16px top
   margin sat it 8px low in the centred row, with its hairline under the gold button's bottom
   edge. No margin, and 7px above the label to match the 6px and 1px hairline below it, so
   both labels share one centre line. The 44px tap target stays. */
.hero-actions > .hero-secondary { margin-top: 0; padding-top: 7px; padding-bottom: 6px; }

/* 1181px and up on short laptop screens (final review, 2026-09-13: 1366x657, 1280x680):
   "Mini App" with its chip, and the simulated-button note, each keep one line centred over
   the phone, at least 16px clear of the copy and the chapters sheet. An 8px gap and 6px chip
   padding make the head line narrower, and the phone keeps a 232px floor, so that line
   overhangs its column by a few pixels into the 24px gutter at most. The one-line head and
   note are shorter than the wrapped ones, so the height reserve drops from 290px to 264px;
   at 720px tall or less the hero's top padding is 48px, so the note stays on screen at the
   floor. */
@media (min-width: 1181px) {
  .hero-flow { --app-video-w: clamp(232px, calc((100vh - 264px) * .4779), 288px); }
  /* min-width 0: the one-line head must not widen the figure's grid track, or the phone
     shifts right off its column's centre; the line overhangs both sides evenly instead. */
  .hero-flow .app-video-head { flex-wrap: nowrap; justify-content: center; gap: var(--space-2); min-width: 0; white-space: nowrap; }
  .hero-flow .app-video-sample { padding-left: 6px; padding-right: 6px; }
  .hero-flow .app-video-note { width: max-content; max-width: none; white-space: nowrap; }
}
@supports (height: 100svh) {
  @media (min-width: 1181px) {
    .hero-flow { --app-video-w: clamp(232px, calc((100svh - 264px) * .4779), 288px); }
  }
}
@media (min-width: 1181px) and (max-height: 720px) {
  .hero.hero-flow { padding-top: var(--space-12); }
}

/* ===========================================================================
   AI agents (2026-09-14): the one-prompt copy control in the hero and on /agents/,
   and the /agents/ page. Button text stays on one line at 360px.
   =========================================================================== */
.agent-copy { display: grid; justify-items: start; gap: var(--space-2); }
.agent-copy-button,
.agent-copy-link { gap: var(--space-3); white-space: nowrap; }
.agent-copy-hint {
  padding: 4px 7px 3px;
  border: 1px solid var(--edge-gold);
  border-radius: var(--radius-xs, 2px);
  font: 600 13px/1 var(--font-display);
  letter-spacing: 0;
  color: var(--gold-ink);
}
.agent-copy.is-copied .agent-copy-button { border-color: var(--ok); color: var(--ok); }
.agent-copy.is-copied .agent-copy-hint { border-color: var(--ok); color: var(--ok); }
.btn-gold .agent-copy-hint { border-color: rgb(20 16 10 / .45); color: var(--on-gold); }
.agent-copy-status { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ok); }
.agent-copy-status:empty { display: none; }
.agent-copy-text {
  width: 100%;
  max-width: 640px;
  padding: var(--space-3);
  border: 1px solid var(--edge-gold);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: 400 15px/1.5 var(--font-ui);
  resize: vertical;
}
.hero-agent { display: grid; justify-items: start; gap: var(--space-2); margin-top: var(--space-5); }
.hero-agent-note { margin: 0; max-width: 520px; font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); }
.hero-agent-note a { color: var(--gold-ink); text-underline-offset: 3px; }

.agents-prompt,
.agents-audience,
.agents-split,
.agents-dev,
.agents-security { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.agents-hero { padding-bottom: var(--space-8); }
.agents-prompt { padding-top: var(--space-8); }
.agents-prompt-box {
  max-width: 760px;
  margin: 0 0 var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--edge-gold);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: 400 17px/1.6 var(--font-ui);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.agents-prompt .agent-copy-text { display: none; }
.agents-prompt-note { max-width: 760px; margin-top: var(--space-3); color: var(--text-muted); }
.agents-audience { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding-top: 0; }
.agents-audience article,
.agents-security ul {
  padding: var(--space-6);
  border: 1px solid var(--edge-hair);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.agents-audience h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
.agents-audience p { margin: 0; color: var(--text-muted); }
.agents-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.agents-column-title { margin: 0 0 var(--space-4); font-size: var(--fs-h3); }
.agents-steps { list-style: none; margin: 0; padding: 0; counter-reset: agents-step; }
.agents-steps li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) 48px;
  border-top: 1px solid var(--edge-hair);
  counter-increment: agents-step;
}
.agents-steps li::before {
  content: counter(agents-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-4);
  font: 600 20px/1.2 var(--font-display);
  color: var(--gold-ink);
}
.agents-steps h3 { margin: 0 0 var(--space-1); font-size: 19px; }
.agents-steps p { margin: 0; color: var(--text-muted); }
.agents-steps-human li::before { color: var(--text); }
.agents-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.agents-links li { display: grid; gap: 2px; }
.agents-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-ink); font-weight: 600; }
.agents-links span { color: var(--text-muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
.agents-dev-note { max-width: 760px; margin-top: var(--space-5); color: var(--text-muted); overflow-wrap: anywhere; }
.agents-security ul { list-style: none; margin: 0; display: grid; gap: var(--space-3); }
.agents-security li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.agents-security li svg { width: 18px; height: 18px; margin-top: 4px; fill: none; stroke: var(--ok); stroke-width: 1.8; }
@media (max-width: 760px) {
  .agents-prompt,
  .agents-audience,
  .agents-split,
  .agents-dev,
  .agents-security { width: min(100% - 32px, var(--max)); }
  .agents-audience,
  .agents-columns { grid-template-columns: minmax(0, 1fr); }
  .agents-prompt-box { padding: var(--space-4); font-size: 16px; }
  .agent-copy,
  .hero-agent { justify-items: stretch; }
  .agent-copy-button,
  .agent-copy-link { width: 100%; }
}
/* 961-1180px: the chapters sheet sits under the call to action and must stay in a 768px-tall
   first screen. The agent control keeps its button but drops the explanatory note (the
   button links the same prompt and /agents/ is in the navigation), and the copy column
   tightens by the height the button adds. Measured at 1024x768: sheet bottom 745px before
   the agent control, and must stay at or above that screen's bottom. */
@media (min-width: 961px) and (max-width: 1180px) {
  .hero.hero-flow { grid-template-rows: auto var(--space-3) auto 1fr; padding-top: var(--space-12); }
  .hero-flow .hero-actions { margin-top: var(--space-3); }
  .hero-flow .hero-assurance { margin-top: var(--space-3); }
  .hero-flow .hero-agent { margin-top: var(--space-3); }
  .hero-flow .hero-agent-note { display: none; }
}

/* ===========================================================================
   Phones, measured 2026-09-14 at 390 and 360 CSS px (Playwright, isMobile).
   =========================================================================== */
/* Landing pages: a long unbroken token (a URL) in a section body widened the landing grid to
   379px, so at 360px the sidebar and sections ran 35px past the viewport under main's clip.
   Grid children may shrink and long tokens wrap. */
.landing-main,
.landing-sidebar,
.landing-section { min-width: 0; }
.landing-section p,
.landing-section li { overflow-wrap: break-word; }
/* Bands: 100vw counts a classic scrollbar, which pushed band content off centre by half the
   scrollbar's width on desktop; percentage padding resolves against the band's own box. */
.band {
  padding-left: max(24px, calc((100% - var(--max)) / 2));
  padding-right: max(24px, calc((100% - var(--max)) / 2));
}
@media (max-width: 760px) {
  /* Tap targets under 44px: landing sidebar contents (23px) and links (28px), blog decision
     path links (34px and 23px) and cluster links (28px). */
  .sidebar-toc a,
  .sidebar-links a,
  .decision-path-card a,
  .decision-path-mini a,
  .blog-cluster-head a { display: flex; align-items: center; min-height: 44px; }
}
/* Blog decision-path labels were 11px; phones get the 13px floor used by other small labels. */
@media (max-width: 760px) {
  .decision-path-mini > span { font-size: 13px; }
}
/* /agents/: the hero shares the sections' left edge, and the sections keep a tighter rhythm. */
.page-hero.compact.agents-hero { max-width: none; width: min(var(--max), calc(100% - 48px)); }
.agents-hero > p { max-width: 760px; }
.agents-prompt,
.agents-audience,
.agents-split,
.agents-dev,
.agents-security { padding-top: var(--space-16); padding-bottom: 0; }
.agents-security { padding-bottom: var(--space-16); }
@media (max-width: 760px) {
  .page-hero.compact.agents-hero { width: min(100% - 32px, var(--max)); }
  .agents-prompt,
  .agents-audience,
  .agents-split,
  .agents-dev { padding-top: var(--space-12); }
  .agents-security { padding-top: var(--space-12); padding-bottom: var(--space-12); }
}

/* Security first (2026-09-15): the homepage section's link and the /security/ page. */
.flow-copy .flow-link { margin-top: var(--space-5); }
.flow-copy .flow-link .text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--gold-ink); font-weight: 600; }
.flow-copy .flow-link .text-link:hover { color: var(--gold-light); }
.flow-copy .flow-link svg { width: 16px; height: 16px; }
.page-hero.compact.security-hero { max-width: none; width: min(var(--max), calc(100% - 48px)); padding-bottom: var(--space-8); }
.security-groups,
.security-more { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.security-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.security-group {
  padding: var(--space-6);
  border: 1px solid var(--edge-hair, rgba(246, 240, 231, .10));
  border-radius: var(--radius-sm, 2px);
  background: var(--surface-2, #10100e);
}
.security-group .section-head { margin-bottom: var(--space-5); }
.security-group h2 { margin: var(--space-2) 0 0; font-size: var(--fs-h3); }
.security-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.security-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; color: var(--text-muted); }
.security-list li svg { width: 18px; height: 18px; margin-top: 4px; fill: none; stroke: var(--ok); stroke-width: 1.8; }
.security-report { grid-column: 1 / -1; }
.security-report > p { max-width: 760px; margin: 0 0 var(--space-4); color: var(--text-muted); }
.security-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.security-links li { display: grid; gap: 2px; }
.security-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-ink); font-weight: 600; overflow-wrap: anywhere; }
.security-links span { color: var(--text-muted); font-size: var(--fs-small); }
.security-more { padding-block: var(--space-10) 0; }
.security-more p { max-width: 760px; margin: 0; color: var(--text-muted); }
.security-more a { color: var(--gold-ink); }
@media (max-width: 760px) {
  .page-hero.compact.security-hero,
  .security-groups,
  .security-more { width: min(100% - 32px, var(--max)); }
  .security-groups { grid-template-columns: minmax(0, 1fr); }
  .security-group { padding: var(--space-5); }
}

/* Apple design layer, from site-src/apple.css */
/* ===========================================================================
   APPLE DESIGN LAYER (2026-09-18). Simon: "simplified and modernized, no rectangle
   buttons, Apple style of design ... optimize it for phone users".

   Loaded after site.css (build-site.mjs, readStylesheet), so it wins on every name it
   redeclares, and it switches the dossier's decoration off at the token level instead
   of deleting 7,000 lines other page types still lean on.

   Measured on apple.com product pages on 2026-09-18 (desktop 1440, phone 375):
   - SF Pro through the system stack. Headlines 600; body 17px / 1.47; tracking from SF's
     own table: -0.022em at 17px, 0.011em at 21px, -0.003em at 48px, -0.015em at 80px.
   - Pill buttons: radius 980px, 44px tall, 17px label, 11px 21px padding.
   - Black page, #161617 / #1d1d1f surfaces, #f5f5f7 ink, #86868b grey copy.
   - Glass bars: ink at 72-80% with saturate(180%) blur(20px).
   - Section rhythm 112px (phone) / 144px (desktop); copy centred, media below it.
   KickThemBot keeps black and gold: gold takes the one accent role Apple gives blue
   (buttons, links, the line over each headline). No gradient headline, ever (the
   2026-08-18 redesign was rejected for one).
   =========================================================================== */

:root {
  /* --- type: the system face. Apple devices get SF Pro with its optical sizes;
     Windows gets Segoe UI Variable, Android Roboto. No webfont on the critical path. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-heading: var(--font-sans);
  --font-ui: var(--font-sans);
  --font-body: var(--font-sans);

  /* --- neutrals: Apple's dark greys replace the warm stone ramp --- */
  --n-000: #000000;
  --n-050: #000000;   /* page */
  --n-100: #0a0a0b;   /* band */
  --n-200: #161617;   /* card */
  --n-300: #1d1d1f;   /* raised card, phone screen */
  --n-350: #2c2c2e;   /* chip, hover, pressed */
  --n-400: #2c2c2e;   /* hairline inside a card */
  --n-500: #3a3a3c;   /* decorative edge */
  --n-600: #6e6e73;   /* interactive edge: 4.1:1 on black */
  --n-700: #86868b;   /* subtle text: 5.8:1 on black, 5.0:1 on a card */
  --n-800: #a1a1a6;   /* muted text: 8.0:1 */
  --n-900: #f5f5f7;   /* ink */
  --n-950: #f5f5f7;

  --surface-0: #000000;
  --surface-1: #0a0a0b;
  --surface-2: #161617;
  --surface-3: #1d1d1f;
  --surface-4: #2c2c2e;
  --text-max: #f5f5f7;
  --text: #f5f5f7;
  --text-muted: #a1a1a6;
  --text-subtle: #86868b;
  --edge-hair: rgba(255, 255, 255, .08);
  --edge: rgba(255, 255, 255, .12);
  --edge-strong: #6e6e73;
  --edge-gold: rgba(201, 168, 76, .45);
  --rule-gold: rgba(201, 168, 76, .45);
  --border: var(--edge-hair);
  --border-soft: var(--edge-hair);

  /* gold: the brand hexes, one accent */
  --gold-ink: #c9a84c;
  --gold-ink-strong: #d6b65c;
  --gold-light: #f0cf82;
  --gold-fill: #c9a84c;
  --gold-fill-top: #c9a84c;
  --gold-fill-bottom: #c9a84c;
  --gold-hover: #d9bb62;
  --gold-press: #b8963f;
  --on-gold: #000000;
  --focus-ring: #f0cf82;
  --ok: #30d158;
  --danger: #ff6961;

  /* the dossier's decoration, switched off at its own switches */
  --field-ink: transparent;
  --field-ink-0: transparent;
  --pool-lamp: none;
  --veil: transparent;
  --veil-tight: transparent;
  --dot: transparent;
  --spot: transparent;
  --rim: none;
  --rim-strong: none;
  --rim-gold: none;
  --glow-gold: none;
  --glow-gold-hover: none;

  /* --- radii: pills and soft cards --- */
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 980px;
  --r-device: 44px;
  --r-screen: 34px;

  /* --- type scale (phone -> desktop) --- */
  --fs-body: 17px;
  --lh-body: 1.47;
  --fs-small: 14px;
  --fs-label: 14px;
  --fs-lead: clamp(19px, 17.4px + .45vw, 21px);
  --lh-lead: 1.38;
  --fs-flow: var(--fs-lead);
  --fs-h1: clamp(34px, 24px + 2.6vw, 56px);
  --fs-h1-page: clamp(34px, 24px + 2.6vw, 56px);
  --fs-h2: clamp(28px, 20px + 2.2vw, 48px);
  --fs-h3: clamp(21px, 18px + .8vw, 28px);
  --fs-h4: 19px;
  --fs-numeral: clamp(40px, 30px + 2.4vw, 56px);
  --fs-price: clamp(40px, 34px + 1.6vw, 48px);
  --lh-h1: 1.07;
  --lh-h2: 1.1;
  --lh-h3: 1.17;
  --lh-h4: 1.3;
  --tr-h1: -.005em;
  --tr-h2: -.003em;
  --tr-h3: .004em;
  --tr-label: 0;
  --tr-body: -.022em;
  --tr-lead: .011em;

  /* --- motion: Apple's standard curve and a gentle press --- */
  --ease-apple: cubic-bezier(.28, .11, .32, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-std: cubic-bezier(.25, .1, .25, 1);
  --dur-press: 120ms;
  --dur-in: 200ms;
  --dur-out: 200ms;
  --dur-state: 320ms;
  --dur-reveal: 700ms;
  --rise: 12px;

  --glass: rgba(22, 22, 23, .8);
  --glass-strong: rgba(22, 22, 23, .86);
  --glass-edge: rgba(255, 255, 255, .1);
  --glass-blur: saturate(180%) blur(20px);

  --max: 1120px;
  --gutter: 16px;
}

@media (min-width: 735px) { :root { --gutter: 32px; } }
@media (min-width: 900px) { :root { --fs-body: 17px; --lh-body: 1.47; } }

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
html {
  background: #000;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: #000;
  background-image: none;
  color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  letter-spacing: var(--tr-body);
  font-variant-numeric: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
body::before { content: none; display: none; }

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 600; text-wrap: balance; }
h1 { letter-spacing: var(--tr-h1); }
h2 { letter-spacing: var(--tr-h2); }
h3 { letter-spacing: var(--tr-h3); color: var(--text-max); }
h4 { letter-spacing: 0; }
p, li, dd, figcaption { text-wrap: pretty; }
strong, b { font-weight: 600; }

::selection { background: rgba(201, 168, 76, .35); color: #fff; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

/* The dossier's decorations: corner ticks, rule segments, lamps and veils. */
.hero::before,
.eyebrow::before,
.section-label::before,
.trust-band li::before,
.feature-card::after,
.workflow-step::after,
.pricing-card::after { content: none; display: none; }

/* Sentence case everywhere: the tracked uppercase labels were the dossier's voice. */
.eyebrow,
.section-label,
.plan-role,
.popular,
.member-row b,
.footer-links h2,
.logo {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   Eyebrows: the gold line over a headline (Apple's grey product eyebrow, in gold)
   --------------------------------------------------------------------------- */
.eyebrow,
.section-label {
  display: block;
  margin: 0 0 10px;
  font: 600 17px/1.24 var(--font-sans);
  letter-spacing: -.022em;
  color: var(--gold-ink);
}
@media (min-width: 1069px) {
  .eyebrow,
  .section-label { font-size: 19px; letter-spacing: .012em; }
}

/* ---------------------------------------------------------------------------
   Buttons: pills. One gold fill per viewport; everything else is an outline pill or
   a gold text link with a chevron.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 400 17px/1.18 var(--font-sans);
  letter-spacing: -.022em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-in) var(--ease-std), border-color var(--dur-in) var(--ease-std), color var(--dur-in) var(--ease-std), transform var(--dur-press) var(--ease-std);
}
.btn:hover { transform: none; }
.btn:active { transform: scale(.97); }
.btn svg { width: 16px; height: 16px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn-gold {
  background: var(--gold-fill);
  color: var(--on-gold);
  font-weight: 500;
  box-shadow: none;
}
.btn-gold:hover { background: var(--gold-hover); box-shadow: none; }
.btn-gold:active { background: var(--gold-press); }

.btn-outline,
.btn-ghost {
  background: transparent;
  border-color: var(--gold-ink);
  color: var(--gold-ink);
  font-weight: 400;
}
.btn-outline:hover,
.btn-ghost:hover {
  background: var(--gold-ink);
  border-color: var(--gold-ink);
  color: #000;
}

.btn-lg { min-height: 50px; padding: 14px 28px; font-size: 17px; }
.btn-lg.btn-gold { padding: 14px 30px; }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-pill); }

/* The gold text link: Apple's "Learn more >". */
.text-link,
.hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--gold-ink);
  font: 400 17px/1.18 var(--font-sans);
  letter-spacing: -.022em;
  text-decoration: none;
}
.text-link:hover,
.hero-secondary:hover { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.text-link svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------------
   Navigation: a glass bar. Phone: logo, the Start Free pill in the thumb's reach of the
   top bar, and a two-line menu button that opens a full-screen sheet.
   --------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 52px;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  border-bottom: 1px solid transparent;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: border-color var(--dur-state) var(--ease-std), background-color var(--dur-state) var(--ease-std);
}
.site-nav.is-scrolled { border-bottom-color: var(--edge-hair); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav { background: rgba(0, 0, 0, .96); }
}

.logo {
  gap: 9px;
  min-height: 44px;
  color: var(--text-max);
  font: 600 17px/1 var(--font-sans);
  letter-spacing: -.022em;
}
.logo-mark { width: 28px; height: 28px; }

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 0 auto;
}
.nav-links a,
.nav-links a:not(.nav-launch-mobile) {
  min-height: 44px;
  color: rgba(245, 245, 247, .8);
  font: 400 14px/1 var(--font-sans);
  letter-spacing: -.01em;
  text-transform: none;
}
.nav-links a:hover { color: #fff; }

.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 0; }
.nav-launch,
.btn.nav-launch {
  position: relative;
  min-height: 32px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
}
/* A 44px hit area around the 32px pill. */
.nav-launch::after { content: ""; position: absolute; inset: -6px -4px; }
.btn-gold.nav-launch { background: var(--gold-fill); border-color: transparent; color: #000; }
.btn-gold.nav-launch:hover { background: var(--gold-hover); }

.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  cursor: pointer;
}
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: #f5f5f7;
  transition: transform var(--dur-state) var(--ease-apple), top var(--dur-state) var(--ease-apple);
}
.nav-toggle::before { top: 17px; }
.nav-toggle::after { top: 25px; }
.nav-toggle[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { top: 21px; transform: rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; border-radius: 50%; }

@media (max-width: 1040px) {
  .site-nav { display: flex; height: 48px; gap: 8px; }
  .site-nav .logo { margin-right: auto; }
  .nav-toggle { display: inline-flex; order: 3; }
  .nav-actions { display: flex; order: 2; }
  .nav-links,
  .nav-links:not(.open) { display: none; }
  /* The open menu: a full-screen sheet under the bar, big links in a column. */
  .nav-links.open {
    position: fixed;
    inset: 48px 0 0 0;
    z-index: 49;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 20px max(28px, env(safe-area-inset-left)) calc(32px + env(safe-area-inset-bottom));
    border-top: 0;
    background: rgba(0, 0, 0, .94);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: ap-sheet-in var(--dur-state) var(--ease-apple) both;
  }
  .nav-links.open a,
  .nav-links.open a:not(.nav-launch-mobile) {
    display: flex;
    min-height: 56px;
    padding: 0;
    border: 0;
    color: #f5f5f7;
    font: 600 28px/1.14 var(--font-sans);
    letter-spacing: .007em;
    animation: ap-link-in 420ms var(--ease-apple) both;
  }
  .nav-links.open a:nth-child(2) { animation-delay: 30ms; }
  .nav-links.open a:nth-child(3) { animation-delay: 60ms; }
  .nav-links.open a:nth-child(4) { animation-delay: 90ms; }
  .nav-links.open a:nth-child(5) { animation-delay: 120ms; }
  .nav-links.open .nav-launch-mobile {
    display: flex;
    justify-content: flex-start;
    margin-top: 12px;
    border: 0;
    border-radius: 0;
    color: var(--gold-ink);
  }
  body.nav-open { overflow: hidden; }
  /* A backdrop-filter makes the bar the containing block of its fixed children, which would
     trap the full-screen sheet inside the 48px bar. While the sheet is open the bar goes solid. */
  body.nav-open .site-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #000;
  }
}
@keyframes ap-sheet-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ap-link-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (min-width: 1041px) {
  .site-nav { display: grid; grid-template-columns: 1fr auto 1fr; height: 52px; }
  .nav-links { grid-column: 2; }
  .nav-actions { grid-column: 3; justify-self: end; }
}

/* ---------------------------------------------------------------------------
   Cards across the site: soft corners, no ticks, a hairline only where two dark
   surfaces meet.
   --------------------------------------------------------------------------- */
.feature-card,
.workflow-step,
.pricing-card,
.free-plan-card,
.trust-band li,
.article-card,
.topic-card,
.solution-card,
.start-route-card,
.decision-path-card,
.decision-path-mini,
.blog-sidebar,
.tool-workbench,
.resource-intents article,
.answer-card,
.glossary-card {
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.faq-list details,
.faq-inline details { border-radius: 0; }

/* ---------------------------------------------------------------------------
   Footer: Apple's small print. 12px grey, compact columns.
   --------------------------------------------------------------------------- */
.site-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 40px max(var(--gutter), calc((100% - 980px) / 2)) calc(28px + env(safe-area-inset-bottom));
  border-top: 0;
  background: #161617;
  color: var(--text-subtle);
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: -.01em;
}
.site-footer .logo { font-size: 15px; }
.site-footer .logo-mark { width: 24px; height: 24px; }
.footer-brand p,
.footer-copy { color: var(--text-subtle); font-size: 12px; line-height: 1.5; }
.footer-brand p { max-width: 46ch; margin: 12px 0 16px; }
.footer-links { background: none; font-size: 12px; }
.footer-links h2 {
  margin: 0 0 6px;
  color: var(--text-max);
  font: 600 12px/1.33 var(--font-sans);
  letter-spacing: -.01em;
}
.footer-links a,
.footer-links a:not(.nav-launch-mobile) {
  min-height: 32px;
  color: #a1a1a6;
  font-size: 12px;
}
.footer-links a:hover { color: #f5f5f7; text-decoration: underline; }
.footer-cta.btn { min-height: 36px; padding: 8px 16px; font-size: 14px; }
@media (max-width: 734px) {
  .site-footer { grid-template-columns: 1fr; gap: 24px; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .footer-links a,
  .footer-links a:not(.nav-launch-mobile) { min-height: 36px; }
}

/* ===========================================================================
   HOMEPAGE (.ap-home). Apple's product-page rhythm: every section is a gold eyebrow,
   one headline, one line about how it feels, and the animation under it.
   =========================================================================== */
.ap-home main { overflow-x: clip; }

.ap-wrap {
  width: min(980px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

/* --- hero ---------------------------------------------------------------- */
.hero.ap-hero {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 44px 0 0;
  text-align: center;
  overflow: visible;
}
.ap-hero-copy {
  width: min(880px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}
.ap-hero h1 {
  max-width: none;
  margin: 0 auto 10px;
  color: var(--gold-ink);
  font: 600 19px/1.21 var(--font-sans);
  letter-spacing: .012em;
}
.ap-display {
  margin: 0 auto;
  max-width: 13ch;
  color: var(--text-max);
  font: 600 clamp(44px, 30px + 4.4vw, 80px)/1.05 var(--font-sans);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.ap-hero .ap-feel { margin: 18px auto 0; max-width: 32ch; }
.ap-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  margin-top: 28px;
}
.ap-assure {
  text-wrap: balance;
  margin: 14px auto 0;
  color: var(--text-subtle);
  font: 400 14px/1.43 var(--font-sans);
  letter-spacing: -.016em;
}
/* The hero's actions (2026-09-19): Start Free and the AI setup prompt side by side, the copy
   status and the no-clipboard fallback on their own row under both. The wrapper and the
   control step aside (display: contents) so the button, link and status are grid items. */
.ap-hero-actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  align-items: center;
  gap: 12px 14px;
}
.ap-hero-actions .ap-hero-ai,
.ap-hero-actions .agent-copy { display: contents; }
.ap-hero-actions .agent-copy-status,
.ap-hero-actions .agent-copy-text { grid-column: 1 / -1; justify-self: center; }
.ap-hero-actions .agent-copy-status { margin: 0; max-width: 40ch; color: var(--text-subtle); font: 400 14px/1.43 var(--font-sans); letter-spacing: -.016em; }
.ap-hero-actions .agent-copy-status:empty { display: none; }
.ap-hero-actions .agent-copy-text { width: min(560px, 100%); border-radius: var(--radius-sm); }
/* "See Plans" closes the price line, at its size. */
.ap-assure .hero-secondary { display: inline; min-height: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; white-space: nowrap; }
.ap-assure .hero-secondary::after { display: inline-block; width: 6px; height: 6px; margin: 0 0 1px 4px; vertical-align: middle; }

/* The AI setup prompt: a graphite pill with a gold edge and a gold spark. It sits beside the one
   gold fill without competing with it, and turns green for a moment once the prompt is copied. */
.btn.btn-ai {
  gap: 8px;
  background: var(--surface-3);
  color: var(--text-max);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, .55);
}
.btn.btn-ai:hover { background: var(--surface-4); color: #fff; }
.btn.btn-ai svg { width: 18px; height: 18px; fill: none; stroke: var(--gold-light); stroke-width: 1.7; }
.btn.btn-ai svg:last-child:not(:first-child) { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; }
.agent-copy.is-copied .btn.btn-ai { box-shadow: inset 0 0 0 1px rgba(95, 217, 124, .7); color: #5fd97c; }

@media (min-width: 735px) {
  .hero.ap-hero { padding-top: 72px; }
  .ap-hero h1 { font-size: 24px; letter-spacing: .009em; }
  .ap-hero .ap-feel { margin-top: 22px; }
}

/* the walkthrough under the hero copy: the phone, its chapters and one caption */
.ap-hero .hero-media { margin: 48px auto 0; width: 100%; }
.ap-hero .app-video { display: grid; justify-items: center; gap: 0; max-width: none; margin: 0 auto; }
.ap-hero .app-video-head {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--text-subtle);
  font: 400 12px/1.33 var(--font-sans);
  letter-spacing: -.01em;
}
.ap-hero .app-video-title { color: var(--text-subtle); font: inherit; letter-spacing: inherit; }
.ap-hero .app-video-sample::before { content: "·"; display: inline; margin-right: 8px; color: var(--text-subtle); }
.ap-hero .app-video-sample {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-subtle);
  font: inherit;
  letter-spacing: inherit;
}
.ap-hero .app-video-device {
  /* the walkthrough is 780x1632: 268px of glass is 561px tall, the height the 780x1352
     recording filled at 300px */
  --app-video-w: clamp(230px, 62vw, 268px);
  position: relative;
  width: calc(var(--app-video-w) + 20px);
  padding: 10px;
  border-radius: var(--r-device);
  background: #1d1d1f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 40px 80px -30px rgba(201, 168, 76, .22), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.ap-hero .app-video-screen {
  width: var(--app-video-w);
  border-radius: var(--r-screen);
  overflow: hidden;
  background: #000;
}
.ap-hero .app-video-player { display: block; width: 100%; height: auto; border-radius: 0; }
.ap-hero .app-video-note {
  margin: 12px 0 0;
  color: var(--text-subtle);
  font: 400 12px/1.33 var(--font-sans);
  letter-spacing: -.01em;
  text-align: center;
}

/* the "Play the walkthrough" overlay: a glass pill on the poster */
.ap-hero .app-video-play {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: #f5f5f7;
  font: 500 15px/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}
.ap-hero .app-video-play svg { width: 11px; height: 11px; fill: var(--gold-ink); }

/* chapters: a glass segmented pill under the phone, then the active caption */
.ap-hero .app-video-side {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(640px, calc(100% - 2 * var(--gutter)));
  margin: 22px auto 0;
  padding: 0;
  border: 0;
  background: none;
}
.ap-hero .app-video-bar {
  order: 3;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
}
.ap-hero .app-video-bar-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ap-hero .app-video-toggle {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: #f5f5f7;
  font: 500 14px/1 var(--font-sans);
  cursor: pointer;
}
.ap-hero .app-video-toggle:hover { background: var(--surface-4); }
.ap-hero .app-video-chapters {
  order: 1;
  display: flex;
  gap: 2px;
  max-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.ap-hero .app-video-chapters::-webkit-scrollbar { display: none; }
.ap-hero .app-video-chapters li,
.ap-hero .app-video-chapters li + li { flex: none; border: 0; scroll-snap-align: center; }
.ap-hero .app-video-chapter {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font: 500 14px/1 var(--font-sans);
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-apple), color var(--dur-state) var(--ease-apple);
}
.ap-hero .app-video-chapter:not(:disabled):not(.is-on):hover { color: #f5f5f7; }
.ap-hero .app-video-chapter.is-on { background: #f5f5f7; color: #000; border: 0; }
.ap-hero .app-video-chapter-time { display: none; }
.ap-hero .app-video-caption {
  order: 2;
  min-height: 2.9em;
  margin: 0;
  max-width: 34ch;
  color: var(--text-muted);
  font: 400 15px/1.45 var(--font-sans);
  letter-spacing: -.016em;
  text-align: center;
}
.ap-hero .app-video-fallback { order: 4; }
@media (max-width: 420px) {
  .ap-hero .app-video-chapter { padding: 0 11px; font-size: 13px; }
}

/* --- sections -------------------------------------------------------------- */
.ap-section {
  position: relative;
  padding: 104px 0 0;
  scroll-margin-top: 60px;
}
.ap-section.ap-first { padding-top: 120px; }
.ap-copy {
  width: min(760px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  text-align: center;
}
/* The eyebrow is the h2; the big line is display text (see homeCopy). */
.ap-copy .section-label { margin: 0 0 10px; }
.ap-headline {
  margin: 0 auto;
  max-width: 18ch;
  color: var(--text-max);
  font: 600 clamp(32px, 22px + 2.9vw, 56px)/1.07 var(--font-sans);
  letter-spacing: -.005em;
  text-wrap: balance;
}
.ap-feel {
  margin: 16px auto 0;
  max-width: 34ch;
  color: var(--text-subtle);
  font: 600 var(--fs-lead)/1.38 var(--font-sans);
  letter-spacing: var(--tr-lead);
}
.ap-feel strong { color: var(--text-max); font-weight: 600; }
.ap-feel sup,
.ap-display sup { font-size: .5em; line-height: 0; vertical-align: .9em; color: var(--text-subtle); font-weight: 400; }
.ap-feel sup a,
.ap-display sup a { color: inherit; text-decoration: none; padding: 0 1px; }
.ap-more { margin: 14px 0 0; }
.ap-media {
  width: min(600px, calc(100% - 2 * var(--gutter)));
  margin: 44px auto 0;
  display: grid;
  justify-items: center;
}
.ap-media > * { width: 100%; }

@media (min-width: 735px) {
  .ap-section { padding-top: 144px; }
  .ap-section.ap-first { padding-top: 160px; }
  .ap-feel { margin-top: 20px; }
  .ap-media { margin-top: 64px; }
}

/* A pair of smaller features sits side by side on wide screens, as two tiles. */
.ap-pair {
  width: min(1120px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding-top: 104px;
  display: grid;
  gap: 16px;
}
.ap-pair-head { text-align: center; margin-bottom: 28px; }
.ap-pair-head h2 {
  margin: 0 auto;
  max-width: 18ch;
  font: 600 clamp(32px, 22px + 2.9vw, 56px)/1.07 var(--font-sans);
  letter-spacing: -.005em;
}
/* Two features side by side on wide screens; on phones they stack like any section. The
   animations are the cards, so the tiles themselves carry no background. */
.ap-tile {
  display: grid;
  align-content: start;
  gap: 0;
  padding: 40px 0 0;
  text-align: center;
}
.ap-tile .ap-media { text-align: left; }
.ap-tile h3 {
  margin: 0 auto;
  max-width: 20ch;
  color: var(--text-max);
  font: 600 clamp(24px, 19px + 1.3vw, 32px)/1.125 var(--font-sans);
  letter-spacing: .004em;
}
.ap-tile .ap-feel { font-size: 17px; line-height: 1.41; letter-spacing: -.022em; max-width: 32ch; margin-top: 12px; }
.ap-tile .ap-media { width: 100%; margin-top: 28px; }
@media (min-width: 735px) {
  .ap-pair { padding-top: 144px; }
  .ap-tile { padding: 56px 0 0; }
}
@media (min-width: 1069px) {
  .ap-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-pair-head { grid-column: 1 / -1; }
}

/* --- reveal on scroll: copy rises into place once, never under reduced motion --- */
.ap-reveal-ready .ap-rv {
  opacity: 0;
  transform: translateY(28px);
}
.ap-reveal-ready .ap-rv.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--ease-apple), transform 900ms var(--ease-apple);
}
.ap-reveal-ready .ap-rv.is-in:nth-child(2) { transition-delay: 80ms; }
.ap-reveal-ready .ap-rv.is-in:nth-child(3) { transition-delay: 160ms; }
.ap-reveal-ready .ap-rv.is-in:nth-child(4) { transition-delay: 240ms; }

/* --- pricing ------------------------------------------------------------------ */
.pricing.ap-pricing {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 104px 0 0;
  border: 0;
  background: none;
}
.ap-plans {
  width: min(1120px, calc(100% - 2 * var(--gutter)));
  margin: 44px auto 0;
  display: grid;
  gap: 12px;
}
.ap-plan {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name price"
    "fit fit"
    "cta cta";
  align-items: baseline;
  gap: 4px 12px;
  padding: 24px 22px 22px;
  border-radius: var(--radius-lg);
  background: #0f0f10;
  box-shadow: inset 0 0 0 1px var(--edge-hair);
  text-align: left;
}
.ap-plan.is-featured { background: #17150f; box-shadow: inset 0 0 0 1px rgba(201, 168, 76, .55); }
.ap-plan h3 { grid-area: name; margin: 0; font: 600 24px/1.17 var(--font-sans); letter-spacing: .009em; color: var(--text-max); }
.ap-plan-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px 4px;
  border-radius: var(--radius-pill);
  background: rgba(201, 168, 76, .16);
  color: var(--gold-light);
  font: 500 12px/1.2 var(--font-sans);
  letter-spacing: 0;
  vertical-align: 4px;
  white-space: nowrap;
}
.ap-price { grid-area: price; margin: 0; color: var(--text-max); font: 600 32px/1 var(--font-sans); letter-spacing: .004em; white-space: nowrap; }
.ap-price small { margin-left: 2px; color: var(--text-subtle); font: 400 15px/1 var(--font-sans); letter-spacing: -.016em; }
.ap-plan-fit { grid-area: fit; margin: 6px 0 0; color: var(--text-muted); font: 400 15px/1.4 var(--font-sans); letter-spacing: -.016em; }
.ap-plan-fit span { color: var(--text-subtle); }
.ap-plan .plan-action { grid-area: cta; margin-top: 16px; }
.ap-plan .btn { width: 100%; }
.ap-plan .btn-outline { border-color: rgba(201, 168, 76, .7); }

.ap-plan-extra {
  width: min(1120px, calc(100% - 2 * var(--gutter)));
  margin: 20px auto 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
.ap-plan-extra p { margin: 0; color: var(--text-subtle); font: 400 14px/1.43 var(--font-sans); letter-spacing: -.016em; }
.ap-compare {
  width: min(980px, calc(100% - 2 * var(--gutter)));
  margin: 28px auto 0;
  border-top: 1px solid var(--edge-hair);
}
.ap-compare > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  color: var(--gold-ink);
  font: 400 17px/1.2 var(--font-sans);
  letter-spacing: -.022em;
  list-style: none;
  cursor: pointer;
}
.ap-compare > summary::-webkit-details-marker { display: none; }
.ap-compare > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-state) var(--ease-apple), margin var(--dur-state) var(--ease-apple);
}
.ap-compare[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.ap-compare-scroll { overflow-x: auto; margin: 8px 0 0; -webkit-overflow-scrolling: touch; }
.ap-compare table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font: 400 14px/1.4 var(--font-sans);
  letter-spacing: -.016em;
}
.ap-compare th,
.ap-compare td { padding: 12px 10px; border-bottom: 1px solid var(--edge-hair); text-align: left; vertical-align: top; }
.ap-compare thead th { color: var(--text-max); font-weight: 600; font-size: 15px; }
.ap-compare tbody th { color: var(--text-subtle); font-weight: 400; }
.ap-compare td { color: var(--text-muted); }
.ap-compare .is-featured { color: var(--gold-light); }

@media (min-width: 735px) {
  .pricing.ap-pricing { padding-top: 144px; }
  .ap-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 64px; gap: 16px; }
  .ap-plan {
    grid-template-columns: 1fr;
    grid-template-areas: "name" "price" "fit" "cta";
    align-content: start;
    padding: 32px 28px 28px;
    text-align: center;
  }
  .ap-plan h3 { font-size: 28px; }
  .ap-price { margin-top: 14px; font-size: 48px; }
  .ap-plan-fit { margin-top: 12px; min-height: 2.8em; }
  .ap-plan .plan-action { margin-top: 24px; }
}
@media (min-width: 1069px) {
  .ap-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- questions ------------------------------------------------------------------ */
.faq.ap-faq {
  width: min(760px, calc(100% - 2 * var(--gutter)));
  max-width: none;
  margin: 0 auto;
  padding: 104px 0 0;
  border: 0;
}
.ap-faq .faq-list { display: block; margin-top: 36px; border-top: 1px solid var(--edge-hair); }
.ap-faq .faq-list details { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--edge-hair); background: none; }
.ap-faq .faq-list summary {
  position: relative;
  display: block;
  padding: 18px 40px 18px 0;
  color: var(--text-max);
  font: 600 17px/1.35 var(--font-sans);
  letter-spacing: -.022em;
  list-style: none;
  cursor: pointer;
}
.ap-faq .faq-list summary::-webkit-details-marker { display: none; }
.ap-faq .faq-list summary::before,
.ap-faq .faq-list summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--gold-ink);
  transition: transform var(--dur-state) var(--ease-apple);
}
.ap-faq .faq-list summary::after { transform: rotate(90deg); }
.ap-faq .faq-list details[open] summary::after { transform: rotate(0deg); }
.ap-faq .faq-list p { margin: 0 0 20px; padding: 0; color: var(--text-muted); font: 400 17px/1.47 var(--font-sans); letter-spacing: -.022em; }
.ap-faq .guides-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; margin-top: 20px; border: 0; padding: 0; }
@media (min-width: 735px) {
  .faq.ap-faq { padding-top: 144px; }
}

/* --- the last word -------------------------------------------------------------- */
.final-cta.ap-final {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 120px 0 112px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: center;
}
.ap-final .ap-headline {
  margin: 0 auto;
  max-width: 14ch;
  color: var(--text-max);
  font: 600 clamp(40px, 26px + 4vw, 80px)/1.05 var(--font-sans);
  letter-spacing: -.015em;
}
.ap-final .ap-feel { margin-top: 18px; }
.ap-final .ap-cta { margin-top: 32px; }
@media (min-width: 735px) { .final-cta.ap-final { padding: 176px 0 160px; } }

/* --- the small print (Apple's footnotes) --------------------------------------- */
.ap-notes {
  width: min(980px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: 20px 0 36px;
  border-top: 1px solid var(--edge-hair);
  color: var(--text-subtle);
  font: 400 12px/1.5 var(--font-sans);
  letter-spacing: -.01em;
}
.ap-notes ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.ap-notes li { padding-left: 2px; }
.ap-notes li:target { color: var(--text-muted); }
.ap-notes a { color: var(--text-muted); }

/* --- reduced motion: everything rests in place --- */
@media (prefers-reduced-motion: reduce) {
  .ap-reveal-ready .ap-rv,
  .ap-reveal-ready .ap-rv.is-in { opacity: 1; transform: none; transition: none; }
  .btn:active { transform: none; }
  .nav-links.open,
  .nav-links.open a { animation: none; }
  .nav-toggle::before,
  .nav-toggle::after { transition: none; }
}

@media (forced-colors: active) {
  .btn,
  .ap-hero .app-video-chapters { border: 1px solid CanvasText; }
  .nav-toggle::before,
  .nav-toggle::after { background: CanvasText; }
}

/* --- details added with the homepage markup ----------------------------------- */
/* Apple's chevron after a text link, drawn so the link text stays exactly its label. */
.ap-chevron::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: 3px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
}
.ap-tile .ap-copy { width: 100%; }
.ap-features { display: block; }

.ap-compare-grid {
  display: grid;
  gap: 24px;
  padding: 12px 0 8px;
  text-align: left;
}
.ap-compare-plan h3 {
  margin: 0 0 8px;
  color: var(--text-max);
  font: 600 17px/1.3 var(--font-sans);
  letter-spacing: -.022em;
}
.ap-compare-plan h3 span { color: var(--text-subtle); font-weight: 400; font-size: 14px; letter-spacing: -.016em; }
.ap-compare-plan.is-featured h3 { color: var(--gold-light); }
.ap-compare-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ap-compare-plan li {
  padding: 9px 0;
  border-bottom: 1px solid var(--edge-hair);
  color: var(--text-muted);
  font: 400 14px/1.4 var(--font-sans);
  letter-spacing: -.016em;
}
@media (min-width: 735px) { .ap-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (min-width: 1069px) { .ap-compare-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* ===========================================================================
   FLOW VISUALS: one card language for every homepage animation (2026-09-18).
   A near-black card with 28px corners and a hairline, SF-style type in sentence case,
   circular icon badges, pill chips, and one glass Replay button centred under the card
   once the animation has played. The caption stays for screen readers only: the
   headline above already says it, and each card carries a quiet "Sample" tag.
   =========================================================================== */
:root {
  --fv-card: #111112;
  --fv-card-edge: rgba(255, 255, 255, .07);
  --fv-raise: #1d1d1f;
  --fv-raise-2: #2c2c2e;
  --fv-line: #2c2c2e;
  --fv-radius: 24px;
  --fv-radius-in: 14px;
  --fv-gold-tint: rgba(201, 168, 76, .16);
  --fv-ok-tint: rgba(48, 209, 88, .14);
  --fv-ok-ink: #5fd97c;
  --fv-bad-tint: rgba(255, 105, 97, .14);
  --fv-bad-ink: #ff8a84;
  --fv-ease: cubic-bezier(.28, .11, .32, 1);
  --fv-spring: cubic-bezier(.34, 1.36, .64, 1);
}
@media (min-width: 735px) { :root { --fv-radius: 28px; --fv-radius-in: 16px; } }

.ap-media .fv { position: relative; font-family: var(--font-sans); letter-spacing: -.016em; }
.ap-media .fv > figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fv .fv-sample {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-subtle);
  font: 400 12px/1.2 var(--font-sans);
  letter-spacing: -.01em;
  text-transform: none;
}

.ap-media .fv .fv-replay {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: center;
  align-self: center;
  width: auto;
  min-width: 44px;
  min-height: 36px;
  margin: 16px auto 0;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--fv-raise);
  color: #f5f5f7;
  font: 500 14px/1 var(--font-sans);
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-in) var(--ease-std), opacity var(--dur-state) var(--ease-std);
}
.ap-media .fv .fv-replay:hover { background: var(--fv-raise-2); color: #fff; }
.ap-media .fv .fv-replay:active { transform: scale(.96); }
.ap-media .fv .fv-replay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Its slot is kept while it waits, so revealing it never moves the page. */
.ap-media .fv .fv-replay[hidden] { display: inline-flex !important; visibility: hidden; }
.ap-media .fv .fv-replay:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-pill); }


/* --- phones: the hero's one button is wide and sits in the thumb's easy reach ---------- */
@media (max-width: 734px) {
  .ap-hero .ap-cta { flex-direction: column; gap: 6px; }
  .ap-hero .ap-cta .btn-lg { width: min(100%, 340px); min-height: 52px; font-size: 18px; }
  .ap-final .ap-cta .btn-lg { width: min(100%, 340px); min-height: 52px; font-size: 18px; }
  .ap-hero .ap-assure { max-width: 30ch; }
}

/* --- member lookup: the two real Mini App screens as phones ------------------------------ */
.ap-media .app-stills { display: grid; gap: 16px; max-width: 560px; margin: 0 auto; }
.ap-media .app-stills .app-video-head {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  color: var(--text-subtle);
  font: 400 12px/1.2 var(--font-sans);
  letter-spacing: -.01em;
}
.ap-media .app-stills .app-video-title { display: none; }
.ap-media .app-stills .app-video-sample { padding: 0; border: 0; background: none; color: var(--text-subtle); font: inherit; letter-spacing: inherit; }
.ap-media .app-stills-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ap-media .app-still {
  padding: 6px;
  border-radius: 30px;
  background: #1d1d1f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.ap-media .app-still .app-screen { border-radius: 24px; overflow: hidden; }
.ap-media .app-still:nth-child(2) { margin-top: 40px; }
.ap-media .app-stills-caption { margin: 0; color: var(--text-subtle); font: 400 12px/1.4 var(--font-sans); letter-spacing: -.01em; text-align: center; }
@media (max-width: 734px) {
  .ap-media .app-stills-row { gap: 10px; }
  .ap-media .app-still { padding: 5px; border-radius: 24px; }
  .ap-media .app-still .app-screen { border-radius: 19px; }
  .ap-media .app-still:nth-child(2) { margin-top: 28px; }
}

/* the closing section: the legacy .final-cta paragraph rules must not repaint its lines. They
   weigh 0,3,1 (".final-cta p:not(.section-label):not(.cta-assurance)"), so these name the p to
   match that weight and win by coming later (2026-09-18: until then the homepage's closing line
   rendered all white at 400, with no highlight). */
.final-cta.ap-final p.ap-feel {
  margin: 18px auto 0;
  max-width: 30ch;
  color: var(--text-subtle);
  font: 600 var(--fs-lead)/1.38 var(--font-sans);
  letter-spacing: var(--tr-lead);
}
.final-cta.ap-final .ap-feel strong { color: var(--text-max); }
.final-cta.ap-final p.ap-assure {
  margin: 14px auto 0;
  max-width: 30ch;
  color: var(--text-subtle);
  font: 400 14px/1.43 var(--font-sans);
  letter-spacing: -.016em;
}
.site-footer .footer-cta.btn { width: auto; justify-self: start; }

@media (min-width: 1069px) {
  .ap-feel { max-width: 42ch; }
  .ap-media { width: min(640px, calc(100% - 2 * var(--gutter))); }
  .ap-media .fv { max-width: 640px; }
  .ap-tile .ap-media { width: 100%; }
}

/* Byline chips wrap on phones; a two-line pill turns into an oval, so they get soft corners. */
.article-byline > span,
.article-byline > a { border-radius: 14px; }

/* /faq/: every answer visible, grouped, in the site's reading measure. */
.faq-page { width: min(760px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 8px 0 24px; }
.faq-group { padding-top: 40px; }
.faq-group h2 { margin: 0 0 8px; font: 600 clamp(24px, 20px + 1vw, 32px)/1.15 var(--font-sans); letter-spacing: .004em; }
.faq-item { padding: 18px 0; border-bottom: 1px solid var(--edge-hair); }
.faq-item h3 { margin: 0 0 6px; color: var(--text-max); font: 600 17px/1.35 var(--font-sans); letter-spacing: -.022em; }
.faq-item p { margin: 0; color: var(--text-muted); font: 400 17px/1.47 var(--font-sans); letter-spacing: -.022em; }
.faq-more { margin: 28px 0 0; color: var(--text-subtle); font-size: 15px; }
.faq-more a { color: var(--gold-ink); }
/* the two side-by-side features take a smaller display line on wide screens */
@media (min-width: 1069px) { .ap-tile .ap-headline { font-size: clamp(32px, 16px + 1.9vw, 44px); max-width: 16ch; } }

/* /pricing/: a quieter hero, every plan limit visible, the facts as a grid, the cost table. */
.ap-hero-plain { padding-bottom: 0; }
.ap-hero .ap-intro { max-width: 40ch; font-weight: 400; color: var(--text-muted); }
.ap-limits { width: min(1120px, calc(100% - 2 * var(--gutter))); margin: 28px auto 0; }
.ap-limits h2 { margin: 0 0 8px; color: var(--text-max); font: 600 17px/1.3 var(--font-sans); letter-spacing: -.022em; }
.ap-limits h2 span { color: var(--text-subtle); font-weight: 400; font-size: 14px; }
.ap-facts {
  width: min(980px, calc(100% - 2 * var(--gutter)));
  margin: 36px auto 0;
  display: grid;
  gap: 12px;
}
.ap-facts > div { padding: 22px 22px 20px; border-radius: var(--radius-lg); background: #0f0f10; box-shadow: inset 0 0 0 1px var(--edge-hair); }
.ap-facts dt { margin: 0 0 6px; color: var(--text-max); font: 600 17px/1.3 var(--font-sans); letter-spacing: -.022em; }
.ap-facts dd { margin: 0; color: var(--text-muted); font: 400 15px/1.47 var(--font-sans); letter-spacing: -.016em; }
@media (min-width: 735px) { .ap-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1069px) { .ap-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-cost-table { width: min(760px, calc(100% - 2 * var(--gutter))); margin: 32px auto 0; overflow-x: auto; }
.ap-cost-table table { width: 100%; min-width: 520px; border-collapse: collapse; font: 400 15px/1.4 var(--font-sans); letter-spacing: -.016em; }
.ap-cost-table th, .ap-cost-table td { padding: 12px 10px; border-bottom: 1px solid var(--edge-hair); text-align: left; }
.ap-cost-table th { color: var(--text-subtle); font-weight: 500; font-size: 13px; }
.ap-cost-table td { color: var(--text-muted); }
.ap-cost-table td:last-child { color: var(--gold-light); font-weight: 600; }
.ap-table-note { margin: 12px 0 0; color: var(--text-subtle); font-size: 13px; }
.ap-pricing-page .ap-more { text-align: center; margin-top: 20px; }
/* Section headings link to the page that covers the feature in depth: same gold, no underline
   until hovered, so the eyebrow still reads as a label. */
.ap-copy .section-label a { color: inherit; text-decoration: none; }
.ap-copy .section-label a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 734px) {
  .ap-cost-table table { min-width: 0; font-size: 13px; }
  .ap-cost-table th, .ap-cost-table td { padding: 10px 6px; }
  .ap-cost-table th { font-size: 12px; }
}

/* ===========================================================================
   /switch/ and /buyers-guide/ (2026-09-18). Same rhythm as /pricing/: a quiet hero, an
   eyebrow and one headline per section, cards and hairline lists in the reading measure.
   =========================================================================== */
/* the four steps: numbered cards, one column on phones, then two, then four across */
.ap-steps {
  width: min(1120px, calc(100% - 2 * var(--gutter)));
  margin: 44px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.ap-steps li {
  padding: 24px 22px 22px;
  border-radius: var(--radius-lg);
  background: #0f0f10;
  box-shadow: inset 0 0 0 1px var(--edge-hair);
  text-align: left;
  scroll-margin-top: 60px;
}
.ap-step-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(201, 168, 76, .16);
  color: var(--gold-light);
  font: 600 15px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.ap-steps h3 { margin: 16px 0 6px; color: var(--text-max); font: 600 19px/1.25 var(--font-sans); letter-spacing: -.02em; }
.ap-steps p { margin: 0; color: var(--text-muted); font: 400 15px/1.47 var(--font-sans); letter-spacing: -.016em; }
@media (min-width: 735px) { .ap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 64px; } }
@media (min-width: 1069px) { .ap-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* four facts sit two by two, never three and one */
@media (min-width: 1069px) { .ap-facts.ap-facts-pairs { width: min(860px, calc(100% - 2 * var(--gutter))); grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* what stays behind: plain lines under the headline */
.ap-points {
  width: min(680px, calc(100% - 2 * var(--gutter)));
  margin: 32px auto 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--edge-hair);
  text-align: left;
}
.ap-points li { padding: 16px 0; border-bottom: 1px solid var(--edge-hair); color: var(--text-muted); font: 400 17px/1.47 var(--font-sans); letter-spacing: -.022em; }

/* before you send the file: the smallest CSV that works, then two labelled groups */
.ap-csv { width: min(560px, calc(100% - 2 * var(--gutter))); margin: 40px auto 0; }
.ap-csv pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  border-radius: 16px;
  background: #0b0b0c;
  box-shadow: inset 0 0 0 1px var(--edge-hair);
  color: var(--text-muted);
  font: 400 14px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0;
  text-align: left;
}
.ap-csv figcaption { margin: 12px auto 0; max-width: 46ch; color: var(--text-subtle); font: 400 14px/1.43 var(--font-sans); letter-spacing: -.016em; text-align: center; }
.ap-fine {
  width: min(980px, calc(100% - 2 * var(--gutter)));
  margin: 40px auto 0;
  display: grid;
  gap: 32px;
  text-align: left;
}
.ap-fine-group h3 { margin: 0 0 4px; color: var(--gold-ink); font: 600 17px/1.3 var(--font-sans); letter-spacing: -.022em; }
.ap-fine-group dl { margin: 0; }
.ap-fine-group dl > div { padding: 14px 0; border-bottom: 1px solid var(--edge-hair); }
.ap-fine-group dt { margin: 0 0 4px; color: var(--text-max); font: 600 16px/1.35 var(--font-sans); letter-spacing: -.02em; }
.ap-fine-group dd { margin: 0; color: var(--text-muted); font: 400 15px/1.47 var(--font-sans); letter-spacing: -.016em; }
@media (min-width: 735px) { .ap-fine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 56px; } }
.ap-more.ap-center { margin-top: 32px; text-align: center; }
.final-cta.ap-final .ap-assure a { color: var(--gold-ink); }
.ap-switch-page .final-cta.ap-final p.ap-assure,
.ap-guide-page .final-cta.ap-final p.ap-assure { max-width: 44ch; }
.ap-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; width: min(760px, calc(100% - 2 * var(--gutter))); margin-left: auto; margin-right: auto; }

/* the buyer's guide: who wrote it and when, the topic pills, then the twelve questions */
.ap-byline { margin: 18px auto 0; max-width: 46ch; color: var(--text-subtle); font: 400 14px/1.43 var(--font-sans); letter-spacing: -.016em; }
.ap-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(760px, calc(100% - 2 * var(--gutter)));
  margin: 28px auto 0;
}
.ap-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-max);
  font: 500 15px/1 var(--font-sans);
  letter-spacing: -.016em;
  text-decoration: none;
}
.ap-jump a:hover { background: var(--surface-4); }
.choose { width: min(760px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 16px 0 0; text-align: left; }
.choose-group { padding-top: 56px; scroll-margin-top: 60px; }
.choose-group h2 { margin: 0 0 4px; color: var(--gold-ink); font: 600 clamp(24px, 20px + 1vw, 32px)/1.15 var(--font-sans); letter-spacing: .004em; }
.choose-q { padding: 22px 0; border-bottom: 1px solid var(--edge-hair); scroll-margin-top: 60px; }
.choose-q h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; color: var(--text-max); font: 600 21px/1.3 var(--font-sans); letter-spacing: -.02em; }
.choose-num { flex: none; min-width: 1.3em; color: var(--text-subtle); font-weight: 500; font-variant-numeric: tabular-nums; }
.choose-look,
.choose-ktb { margin: 0; font: 400 17px/1.47 var(--font-sans); letter-spacing: -.022em; }
.choose-look { color: var(--text-muted); }
.choose-ktb {
  margin-top: 12px;
  padding: 14px 16px 15px;
  border-radius: 14px;
  background: #0f0f10;
  box-shadow: inset 0 0 0 1px var(--edge-hair);
  color: var(--text-max);
}
.choose-tag { display: block; margin-bottom: 4px; color: var(--text-subtle); font: 600 13px/1.3 var(--font-sans); letter-spacing: -.01em; }
.choose-ktb .choose-tag { color: var(--gold-ink); }
.choose-ktb .text-link { display: inline-flex; align-items: center; margin-top: 6px; }
@media (min-width: 735px) { .choose-q h3 { font-size: 24px; } }

/* the fee table compares two fees, so gold marks the lower one instead of the last column */
.ap-cost-compare td:last-child { color: var(--text-muted); font-weight: 400; }
.ap-cost-compare td.is-lower { color: var(--gold-light); font-weight: 600; }

/* --- the hero on phones (2026-09-19): the two actions stack, same width, in thumb reach --- */
@media (max-width: 734px) {
  .ap-hero-actions { grid-template-columns: minmax(0, 340px); gap: 10px; }
  .ap-hero-actions .btn-lg { width: 100%; }
  /* All six chapters fit a 390px phone without scrolling: tighter pills, same labels. */
  .ap-hero .app-video-chapters { gap: 0; padding: 3px; }
  .ap-hero .app-video-chapter { min-height: 34px; padding: 0 8px; font-size: 13px; }
}
@media (max-width: 374px) {
  .ap-hero .app-video-chapter { padding: 0 7px; font-size: 12px; }
}

/* --- /features/: Apple's tech-specs list, the feature on the left, its sentences on the right --- */
.spec-list {
  width: min(980px, calc(100% - 2 * var(--gutter)));
  margin: 72px auto 0;
  border-top: 1px solid var(--edge-hair);
  text-align: left;
}
.spec-row {
  display: grid;
  gap: 6px 48px;
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--edge-hair);
  scroll-margin-top: 60px;
}
.spec-row > h2 { margin: 0; color: var(--gold-ink); font: 600 17px/1.35 var(--font-sans); letter-spacing: -.022em; }
.spec-body h3 { margin: 0 0 10px; color: var(--text-max); font: 600 clamp(21px, 18px + .8vw, 26px)/1.2 var(--font-sans); letter-spacing: -.01em; }
.spec-body p { max-width: 62ch; margin: 0 0 8px; color: var(--text-muted); font: 400 17px/1.47 var(--font-sans); letter-spacing: -.022em; }
.spec-body .spec-more { margin: 6px 0 0; }
@media (min-width: 735px) {
  .spec-list { margin-top: 96px; }
  .spec-row { grid-template-columns: 200px minmax(0, 1fr); padding: 40px 0 34px; }
}
.ap-plan-table td:last-child { color: var(--text-muted); font-weight: 400; }
.ap-plan-table td:first-child { color: var(--text-max); font-weight: 600; }
.ap-plan-table .ap-table-note a { color: var(--gold-ink); }

/* The AI section's prompt button sits under its headline, where the section is read, not
   under the animation. The status line takes the width of the copy column. */
.ap-copy-action { display: grid; justify-items: center; margin-top: 24px; }
.ap-copy-action .agent-copy { display: grid; justify-items: center; gap: 10px; }
.ap-copy-action .agent-copy-hint { display: none; }
.ap-copy-action .agent-copy-status { max-width: 40ch; margin: 0; color: var(--text-subtle); font: 400 14px/1.43 var(--font-sans); letter-spacing: -.016em; text-align: center; }
.ap-copy-action .agent-copy-status:empty { display: none; }
.ap-copy-action .agent-copy-text { width: min(560px, 100%); border-radius: var(--radius-sm); }
.ap-plan-intro { max-width: 52ch; margin: 18px auto 0; color: var(--text-muted); font: 400 17px/1.47 var(--font-sans); letter-spacing: -.022em; }

/* Homepage flow visuals, generated from site-src/flow-visuals/ */
/* flow visual: hero */
/* KickThemBot flow visual: the member lifecycle (2026-09-18 Apple pass). Namespaced fv-hero-.
   Default styles ARE the final state, so no-JS and reduced-motion readers see everything.
   Motion lives inside the no-preference block, keyed off .is-armed / .is-playing.
   Five circular badges on one rail; each lights gold in turn while the rail draws on. */
.fv-hero {
  --fv-hero-mark: 40px;
  --fv-hero-seg: 520ms;
  --fv-hero-step: 780ms;
  --fv-hero-lead: 240ms;
  container: fv-hero / inline-size;
  display: grid;
  width: 100%;
  max-width: 560px;
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
  text-align: left;
}
.fv-hero-card {
  padding: 28px 22px;
  border-radius: var(--fv-radius);
  background: var(--fv-card);
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
}
.fv-hero-steps {
  position: relative;
  display: grid;
  row-gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  container-type: inline-size;
}

/* ---- narrow (default): a vertical rail ---- */
.fv-hero-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--fv-hero-mark) minmax(0, 1fr);
  align-items: baseline;
  margin: 0;
  padding: 0;
}
.fv-hero-mark {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: var(--fv-hero-mark);
  height: var(--fv-hero-mark);
  border-radius: 50%;
  background-color: var(--fv-gold-tint);
  color: var(--gold-ink);
}
.fv-hero-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fv-hero-link {
  position: absolute;
  top: calc(var(--fv-hero-mark) + 4px);
  left: calc(var(--fv-hero-mark) / 2 - 1px);
  width: 2px;
  height: calc(100% - var(--fv-hero-mark) + 22px - 8px);
  border-radius: 1px;
  background: var(--fv-line);
}
.fv-hero-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gold-ink);
  transform-origin: 50% 0;
}
.fv-hero-title {
  grid-column: 2;
  grid-row: 1;
  margin-left: 16px;
  color: var(--text-max);
  font: 600 17px/1.3 var(--font-sans);
  letter-spacing: -.022em;
}
.fv-hero-detail {
  grid-column: 2 / -1;
  grid-row: 2;
  margin-left: 16px;
  color: var(--text-subtle);
  font: 400 14px/1.4 var(--font-sans);
  letter-spacing: -.016em;
}
.fv-hero-record {
  grid-column: 2 / -1;
  grid-row: 3;
  margin: 12px 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--fv-radius-in);
  background: var(--fv-raise);
}
.fv-hero-record-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--text-max);
  font: 600 14px/1.3 var(--font-sans);
  letter-spacing: -.016em;
}
.fv-hero-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
}
.fv-hero-fields > div { min-width: 0; }
.fv-hero-fields dt {
  color: var(--text-subtle);
  font: 400 12px/1.3 var(--font-sans);
  letter-spacing: -.01em;
}
.fv-hero-fields dd {
  margin: 1px 0 0;
  color: var(--text-max);
  font: 500 15px/1.35 var(--font-sans);
  letter-spacing: -.016em;
  white-space: nowrap;
}
.fv-hero-fields > div:nth-child(3) dd { color: var(--fv-ok-ink); }

/* ---- wide: one left-to-right path, the record under it ---- */
@container fv-hero (min-width: 500px) {
  .fv-hero-card { --fv-hero-rec-h: 76px; padding: 32px 24px 28px; }
  .fv-hero-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: 0;
    padding-bottom: calc(var(--fv-hero-rec-h) + 24px);
  }
  .fv-hero-step {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    justify-items: center;
    align-items: start;
    padding: 0 2px;
    text-align: center;
  }
  .fv-hero-mark { position: relative; grid-column: 1; grid-row: 1; }
  .fv-hero-title { grid-column: 1; grid-row: 2; margin: 12px 0 0; font-size: 15px; }
  .fv-hero-detail { grid-column: 1; grid-row: 3; margin: 2px 0 0; font-size: 12px; line-height: 1.35; }
  .fv-hero-link {
    top: calc(50% - 1px);
    left: calc(100% + 6px);
    width: calc(20cqw - var(--fv-hero-mark) - 12px);
    height: 2px;
  }
  .fv-hero-link::after { transform-origin: 0 50%; }
  /* The list is the containing block (container-type applies layout containment) and a
     grid, so the record must be told to span all of it. */
  .fv-hero-record {
    position: absolute;
    grid-column: 1 / -1;
    grid-row: auto;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--fv-hero-rec-h);
    margin: 0;
    padding: 12px 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
    text-align: left;
  }
  .fv-hero-record-head { flex-direction: column; justify-content: center; gap: 2px; margin: 0; }
  .fv-hero-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
}

.fv-hero-step:nth-child(1) { --fv-hero-i: 0; }
.fv-hero-step:nth-child(2) { --fv-hero-i: 1; }
.fv-hero-step:nth-child(3) { --fv-hero-i: 2; }
.fv-hero-step:nth-child(4) { --fv-hero-i: 3; }
.fv-hero-step:nth-child(5) { --fv-hero-i: 4; }

/* the replay pill waits, invisible, until one full pass has played */
.fv-hero .fv-hero-replay { visibility: hidden; opacity: 0; }
.fv-hero.has-played .fv-hero-replay { visibility: visible; opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .fv-hero.is-armed .fv-hero-mark { background-color: var(--fv-raise); color: var(--text-subtle); transform: scale(.9); }
  .fv-hero.is-armed .fv-hero-link::after { transform: scaleY(0); }
  .fv-hero.is-armed .fv-hero-fade { opacity: .35; }

  .fv-hero.is-playing .fv-hero-mark {
    animation: fv-hero-light 520ms var(--fv-spring) both;
    animation-delay: calc(var(--fv-hero-lead) + var(--fv-hero-i) * var(--fv-hero-step));
  }
  .fv-hero.is-playing .fv-hero-fade {
    animation: fv-hero-fade 700ms var(--fv-ease) both;
    animation-delay: calc(var(--fv-hero-lead) + var(--fv-hero-i) * var(--fv-hero-step));
  }
  .fv-hero.is-playing .fv-hero-link::after {
    animation: fv-hero-draw-y var(--fv-hero-seg) var(--fv-ease) both;
    animation-delay: calc(var(--fv-hero-lead) + var(--fv-hero-i) * var(--fv-hero-step) + 260ms);
  }
  @container fv-hero (min-width: 500px) {
    .fv-hero.is-armed .fv-hero-link::after { transform: scaleX(0); }
    .fv-hero.is-playing .fv-hero-link::after { animation-name: fv-hero-draw-x; }
  }
  .fv-hero .fv-hero-replay { transition: opacity 400ms var(--fv-ease), visibility 0s; }
}
@keyframes fv-hero-light {
  from { background-color: var(--fv-raise); color: var(--text-subtle); transform: scale(.9); }
  to   { background-color: var(--fv-gold-tint); color: var(--gold-ink); transform: scale(1); }
}
@keyframes fv-hero-fade { from { opacity: .35; } to { opacity: 1; } }
@keyframes fv-hero-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fv-hero-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* flow visual: steps */
/* KickThemBot flow visual: three setup steps (2026-09-18 Apple pass). Prefix fv-steps.
   Default CSS is the FINAL state (no JS, reduced motion). Motion lives only inside the
   no-preference query, keyed off .is-armed / .is-playing. */
.fv-steps {
  --fv-steps-at1: 400ms;   /* step 1: bot becomes admin */
  --fv-steps-at2: 1500ms;  /* step 2: plan link copied */
  --fv-steps-at3: 2600ms;  /* step 3: joined -> expired */
  --fv-steps-at4: 3700ms;  /* step 3: expired -> removed */
  display: grid;
  width: 100%;
  max-width: 560px;
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
}
.fv-steps *,
.fv-steps *::before,
.fv-steps *::after { box-sizing: border-box; }
.fv-steps-card {
  position: relative;
  container-type: inline-size;
  padding: 8px 0 6px;
  border-radius: var(--fv-radius);
  background: var(--fv-card);
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
}
.fv-steps-head { display: flex; justify-content: flex-end; margin: 0; padding: 10px 20px 0; }

.fv-steps-list { list-style: none; margin: 0; padding: 0; }
.fv-steps-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.25fr);
  column-gap: 14px;
  row-gap: 12px;
  align-items: center;
  margin: 0;
  padding: 16px 20px;
}
.fv-steps-step + .fv-steps-step { box-shadow: inset 0 1px 0 var(--fv-card-edge); }

.fv-steps-num {
  align-self: start;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fv-gold-tint);
  color: var(--gold-ink);
  font: 600 14px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.fv-steps-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fv-steps-label { color: var(--text-max); font: 600 15px/1.33 var(--font-sans); letter-spacing: -.016em; text-wrap: balance; }
.fv-steps-note { color: var(--text-subtle); font: 400 13px/1.3 var(--font-sans); letter-spacing: -.01em; text-wrap: balance; }

.fv-steps-scene {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: var(--fv-radius-in);
  background: var(--fv-raise);
}
.fv-steps-ava {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fv-raise-2);
  color: var(--text-muted);
}
.fv-steps-ava--bot { background: var(--fv-gold-tint); color: var(--gold-ink); }
.fv-steps-ava svg { display: block; width: 18px; height: 18px; }
.fv-steps-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-max);
  font: 500 15px/1.2 var(--font-sans);
  letter-spacing: -.016em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* final state of step 3: the member is gone */
.fv-steps-name--gone {
  color: var(--text-subtle);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-subtle);
}

.fv-steps-swap { flex: none; display: inline-grid; justify-items: end; }
.fv-steps-swap > * { grid-area: 1 / 1; }
.fv-steps-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  background: var(--fv-raise-2);
  color: var(--text-muted);
  font: 500 13px/1 var(--font-sans);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.fv-steps-pill--member  { color: var(--text-subtle); }
.fv-steps-pill--admin   { background: var(--fv-gold-tint); color: var(--gold-light); }
.fv-steps-pill--copy    { color: var(--text-max); }
.fv-steps-pill--copied  { background: var(--fv-gold-tint); color: var(--gold-light); }
.fv-steps-pill--joined  { background: var(--fv-ok-tint); color: var(--fv-ok-ink); }
.fv-steps-pill--expired { color: var(--text-muted); }
.fv-steps-pill--removed { background: var(--fv-bad-tint); color: var(--fv-bad-ink); }
.fv-steps-check { display: block; width: 13px; height: 13px; flex: none; }

/* resting state = final state */
.fv-steps-was,
.fv-steps-mid { opacity: 0; }
.fv-steps-now { opacity: 1; }

/* narrow: the scene drops under its label, aligned to the text column */
@container (max-width: 439px) {
  .fv-steps-step { grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding: 16px 16px 18px; }
  .fv-steps-scene { grid-column: 2 / -1; }
  .fv-steps-head { padding: 10px 16px 0; }
}
/* very narrow (320px screens): the scene takes the full row so names never truncate */
@container (max-width: 319px) {
  .fv-steps-scene { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* armed = the "before" picture, shown until the figure is half on screen */
  .fv-steps.is-armed .fv-steps-was { opacity: 1; }
  .fv-steps.is-armed .fv-steps-mid { opacity: 0; }
  .fv-steps.is-armed .fv-steps-now { opacity: 0; }
  .fv-steps.is-armed .fv-steps-name--gone { color: var(--text-max); text-decoration-color: transparent; }

  /* step 1: Member -> Admin */
  .fv-steps.is-playing .fv-steps-step--1 .fv-steps-was { animation: fv-steps-out 220ms var(--fv-ease) var(--fv-steps-at1) both; }
  .fv-steps.is-playing .fv-steps-step--1 .fv-steps-now { animation: fv-steps-pop 560ms var(--fv-spring) var(--fv-steps-at1) both; }

  /* step 2: Copy -> Copied */
  .fv-steps.is-playing .fv-steps-step--2 .fv-steps-was { animation: fv-steps-out 220ms var(--fv-ease) var(--fv-steps-at2) both; }
  .fv-steps.is-playing .fv-steps-step--2 .fv-steps-now { animation: fv-steps-pop 560ms var(--fv-spring) var(--fv-steps-at2) both; }

  /* step 3: Joined -> Expired -> Removed */
  .fv-steps.is-playing .fv-steps-step--3 .fv-steps-was { animation: fv-steps-out 220ms var(--fv-ease) var(--fv-steps-at3) both; }
  .fv-steps.is-playing .fv-steps-step--3 .fv-steps-mid {
    animation:
      fv-steps-in 240ms var(--fv-ease) var(--fv-steps-at3) both,
      fv-steps-out 220ms var(--fv-ease) var(--fv-steps-at4) forwards;
  }
  .fv-steps.is-playing .fv-steps-step--3 .fv-steps-now { animation: fv-steps-pop 560ms var(--fv-spring) var(--fv-steps-at4) both; }
  .fv-steps.is-playing .fv-steps-name--gone { animation: fv-steps-gone 420ms var(--fv-ease) var(--fv-steps-at4) both; }
  .fv-steps .fv-steps-replay { transition: opacity 400ms var(--fv-ease); }
}

@keyframes fv-steps-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fv-steps-out  { from { opacity: 1; } to { opacity: 0; } }
@keyframes fv-steps-pop  { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes fv-steps-gone {
  from { color: var(--text-max); text-decoration-color: transparent; }
  to   { color: var(--text-subtle); text-decoration-color: var(--text-subtle); }
}

/* flow visual: agent-setup */
/* agent-setup flow visual (2026-09-18 Apple pass). Final state is the default; motion only
   runs under .is-playing, and only when the viewer has not asked for reduced motion.
   Your prompt is a chat bubble; the agent's work is a checklist; your own taps are gold. */
.fv-agent-setup {
  display: grid;
  width: 100%;
  max-width: 560px;
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
}
.fv-agent-setup *, .fv-agent-setup *::before, .fv-agent-setup *::after { box-sizing: border-box; }
.fv-agent-card {
  border-radius: var(--fv-radius);
  background: var(--fv-card);
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
}
.fv-agent-head { display: flex; justify-content: flex-end; margin: 0; padding: 18px 20px 0; }
.fv-agent-setup:not(.is-done) .fv-agent-replay { visibility: hidden; opacity: 0; }
.fv-agent-stage { display: grid; gap: 14px; padding: 8px 20px 22px; }
.fv-agent-prompt {
  justify-self: end;
  max-width: 88%;
  margin: 0;
  padding: 10px 14px 11px;
  border-radius: 20px 20px 6px 20px;
  background: var(--fv-gold-tint);
  color: var(--text-max);
  font: 400 15px/1.4 var(--font-sans);
  letter-spacing: -.016em;
}
.fv-agent-who {
  display: block;
  margin-bottom: 2px;
  color: var(--gold-light);
  font: 600 12px/1.2 var(--font-sans);
  letter-spacing: -.01em;
}
.fv-agent-steps {
  list-style: none;
  margin: 0;
  padding: 4px 14px;
  border-radius: var(--fv-radius-in);
  background: var(--fv-raise);
}
.fv-agent-step {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 46px;
  padding: 8px 0;
}
.fv-agent-step + .fv-agent-step { box-shadow: inset 0 1px 0 var(--fv-card-edge); }
.fv-agent-tick {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fv-ok-tint);
}
.fv-agent-tick::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4.5px;
  width: 5px;
  height: 9px;
  border: solid var(--fv-ok-ink);
  border-width: 0 1.8px 1.8px 0;
  border-radius: 0 0 1px 0;
  transform: rotate(45deg);
}
.fv-agent-text { min-width: 0; color: var(--text-max); font: 400 15px/1.33 var(--font-sans); letter-spacing: -.016em; }
.fv-agent-tag {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--fv-raise-2);
  color: var(--text-muted);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.fv-agent-tag-you { background: var(--fv-gold-tint); color: var(--gold-light); }
.fv-agent-ready {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 2px;
  color: var(--fv-ok-ink);
  font: 600 15px/1.2 var(--font-sans);
  letter-spacing: -.016em;
}
.fv-agent-ready-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fv-ok-ink); box-shadow: 0 0 0 4px var(--fv-ok-tint); }
@media (prefers-reduced-motion: no-preference) {
  .fv-agent-setup.is-armed .fv-agent-prompt,
  .fv-agent-setup.is-armed .fv-agent-step,
  .fv-agent-setup.is-armed .fv-agent-ready { opacity: 0; }
  .fv-agent-setup.is-playing .fv-agent-prompt { animation: fv-agent-bubble 520ms var(--fv-spring) 80ms both; }
  .fv-agent-setup.is-playing .fv-agent-step { animation: fv-agent-rise 480ms var(--fv-ease) both; }
  .fv-agent-setup.is-playing .fv-agent-step:nth-child(1) { animation-delay: 500ms; }
  .fv-agent-setup.is-playing .fv-agent-step:nth-child(2) { animation-delay: 900ms; }
  .fv-agent-setup.is-playing .fv-agent-step:nth-child(3) { animation-delay: 1300ms; }
  .fv-agent-setup.is-playing .fv-agent-step:nth-child(4) { animation-delay: 1700ms; }
  .fv-agent-setup.is-playing .fv-agent-step:nth-child(5) { animation-delay: 2100ms; }
  .fv-agent-setup.is-playing .fv-agent-ready { animation: fv-agent-rise 480ms var(--fv-ease) 2600ms both; }
  .fv-agent-setup .fv-agent-replay { transition: opacity 400ms var(--fv-ease); }
}
@keyframes fv-agent-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes fv-agent-bubble {
  from { opacity: 0; transform: translateY(8px) scale(.94); transform-origin: 100% 100%; }
  to { opacity: 1; transform: none; }
}

/* flow visual: checkout-codes */
/* checkout-codes flow visual (2026-09-18 Apple pass). Two halves: a card payment that
       lands in your own Stripe, and a one-use code that refuses a second person. */
    .fv-checkout-codes {
      display: grid;
      width: 100%;
      max-width: 560px;
      margin: 0;
      color: var(--text);
      font-family: var(--font-sans);
    }
    .fv-checkout-codes *,
    .fv-checkout-codes *::before { box-sizing: border-box; }
    .fv-pay-sheet {
      border-radius: var(--fv-radius);
      background: var(--fv-card);
      box-shadow: inset 0 0 0 1px var(--fv-card-edge);
      overflow: hidden;
    }
    .fv-pay-head { display: flex; justify-content: flex-end; margin: 0; padding: 18px 20px 0; }

    /* the replay pill waits, invisible, until the first run ends */
    .fv-checkout-codes .fv-pay-replay { visibility: hidden; opacity: 0; }
    .fv-checkout-codes.has-played .fv-pay-replay { visibility: visible; opacity: 1; }

    /* ---- stage: two halves, one column below ~470px ---- */
    .fv-pay-stage {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      padding: 8px 16px 18px;
    }
    .fv-pay-half {
      --fv-pay-t: 0ms;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .fv-pay-half--code { --fv-pay-t: 2100ms; }
    .fv-pay-eyebrow {
      margin: 0 4px 8px;
      color: var(--text-subtle);
      font: 500 13px/1.2 var(--font-sans);
      letter-spacing: -.01em;
    }
    .fv-pay-card {
      display: grid;
      gap: 8px;
      padding: 14px;
      border-radius: var(--fv-radius-in);
      background: var(--fv-raise);
    }
    .fv-pay-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      min-width: 0;
      min-height: 24px;
    }
    .fv-pay-strong { color: var(--text-max); font: 600 15px/1.2 var(--font-sans); letter-spacing: -.016em; }
    .fv-pay-code {
      color: var(--text-max);
      font: 500 14px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .fv-pay-amount { color: var(--text-max); font: 600 19px/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
    .fv-pay-meta { color: var(--text-subtle); font: 400 13px/1.2 var(--font-sans); white-space: nowrap; }

    /* status pill: two words stacked in one cell, the final word shown by default */
    .fv-pay-tag {
      display: inline-grid;
      padding: 5px 10px;
      border-radius: var(--radius-pill);
      background: var(--fv-ok-tint);
      color: var(--fv-ok-ink);
      font: 600 12px/1 var(--font-sans);
      letter-spacing: -.01em;
      text-align: center;
    }
    .fv-pay-half--code .fv-pay-tag { background: var(--fv-gold-tint); color: var(--gold-light); }
    .fv-pay-tag > span { grid-area: 1 / 1; }
    .fv-pay-tag-from { opacity: 0; }
    .fv-pay-tag-to { opacity: 1; }

    .fv-pay-link { display: block; flex: none; margin: 4px auto; overflow: visible; }
    .fv-pay-line,
    .fv-pay-tip { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .fv-pay-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
    .fv-pay-half--pay .fv-pay-line,
    .fv-pay-half--pay .fv-pay-tip { stroke: var(--gold-ink); }
    .fv-pay-half--code .fv-pay-line,
    .fv-pay-half--code .fv-pay-tip { stroke: var(--text-subtle); }

    .fv-pay-dest {
      flex: 1 0 auto;
      padding: 14px 16px 16px;
      border-radius: var(--fv-radius-in);
      background: var(--fv-raise);
    }
    .fv-pay-half--pay .fv-pay-dest { background: var(--fv-gold-tint); }
    .fv-pay-label { margin: 0 0 4px; color: var(--text-muted); font: 500 13px/1.2 var(--font-sans); letter-spacing: -.01em; }
    .fv-pay-value { margin: 0; color: var(--text-max); font: 600 28px/1.1 var(--font-sans); letter-spacing: .004em; font-variant-numeric: tabular-nums; }
    .fv-pay-half--pay .fv-pay-value { color: var(--gold-light); }
    .fv-pay-half--code .fv-pay-value { color: var(--fv-bad-ink); font-size: 22px; line-height: 1.25; }
    .fv-pay-note { margin: 6px 0 0; color: var(--text-muted); font: 400 13px/1.35 var(--font-sans); letter-spacing: -.01em; }

    /* ---- motion: the start state exists only while armed by JS, and only when motion is allowed ---- */
    @media (prefers-reduced-motion: no-preference) {
      .fv-checkout-codes.is-armed .fv-pay-tag { background-color: var(--fv-raise-2); color: var(--text-muted); }
      .fv-checkout-codes.is-armed .fv-pay-tag-from { opacity: 1; }
      .fv-checkout-codes.is-armed .fv-pay-tag-to { opacity: 0; }
      .fv-checkout-codes.is-armed .fv-pay-line { stroke-dashoffset: 1; }
      .fv-checkout-codes.is-armed .fv-pay-tip { opacity: 0; }
      .fv-checkout-codes.is-armed .fv-pay-dest { background-color: var(--fv-raise); }
      .fv-checkout-codes.is-armed .fv-pay-land { opacity: 0; transform: translateY(10px) scale(.98); }

      /* per half: the pill flips, the line draws down, the result lands; half B starts at 2100ms */
      .fv-checkout-codes.is-playing .fv-pay-tag {
        transition: background-color 300ms var(--fv-ease) calc(var(--fv-pay-t) + 300ms),
                    color 300ms var(--fv-ease) calc(var(--fv-pay-t) + 300ms);
      }
      .fv-checkout-codes.is-playing .fv-pay-tag > span { transition: opacity 300ms var(--fv-ease) calc(var(--fv-pay-t) + 300ms); }
      .fv-checkout-codes.is-playing .fv-pay-line { transition: stroke-dashoffset 800ms var(--fv-ease) calc(var(--fv-pay-t) + 600ms); }
      .fv-checkout-codes.is-playing .fv-pay-tip { transition: opacity 200ms var(--fv-ease) calc(var(--fv-pay-t) + 1300ms); }
      .fv-checkout-codes.is-playing .fv-pay-dest { transition: background-color 600ms var(--fv-ease) calc(var(--fv-pay-t) + 1500ms); }
      .fv-checkout-codes.is-playing .fv-pay-land {
        transition: opacity 600ms var(--fv-ease) calc(var(--fv-pay-t) + 1500ms),
                    transform 600ms var(--fv-spring) calc(var(--fv-pay-t) + 1500ms);
      }
      .fv-checkout-codes .fv-pay-replay { transition: opacity 400ms var(--fv-ease), visibility 0s; }
    }

/* flow visual: security */
/* security flow visual (2026-09-18 Apple pass). Final state is the default; motion only runs
   under .is-playing, and only when the viewer has not asked for reduced motion. Four checks
   tick green in turn, then the promise underneath settles in. */
.fv-security {
  display: grid;
  width: 100%;
  max-width: 560px;
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
}
.fv-security *, .fv-security *::before, .fv-security *::after { box-sizing: border-box; }
.fv-sec-card {
  border-radius: var(--fv-radius);
  background: var(--fv-card);
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
  overflow: hidden;
}
.fv-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 6px;
}
/* A padlock in a gold badge: the shackle is a border, the body a filled block. */
.fv-sec-lock {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fv-gold-tint);
}
.fv-sec-lock::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 8.5px;
  width: 10px;
  height: 10px;
  border: 1.8px solid var(--gold-ink);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}
.fv-sec-lock::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 17px;
  width: 14px;
  height: 11px;
  border-radius: 3px;
  background: var(--gold-ink);
}
.fv-sec-title { color: var(--text-max); font: 600 17px/1.2 var(--font-sans); letter-spacing: -.022em; }
.fv-sec-always {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--fv-raise);
  color: var(--text-muted);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.fv-security:not(.is-done) .fv-sec-replay { visibility: hidden; opacity: 0; }
.fv-sec-list { list-style: none; margin: 0; padding: 4px 20px 6px; }
.fv-sec-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 50px;
  padding: 8px 0;
}
.fv-sec-item + .fv-sec-item { box-shadow: inset 0 1px 0 var(--fv-card-edge); }
.fv-sec-tick {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fv-ok-tint);
}
.fv-sec-tick::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--fv-ok-ink);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
.fv-sec-text { min-width: 0; color: var(--text-max); font: 400 15px/1.33 var(--font-sans); letter-spacing: -.016em; }
.fv-sec-tag {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--fv-raise);
  color: var(--text-muted);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.fv-sec-tag-you { background: var(--fv-gold-tint); color: var(--gold-light); }
.fv-sec-ready {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px 20px 18px;
  background: var(--fv-raise);
  color: var(--text-max);
  font: 600 15px/1.25 var(--font-sans);
  letter-spacing: -.016em;
}
.fv-sec-ready::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fv-ok-ink);
  box-shadow: 0 0 0 4px var(--fv-ok-tint);
}
@media (prefers-reduced-motion: no-preference) {
  .fv-security.is-armed .fv-sec-tick,
  .fv-security.is-armed .fv-sec-ready { opacity: 0; }
  .fv-security.is-armed .fv-sec-text { opacity: .4; }
  .fv-security.is-playing .fv-sec-tick { animation: fv-sec-pop 480ms var(--fv-spring) both; }
  .fv-security.is-playing .fv-sec-text { animation: fv-sec-ink 480ms var(--fv-ease) both; }
  .fv-security.is-playing .fv-sec-item:nth-child(1) > * { animation-delay: 300ms; }
  .fv-security.is-playing .fv-sec-item:nth-child(2) > * { animation-delay: 750ms; }
  .fv-security.is-playing .fv-sec-item:nth-child(3) > * { animation-delay: 1200ms; }
  .fv-security.is-playing .fv-sec-item:nth-child(4) > * { animation-delay: 1650ms; }
  .fv-security.is-playing .fv-sec-ready { animation: fv-sec-rise 520ms var(--fv-ease) 2150ms both; }
  .fv-security .fv-sec-replay { transition: opacity 400ms var(--fv-ease); }
}
@keyframes fv-sec-pop {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: none; }
}
@keyframes fv-sec-ink {
  from { opacity: .4; }
  to { opacity: 1; }
}
@keyframes fv-sec-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* flow visual: reminders */
/* KickThemBot flow visual: renewal reminders (2026-09-18 Apple pass). Prefix fv-remind.
   A Telegram chat with your bot: the reminder lands three days before the end date, then the
   renewal is confirmed. Beside it (under it on phones) the countdown to the end date. */
.fv-reminders {
  container: fv-remind / inline-size;
  display: grid;
  width: 100%;
  max-width: 560px;
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
}
.fv-reminders *,
.fv-reminders *::before,
.fv-reminders *::after { box-sizing: border-box; }

/* narrow: the sample tag, the chat, then a horizontal countdown */
.fv-remind-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "meta"
    "chat"
    "marker";
  gap: 16px;
  padding: 16px 16px 20px;
  border-radius: var(--fv-radius);
  background: var(--fv-card);
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
}
.fv-remind-meta { grid-area: meta; justify-self: end; margin: 2px 4px 0; }

/* --- the Telegram chat --- */
.fv-remind-chat {
  grid-area: chat;
  min-width: 0;
  border-radius: var(--fv-radius-in);
  background: #0b0b0c;
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
  overflow: hidden;
}
.fv-remind-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--fv-raise);
}
.fv-remind-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fv-gold-tint);
  color: var(--gold-ink);
  font: 600 13px/1 var(--font-sans);
}
.fv-remind-who { display: grid; min-width: 0; }
.fv-remind-name { color: var(--text-max); font: 600 15px/1.25 var(--font-sans); letter-spacing: -.016em; }
.fv-remind-kind { color: var(--text-subtle); font: 400 12px/1.3 var(--font-sans); }

.fv-remind-thread {
  list-style: none;
  margin: 0;
  padding: 12px 12px 14px;
  display: grid;
  gap: 8px;
  justify-items: start;
}
.fv-remind-day { justify-self: center; }
.fv-remind-day span {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--fv-raise);
  color: var(--text-muted);
  font: 500 12px/1.4 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.fv-remind-msg {
  max-width: min(100%, 300px);
  padding: 8px 12px 9px;
  border-radius: 18px 18px 18px 6px;
  background: var(--fv-raise-2);
}
.fv-remind-msg p {
  margin: 0;
  color: var(--text-max);
  font: 400 15px/1.38 var(--font-sans);
  letter-spacing: -.016em;
  text-wrap: pretty;
}
.fv-remind-time {
  float: right;
  position: relative;
  top: 4px;
  margin-left: 10px;
  color: var(--text-subtle);
  font: 400 11px/1.45 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.fv-remind-check {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  fill: none;
  stroke: var(--fv-ok-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- the countdown: horizontal by default, vertical beside the chat when there is room --- */
.fv-remind-marker {
  grid-area: marker;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 4px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: start;
}
.fv-remind-marker::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--gold-ink), var(--fv-line));
}
.fv-remind-marker > li { position: relative; z-index: 1; }
.fv-remind-node {
  display: grid;
  grid-template-rows: 16px 22px 18px;
  row-gap: 4px;
  justify-items: start;
}
.fv-remind-node-end { justify-items: end; text-align: right; }
.fv-remind-pin { display: grid; place-items: center; width: 16px; height: 16px; }
.fv-remind-node-sent .fv-remind-pin::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-ink);
  box-shadow: 0 0 0 4px var(--fv-card);
}
.fv-remind-cal {
  display: block;
  fill: var(--fv-card);
  stroke: var(--text-muted);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fv-remind-date {
  color: var(--text-max);
  font: 600 17px/22px var(--font-sans);
  letter-spacing: -.022em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fv-remind-node-sent .fv-remind-date { color: var(--gold-light); }
.fv-remind-label { color: var(--text-subtle); font: 400 13px/18px var(--font-sans); letter-spacing: -.01em; white-space: nowrap; }
.fv-remind-node-sent .fv-remind-label { color: var(--text-muted); }
.fv-remind-gap { display: flex; justify-content: center; min-width: 0; padding-top: 28px; }
.fv-remind-gap .fv-remind-label { padding: 0 6px; }

/* the replay pill waits, invisible, until the sequence has played once */
.fv-reminders .fv-remind-replay { visibility: hidden; opacity: 0; }
.fv-reminders.has-replay .fv-remind-replay { visibility: visible; opacity: 1; transition: opacity 400ms var(--fv-ease); }

/* wide: the chat on the left, the tag and a vertical countdown on the right */
@container fv-remind (min-width: 470px) {
  .fv-remind-card {
    grid-template-columns: minmax(0, 1fr) 132px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "chat meta"
      "chat marker";
    column-gap: 20px;
    row-gap: 16px;
    padding: 20px;
  }
  .fv-remind-meta { justify-self: start; margin: 4px 0 0; }
  .fv-remind-marker {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(56px, 1fr) auto;
    align-self: stretch;
    align-items: stretch;
    padding: 0;
  }
  .fv-remind-marker::before {
    top: 12px;
    bottom: 30px;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--gold-ink), var(--fv-line));
  }
  .fv-remind-node,
  .fv-remind-node-end {
    grid-template-columns: 16px minmax(0, 1fr);
    grid-template-rows: 22px 18px;
    column-gap: 12px;
    row-gap: 0;
    justify-items: start;
    text-align: left;
  }
  .fv-remind-pin { grid-column: 1; grid-row: 1; align-self: center; }
  .fv-remind-date { grid-column: 2; grid-row: 1; }
  .fv-remind-node .fv-remind-label { grid-column: 2; grid-row: 2; }
  .fv-remind-gap { justify-content: flex-start; align-items: center; padding: 8px 0 8px 28px; }
  .fv-remind-gap .fv-remind-label { padding: 0; }
}

/* --- motion: one thing moves, the thread. Plays once, rests on the final state. --- */
.fv-reminders.is-ready .fv-remind-step { opacity: 0; transform: translateY(10px) scale(.97); }
.fv-reminders.is-playing .fv-remind-step {
  animation: fv-remind-rise 560ms var(--fv-spring) both;
  transform-origin: 0 100%;
}
.fv-reminders.is-playing .fv-remind-step-a { animation-delay: 250ms; }
.fv-reminders.is-playing .fv-remind-step-b {
  animation-name: fv-remind-fade;
  animation-duration: 320ms;
  animation-timing-function: var(--fv-ease);
  animation-delay: 2000ms;
}
.fv-reminders.is-playing .fv-remind-step-c { animation-delay: 2100ms; }

@keyframes fv-remind-rise {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes fv-remind-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-reminders .fv-remind-step,
  .fv-reminders.is-ready .fv-remind-step,
  .fv-reminders.is-playing .fv-remind-step {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .fv-reminders .fv-remind-replay { transition: none; }
}

/* flow visual: removal */
/* KickThemBot flow visual: removal after access ends (2026-09-18 Apple pass).
   Default CSS is the FINAL state (step 4), so no-JS and reduced-motion readers see the whole
   story. JS arms step 1 and advances fv-remove-at-* classes; CSS moves. */
.fv-removal {
  --fv-remove-travel: 700ms;
  display: grid;
  margin: 0;
  width: 100%;
  max-width: 560px;
  color: var(--text);
  font-family: var(--font-sans);
}
.fv-removal.fv-remove-at-1 { --fv-remove-travel: 0ms; }
.fv-removal.fv-remove-at-2 { --fv-remove-travel: 900ms; }

.fv-remove-panel {
  border-radius: var(--fv-radius);
  background: var(--fv-card);
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
  overflow: hidden;
}

/* ---- the member row ---- */
.fv-remove-member {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: 22px 20px;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  margin: 12px;
  padding: 12px 14px;
  border-radius: var(--fv-radius-in);
  background: var(--fv-raise);
}
.fv-remove-avatar {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fv-raise-2);
  color: var(--text-subtle);
  font: 600 18px/1 var(--font-sans);
  transition:
    background-color 420ms var(--fv-ease) var(--fv-remove-travel),
    color 420ms var(--fv-ease) var(--fv-remove-travel),
    opacity 420ms var(--fv-ease) var(--fv-remove-travel);
  opacity: .55;
}
.fv-remove-handle {
  min-width: 0;
  color: var(--text-subtle);
  font: 600 17px/22px var(--font-sans);
  letter-spacing: -.022em;
  white-space: nowrap;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  transition: color 420ms var(--fv-ease) var(--fv-remove-travel), text-decoration-color 420ms var(--fv-ease) var(--fv-remove-travel);
}
.fv-remove-sample { align-self: center; }
.fv-remove-status { grid-column: 2 / span 2; display: grid; }
.fv-remove-status-item {
  grid-area: 1 / 1;
  font: 500 14px/20px var(--font-sans);
  letter-spacing: -.016em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 240ms var(--fv-ease) var(--fv-remove-travel);
}
.fv-remove-status-1 { color: var(--fv-ok-ink); }
.fv-remove-status-2 { color: var(--gold-light); }
.fv-remove-status-3 { color: var(--text-muted); }
.fv-remove-status-4 { color: var(--fv-bad-ink); opacity: 1; }

/* the member is still in the channel during steps 1-3 */
.fv-remove-at-1 .fv-remove-avatar,
.fv-remove-at-2 .fv-remove-avatar,
.fv-remove-at-3 .fv-remove-avatar { background: var(--fv-gold-tint); color: var(--gold-ink); opacity: 1; }
.fv-remove-at-1 .fv-remove-handle,
.fv-remove-at-2 .fv-remove-handle,
.fv-remove-at-3 .fv-remove-handle { color: var(--text-max); text-decoration-color: transparent; }
.fv-remove-at-1 .fv-remove-status-4,
.fv-remove-at-2 .fv-remove-status-4,
.fv-remove-at-3 .fv-remove-status-4 { opacity: 0; }
.fv-remove-at-1 .fv-remove-status-1,
.fv-remove-at-2 .fv-remove-status-2,
.fv-remove-at-3 .fv-remove-status-3 { opacity: 1; }

/* ---- the timeline ---- */
.fv-remove-timeline { position: relative; padding: 6px 16px 4px; }
.fv-remove-steps { list-style: none; margin: 0; padding: 0; }
.fv-remove-rail {
  position: absolute;
  top: 6px;
  left: calc(16px + 52px + 10px);
  width: 24px;
  height: 182px;
  overflow: visible;
}
.fv-remove-row {
  /* past */
  --fv-remove-label: var(--text-muted);
  --fv-remove-date: var(--text-subtle);
  display: grid;
  grid-template-columns: 52px 24px minmax(0, 1fr);
  column-gap: 10px;
  box-sizing: border-box;
  height: 44px;
  padding-top: 7px;
}
.fv-remove-row-1 { height: 50px; }
/* current */
.fv-remove-row-4,
.fv-remove-at-1 .fv-remove-row-1,
.fv-remove-at-2 .fv-remove-row-2,
.fv-remove-at-3 .fv-remove-row-3 {
  --fv-remove-label: var(--text-max);
  --fv-remove-date: var(--gold-ink);
}
/* not reached yet */
.fv-remove-at-1 .fv-remove-row-2,
.fv-remove-at-1 .fv-remove-row-3,
.fv-remove-at-1 .fv-remove-row-4,
.fv-remove-at-2 .fv-remove-row-3,
.fv-remove-at-2 .fv-remove-row-4,
.fv-remove-at-3 .fv-remove-row-4 {
  --fv-remove-label: #5b5b60;
  --fv-remove-date: #5b5b60;
}
.fv-remove-date {
  grid-column: 1;
  text-align: right;
  color: var(--fv-remove-date);
  font: 500 13px/22px var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 240ms var(--fv-ease) var(--fv-remove-travel);
}
.fv-remove-text { grid-column: 3; min-width: 0; }
.fv-remove-label {
  display: block;
  color: var(--fv-remove-label);
  font: 500 15px/22px var(--font-sans);
  letter-spacing: -.016em;
  transition: color 240ms var(--fv-ease) var(--fv-remove-travel);
}
.fv-remove-note { display: block; color: var(--text-subtle); font: 400 13px/18px var(--font-sans); letter-spacing: -.01em; }

/* rail: a gold line that draws down to the member's current state */
.fv-remove-rail-base { stroke: var(--fv-line); stroke-width: 2; stroke-linecap: round; }
.fv-remove-rail-fill {
  stroke: var(--gold-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 138 138;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--fv-remove-travel) var(--fv-ease);
}
.fv-remove-at-1 .fv-remove-rail-fill { stroke-dashoffset: 138; }
.fv-remove-at-2 .fv-remove-rail-fill { stroke-dashoffset: 88; }
.fv-remove-at-3 .fv-remove-rail-fill { stroke-dashoffset: 44; }
.fv-remove-node {
  fill: var(--gold-ink);
  stroke: var(--gold-ink);
  stroke-width: 2;
  transition:
    fill 240ms var(--fv-ease) var(--fv-remove-travel),
    stroke 240ms var(--fv-ease) var(--fv-remove-travel);
}
.fv-remove-at-1 .fv-remove-node-2,
.fv-remove-at-1 .fv-remove-node-3,
.fv-remove-at-1 .fv-remove-node-4,
.fv-remove-at-2 .fv-remove-node-3,
.fv-remove-at-2 .fv-remove-node-4,
.fv-remove-at-3 .fv-remove-node-4 { fill: var(--fv-card); stroke: #48484d; }

/* the date marker: the one thing that travels */
.fv-remove-marker {
  transform: translate(0px, 156px);
  transition: transform var(--fv-remove-travel) var(--fv-ease);
}
.fv-remove-marker circle { fill: none; stroke: var(--gold-light); stroke-width: 1.5; }
.fv-remove-at-1 .fv-remove-marker { transform: translate(0px, 18px); }
.fv-remove-at-2 .fv-remove-marker { transform: translate(0px, 68px); }
.fv-remove-at-3 .fv-remove-marker { transform: translate(0px, 112px); }

/* ---- foot: the condition, in small print ---- */
.fv-remove-foot { padding: 10px 18px 16px; }
.fv-remove-foot-text { color: var(--text-subtle); font: 400 13px/18px var(--font-sans); letter-spacing: -.01em; }

/* the replay pill waits, invisible, until the story has played */
.fv-removal .fv-remove-replay { visibility: hidden; opacity: 0; }
.fv-removal.is-done .fv-remove-replay { visibility: visible; opacity: 1; transition: opacity 400ms var(--fv-ease); }

.fv-removal.fv-remove-instant,
.fv-removal.fv-remove-instant * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .fv-removal,
  .fv-removal * { transition: none !important; }
}

/* flow visual: messaging */
/* messaging flow visual (2026-09-18 Apple pass). Final state is the default; motion only runs
   under .is-playing, and only when the viewer has not asked for reduced motion.
   A segmented choice, a compose field with a send button, then the message arriving. */
.fv-messaging {
  display: grid;
  width: 100%;
  max-width: 560px;
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
}
.fv-messaging *, .fv-messaging *::before, .fv-messaging *::after { box-sizing: border-box; }
.fv-msg-card {
  border-radius: var(--fv-radius);
  background: var(--fv-card);
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
}
.fv-msg-head { display: flex; justify-content: flex-end; margin: 0; padding: 18px 20px 0; }
.fv-messaging:not(.is-done) .fv-msg-replay { visibility: hidden; opacity: 0; }
.fv-msg-stage { display: grid; gap: 14px; padding: 8px 18px 22px; }

/* the audience: a segmented control */
.fv-msg-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--fv-raise);
}
.fv-msg-option {
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font: 500 13px/1.1 var(--font-sans);
  letter-spacing: -.01em;
  text-align: center;
}
.fv-msg-option-on { background: var(--fv-raise-2); color: var(--text-max); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* the compose field and its send button */
.fv-msg-draft {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
  padding: 10px 8px 8px 16px;
  border-radius: 22px;
  background: var(--fv-raise);
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
}
.fv-msg-draft-text { flex: 1; min-width: 0; padding-bottom: 3px; color: var(--text-max); font: 400 15px/1.4 var(--font-sans); letter-spacing: -.016em; }
.fv-msg-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold-ink);
}
.fv-msg-send svg { width: 16px; height: 16px; fill: none; stroke: #000; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fv-msg-via { margin: -4px 0 0 16px; color: var(--text-subtle); font: 400 12px/1.4 var(--font-sans); letter-spacing: -.01em; }

/* what each member receives in Telegram */
.fv-msg-inbox { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.fv-msg-bubble {
  justify-self: start;
  max-width: 88%;
  padding: 8px 12px 9px;
  border-radius: 18px 18px 18px 6px;
  background: var(--fv-raise-2);
  color: var(--text-max);
  font: 400 15px/1.38 var(--font-sans);
  letter-spacing: -.016em;
}
.fv-msg-name { display: block; margin-bottom: 1px; color: var(--gold-light); font: 600 12px/1.3 var(--font-sans); letter-spacing: -.01em; }
@media (prefers-reduced-motion: no-preference) {
  .fv-messaging.is-armed .fv-msg-bubble { opacity: 0; }
  .fv-messaging.is-playing .fv-msg-send { animation: fv-msg-send 520ms var(--fv-spring) 350ms both; }
  .fv-messaging.is-playing .fv-msg-bubble { animation: fv-msg-rise 560ms var(--fv-spring) both; transform-origin: 0 100%; }
  .fv-messaging.is-playing .fv-msg-bubble:nth-child(1) { animation-delay: 900ms; }
  .fv-messaging.is-playing .fv-msg-bubble:nth-child(2) { animation-delay: 1250ms; }
  .fv-messaging .fv-msg-replay { transition: opacity 400ms var(--fv-ease); }
}
@keyframes fv-msg-send {
  0% { transform: none; }
  40% { transform: scale(.82); }
  100% { transform: none; }
}
@keyframes fv-msg-rise {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* flow visual: revoke-import */
/* revoke-import flow visual (2026-09-18 Apple pass). Part 1: access ends, the member's invite
   link is struck through and revoked, and a later tap opens nothing. Part 2: rows from a CSV
   move into member records, plan and expiry lined up. */
.fv-revoke-import {
  /* sequence positions (when each step starts) */
  --fv-links-t-status: 300ms;
  --fv-links-t-strike: 700ms;
  --fv-links-t-tag: 1600ms;
  --fv-links-t-later: 2200ms;
  --fv-links-t-rows: 2900ms;
  position: relative;
  container-type: inline-size;
  display: grid;
  width: 100%;
  max-width: 560px;
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -.016em;
  text-align: left;
}
.fv-revoke-import *,
.fv-revoke-import *::before,
.fv-revoke-import *::after { box-sizing: border-box; }

.fv-links-card {
  border-radius: var(--fv-radius);
  background: var(--fv-card);
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
}
.fv-links-part { padding: 20px 20px 22px; }
.fv-links-part + .fv-links-part { box-shadow: inset 0 1px 0 var(--fv-card-edge); }

/* part headings: a numbered gold badge and a plain label */
.fv-links-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
  margin: 0 0 14px;
}
.fv-links-eyebrow-text { display: inline-flex; align-items: center; gap: 10px; color: var(--text-max); font: 600 15px/1.2 var(--font-sans); letter-spacing: -.016em; white-space: nowrap; }
.fv-links-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fv-gold-tint);
  color: var(--gold-ink);
  font: 600 13px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.fv-links-sample,
.fv-links-note { margin-left: auto; white-space: nowrap; }
.fv-links-note { color: var(--text-subtle); font: 400 12px/1.2 var(--font-sans); letter-spacing: -.01em; }

/* the replay pill waits, invisible, until the sequence has played */
.fv-revoke-import .fv-links-replay { visibility: hidden; opacity: 0; }
.fv-revoke-import.is-done .fv-links-replay { visibility: visible; opacity: 1; transition: opacity 400ms var(--fv-ease); }

/* 1: the invite link */
.fv-links-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
}
.fv-links-handle { color: var(--text-max); font-weight: 600; }
.fv-links-status { display: grid; justify-items: end; white-space: nowrap; }
.fv-links-status > span {
  grid-area: 1 / 1;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font: 600 12px/1 var(--font-sans);
  letter-spacing: -.01em;
}
.fv-links-status-was { background: var(--fv-ok-tint); color: var(--fv-ok-ink); opacity: 0; }
.fv-links-status-now { background: var(--fv-raise-2); color: var(--text-muted); opacity: 1; }

.fv-links-linkrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 12px;
}
.fv-links-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--fv-raise);
  color: var(--text-subtle);
  font: 500 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0;
  white-space: nowrap;
}
.fv-links-chip-text { position: relative; }
.fv-links-strike {
  position: absolute;
  left: 10px;
  top: 50%;
  width: calc(100% - 20px);
  height: 2px;
  margin-top: -1px;
  overflow: visible;
}
.fv-links-strike line {
  fill: none;
  stroke: var(--fv-bad-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.fv-links-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  background: var(--fv-bad-tint);
  color: var(--fv-bad-ink);
  font: 600 12px/1 var(--font-sans);
  letter-spacing: -.01em;
}
.fv-links-later {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 12px;
  min-height: 20px;
  font-size: 14px;
}
.fv-links-later-label { color: var(--text-subtle); }
.fv-links-later-result { color: var(--text-max); font-weight: 500; }
.fv-links-later-arrow { flex: none; width: 28px; height: 10px; overflow: visible; }
/* the flow arrow points from the CSV header to the record columns it maps onto */
.fv-links-flow { flex: none; width: 20px; height: 10px; overflow: visible; align-self: start; margin-top: 15px; }
.fv-links-later-arrow path,
.fv-links-flow path {
  fill: none;
  stroke: var(--text-subtle);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 2: the CSV import. Every CSV line and every record row is 28px, and the records sit 8px
   above the CSV block's bottom edge, so row N lines up with row N. */
.fv-links-import {
  display: grid;
  grid-template-columns: max-content 20px minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.fv-links-src {
  padding: 6px 10px;
  border-radius: 12px;
  background: #0b0b0c;
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
  font: 400 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0;
  white-space: nowrap;
}
.fv-links-src-head,
.fv-links-src-row { line-height: 28px; color: var(--text-subtle); }
.fv-links-src-head { color: #6e6e73; }
.fv-links-dst {
  --fv-links-row-from: translateX(-16px);
  min-width: 0;
  padding-bottom: 8px;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: space-between;
  column-gap: 8px;
  font-size: 13px;
}
.fv-links-dst-head,
.fv-links-dst-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: 28px;
  white-space: nowrap;
}
@supports not (grid-template-columns: subgrid) {
  .fv-links-dst { grid-template-columns: minmax(0, 1fr); }
  .fv-links-dst-head,
  .fv-links-dst-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 8px; }
}
.fv-links-dst-head { color: var(--text-subtle); font: 500 12px/1 var(--font-sans); letter-spacing: -.01em; }
.fv-links-dst-row { box-shadow: inset 0 1px 0 var(--fv-card-edge); color: var(--text-max); }
.fv-links-dst-row > span:nth-child(2) { color: var(--gold-light); }
.fv-links-dst-row > span:nth-child(3) { color: var(--text-muted); }
.fv-links-dst-row:nth-child(2),
.fv-links-src-row:nth-child(2) { --fv-links-row-at: var(--fv-links-t-rows); }
.fv-links-dst-row:nth-child(3),
.fv-links-src-row:nth-child(3) { --fv-links-row-at: calc(var(--fv-links-t-rows) + 140ms); }
.fv-links-dst-row:nth-child(4),
.fv-links-src-row:nth-child(4) { --fv-links-row-at: calc(var(--fv-links-t-rows) + 280ms); }

/* narrow: the CSV block sits above the records it fills */
@container (max-width: 459px) {
  .fv-links-part { padding-left: 16px; padding-right: 16px; }
  .fv-links-import { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; }
  .fv-links-flow { justify-self: center; align-self: center; transform: rotate(90deg); margin: 4px 0; }
  .fv-links-src { font-size: 12px; }
  .fv-links-dst { --fv-links-row-from: translateX(-10px); padding-bottom: 0; }
  .fv-links-eyebrow { gap: 8px; }
}

/* The start state exists only when JS has armed the figure and motion is allowed. Without JS,
   or with reduced motion, the final state above is what renders. */
@media (prefers-reduced-motion: no-preference) {
  .fv-revoke-import.is-armed:not(.is-playing) .fv-links-status-was { opacity: 1; }
  .fv-revoke-import.is-armed:not(.is-playing) .fv-links-status-now { opacity: 0; }
  .fv-revoke-import.is-armed:not(.is-playing) .fv-links-chip { color: var(--text-max); }
  .fv-revoke-import.is-armed:not(.is-playing) .fv-links-strike line { stroke-dashoffset: 1; }
  .fv-revoke-import.is-armed:not(.is-playing) .fv-links-tag,
  .fv-revoke-import.is-armed:not(.is-playing) .fv-links-later { opacity: 0; transform: translateY(8px) scale(.96); }
  .fv-revoke-import.is-armed:not(.is-playing) .fv-links-src-row { color: var(--text-muted); }
  .fv-revoke-import.is-armed:not(.is-playing) .fv-links-dst-row > span { opacity: 0; transform: var(--fv-links-row-from); }

  .fv-revoke-import.is-playing .fv-links-status-was,
  .fv-revoke-import.is-playing .fv-links-status-now {
    transition: opacity 260ms var(--fv-ease) var(--fv-links-t-status);
  }
  .fv-revoke-import.is-playing .fv-links-strike line {
    transition: stroke-dashoffset 800ms var(--fv-ease) var(--fv-links-t-strike);
  }
  .fv-revoke-import.is-playing .fv-links-chip {
    transition: color 320ms var(--fv-ease) calc(var(--fv-links-t-strike) + 400ms);
  }
  .fv-revoke-import.is-playing .fv-links-tag {
    transition:
      opacity 500ms var(--fv-ease) var(--fv-links-t-tag),
      transform 500ms var(--fv-spring) var(--fv-links-t-tag);
  }
  .fv-revoke-import.is-playing .fv-links-later {
    transition:
      opacity 500ms var(--fv-ease) var(--fv-links-t-later),
      transform 500ms var(--fv-ease) var(--fv-links-t-later);
  }
  .fv-revoke-import.is-playing .fv-links-src-row {
    transition: color 320ms var(--fv-ease) var(--fv-links-row-at);
  }
  .fv-revoke-import.is-playing .fv-links-dst-row > span {
    transition:
      opacity 500ms var(--fv-ease) var(--fv-links-row-at),
      transform 500ms var(--fv-ease) var(--fv-links-row-at);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fv-revoke-import .fv-links-replay { display: none; }
}

/* flow visual: team-api */
/* team-api flow visual (2026-09-18 Apple pass). Final state is the default; motion only runs
   under .is-playing, and only when the viewer has not asked for reduced motion.
   An invited admin joins, makes a change with their own access, and a signed membership
   event travels to your own system. */
.fv-team-api {
  container: fv-team / inline-size;
  display: grid;
  width: 100%;
  max-width: 560px;
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
}
.fv-team-api *,
.fv-team-api *::before,
.fv-team-api *::after { box-sizing: border-box; }
.fv-team-card {
  border-radius: var(--fv-radius);
  background: var(--fv-card);
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
}
.fv-team-head { display: flex; justify-content: flex-end; margin: 0; padding: 18px 20px 0; }
/* Without JS or with reduced motion the button keeps its hidden attribute. Once armed, JS drops
   it and the slot stays invisible until the sequence has finished. */
.fv-team-api:not(.is-done) .fv-team-replay { visibility: hidden; opacity: 0; }

.fv-team-stage { display: grid; gap: 14px; padding: 8px 16px 20px; }
.fv-team-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.fv-team-panel {
  min-width: 0;
  padding: 14px 14px 12px;
  border-radius: var(--fv-radius-in);
  background: var(--fv-raise);
}
.fv-team-label { margin: 0 0 6px; color: var(--text-subtle); font: 500 12px/1.2 var(--font-sans); letter-spacing: -.01em; }
.fv-team-rows { list-style: none; margin: 0; padding: 0; }
.fv-team-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 42px;
  margin: 0;
  padding: 7px 0;
}
.fv-team-row + .fv-team-row { box-shadow: inset 0 1px 0 var(--fv-card-edge); }
.fv-team-handle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-max);
  font: 600 14px/1.35 var(--font-sans);
  letter-spacing: -.016em;
}
.fv-team-meta { grid-column: 1; color: var(--text-subtle); font: 400 12px/1.4 var(--font-sans); letter-spacing: -.01em; }
.fv-team-role {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--fv-raise-2);
  color: var(--text-muted);
  font: 600 12px/1 var(--font-sans);
  letter-spacing: -.01em;
}
.fv-team-role-gold { background: var(--fv-gold-tint); color: var(--gold-light); }
.fv-team-entry { position: relative; display: grid; gap: 2px; margin-top: 8px; }
.fv-team-entry-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.fv-team-time { flex: none; color: var(--text-subtle); font: 400 12px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }
.fv-team-action { color: var(--gold-light); font: 500 14px/1.4 var(--font-sans); letter-spacing: -.016em; }

/* the webhook: KickThemBot -> signed event -> your CRM */
.fv-team-sync { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.fv-team-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--fv-raise);
  color: var(--text-max);
  font: 600 14px/1 var(--font-sans);
  letter-spacing: -.016em;
  white-space: nowrap;
}
.fv-team-crm { background: var(--fv-gold-tint); color: var(--gold-light); }
.fv-team-link { position: relative; align-self: stretch; min-height: 66px; }
.fv-team-line {
  position: absolute;
  left: 0;
  right: 7px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--gold-ink);
  transform-origin: 0 50%;
}
.fv-team-arrow { position: absolute; right: 0; top: 50%; width: 8px; height: 10px; margin-top: -5px; fill: var(--gold-ink); }
.fv-team-track { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; }
.fv-team-packet {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 7px 12px 6px;
  border-radius: 12px;
  background: var(--fv-raise-2);
  box-shadow: 0 0 0 4px var(--fv-card);
  white-space: nowrap;
}
.fv-team-event { color: var(--text-max); font: 500 12px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0; }
.fv-team-signed { display: inline-flex; align-items: center; gap: 5px; color: var(--fv-ok-ink); font: 600 12px/1 var(--font-sans); letter-spacing: -.01em; }
.fv-team-signed svg { width: 12px; height: 12px; fill: none; stroke: var(--fv-ok-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Narrow: stack the panels and run the event top to bottom. */
@container fv-team (max-width: 439px) {
  .fv-team-panels { grid-template-columns: minmax(0, 1fr); }
  .fv-team-sync { grid-template-columns: minmax(0, 1fr); }
  .fv-team-link { min-height: 104px; }
  .fv-team-line {
    left: 50%; right: auto; top: 0; bottom: 7px;
    width: 2px; height: auto;
    margin: 0 0 0 -1px;
    transform-origin: 50% 0;
  }
  .fv-team-arrow { top: auto; bottom: -1px; right: auto; left: 50%; margin: 0 0 0 -4px; transform: rotate(90deg); }
}

/* ---- Motion: plays once, then rests on the final state above ---- */
@media (prefers-reduced-motion: no-preference) {
  .fv-team-api.is-armed .fv-team-row-new,
  .fv-team-api.is-armed .fv-team-entry,
  .fv-team-api.is-armed .fv-team-track,
  .fv-team-api.is-armed .fv-team-arrow { opacity: 0; }
  .fv-team-api.is-armed .fv-team-line { transform: scaleX(0); }
  .fv-team-api.is-armed .fv-team-crm { background: var(--fv-raise); color: var(--text-max); }

  /* 1. the invited admin joins the list */
  .fv-team-api.is-playing .fv-team-row-new { animation: fv-team-rise 520ms var(--fv-spring) 0ms both; }
  /* 2. their change goes through */
  .fv-team-api.is-playing .fv-team-entry { animation: fv-team-rise 520ms var(--fv-ease) 620ms both; }
  /* 3. the signed event travels to your CRM */
  .fv-team-api.is-playing .fv-team-line { animation: fv-team-draw-x 900ms var(--fv-ease) 1340ms both; }
  .fv-team-api.is-playing .fv-team-track { animation: fv-team-travel-x 900ms var(--fv-ease) 1340ms both; }
  .fv-team-api.is-playing .fv-team-arrow { animation: fv-team-fade 200ms var(--fv-ease) 2140ms both; }
  /* 4. your CRM receives it */
  .fv-team-api.is-playing .fv-team-crm { animation: fv-team-arrive 420ms var(--fv-spring) 2240ms both; }

  @container fv-team (max-width: 439px) {
    .fv-team-api.is-armed .fv-team-line { transform: scaleY(0); }
    .fv-team-api.is-playing .fv-team-line { animation-name: fv-team-draw-y; }
    .fv-team-api.is-playing .fv-team-track { animation-name: fv-team-travel-y; }
    .fv-team-api.is-armed .fv-team-arrow,
    .fv-team-api.is-playing .fv-team-arrow { transform: rotate(90deg); }
  }
  .fv-team-api .fv-team-replay { transition: opacity 400ms var(--fv-ease); }
}
@keyframes fv-team-rise {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes fv-team-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fv-team-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fv-team-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fv-team-travel-x {
  0% { opacity: 0; transform: translateX(-50%); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes fv-team-travel-y {
  0% { opacity: 0; transform: translateY(-50%); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes fv-team-arrive {
  0% { background-color: var(--fv-raise); color: var(--text-max); transform: none; }
  50% { transform: scale(1.06); }
  100% { background-color: var(--fv-gold-tint); color: var(--gold-light); transform: none; }
}

/* flow visual: whitelabel */
/* whitelabel flow visual (2026-09-18 Apple pass).
   The final state (no branding line) is the markup's default, so it is what shows with
   JavaScript off or with reduced motion. JS adds .is-armed (branded start), then .is-playing,
   which transitions back to the default once. */
.fv-whitelabel {
  --fv-brand-hold: 1400ms;
  --fv-brand-fade: 520ms;
  --fv-brand-close: 420ms;
  --fv-brand-pad: 18px;
  --fv-brand-gutter: 18px;
  --fv-brand-foot-h: calc(8px + 1.4em); /* padding-top + one 13px/1.4 line */
  container: fv-brand / inline-size;
  display: grid;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 560px;
  color: var(--text);
  font: 400 15px/1.4 var(--font-sans);
  letter-spacing: -.016em;
}
.fv-whitelabel *,
.fv-whitelabel *::before,
.fv-whitelabel *::after { box-sizing: border-box; }

.fv-brand-frame {
  border-radius: var(--fv-radius);
  background: var(--fv-card);
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
  overflow: hidden;
}

/* --- chat header: the community's own identity --- */
.fv-brand-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px var(--fv-brand-gutter);
  background: var(--fv-raise);
}
.fv-brand-avatar { flex: 0 0 36px; width: 36px; height: 36px; display: block; }
.fv-brand-avatar-tile { fill: var(--fv-gold-tint); stroke: none; }
.fv-brand-avatar-mark { fill: var(--gold-ink); font: 600 12px var(--font-sans); letter-spacing: 0; }
.fv-brand-id { display: grid; min-width: 0; line-height: 1.3; }
.fv-brand-name { color: var(--text-max); font-weight: 600; font-size: 15px; }
.fv-brand-handle { color: var(--text-subtle); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-brand-sample { margin-left: auto; }

/* --- chat pane ---
   The bottom padding holds the branding line's height at rest, so the frame keeps one size in
   every state: while the line's row closes, this padding opens by the same amount. */
.fv-brand-stage {
  padding: var(--fv-brand-pad) var(--fv-brand-gutter) calc(var(--fv-brand-pad) + var(--fv-brand-foot-h));
  background: #0b0b0c;
}
.fv-brand-msg { width: min(100%, 310px); }
.fv-brand-bubble {
  display: block;
  padding: 9px 14px 10px;
  border-radius: 18px 18px 18px 6px;
  background: var(--fv-raise-2);
  color: var(--text-max);
}
.fv-brand-line { display: block; }

/* The branding line. Row 0fr + opacity 0 is the rest (final) state. */
.fv-brand-foot { display: grid; grid-template-rows: 0fr; }
.fv-brand-foot-inner { display: block; min-height: 0; overflow: hidden; }
.fv-brand-foot-text {
  display: block;
  padding-top: 8px;
  color: var(--text-subtle);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}
.fv-whitelabel.is-armed .fv-brand-stage { padding-bottom: var(--fv-brand-pad); }
.fv-whitelabel.is-armed .fv-brand-foot { grid-template-rows: 1fr; }
.fv-whitelabel.is-armed .fv-brand-foot-text { opacity: 1; visibility: visible; }

/* One state change: the line fades, then its space closes. */
.fv-whitelabel.is-armed.is-playing .fv-brand-stage {
  padding-bottom: calc(var(--fv-brand-pad) + var(--fv-brand-foot-h));
  transition: padding-bottom var(--fv-brand-close) var(--fv-ease) calc(var(--fv-brand-hold) + var(--fv-brand-fade));
}
.fv-whitelabel.is-armed.is-playing .fv-brand-foot {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--fv-brand-close) var(--fv-ease) calc(var(--fv-brand-hold) + var(--fv-brand-fade));
}
.fv-whitelabel.is-armed.is-playing .fv-brand-foot-text {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--fv-brand-fade) var(--fv-ease) var(--fv-brand-hold),
    visibility 0s linear calc(var(--fv-brand-hold) + var(--fv-brand-fade));
}

/* inline keyboard under the message (display only) */
.fv-brand-kbd { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.fv-brand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--fv-raise);
  color: var(--gold-light);
  font-weight: 500;
  font-size: 14px;
}

/* --- legend --- */
.fv-brand-base { padding: 14px var(--fv-brand-gutter) 16px; }
.fv-brand-legend {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 4px;
  margin: 0;
}
.fv-brand-legend-row { display: contents; }
.fv-brand-legend dt { margin: 0; color: var(--text-subtle); font: 400 13px/1.45 var(--font-sans); letter-spacing: -.01em; white-space: nowrap; }
.fv-brand-legend dd { margin: 0; color: var(--text-muted); font: 500 13px/1.45 var(--font-sans); letter-spacing: -.01em; }
.fv-brand-legend-row:last-child dt,
.fv-brand-legend-row:last-child dd { color: var(--gold-light); }

/* The replay pill: its slot is held, invisible, once motion is wired, so nothing shifts when
   it appears; without JS it stays invisible. */
.fv-whitelabel .fv-brand-replay { visibility: hidden; opacity: 0; }
.fv-whitelabel[data-fv-ready].is-done .fv-brand-replay { visibility: visible; opacity: 1; transition: opacity 400ms var(--fv-ease); }

@container fv-brand (max-width: 400px) {
  .fv-brand-head,
  .fv-brand-stage,
  .fv-brand-base { --fv-brand-gutter: 14px; }
  .fv-brand-stage { --fv-brand-pad: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-whitelabel.is-armed .fv-brand-stage,
  .fv-whitelabel.is-armed.is-playing .fv-brand-stage { padding-bottom: calc(var(--fv-brand-pad) + var(--fv-brand-foot-h)); transition: none; }
  .fv-whitelabel.is-armed .fv-brand-foot,
  .fv-whitelabel.is-armed.is-playing .fv-brand-foot { grid-template-rows: 0fr; transition: none; }
  .fv-whitelabel.is-armed .fv-brand-foot-text,
  .fv-whitelabel.is-armed.is-playing .fv-brand-foot-text { opacity: 0; visibility: hidden; transition: none; }
  .fv-whitelabel .fv-brand-replay { display: none !important; }
}

/* flow visual: switch-import */
/* switch-import flow visual (2026-09-18, the /switch/ page). The owner sends one CSV to
   @KickThemBot and the bot answers in its own words: "Importing memberships..." and then the
   summary buildMembershipImportSummary() sends, line for line (check:switch-guide compares the
   wording with controllers/botController.js). Final state is the default; motion only runs
   under .is-playing, and only when the viewer has not asked for reduced motion. */
.fv-switch-import {
  container-type: inline-size;
  display: grid;
  width: 100%;
  max-width: 560px;
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
  text-align: left;
}
.fv-switch-import *, .fv-switch-import *::before, .fv-switch-import *::after { box-sizing: border-box; }
.fv-sw-card {
  border-radius: var(--fv-radius);
  background: var(--fv-card);
  box-shadow: inset 0 0 0 1px var(--fv-card-edge);
}
.fv-sw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 18px 20px 0;
}
.fv-sw-chat { color: var(--text-max); font: 600 15px/1.2 var(--font-sans); letter-spacing: -.016em; }
.fv-switch-import:not(.is-done) .fv-sw-replay { visibility: hidden; opacity: 0; }
.fv-sw-stage { display: grid; gap: 10px; padding: 14px 18px 22px; }

/* the owner's message: one document, on the right like any sent message */
.fv-sw-file {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 88%;
  padding: 10px 16px 10px 10px;
  border-radius: 18px 18px 6px 18px;
  background: #2a2517;
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, .22);
}
.fv-sw-file-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold-ink);
}
.fv-sw-file-icon svg { width: 20px; height: 20px; fill: none; stroke: #000; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fv-sw-file-meta { display: grid; gap: 2px; min-width: 0; }
.fv-sw-file-name { color: var(--text-max); font: 600 15px/1.25 var(--font-sans); letter-spacing: -.016em; white-space: nowrap; }
.fv-sw-file-size { color: var(--text-subtle); font: 400 13px/1.2 var(--font-sans); letter-spacing: -.01em; }

/* the bot's replies, on the left */
.fv-sw-bot {
  justify-self: start;
  max-width: 92%;
  margin: 0;
  padding: 8px 12px 9px;
  border-radius: 18px 18px 18px 6px;
  background: var(--fv-raise-2);
  color: var(--text-max);
  font: 400 15px/1.38 var(--font-sans);
  letter-spacing: -.016em;
}
.fv-sw-summary { display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.fv-sw-line { display: block; }
.fv-sw-done { margin-bottom: 6px; font-weight: 600; }
.fv-sw-good { color: var(--fv-ok-ink); }
.fv-sw-gap { margin-top: 8px; color: var(--text-muted); }
.fv-sw-error { color: var(--fv-bad-ink); }

@container (max-width: 459px) {
  .fv-sw-stage { padding-left: 14px; padding-right: 14px; }
  .fv-sw-bot { font-size: 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .fv-switch-import.is-armed .fv-sw-msg { opacity: 0; }
  .fv-switch-import.is-armed .fv-sw-summary .fv-sw-line { opacity: 0; }
  .fv-switch-import.is-playing .fv-sw-msg { animation: fv-sw-rise 560ms var(--fv-spring) both; }
  .fv-switch-import.is-playing .fv-sw-file { animation-delay: 250ms; transform-origin: 100% 100%; }
  .fv-switch-import.is-playing .fv-sw-working { animation-delay: 950ms; transform-origin: 0 100%; }
  .fv-switch-import.is-playing .fv-sw-summary { animation-delay: 1750ms; transform-origin: 0 100%; }
  .fv-switch-import.is-playing .fv-sw-summary .fv-sw-line { animation: fv-sw-line 420ms var(--fv-ease) both; }
  .fv-switch-import.is-playing .fv-sw-line:nth-child(1) { animation-delay: 1850ms; }
  .fv-switch-import.is-playing .fv-sw-line:nth-child(2) { animation-delay: 1950ms; }
  .fv-switch-import.is-playing .fv-sw-line:nth-child(3) { animation-delay: 2030ms; }
  .fv-switch-import.is-playing .fv-sw-line:nth-child(4) { animation-delay: 2110ms; }
  .fv-switch-import.is-playing .fv-sw-line:nth-child(5) { animation-delay: 2190ms; }
  .fv-switch-import.is-playing .fv-sw-line:nth-child(6) { animation-delay: 2270ms; }
  .fv-switch-import.is-playing .fv-sw-line:nth-child(7) { animation-delay: 2450ms; }
  .fv-switch-import.is-playing .fv-sw-line:nth-child(8) { animation-delay: 2530ms; }
  .fv-switch-import .fv-sw-replay { transition: opacity 400ms var(--fv-ease); }
}
@keyframes fv-sw-rise {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes fv-sw-line {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}