/* The Growth Board, generated. Edit src/styles/, not this file. */
/* ==========================================================================
   The Growth Board, Webfonts
   Loaded from Google Fonts CDN. See readme.md "Font substitution" note.
   - Space Grotesk  → display / headlines (geometric grotesque, premium punch)
   - Hanken Grotesk → body / UI (humanist grotesque, warm + readable)
   - Space Mono     → eyebrows, labels, stats, tags (marketing kicker style)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* ==========================================================================
   The Growth Board, Color tokens
   Brand DNA: electric Volt yellow + Cobalt blue on Ink black.
   High-energy, confident, premium marketing. Two hero colors, disciplined use.
   ========================================================================== */
:root {
  /* --- Brand primitives ------------------------------------------------- */
  --volt-500:   #FFF500;   /* the yellow, hero surface, highlighter, accents */
  --volt-400:   #FFF84D;   /* lighter volt for washes */
  --volt-600:   #E6DC00;   /* pressed / darker volt */
  --volt-100:   #FFFDCC;   /* faint volt tint */

  --cobalt-500: #205EFF;   /* the blue, primary action, links, brand mark */
  --cobalt-400: #4E80FF;   /* hover lift */
  --cobalt-600: #1846D6;   /* pressed */
  --cobalt-700: #123AAE;   /* deep cobalt on light */
  --cobalt-100: #E4ECFF;   /* faint cobalt tint / selection */

  /* --- Ink & paper ------------------------------------------------------ */
  --ink-900:    #0B0B0F;   /* near-black, primary text, dark surfaces */
  --ink-800:    #16161C;   /* raised dark surface */
  --ink-700:    #22222B;   /* dark card / border on dark */
  --paper:      #FFFFFF;   /* pure white */
  --paper-off:  #FAFAF6;   /* warm off-white page background */

  /* --- Warm neutral scale ---------------------------------------------- */
  --neutral-50:  #F6F6F2;
  --neutral-100: #ECECE6;
  --neutral-200: #DEDED6;
  --neutral-300: #C6C6BC;
  /* 400 and 500 were each a few shades short of WCAG AA against the paper
     background: 500 measured 4.03:1 where small text needs 4.5, and 400
     measured 2.57:1 on the struck-through anchor price where 20px text needs 3.
     Darkened by the smallest amount that clears it, 8 and 16 points. Every
     caption, timestamp and qualifier on the site uses 500, so this is a
     legibility change, not a design one: 4.51:1 and 3.00:1 now. */
  --neutral-400: #929288;
  --neutral-500: #74746A;
  --neutral-600: #5B5B52;
  --neutral-700: #3E3E37;
  --neutral-800: #26262135;   /* not used directly; see ink-* for solids */

  /* --- Semantic status -------------------------------------------------- */
  --success-500: #12A150;
  --success-100: #DFF3E6;
  --warning-500: #E8A400;
  --warning-100: #FBEFCF;
  --danger-500:  #E5484D;
  --danger-100:  #FBE3E4;

  /* --- Semantic aliases (use these in components) ----------------------- */
  --bg-page:        var(--paper-off);
  --bg-surface:     var(--paper);
  --bg-inverse:     var(--ink-900);
  --bg-brand:       var(--volt-500);
  --bg-muted:       var(--neutral-50);
  --bg-selection:   var(--cobalt-100);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-inverse:   var(--paper);
  --text-on-brand:  var(--ink-900);       /* ink on volt = brand lockup */
  --text-link:      var(--cobalt-600);

  --action-primary:        var(--cobalt-500);
  --action-primary-hover:  var(--cobalt-400);
  --action-primary-press:  var(--cobalt-600);
  --action-accent:         var(--volt-500);
  --action-accent-press:   var(--volt-600);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--ink-900);
  --border-brand:   var(--cobalt-500);

  --ring-focus:     var(--cobalt-500);
}

/* ==========================================================================
   The Growth Board, Typography tokens
   Display: Space Grotesk · Body: Hanken Grotesk · Label/Mono: Space Mono
   Marketing scale: big, confident display; tight leading on headlines.
   ========================================================================== */
:root {
  /* --- Families --------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* --- Weights ---------------------------------------------------------- */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-black:    800; /* @kind other */  /* Hanken 800 for punchy body callouts */

  /* --- Fluid display scale (marketing) ---------------------------------- */
  --text-display-2xl: clamp(3.5rem, 7vw, 6rem);      /* hero mega */
  --text-display-xl:  clamp(2.75rem, 5vw, 4.25rem);  /* page hero */
  --text-display-lg:  clamp(2.25rem, 3.6vw, 3.25rem);/* section title */
  --text-display-md:  clamp(1.75rem, 2.4vw, 2.25rem);/* sub-section */

  /* --- Headings --------------------------------------------------------- */
  --text-h1: 2.5rem;    /* 40 */
  --text-h2: 2rem;      /* 32 */
  --text-h3: 1.5rem;    /* 24 */
  --text-h4: 1.25rem;   /* 20 */

  /* --- Body ------------------------------------------------------------- */
  --text-lg:  1.25rem;   /* 20, lead paragraph */
  --text-md:  1.0625rem; /* 17, default body */
  --text-sm:  0.9375rem; /* 15 */
  --text-xs:  0.8125rem; /* 13 */

  /* --- Eyebrow / label (mono, tracked, uppercase) ----------------------- */
  --text-eyebrow: 0.8125rem; /* 13 */
  --tracking-eyebrow: 0.14em;
  --tracking-tight:  -0.02em;
  --tracking-tighter:-0.035em; /* display headlines */

  /* --- Line heights ----------------------------------------------------- */
  --leading-none:    1;
  --leading-display: 1.02;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-body:    1.62;
  --leading-relaxed: 1.75;
}

/* ==========================================================================
   The Growth Board, Spacing & layout tokens
   4px base grid. Generous marketing rhythm at the section level.
   ========================================================================== */
:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-10:  4rem;     /* 64 */
  --space-12:  5rem;     /* 80 */
  --space-16:  7rem;     /* 112 */
  --space-20:  9rem;     /* 144, section band padding */

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --container-wide: 1360px;
  --container-prose: 68ch;
  --gutter: clamp(1.25rem, 4vw, 4rem); /* @kind spacing */
  --section-y: clamp(4rem, 9vw, 9rem); /* @kind spacing */
}

/* ==========================================================================
   The Growth Board, Effects: radius, shadow, border, motion
   The system leans on a hard-edged "sticker" look: solid ink offset shadows,
   crisp 2px borders, tight radii. Soft ambient shadows for floating surfaces.
   ========================================================================== */
:root {
  /* --- Radius ----------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-pill: 999px;

  /* --- Borders ---------------------------------------------------------- */
  --border-hairline: 1px;
  --border-regular:  2px;   /* the brand default, confident 2px */
  --border-bold:     3px;

  /* --- Shadows ---------------------------------------------------------- */
  /* Soft ambient (floating cards, menus) */
  --shadow-sm:  0 1px 2px rgba(11,11,15,0.06), 0 1px 3px rgba(11,11,15,0.08);
  --shadow-md:  0 4px 10px rgba(11,11,15,0.08), 0 2px 6px rgba(11,11,15,0.06);
  --shadow-lg:  0 18px 40px rgba(11,11,15,0.12), 0 6px 14px rgba(11,11,15,0.08);

  /* Hard "sticker" offset, the signature. Ink block behind a bordered card */
  --shadow-block:       6px 6px 0 var(--ink-900);
  --shadow-block-sm:    4px 4px 0 var(--ink-900);
  --shadow-block-cobalt:6px 6px 0 var(--cobalt-500);
  --shadow-block-volt:  6px 6px 0 var(--volt-500);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(32,94,255,0.35);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */
}

/* ==========================================================================
   The Growth Board, Base element defaults + a few brand utilities.
   Lightweight resets so specimen cards and kits inherit the brand voice.
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--text-primary);
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

::selection {
  background: var(--volt-500);
  color: var(--ink-900);
}

/* --- Brand utility classes (used across cards + kits) ------------------- */

/* Eyebrow / kicker label */
.tgb-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cobalt-600);
}

/* Volt highlighter behind inline text */
.tgb-mark {
  background: var(--volt-500);
  padding: 0.02em 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Signature "sticker" card, 2px ink border + hard offset shadow */
.tgb-block {
  background: var(--bg-surface);
  border: var(--border-regular) solid var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-block);
}

/* ============================================================================
 * THE GROWTH BOARD, site styles
 *
 * Design system tokens live in src/styles/ds/ and are VERBATIM copies from the
 * Claude Design export. Do not edit them, when the design system is updated,
 * drop the new token files in and everything below inherits the change.
 *
 * Everything in this file is site-level layout and component styling written
 * in the design system's own language:
 *   · two hero colours only, Volt #FFF500 and Cobalt #205EFF on Ink #0B0B0F
 *   · the "sticker" card, 2px ink border + hard, non-blurred offset shadow
 *   · pill buttons in the display font
 *   · mono eyebrows, uppercase, tracked, prefixed //
 *   · exactly one Volt-highlighted word per headline
 *   · flat colour bands. No gradients, no photographic backgrounds, no grain.
 * ========================================================================== */








/* --- Reset additions the DS base doesn't cover ---------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

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

body { min-height: 100vh; }

img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, li { overflow-wrap: break-word; }
ul, ol { margin: 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --- Display scale -------------------------------------------------------- */

h1 {
  font-size: var(--text-display-xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tighter);
  text-wrap: balance;
}

h2 {
  font-size: var(--text-display-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  text-wrap: balance;
}

h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
h4 { font-size: var(--text-h4); line-height: var(--leading-snug); }

/* Hero-only mega size.
   The DS token floors at 3.5rem, which is unreadable for a long headline on a
   390px phone, most of this traffic arrives from WhatsApp links on mobile, so
   the floor is lowered here and the desktop ceiling kept exactly as specified. */
.h-mega {
  font-size: clamp(2.5rem, 8.5vw, 6rem);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tighter);
}

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide { max-width: var(--container-wide); }
.wrap--narrow { max-width: 52rem; }

/* Flat bands. Sections are separated by a 2px ink rule, per the DS. */
.band { padding-block: var(--section-y); }
.band--paper { background: var(--bg-page); }
.band--surface { background: var(--bg-surface); }

.band--ink {
  background: var(--ink-900);
  color: var(--text-inverse);
  border-block: var(--border-regular) solid var(--ink-900);
}

.band--volt {
  background: var(--volt-500);
  color: var(--ink-900);
  border-block: var(--border-regular) solid var(--ink-900);
}

.band--cobalt {
  background: var(--cobalt-500);
  color: #fff;
  border-block: var(--border-regular) solid var(--ink-900);
}

.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4,
.band--cobalt h1, .band--cobalt h2, .band--cobalt h3, .band--cobalt h4 { color: inherit; }

.band--ink .tgb-eyebrow { color: var(--volt-500); }
.band--cobalt .tgb-eyebrow { color: var(--volt-500); }
.band--volt .tgb-eyebrow { color: var(--ink-900); }

.rule { height: 0; border: 0; border-top: var(--border-regular) solid var(--ink-900); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.prose { max-width: var(--container-prose); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-10); }
.prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.prose a { text-decoration: underline; text-underline-offset: 0.16em; }

/* Links in copy on a dark band. The default link colour is cobalt, which is
   2.7:1 against ink: technically present, practically unreadable. Scoped to
   main so the footer, which has its own inherited-colour treatment, is left
   alone. */
main .band--ink p a,
main .band--ink li a { color: #fff; text-underline-offset: 0.16em; }
main .band--ink p a:hover,
main .band--ink li a:hover { color: var(--volt-500); }

/* --- Text utilities ------------------------------------------------------- */

/* Volt highlighter. Ink on Volt, always, including inside dark and cobalt
   bands, where the heading colour would otherwise be inherited as white. */
.tgb-mark { color: var(--ink-900); }

/* On a Volt band the highlight would be Volt-on-Volt, invisible, and it
   leaves an odd gap where the padding is. Invert it to an Ink block instead,
   which keeps the "one highlighted word" rule intact on every background. */
.band--volt .tgb-mark {
  background: var(--ink-900);
  color: var(--volt-500);
}

/* The // prefix is typographic, part of the eyebrow, not an icon. */
.tgb-eyebrow::before { content: '// '; opacity: 0.55; }
.tgb-eyebrow--bare::before { content: none; }

.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 56ch;
}

.band--ink .lede,
.band--cobalt .lede { color: rgb(255 255 255 / 0.78); }

.muted { color: var(--text-secondary); }
.band--ink .muted { color: rgb(255 255 255 / 0.7); }

.small { font-size: var(--text-sm); }
.xs { font-size: var(--text-xs); }

/* Every number on this site is mono, DS content rule. */
.num {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink-900);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Buttons -------------------------------------------------------------- */

/*
 * A button must never be wider than the column it sits in. It used to be a
 * fixed-height box with `white-space: nowrap`, which meant a long label had no
 * way to shrink: it set the button's minimum width, the button set the grid
 * column's minimum width, and the column pushed itself past the edge of the
 * screen, taking the CTA out of frame. It failed on the four offer cards at
 * laptop widths and on the Contact page on every phone.
 *
 * The fix is to let the label wrap and the button grow downwards instead of
 * sideways. `min-height` rather than `height` so a two-line label is not
 * clipped, `max-width: 100%` so it can never exceed its column, `min-width: 0`
 * so it does not set that column's minimum, and `overflow-wrap: anywhere` for
 * unbreakable strings like an email address, which have no space to wrap at.
 *
 * This replaces a max-width:30rem media query that only rescued phones. The
 * problem was never a phone problem: it was any column narrower than its label.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0.65em 22px;
  max-width: 100%;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  border: var(--border-regular) solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* The icon must not be squeezed when the label beside it wraps. */
.btn > svg { flex-shrink: 0; }

.btn--sm { min-height: 38px; padding: 0.5em 16px; font-size: 14px; gap: 8px; }
.btn--lg { min-height: 56px; padding: 0.75em 30px; font-size: 18px; gap: 10px; }
.btn--block { display: flex; width: 100%; }

/* Chrome is not reading copy. The header action is short and must stay on one
   line; below 30rem it collapses to the glyph alone, so it cannot overflow. */
.site-header__cta .btn { white-space: nowrap; }

/* Accent = the single most important action on a view. */
.btn--accent {
  background: var(--volt-500);
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn--accent:hover { background: var(--volt-400); }
.btn--accent:active { background: var(--volt-600); }

.btn--primary {
  background: var(--cobalt-500);
  color: #fff;
  border-color: var(--cobalt-500);
}
.btn--primary:hover { background: var(--cobalt-400); border-color: var(--cobalt-400); }
.btn--primary:active { background: var(--cobalt-600); }

.btn--secondary {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn--secondary:hover { background: var(--ink-900); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink-900);
}
.btn--ghost:hover { background: var(--neutral-100); }

/* On dark and cobalt bands the outline variants invert. */
.band--ink .btn--secondary,
.band--cobalt .btn--secondary { color: #fff; border-color: #fff; }
.band--ink .btn--secondary:hover,
.band--cobalt .btn--secondary:hover { background: #fff; color: var(--ink-900); }

.band--ink .btn--ghost,
.band--cobalt .btn--ghost { color: #fff; }
.band--ink .btn--ghost:hover,
.band--cobalt .btn--ghost:hover { background: rgb(255 255 255 / 0.12); }

/*
 * ...but the band is not always the surface the button sits on. A .card is a
 * light panel, and a light panel on a dark band was still getting the inverted
 * treatment: white text and a white border on a white card. The "Download the
 * PDF" button on Home and on the Checklist page was invisible until hover, at
 * which point the hover rule painted a white background behind ink text and it
 * reappeared. Contrast measured 1:1.
 *
 * The band tells you the page colour. The nearest surface tells you the button
 * colour. Only the second one matters.
 */
.band--ink .card .btn--secondary,
.band--cobalt .card .btn--secondary { color: var(--ink-900); border-color: var(--ink-900); }
.band--ink .card .btn--secondary:hover,
.band--cobalt .card .btn--secondary:hover { background: var(--ink-900); color: #fff; }

.band--ink .card .btn--ghost,
.band--cobalt .card .btn--ghost { color: var(--ink-900); }
.band--ink .card .btn--ghost:hover,
.band--cobalt .card .btn--ghost:hover { background: var(--neutral-100); }

/* Except .card--ink, which is a dark panel and inverts again. Listed last and
   at equal specificity so it wins over the light-card reset above. */
.band--ink .card--ink .btn--secondary,
.band--cobalt .card--ink .btn--secondary,
.card--ink .btn--secondary { color: #fff; border-color: #fff; }
.band--ink .card--ink .btn--secondary:hover,
.band--cobalt .card--ink .btn--secondary:hover,
.card--ink .btn--secondary:hover { background: #fff; color: var(--ink-900); }

.band--ink .card--ink .btn--ghost,
.band--cobalt .card--ink .btn--ghost,
.card--ink .btn--ghost { color: #fff; }
.band--ink .card--ink .btn--ghost:hover,
.band--cobalt .card--ink .btn--ghost:hover,
.card--ink .btn--ghost:hover { background: rgb(255 255 255 / 0.12); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

/* The narrow-phone override that used to live here is gone. Wrapping is now
   the button's default behaviour at every width, so there is nothing left for
   a breakpoint to switch on. */

/* Grid and flex children default to min-width:auto, which lets wide content
   push a column past its track. Opt them out. */
.grid > *,
.problem > *,
.leak > *,
.community > *,
.comm-hero > *,
.lm__inner > *,
.lc-hero > *,
.lc-get > *,
.founder > *,
.details > *,
.principles > * { min-width: 0; }

/* --- The sticker card ----------------------------------------------------- */

.card {
  background: var(--bg-surface);
  border: var(--border-regular) solid var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-block-sm);
  padding: var(--space-6);
}

.card--lg { border-radius: var(--radius-xl); padding: 30px; }
.card--cobalt-shadow { box-shadow: var(--shadow-block-cobalt); }
.card--volt-shadow { box-shadow: var(--shadow-block-volt); }
.card--volt { background: var(--volt-500); }
.card--ink { background: var(--ink-900); color: var(--text-inverse); }
.card--ink h3, .card--ink h4 { color: inherit; }

/* Soft ambient shadows are for genuinely floating surfaces only. The two
   shadow systems never appear on the same element. */
.card--floating { box-shadow: var(--shadow-md); border-color: var(--border-subtle); }

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Four across needs 75rem, not 64rem. At 1024px, a laptop, four columns left
   each offer card about 210px wide: every heading wrapped, the price block
   broke up, and the CTA at the bottom was wider than its own card. Between
   64rem and 75rem the grid--2 rule above applies and the cards get room. */
@media (min-width: 75rem) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Icon chip, 46px rounded square, 2px border --------------------------- */

.icon-chip {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-regular) solid var(--ink-900);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--ink-900);
}

.icon-chip--cobalt { background: var(--cobalt-500); color: #fff; }
.icon-chip--volt { background: var(--volt-500); color: var(--ink-900); }
.icon-chip--ink { background: var(--ink-900); color: #fff; }

/* --- Badge / pill --------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border: var(--border-regular) solid var(--ink-900);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--ink-900);
}

.badge--volt { background: var(--volt-500); }
.badge--cobalt { background: var(--cobalt-500); color: #fff; }

/* --- Tables (parse cleanly for answer engines) ---------------------------- */

.table-wrap {
  overflow-x: auto;
  border: var(--border-regular) solid var(--ink-900);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

th, td {
  text-align: left;
  padding: var(--space-4);
  border-bottom: var(--border-hairline) solid var(--neutral-200);
  vertical-align: top;
}

tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

thead th {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-600);
  border-bottom: var(--border-regular) solid var(--ink-900);
}

td.num, th.num { font-family: var(--font-mono); }

/* --- Quote ---------------------------------------------------------------- */

blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-display-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

blockquote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

/* --- FAQ disclosure, <details>, so it works with zero JavaScript ---------- */

.faq-list { border-top: var(--border-regular) solid var(--ink-900); }

.faq-item { border-bottom: var(--border-regular) solid var(--ink-900); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.faq-item summary::-webkit-details-marker { display: none; }

/* The circular +/× indicator, filled Volt when open. */
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1;
  border: var(--border-regular) solid var(--ink-900);
  border-radius: 50%;
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out);
}

.faq-item[open] summary::after {
  content: '\00d7';
  background: var(--volt-500);
}

.faq-answer {
  padding: 0 4px 22px;
  max-width: 62ch;
  color: var(--text-secondary);
  line-height: var(--leading-body);
}

.faq-answer > * + * { margin-top: var(--space-5); }

/* --- Forms ---------------------------------------------------------------- */

.field { display: grid; gap: var(--space-2); }

.field label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-600);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--ink-900);
  background: var(--bg-surface);
  border: var(--border-regular) solid var(--ink-900);
  border-radius: var(--radius-md);
}

.field textarea { resize: vertical; min-height: 120px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--neutral-400); }

/* --- Placeholder slots (visible only while content is outstanding) -------- */

.slot {
  display: grid;
  place-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-6);
  background: var(--neutral-50);
  border: var(--border-regular) dashed var(--neutral-400);
  border-radius: var(--radius-lg);
  color: var(--neutral-600);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}


  /* Transparency + blur is used in exactly one place on this site: here. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(250 250 246 / 0.82);
    backdrop-filter: blur(12px);
    border-bottom: var(--border-regular) solid var(--ink-900);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 66px;
  }

  /* On narrow phones the header CTA collapses to the glyph alone so the
     wordmark is never clipped. The action stays reachable either way. */
  @media (max-width: 30rem) {
    .site-header__cta .btn {
      width: 40px;
      padding: 0;
      gap: 0;
    }
    .site-header__cta .btn span { display: none; }
  }

  .site-nav {
    display: none;
    gap: var(--space-2);
  }

  .site-nav a {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--ink-900);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    transition: background var(--dur-base) var(--ease-out);
  }

  .site-nav a:hover { background: var(--neutral-100); text-decoration: none; }

  .site-nav a[aria-current='page'] {
    background: var(--ink-900);
    color: #fff;
  }

  /* The menu trigger lives in the header row itself, at the right-hand end
     next to the WhatsApp button, as a hamburger. The panel it opens is
     positioned against the header rather than flowing inside the row.
     On mobile the CTA takes the auto margin so the logo stays hard left and
     the CTA and the hamburger stay grouped hard right. */
  @media (max-width: 57.99rem) {
    .site-header__cta { margin-left: auto; }
  }

  /* Pulls the gap between the CTA and the hamburger back from the header's
     own gap to something tighter, since the two read as one control group. */
  .mobile-nav { margin-left: calc(var(--space-2) - var(--space-4)); }

  .mobile-nav summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    /* The box overhangs the gutter by 10px so the icon itself lines up with
       the right edge of the content column while the tap target stays 44px. */
    margin-right: -10px;
    cursor: pointer;
    color: var(--ink-900);
    border-radius: var(--radius-md);
    transition: background var(--dur-base) var(--ease-out);
  }

  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav .mobile-nav__close { display: none; }
  .mobile-nav[open] .mobile-nav__open { display: none; }
  .mobile-nav[open] .mobile-nav__close { display: inline-flex; }
  .mobile-nav[open] summary { background: var(--neutral-100); }
  .mobile-nav summary span { display: inline-flex; }

  .mobile-nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--gutter) var(--space-4);
    background: var(--bg-page);
    border-bottom: var(--border-regular) solid var(--ink-900);
  }

  .mobile-nav__list a {
    padding: var(--space-3) 0;
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
    color: var(--ink-900);
    text-decoration: none;
    border-top: var(--border-hairline) solid var(--neutral-200);
  }

  @media (min-width: 58rem) {
    .site-nav { display: flex; }
    .mobile-nav { display: none; }
  }


  .site-footer {
    background: var(--ink-900);
    color: rgb(255 255 255 / 0.72);
    padding-top: var(--space-12);
    font-size: var(--text-sm);
    border-top: var(--border-regular) solid var(--ink-900);
  }

  .site-footer a { color: inherit; text-decoration: none; }
  .site-footer a:hover { color: var(--volt-500); text-decoration: none; }

  .site-footer__inner {
    display: grid;
    gap: var(--space-8);
    padding-bottom: var(--space-10);
  }

  .site-footer__about { display: grid; gap: var(--space-5); align-content: start; }

  .site-footer__desc {
    max-width: 44ch;
    line-height: var(--leading-body);
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--space-6);
  }

  .site-footer__h {
    color: var(--volt-500);
    margin-bottom: var(--space-3);
  }

  .site-footer ul { list-style: none; padding: 0; }
  .site-footer li + li { margin-top: var(--space-2); }
  .site-footer__nap { font-style: normal; }

  .site-footer__base {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-5);
    border-top: var(--border-hairline) solid rgb(255 255 255 / 0.16);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.45);
  }

  @media (min-width: 58rem) {
    .site-footer__inner { grid-template-columns: 1fr 1.5fr; gap: var(--space-12); }
  }


  .offer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    scroll-margin-top: 6rem;
  }

  .offer--featured {
    background: var(--volt-500);
    box-shadow: 8px 8px 0 var(--cobalt-500);
  }

  .offer__flag {
    position: absolute;
    top: -13px;
    left: 28px;
  }

  .offer__head { display: grid; gap: var(--space-3); }

  .offer__name { font-size: var(--text-h4); }

  .offer__for {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--neutral-600);
  }

  .offer--featured .offer__for,
  .offer--featured .offer__definition,
  .offer--featured .offer__next { color: rgb(11 11 15 / 0.72); }

  .offer__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .offer__price .num {
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink-900);
  }

  /* An unfilled price is a label, not a number, don't shout it. */
  .offer__price--unset .num {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    color: var(--neutral-600);
  }

  .offer__price .offer__anchor {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    line-height: 1;
    color: var(--neutral-400);
    text-decoration-thickness: 2px;
  }

  .offer__qualifier {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--neutral-500);
  }

  .offer--featured .offer__qualifier { color: rgb(11 11 15 / 0.65); }

  .offer__definition,
  .offer__next {
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--neutral-600);
  }

  .offer__duration {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cobalt-600);
    padding-top: var(--space-3);
    border-top: var(--border-regular) solid var(--ink-900);
  }

  .offer--featured .offer__duration { color: var(--ink-900); }

  .offer__includes {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 11px;
    font-size: var(--text-sm);
  }

  .offer__includes li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: var(--leading-snug);
  }

  .offer__includes svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--cobalt-600);
  }

  .offer--featured .offer__includes svg { color: var(--ink-900); }

  .offer__cta {
    margin-top: auto;
    padding-top: var(--space-2);
    display: grid;
    gap: var(--space-2);
  }

  /* The Leak Check used to be the primary button on the Meta ads, Google ads
     and lead systems cards, which made all three read as a route to the ₹499
     rather than as services. It is now one quiet line under the whole grid,
     said once: findable by anyone who needs it, ignorable by anyone who
     already knows what they want. Per card it appeared three times in a row,
     which is not subtle, it is nagging. */
  .grid__note {
    margin-top: var(--space-6);
    max-width: 62ch;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--neutral-500);
    text-wrap: pretty;
  }

  .grid__note a { color: var(--cobalt-600); text-underline-offset: 0.16em; }


  .result {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    scroll-margin-top: 6rem;
  }

  .result__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .result__headline { font-size: var(--text-h3); }
  .card--lg .result__headline { font-size: var(--text-display-md); }

  .result__client {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--neutral-500);
    margin-top: calc(var(--space-5) * -0.6);
  }

  .result__body { display: grid; gap: var(--space-5); margin: 0; }
  .result__body dt { margin-bottom: var(--space-2); }

  .result__body dd {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--neutral-600);
  }

  .result__body ul { padding-left: var(--space-5); }
  .result__body li + li { margin-top: var(--space-2); }

  .result__after { color: var(--cobalt-600); font-weight: var(--fw-bold); }

  .result__timeframe {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neutral-500);
  }

  .result__quote { font-size: var(--text-h3); }


  /* The heading inherits the summary's type so the DS disclosure look holds. */
  .faq-question {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
  }


  .cta { display: grid; gap: var(--space-4); }
  .cta .btn-row { margin-top: var(--space-3); }
  .cta .lede { max-width: 52ch; }

  /* The free community, offered at the end of every page. Deliberately a line
     of text rather than a third button: it should be findable by anyone who is
     not ready to talk, and never compete with the action above it. Every
     closing band is cobalt today, but the light-band colours are set first so
     this does not disappear if one is ever moved. */
  .cta__aside {
    margin-top: var(--space-5);
    max-width: 56ch;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--neutral-600);
  }

  .cta__aside a { color: inherit; text-underline-offset: 0.18em; }

  .band--cobalt .cta__aside,
  .band--ink .cta__aside { color: rgb(255 255 255 / 0.7); }

  .band--cobalt .cta__aside a,
  .band--ink .cta__aside a { color: #fff; }

  .band--cobalt .cta__aside a:hover,
  .band--ink .cta__aside a:hover { color: var(--volt-500); }


  .logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    min-width: 0;
  }

  .logo:hover { text-decoration: none; }

  .logo__mark {
    width: var(--logo-mark);
    height: var(--logo-mark);
    border-radius: calc(var(--logo-mark) * 0.22);
    flex-shrink: 0;
  }

  .logo__word {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    /* Shrinks on narrow phones so the header CTA never clips the wordmark. */
    font-size: clamp(15px, 4.4vw, var(--logo-size));
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ink-900);
    white-space: nowrap;
  }

  .logo--inverse .logo__word { color: #fff; }

  /* Below ~23rem the wordmark, the header CTA glyph and the menu button stop
     fitting on one line at full size. Step the whole lockup down together
     rather than let the wordmark run under the CTA. Must sit after the .logo
     rules above, not with the header block, or source order defeats it. */
  @media (max-width: 23rem) {
    .site-header__inner { gap: var(--space-2); }
    .logo { gap: 8px; }
    .logo__mark { width: 26px; height: 26px; border-radius: 6px; }
    .logo__word { font-size: clamp(11.5px, 3.9vw, var(--logo-size)); }
    .mobile-nav { margin-left: 0; }
    /* Matches the CTA glyph, which is already 40px at this width. */
    .mobile-nav summary { width: 40px; height: 40px; margin-right: -8px; }
  }


  .stats { background: var(--ink-900); color: #fff; }

  /* auto-fit rather than a fixed 4, so removing a stat never leaves a gap */
  .stats__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-6) var(--space-5);
    padding-block: var(--space-8);
  }

  .stat { display: grid; gap: var(--space-1); }

  .stat__value {
    font-family: var(--font-display);
    font-size: var(--text-display-md);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--volt-500);
  }

  .stat__label {
    font-size: var(--text-sm);
    color: rgb(255 255 255 / 0.78);
  }

  .stat__note {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.45);
  }



  .lm__inner { display: grid; gap: var(--space-8); align-items: start; }
  .lm__text { display: grid; gap: var(--space-4); }
  .lm__text .lede { color: rgb(255 255 255 / 0.82); max-width: 48ch; }

  .lm__bullets {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
  }

  .lm__bullets li { display: flex; gap: var(--space-3); align-items: flex-start; }
  .lm__bullets svg { flex-shrink: 0; margin-top: 3px; color: var(--volt-500); }

  .lm__capture { color: var(--ink-900); }
  .lm__form { display: grid; gap: var(--space-4); }
  .lm__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h4); }

  .lm__small {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--neutral-500);
  }

  .lm__todo { color: var(--danger-500); }

  @media (min-width: 58rem) {
    .lm__inner { grid-template-columns: 1.25fr 1fr; gap: var(--space-10); }
  }


  .quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    height: 100%;
  }

  .quote__sector { align-self: flex-start; }

  .quote__text {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    /* Sized for a 3-up grid, h3 is too tall once three of these sit side by side. */
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--ink-900);
    margin: 0;
  }

  .quote__text p::before { content: '\201C'; }
  .quote__text p::after { content: '\201D'; }

  .quote__who {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
  }

  /* People get a round crop and a 2px ink border, per the design system. */
  .quote__photo {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: var(--border-regular) solid var(--ink-900);
    object-fit: cover;
    flex-shrink: 0;
  }

  /* Default avatar is a Volt initial chip. */
  .quote__initial {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: var(--border-regular) solid var(--ink-900);
    background: var(--volt-500);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--text-lg);
    color: var(--ink-900);
  }

  .quote__meta { display: grid; gap: 2px; font-size: var(--text-sm); }
  .quote__meta strong { font-family: var(--font-display); font-size: var(--text-md); }
  .quote__meta span { color: var(--neutral-500); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }


  /* --- Trustpilot reviews, reproduced verbatim ---------------------------
     Deliberately not styled to imitate Trustpilot's own card. This is our
     page quoting their platform, not a fake embed. The only borrowed element
     is the star colour, because a green square star is the thing a reader
     recognises, and recolouring it would make the source ambiguous. */

  .tp-list { margin-top: var(--space-8); align-items: stretch; }

  .tp {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    margin: 0;
  }

  .tp__top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .tp__stars { display: inline-flex; gap: 2px; flex-shrink: 0; }

  .tp__badge {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--neutral-500);
  }

  .tp__body { margin: 0; }

  .tp__title {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    color: var(--ink-900);
    margin-bottom: var(--space-2);
  }

  .tp__body p:last-child { color: var(--neutral-600); font-size: var(--text-sm); }

  .tp__who {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: var(--border-hairline) solid rgb(11 11 15 / 0.12);
  }

  /* Same initial chip as the client quotes, in cobalt so the two kinds of
     evidence on this page do not read as one undifferentiated wall. */
  .tp__initial {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: var(--border-regular) solid var(--ink-900);
    background: var(--cobalt-100, #e6ecff);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--text-sm);
    color: var(--ink-900);
  }

  .tp__meta { display: grid; gap: 2px; font-size: var(--text-sm); min-width: 0; }
  .tp__meta strong { font-family: var(--font-display); font-size: var(--text-md); }
  .tp__meta span { color: var(--neutral-500); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }


  .cal iframe {
    width: 100%;
    min-height: 660px;
    border: var(--border-regular) solid var(--ink-900);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-block-sm);
    background: var(--bg-surface);
  }

  .cal__fallback {
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--neutral-500);
  }


  .ty { padding-block: clamp(4rem, 12vw, 8rem); }
  .ty h1 { font-size: var(--text-display-lg); }
  .ty__inner { display: grid; gap: var(--space-5); }
  .ty__body { max-width: var(--container-prose); }


  .hero { padding-block: clamp(3.5rem, 10vw, 8rem) var(--section-y); }
  .hero__inner { display: grid; gap: var(--space-5); }
  .hero h1 { max-width: 16ch; }
  .hero .lede { max-width: 52ch; font-size: var(--text-lg); }
  .hero__cta { margin-top: var(--space-2); }

  .hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    list-style: none;
    padding: 0;
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-500);
  }

  .hero__meta .num { color: var(--ink-900); }

  .sect__h { margin-bottom: var(--space-4); }

  .sect__more { margin-top: var(--space-8); }

  .sect__more a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
    color: var(--cobalt-600);
    text-decoration: none;
  }

  .sect__more a:hover { text-decoration: underline; }

  /* --- Problem / funnel --- */
  .problem { display: grid; gap: var(--space-8); }
  .problem__text { display: grid; gap: var(--space-4); }
  .problem__text .muted { max-width: 56ch; }

  .funnel {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0;
    align-content: start;
    border: var(--border-regular) solid var(--ink-900);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-block-sm);
    background: var(--bg-surface);
    overflow: hidden;
  }

  .funnel li {
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-5);
  }

  .funnel li + li { border-top: var(--border-regular) solid var(--ink-900); }

  .funnel__step { color: var(--cobalt-500); font-size: var(--text-lg); }
  .funnel strong { display: block; font-family: var(--font-display); font-size: var(--text-h4); }
  .funnel span { color: var(--neutral-600); font-size: var(--text-sm); }

  .services, .results, .quotes { margin-top: var(--space-8); align-items: stretch; }
  .services { row-gap: var(--space-8); }

  /* --- Leak Check band --- */
  .leak { display: grid; gap: var(--space-8); align-items: start; }
  .leak__text { display: grid; gap: var(--space-5); }
  .leak__lede { color: rgb(11 11 15 / 0.72); }

  .leak__list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-2);
  }

  .leak__list li { display: flex; gap: var(--space-3); align-items: flex-start; }
  .leak__list svg { flex-shrink: 0; margin-top: 3px; }

  .leak__aside { display: grid; gap: var(--space-4); }

  .leak__price { display: flex; align-items: baseline; gap: var(--space-3); }
  .leak__price > .num { font-family: var(--font-display); font-size: 56px; line-height: 1; letter-spacing: -0.03em; }
  .leak__price .leak__anchor { font-family: var(--font-mono); font-size: var(--text-lg); line-height: 1; color: var(--neutral-400); text-decoration-thickness: 2px; }
  .leak__note { font-size: var(--text-sm); color: var(--neutral-600); }

  .leak__guarantee {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
  }

  .leak__guarantee svg { flex-shrink: 0; margin-top: 2px; color: var(--cobalt-600); }

  /* --- Verticals --- */
  .verticals {
    list-style: none;
    padding: 0;
    margin-top: var(--space-6);
    border-top: var(--border-regular) solid var(--ink-900);
  }

  .vertical {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-5);
    border-bottom: var(--border-hairline) solid var(--neutral-300);
  }

  .vertical h3 { font-size: var(--text-h4); }
  .vertical p { color: var(--neutral-600); max-width: 60ch; }

  /* --- Community --- */
  .community { display: grid; gap: var(--space-8); align-items: start; }
  .community__text { display: grid; gap: var(--space-4); }

  .community__cost {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--volt-500);
  }

  .community__list {
    list-style: none;
    padding: var(--space-6);
    margin: 0;
    display: grid;
    gap: var(--space-3);
    border: var(--border-regular) solid rgb(255 255 255 / 0.22);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
  }

  .community__list li { display: flex; gap: var(--space-3); align-items: flex-start; }
  .community__list svg { flex-shrink: 0; margin-top: 3px; color: var(--volt-500); }

  @media (min-width: 58rem) {
    .problem { grid-template-columns: 1.05fr 1fr; gap: var(--space-12); align-items: start; }
    .leak { grid-template-columns: 1.4fr 1fr; gap: var(--space-10); }
    .community { grid-template-columns: 1.1fr 1fr; gap: var(--space-10); }
    .vertical { grid-template-columns: 18rem 1fr; gap: var(--space-5); align-items: baseline; }
  }


  .services-grid { align-items: stretch; row-gap: var(--space-8); }

  .note {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-top: var(--space-5);
    max-width: 62ch;
    font-size: var(--text-sm);
    color: var(--neutral-600);
  }

  .note svg { flex-shrink: 0; margin-top: 2px; color: var(--cobalt-600); }

  .nots {
    list-style: none;
    padding: 0;
    margin-top: var(--space-6);
    display: grid;
    gap: 0;
  }

  .nots li {
    padding-block: var(--space-5);
    border-top: var(--border-hairline) solid rgb(255 255 255 / 0.18);
    color: rgb(255 255 255 / 0.72);
    max-width: 62ch;
  }

  .nots li:last-child { border-bottom: var(--border-hairline) solid rgb(255 255 255 / 0.18); }

  .nots strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-h4);
    color: #fff;
    margin-bottom: var(--space-2);
  }


  .lc-hero { display: grid; gap: var(--space-8); align-items: start; }
  .lc-hero__text { display: grid; gap: var(--space-4); }
  .lc-hero__lede { color: rgb(11 11 15 / 0.74); max-width: 56ch; }
  .lc-hero .btn-row { margin-top: var(--space-2); }

  .lc-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    list-style: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(11 11 15 / 0.62);
  }

  .lc-hero__meta .num { color: var(--ink-900); }

  .lc-price { display: grid; gap: var(--space-4); }
  /* The price and the struck-through anchor sit on one line while they fit and
     drop onto two when they do not, rather than pushing the card off screen. */
  .lc-price__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }

  .lc-price__now {
    font-family: var(--font-display);
    /* 64px was fixed, which is wider than a 320px phone once the anchor price
       sits beside it. Scales down on small screens, unchanged from 500px up. */
    font-size: clamp(44px, 13vw, 64px);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .lc-price__was {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    color: var(--neutral-400);
    text-decoration-thickness: 2px;
  }

  .lc-price__note { font-size: var(--text-sm); color: var(--neutral-600); }

  .lc-price__guarantee {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-size: var(--text-sm);
  }

  .lc-price__guarantee svg { flex-shrink: 0; margin-top: 2px; color: var(--cobalt-600); }

  .stages {
    list-style: none;
    padding: 0;
    margin-top: var(--space-8);
    display: grid;
    gap: var(--space-5);
  }

  .stage { display: grid; gap: var(--space-3); }
  .stage__n { font-size: var(--text-display-md); line-height: 1; color: var(--cobalt-500); }
  .stage h3 { font-size: var(--text-h4); }
  .stage p { font-size: var(--text-sm); color: var(--neutral-600); }

  .lc-get { display: grid; gap: var(--space-8); align-items: start; }

  .lc-list {
    list-style: none;
    padding: var(--space-6);
    margin: 0;
    display: grid;
    gap: var(--space-4);
    border: var(--border-regular) solid var(--ink-900);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-block-volt);
    background: var(--bg-surface);
  }

  .lc-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
  .lc-list svg { flex-shrink: 0; margin-top: 2px; color: var(--cobalt-600); }

  .steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin-top: var(--space-6);
    display: grid;
    gap: 0;
  }

  .steps li {
    counter-increment: step;
    position: relative;
    padding: var(--space-5) 0 var(--space-5) 3.25rem;
    border-top: var(--border-hairline) solid rgb(255 255 255 / 0.18);
    color: rgb(255 255 255 / 0.72);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    max-width: 64ch;
  }

  .steps li:last-child { border-bottom: var(--border-hairline) solid rgb(255 255 255 / 0.18); }

  .steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: var(--space-5);
    font-family: var(--font-mono);
    font-weight: var(--fw-bold);
    font-size: var(--text-lg);
    color: var(--volt-500);
  }

  .steps strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-h4);
    color: #fff;
    margin-bottom: var(--space-2);
  }

  @media (min-width: 46rem) {
    .stages { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 58rem) {
    .lc-hero { grid-template-columns: 1.35fr 1fr; gap: var(--space-10); }
    .lc-get { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  }


  .results { display: grid; gap: var(--space-8); }
  .quotes { margin-top: var(--space-8); align-items: stretch; }

  /* .caveat is gone. It styled the "we are new as an agency" warning box on
     Results, which was removed: the page was apologising for an absence
     instead of simply showing what it has. */

  .principles { display: grid; gap: var(--space-8); }
  .principles__head { display: grid; gap: var(--space-3); }

  .principles__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }

  .principles__list li {
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
    padding-block: var(--space-5);
    border-top: var(--border-hairline) solid rgb(255 255 255 / 0.18);
  }

  .principles__list li:last-child { border-bottom: var(--border-hairline) solid rgb(255 255 255 / 0.18); }

  .principles__n { color: var(--volt-500); font-size: var(--text-lg); flex-shrink: 0; }
  .principles__list h3 { font-size: var(--text-h4); color: #fff; margin-bottom: var(--space-2); }
  .principles__list p { color: rgb(255 255 255 / 0.7); font-size: var(--text-sm); max-width: 62ch; }

  .founder { display: grid; gap: var(--space-8); align-items: start; }
  .founder__text { display: grid; gap: var(--space-5); }
  .founder__text .muted { max-width: 58ch; }
  .founder__slot { aspect-ratio: 4 / 5; }

  .verticals {
    list-style: none;
    padding: 0;
    margin-top: var(--space-6);
    border-top: var(--border-regular) solid var(--ink-900);
  }

  .vertical {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-5);
    border-bottom: var(--border-hairline) solid var(--neutral-300);
  }

  .vertical h3 { font-size: var(--text-h4); }
  .vertical p { color: var(--neutral-600); max-width: 60ch; }

  .fit {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-top: var(--space-6);
    max-width: 62ch;
    font-size: var(--text-sm);
    color: var(--neutral-600);
  }

  .fit svg { flex-shrink: 0; margin-top: 2px; color: var(--cobalt-600); }

  .nap {
    font-style: normal;
    margin-top: var(--space-5);
    margin-bottom: var(--space-4);
    display: grid;
    gap: var(--space-1);
  }

  .nap strong { font-family: var(--font-display); font-size: var(--text-h4); }

  @media (min-width: 58rem) {
    .principles { grid-template-columns: 1fr 1.5fr; gap: var(--space-10); }
    .founder { grid-template-columns: 1.4fr 1fr; gap: var(--space-10); }
    .vertical { grid-template-columns: 18rem 1fr; gap: var(--space-5); align-items: baseline; }
  }


  .comm-hero { display: grid; gap: var(--space-8); align-items: start; }
  .comm-hero__text { display: grid; gap: var(--space-4); }
  .comm-hero .btn-row { margin-top: var(--space-2); }

  .comm-hero__cost {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--volt-500);
  }

  .comm-list {
    list-style: none;
    padding: var(--space-6);
    margin: 0;
    display: grid;
    gap: var(--space-4);
    border: var(--border-regular) solid var(--volt-500);
    border-radius: var(--radius-lg);
    font-size: var(--text-md);
  }

  .comm-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
  .comm-list svg { flex-shrink: 0; margin-top: 3px; color: var(--volt-500); }

  @media (min-width: 58rem) {
    .comm-hero { grid-template-columns: 1.15fr 1fr; gap: var(--space-10); }
  }


  .sections {
    list-style: none;
    counter-reset: sec;
    padding: 0;
    margin-top: var(--space-6);
    display: grid;
    gap: 0;
    border-top: var(--border-regular) solid var(--ink-900);
  }

  .sections li {
    counter-increment: sec;
    position: relative;
    padding: var(--space-5) 0 var(--space-5) 3.25rem;
    border-bottom: var(--border-hairline) solid var(--neutral-300);
  }

  .sections li::before {
    content: counter(sec, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: var(--space-5);
    font-family: var(--font-mono);
    font-weight: var(--fw-bold);
    font-size: var(--text-lg);
    color: var(--cobalt-500);
  }

  .sections h3 { font-size: var(--text-h4); margin-bottom: var(--space-2); }
  .sections p { color: var(--neutral-600); font-size: var(--text-sm); max-width: 60ch; }

  .also {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-top: var(--space-8);
    padding: var(--space-5);
    border: var(--border-regular) solid var(--ink-900);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-block-sm);
    background: var(--bg-page);
    font-size: var(--text-sm);
    max-width: 62ch;
  }

  .also svg { flex-shrink: 0; margin-top: 2px; color: var(--cobalt-600); }


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

  /* neutral-300 measured 1.64:1 against paper. The 01 was readable only because
     it sits on the volt band; adding the phone channel put 02 and 03 on light
     surfaces and they nearly vanished. These numbers order the channels, so
     they are content, not decoration. */
  .channel__n {
    font-family: var(--font-display);
    font-size: var(--text-display-md);
    line-height: 1;
    color: var(--neutral-500);
  }

  .band--volt .channel__n { color: rgb(11 11 15 / 0.28); }

  .channel__body { display: grid; gap: var(--space-4); }
  .channel__body p { max-width: 58ch; }
  .channel .btn-row { margin-top: var(--space-3); }

  .channel__list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--neutral-600);
  }

  .channel__list li { display: flex; gap: var(--space-3); align-items: flex-start; }
  .channel__list svg { flex-shrink: 0; margin-top: 2px; color: var(--cobalt-600); }

  .form { display: grid; gap: var(--space-5); }
  .form button { justify-self: start; }

  .form__small {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--neutral-500);
  }

  .details { display: grid; gap: var(--space-8); }
  .details__community { display: grid; gap: var(--space-4); align-content: start; }

  /* These are the .details band's rules, and the band is ink. They were written
     unscoped, so `.nap strong { color: #fff }` also hit the Where we are block
     on About, which sits on paper: white on near-white, 1.05:1, invisible.
     Scoped to .details so a dark-context rule stays in its dark context.

     The address links were inheriting the default cobalt, which is 2.7:1 on
     ink. White reads, and hover keeps the volt accent. */
  .nap { font-style: normal; display: grid; gap: var(--space-1); margin-top: var(--space-4); }
  .details .nap strong { color: #fff; }
  .details .nap a { color: #fff; }
  .details .nap a:hover { color: var(--volt-500); }

  @media (min-width: 58rem) {
    .details { grid-template-columns: 1fr 1.3fr; gap: var(--space-10); }
  }


  .nf { padding-block: clamp(4rem, 12vw, 8rem); }
  .nf__inner { display: grid; gap: var(--space-5); }
  .nf__links { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
  .nf__links a { font-size: var(--text-lg); }


/* --- Leak patterns (results, home) --------------------------------------- */

.patterns { align-items: stretch; }

.pattern {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.pattern__n {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--cobalt-600);
  letter-spacing: 0.06em;
}

.pattern__name { font-size: var(--text-h4); }
.pattern__what { color: var(--neutral-600); }

.pattern__cost {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-regular) solid var(--volt-500);
  font-size: var(--text-sm);
}

.pattern__cost strong { font-family: var(--font-display); }

/* --- Founder photo ------------------------------------------------------- */

.founder__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--border-regular) solid var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-block-sm);
  background: var(--neutral-50);
}

@media (min-width: 64rem) {
  .founder__photo { position: sticky; top: var(--space-10); }
}

.founder__cap {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--neutral-500);
}

/* --- Process page -------------------------------------------------------- */

.flow { display: grid; gap: var(--space-6); }

.flow-step { display: grid; gap: var(--space-4); align-content: start; }

.flow-step__head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.flow-step__n { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--cobalt-600); flex-shrink: 0; }
.flow-step__name { font-size: var(--text-h3); }
.flow-step__when {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-left: auto;
}
.flow-step__what { color: var(--neutral-600); max-width: 68ch; }

.flow-step__split { display: grid; gap: var(--space-5); }
.flow-step__col h4 { font-size: var(--text-md); margin-bottom: var(--space-3); }
.flow-step__items { list-style: none; padding: 0; display: grid; gap: var(--space-2); color: var(--neutral-600); }
.flow-step__items li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); }
.flow-step__items svg { flex-shrink: 0; margin-top: 3px; color: var(--cobalt-600); }

@media (min-width: 46rem) {
  .flow-step__split { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

/* --- Sticky WhatsApp CTA ------------------------------------------------- */

.sticky-cta {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--volt-500);
  color: var(--ink-900);
  border: var(--border-regular) solid var(--ink-900);
  border-radius: 999px;
  box-shadow: var(--shadow-block-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  max-width: calc(100vw - var(--space-8));
}

.sticky-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sticky-cta:hover { background: var(--volt-600); text-decoration: none; }
.sticky-cta svg { flex-shrink: 0; }
.sticky-cta__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sticky-cta__x {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-left: var(--space-1);
  margin-right: calc(var(--space-2) * -1);
  border: 0;
  border-radius: 999px;
  background: rgb(11 11 15 / 0.1);
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.sticky-cta__x:hover { background: rgb(11 11 15 / 0.2); }

@media (max-width: 45.99rem) {
  .sticky-cta__label { max-width: 46vw; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}


/* --- Reading rhythm ------------------------------------------------------
   Headings and paragraphs sat flush against each other wherever a section
   used a plain .wrap rather than a grid stack. These adjacencies are scoped
   to direct children of .wrap so they never double up on a container that
   is already spacing its children with a grid gap. */

:where(.wrap) > .tgb-eyebrow,
:where(.wrap) > .tgb-eyebrow + * { margin-top: 0; }
:where(.wrap) > .tgb-eyebrow { margin-bottom: var(--space-4); }

:where(.wrap) > h1 + .lede,
:where(.wrap) > h2 + .lede,
:where(.wrap) > h3 + .lede,
:where(.wrap) > h1 + p,
:where(.wrap) > h2 + p,
:where(.wrap) > h3 + p,
:where(.wrap) > h4 + p { margin-top: var(--space-5); }

:where(.wrap) > p + p,
:where(.wrap) > .lede + p,
:where(.wrap) > p + .lede { margin-top: var(--space-5); }

:where(.wrap) > .lede + .grid,
:where(.wrap) > .lede + .steps,
:where(.wrap) > .lede + .flow,
:where(.wrap) > .lede + .verticals,
:where(.wrap) > .lede + .quotes,
:where(.wrap) > p + .grid,
:where(.wrap) > h2 + .grid { margin-top: var(--space-8); }

:where(.wrap) > .table-wrap,
:where(.wrap) > .note,
:where(.wrap) > .caveat { margin-top: var(--space-6); }

/* Body copy inside cards and disclosures reads better a touch looser than
   the display-weighted defaults the design system sets. */

.card p,
.faq-answer p,
.flow-step__what,
.pattern__what { line-height: var(--leading-body); }

.faq-answer { line-height: var(--leading-relaxed); }

/* Bulleted lists were set on a 8px gap, which is tight once an item wraps
   onto a second line. */

.channel__list,
.flow-step__items,
.offer__includes,
.lc-get__list,
.leak__list { row-gap: var(--space-3); }

.channel__list li,
.flow-step__items li,
.offer__includes li,
.leak__list li { line-height: var(--leading-snug); }

/* Measure. Long lines are the other half of "hard to read". */

.pattern__what,
.pattern__cost,
.flow-step__what,
.faq-answer p { max-width: 72ch; }

/* Chrome is not reading copy: keep the header on the tighter leading. */
.site-nav, .site-nav a, .mobile-nav, .site-header__cta { line-height: var(--leading-snug); }


/* The rhythm rules above must not stack on a .wrap that is itself a grid or
   flex layout with its own gap, or the spacing doubles. Reset those. */

.wrap.comm-hero > *,
.wrap.community > *,
.wrap.details > *,
.wrap.founder > *,
.wrap.hero__inner > *,
.wrap.lc-get > *,
.wrap.lc-hero > *,
.wrap.leak > *,
.wrap.lm__inner > *,
.wrap.principles > *,
.wrap.problem > *,
.wrap.site-footer__base > *,
.wrap.site-footer__inner > *,
.wrap.site-header__inner > *,
.wrap.stats__inner > *,
.wrap.channel > *,
.wrap.cta > *,
.wrap.nf__inner > *,
.wrap.ty__inner > * { margin-top: 0; }

/* .prose is the legal-page column: it wants the rhythm, not the reset. */
.wrap.prose > h2,
.wrap.prose > h3 { margin-top: var(--space-8); }
.wrap.prose > h2:first-child,
.wrap.prose > h3:first-child { margin-top: 0; }