/* ==========================================================================
   charlesdelaportbarre.com — single stylesheet
   Hand-written. No build step, no framework, no web fonts.
   Mobile-first: the 390 layout is the base, the 1440 layout is the
   enhancement above the single 900px breakpoint.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour — charte graphique, thème CLAIR par défaut */
  --bg:          #F9F6F1;   /* blanc cassé (jamais de blanc pur) */
  --band:        #EFE7DE;   /* beige clair — fond d'alternance */
  --head:        #241E1B;   /* encre — texte, chiffres, citations */
  --body:        #4A403A;   /* corps */
  --muted:       #767676;   /* gris légende */
  --faint:       #8A8178;
  --line:        #DADADA;   /* filet 1px */
  --brand:       #3B5B45;   /* sous-bois — marque, titres, boutons */
  --brand-hover: #2F4A38;
  --brand-fill:  rgba(59,91,69,0.08);
  --gold:        #8C6B2F;   /* or éteint — 2e accent */
  --gold-hover:  #705421;
  --gold-tint:   rgba(140,107,47,0.10);
  --gold-fill:   rgba(140,107,47,0.12);
  --green:       #3B5B45;

  /* Rôles thémables : en CLAIR ils suivent la charte (titres + CTA verts) ;
     en SOMBRE ils reprennent le principe d'origine (titres blancs, CTA or). */
  --title:    var(--brand);   /* couleur des titres */
  --cta:      var(--brand);   /* fond du bouton principal / trait du bouton outline */
  --cta-hover:var(--brand-hover);
  --cta-ink:  var(--bg);      /* texte sur le bouton plein */
  --cta-fill: var(--brand-fill); /* fond de survol du bouton outline */

  /* Fonts */
  --serif: 'EB Garamond', Garamond, 'Garamond MT', Georgia, serif;
  --sans:  'Franklin Gothic Book', 'Libre Franklin', Calibri, Arial, sans-serif;

  /* Chart palette (4 segments), libellés foncés lisibles, neutres */
  --c-new:       #A8C69A;
  --c-retained:  #D3A85B;
  --c-react:     #8CA6C2;
  --c-lost:      #DB8E74;
  --lab-new:     #4D713C;
  --lab-ret:     #86611E;
  --lab-react:   #486B91;
  --lab-lost:    #AF4825;
  --c-yearbar:   #C7BDAE;
  --chart-ink:   #241E1B;
  --chart-mut:   #767676;

  /* Type scale — mobile */
  --fs-h1:        30px;
  --fs-h2:        23px;
  --fs-h3:        20px;
  --fs-body:      16.5px;
  --fs-col:       16.5px;  /* body inside multi-column / boxed blocks */
  --fs-small:     13px;
  --fs-eyebrow:   13px;
  --fs-statement: 23px;
  --lh-statement: 1.4;
  --fs-heroname:  33px;

  /* Spacing — mobile */
  --pad-side:   24px;
  --sec:        96px;   /* between sections */
  --chart-gap:  48px;   /* above / below charts */
  --head-gap:   20px;   /* heading to its paragraph */
  --para-gap:   18px;   /* between paragraphs */
  --band-pad:   64px;   /* lifted band vertical padding */
  --page-top:   56px;
  --header-pad: 14px;
  --footer-pad: 48px;

  /* Charts */
  --waffle-sq:  28px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 900px) {
  :root {
    --fs-h1:        52px;
    --fs-h2:        30px;
    --fs-h3:        23px;
    --fs-body:      18px;
    --fs-col:       16px;
    --fs-small:     14px;
    --fs-eyebrow:   14px;
    --fs-statement: 30px;
    --lh-statement: 1.35;
    --fs-heroname:  36px;

    --pad-side:   120px;
    --sec:        160px;
    --chart-gap:  64px;
    --head-gap:   24px;
    --para-gap:   20px;
    --band-pad:   96px;
    --page-top:   120px;
    --header-pad: 18px;
    --footer-pad: 64px;

    --waffle-sq:  20px;
  }
}

/* --------------------------------------------------------------------------
   1b. Dark theme — derived from the charter (same fonts, sous-bois + or on a
   warm near-black). Three-part pattern: the OS setting applies only when the
   reader hasn't forced light; the [data-theme] rules let the manual toggle
   win either way. Components read tokens, so nothing else changes.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#17130F; --band:#221C15; --head:#F9F6F1; --body:#D6CDBF;
    --muted:#9C9286; --faint:#8C8378; --line:#3A342C;
    --brand:#8FB99A; --brand-hover:#A6C9AF; --brand-fill:rgba(143,185,154,0.14);
    --gold:#8C6B2F; --gold-hover:#A2823E; --gold-tint:rgba(140,107,47,0.16); --gold-fill:rgba(140,107,47,0.20);
    --title:var(--head); --cta:var(--gold); --cta-hover:var(--gold-hover); --cta-ink:#F9F6F1; --cta-fill:var(--gold-fill);
    --c-yearbar:#4A423A; --chart-ink:#F2ECE3; --chart-mut:#9C9286;
    --lab-new:#A8C69A; --lab-ret:#D3A85B; --lab-react:#8CA6C2; --lab-lost:#DB8E74;
  }
}
:root[data-theme="dark"] {
  --bg:#17130F; --band:#221C15; --head:#F9F6F1; --body:#D6CDBF;
  --muted:#9C9286; --faint:#8C8378; --line:#3A342C;
  --brand:#8FB99A; --brand-hover:#A6C9AF; --brand-fill:rgba(143,185,154,0.14);
  --gold:#8C6B2F; --gold-hover:#A2823E; --gold-tint:rgba(140,107,47,0.16); --gold-fill:rgba(140,107,47,0.20);
  --title:var(--head); --cta:var(--gold); --cta-hover:var(--gold-hover); --cta-ink:#F9F6F1; --cta-fill:var(--gold-fill);
  --c-yearbar:#4A423A; --chart-ink:#F2ECE3; --chart-mut:#9C9286;
  --lab-new:#A8C69A; --lab-ret:#D3A85B; --lab-react:#8CA6C2; --lab-lost:#DB8E74;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* The waffle squares wait off-screen past all four edges before they fly
     in, which would otherwise extend the scrollable area sideways. Applied
     to the root, not to body or a wrapper: those are the cases that break
     `position: sticky` on the header. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  text-align: left;               /* everything left-aligned by default */
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* Element-level so the breakpoint toggles below (.chart-desktop /
   .chart-mobile) can override it — a `.chart svg` rule could not. */
svg { display: block; max-width: 100%; }

/* Global link colours so no browser-default blue can ever appear. */
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--gold); }

/* Filet de sécurité : le gras par défaut (700) n'est pas chargé (Garamond
   400/500, Franklin 400/500/600) et rendrait un faux-gras flou. On plafonne
   à 600 (poids réel). Les règles spécifiques (hero-cred, oneliner…) gagnent. */
strong, b { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: #0b0b0d;
  padding: 10px 16px;
  font-size: var(--fs-small);
  z-index: 100;
}
.skip-link:focus {
  left: 0;
  color: #0b0b0d;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1440px;
  /* left/right only — a `margin: 0 auto` shorthand here would out-specify
     the section rhythm below and flatten every gap. */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-side);
  padding-right: var(--pad-side);
}

.col      { max-width: 660px; }   /* narrow text column — all running prose */
.col-wide { max-width: 1000px; }  /* wide break-out — charts, matrix */
.col-h1   { max-width: 900px; }

main > section { margin-top: var(--sec); }
main > section:first-child { margin-top: 0; }

/* Lifted band: full viewport width, content stays on the grid. The
   hairline top/bottom edges sharpen the transition in and out of the band
   so it reads as a distinct panel, not just a faint change of shade. */
.band {
  background: var(--band);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-top: var(--band-pad);
  padding-bottom: var(--band-pad);
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--serif);   /* Garamond — titres */
  font-weight: normal;         /* jamais de gras en Garamond */
  color: var(--title);         /* sous-bois en clair, blanc cassé en sombre */
  margin: 0;
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: 1.15;
  text-wrap: balance;
}

h3, h4, .h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  text-wrap: balance;
}

p { margin: 0; }

/* Running prose */
.body {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--body);
  text-wrap: pretty;
  text-align: justify;
}

/* Body inside multi-column and boxed blocks */
.body-col {
  font-size: var(--fs-col);
  line-height: 1.65;
  color: var(--body);
  text-wrap: pretty;
  text-align: justify;
}

/* The problem statement — reads as a statement, not body copy */
.statement {
  font-family: var(--serif);
  font-size: var(--fs-statement);
  line-height: var(--lh-statement);
  color: var(--head);
  text-wrap: pretty;
}

.small {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--muted);
}

.tag {                 /* illustrative footnote */
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--faint);
  max-width: 660px;
}

.eyebrow {             /* gold step numerals */
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  color: var(--gold);
}

.label {               /* uppercase muted label */
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Vertical rhythm helpers */
.mt-head  { margin-top: var(--head-gap); }
.mt-para  { margin-top: var(--para-gap); }
.mt-chart { margin-top: var(--chart-gap); }
.mt-sec   { margin-top: var(--sec); }
.mt-cta   { margin-top: 24px; }        /* reassurance line under a CTA row */
.mt-lead  { margin-top: 24px; }        /* h1 to its opening paragraph */
.mt-eyebrow { margin-top: 12px; }      /* gold numeral to its heading */
.mt-step  { margin-top: 64px; }        /* between steps inside a band */
.mt-32    { margin-top: 32px; }

@media (min-width: 900px) {
  .mt-cta { margin-top: 32px; }
  .mt-lead { margin-top: 32px; }
  .mt-eyebrow { margin-top: 16px; }
  .mt-step { margin-top: 96px; }
}

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */

.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  background: var(--cta);        /* sous-bois en clair, or (charte) en sombre */
  color: var(--cta-ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 26px;
  transition: background 150ms linear;
}
.btn-gold:hover { background: var(--cta-hover); color: var(--cta-ink); }
.btn-gold img { width: 1.05em; height: 1.05em; flex: none; }

/* Header CTA. Below the breakpoint it is the WhatsApp glyph alone — the
   bar has to carry Menu, the name and the button, and the name is long.
   The label stays in the DOM for desktop; the link keeps its accessible
   name through aria-label, which display:none would otherwise remove. */
.btn-gold--sm {
  font-size: var(--fs-small);
  padding: 8px 11px;
}
.btn-gold--sm .btn-label { display: none; }

@media (min-width: 900px) {
  .btn-gold--sm .btn-label { display: inline; }
}

.btn-outline {
  display: inline-block;
  border: 1px solid var(--cta);
  color: var(--cta);
  background: transparent;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  padding: 13px 22px;
  transition: background 150ms linear;
}
.btn-outline:hover { background: var(--cta-fill); color: var(--cta); }

/* Cross-page navigation buttons (before the final CTA). */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
/* Homepage pair: equal-width, centred. */
.page-nav--pair { justify-content: center; }
.page-nav--pair .btn-outline {
  flex: 0 0 auto;
  min-width: 160px;
  text-align: center;
}

/* Email link beside the WhatsApp button */
.cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.cta-alt { font-size: var(--fs-body); color: var(--muted); }
.cta-alt a {
  color: var(--body);
  border-bottom: 1px solid var(--line);
}
.cta-alt a:hover { color: var(--head); }

.link-body {
  color: var(--body);
  border-bottom: 1px solid var(--line);
}
.link-body:hover { color: var(--head); }

@media (min-width: 900px) {
  .btn-gold { font-size: 18px; padding: 14px 28px; }
  .btn-gold--sm { font-size: 14px; padding: 9px 18px; }
  .btn-outline { padding: 12px 24px; }
  .cta-row { gap: 20px; margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: var(--header-pad);
  padding-bottom: var(--header-pad);
}

@media (min-width: 900px) {
  .header-inner { gap: 24px; }
}

.brand {
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--head);
  white-space: nowrap;
}
.brand:hover { color: var(--head); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  display: none;
  font-size: var(--fs-small);
  color: var(--body);
}
.nav-link:hover { color: var(--head); }
.nav-link.is-active {
  color: var(--head);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

/* Mobile menu — "Menu" + burger at the top left, panel below the bar.
   The button is revealed only when the script has run (.has-js), so a
   no-JS visitor sees the previous header rather than a dead control. */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  flex: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-small);
  color: var(--body);
  cursor: pointer;
}
.has-js .menu-toggle { display: inline-flex; }
.menu-toggle:hover { color: var(--head); }

.burger {
  position: relative;
  display: block;
  width: 18px;
  height: 11px;
  flex: none;
}
.burger span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 5px; }
.burger span:nth-child(3) { top: 10px; }

.mobile-menu { display: none; border-top: 1px solid var(--line); }
.mobile-menu[data-open="1"] { display: block; }
.mobile-menu .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.mobile-menu a {
  font-size: var(--fs-body);
  color: var(--body);
}
.mobile-menu a:hover,
.mobile-menu a.is-active { color: var(--head); }

/* Selectors matched to `.has-js .menu-toggle` above — a bare .menu-toggle
   here would lose on specificity and leave the button showing on desktop. */
@media (min-width: 900px) {
  .has-js .menu-toggle,
  .menu-toggle,
  .mobile-menu,
  .mobile-menu[data-open="1"] { display: none; }
}

/* Language toggle */
.lang {
  font-size: var(--fs-small);
  color: var(--muted);
  white-space: nowrap;
}
.lang a { color: var(--muted); }
.lang a:hover { color: var(--head); }
.lang-current { color: var(--head); }

.header-lang { display: none; }

/* Legal pages: no WhatsApp button, the toggle stays visible on mobile. */
.site-header--plain .header-lang { display: block; }

@media (min-width: 900px) {
  .nav-link { display: inline; }
  .header-lang { display: block; }
  .brand { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { padding-top: var(--page-top); }

.hero-id {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.hero-portrait {
  width: 112px;
  height: 112px;
  flex: none;
  object-fit: cover;
  object-position: center top;
  border-radius: 4px;
}
.hero-name {
  font-family: var(--serif);
  font-size: var(--fs-heroname);
  line-height: 1.15;
  color: var(--head);
}
.hero-tagline {
  margin-top: 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (min-width: 900px) {
  .hero-id { gap: 16px; margin-bottom: 40px; }
  .hero-tagline { margin-top: 8px; }
}

/* Pages that open on an h1 rather than the hero block */
.page-top { padding-top: var(--page-top); }

/* --------------------------------------------------------------------------
   8. Waffle chart
   -------------------------------------------------------------------------- */

.waffle-block {
  display: flex;
  flex-direction: column;
  gap: var(--chart-gap);
  margin-top: var(--chart-gap);
}

.waffle {
  display: grid;
  grid-template-columns: repeat(10, var(--waffle-sq));
  gap: 4px;
  flex: none;
}
.waffle i {
  display: block;
  width: var(--waffle-sq);
  height: var(--waffle-sq);
}
.waffle .sq-new  { background: var(--c-new); }
.waffle .sq-ret  { background: var(--c-retained); }
.waffle .sq-rea  { background: var(--c-react); }

/* Legend / key swatches, shared by the waffle and the sankey */
.chip-new   { background: var(--c-new); }
.chip-ret   { background: var(--c-retained); }
.chip-rea   { background: var(--c-react); }
.chip-lost  { background: var(--c-lost); }

.waffle-legend {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.legend-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.legend-chip {
  width: 11px;
  height: 11px;
  margin-top: 5px;
  flex: none;
}
.legend-name {
  font-size: var(--fs-body);
  color: var(--head);
}
.legend-def {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--muted);
}
.legend-note {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--faint);
}

@media (min-width: 900px) {
  .waffle-block { flex-direction: row; align-items: flex-start; gap: 72px; }
  .waffle-legend { gap: 28px; max-width: 340px; }
  .legend-item { gap: 14px; }
  .legend-chip { width: 12px; height: 12px; margin-top: 6px; }
  .legend-name { font-size: 18px; }
  .legend-note { max-width: 300px; }
}

/* --------------------------------------------------------------------------
   9. Charts (shared)
   -------------------------------------------------------------------------- */

.chart { margin-top: var(--chart-gap); }
.chart > svg,
.sankey > svg { width: 100%; height: auto; overflow: visible; }

.chart-desktop { display: none; }
@media (min-width: 900px) {
  .chart-desktop { display: block; }
  .chart-mobile  { display: none; }
}

/* Numbered method summary. Gold numerals, matching the step numerals
   elsewhere; the counter is the list's own marker, not hand-typed. */
.method-list {
  max-width: 660px;
  margin: var(--head-gap) 0 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.method-list > li {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--head);
  text-wrap: pretty;
}
.method-list li::marker { color: var(--gold); }

/* Bulleted list set inside running prose (method-page reads, credentials).
   Gold markers, to match the numbered method list. Stays in the 660 column. */
.prose-list {
  max-width: 660px;
  margin: 12px 0 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prose-list li {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--body);
  text-wrap: pretty;
}
.prose-list li::marker { color: var(--gold); }
/* Trailing line after such a list (e.g. "…and what each group is worth."). */
.list-tail { margin-top: 12px; }

/* Chart title — a step below an h2, subtly underlined. Sits above a chart. */
.chart-title {
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--head);
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--muted);
}

/* Staircase list with small gold arrows — each row indented a step more,
   for an "iterative" build (used in the engagement-cost list). */
.stair-list {
  list-style: none;
  max-width: 660px;
  margin: 16px 0 0;
  padding: 0;
}
.stair-list li {
  position: relative;
  padding-left: 1.7em;
  margin-top: 10px;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--body);
  text-wrap: pretty;
}
.stair-list li::before {
  content: "\2192";           /* → */
  position: absolute;
  left: 0;
  color: var(--gold);
}
.stair-list li:nth-child(1) { margin-left: 0; }
.stair-list li:nth-child(2) { margin-left: 1.4em; }
.stair-list li:nth-child(3) { margin-left: 2.8em; }
.stair-list li:nth-child(4) { margin-left: 4.2em; }

@media (min-width: 900px) {
  .stair-list li:nth-child(2) { margin-left: 2em; }
  .stair-list li:nth-child(3) { margin-left: 4em; }
  .stair-list li:nth-child(4) { margin-left: 6em; }
}

/* Small uppercase group label above a prose list (Academics / Wine). */
.group-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.group + .group { margin-top: 28px; }

/* Gloss under each step: smaller, italic, muted. */
.method-list .note {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.6;
  font-style: italic;
  color: var(--muted);
  text-wrap: pretty;
  text-align: justify;
}

/* Arrow sub-points under each numbered method step. */
.method-list .sub-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.method-list .sub-list > li {
  position: relative;
  padding-left: 1.6em;
  font-size: var(--fs-col);
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}
.method-list .sub-list > li::before {
  content: "\2192";           /* → */
  position: absolute;
  left: 0;
  color: var(--gold);
}
/* Finer dot bullets nested under a sub-point. */
.method-list .sub-dots {
  list-style: disc;
  margin: 6px 0 0;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.method-list .sub-dots li {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.method-list .sub-dots li::marker { color: var(--gold); }

/* --------------------------------------------------------------------------
   Homepage list refinements
   -------------------------------------------------------------------------- */

/* Hero: bulleted lead with an arrow-led conclusion. */
.hero-lead { margin-top: var(--head-gap); }
.hero-lead .prose-list { margin-top: 0; }

/* Arrow-led conclusion line after a bulleted list. */
.arrow-note {
  position: relative;
  max-width: 660px;
  margin-top: 14px;
  padding-left: 1.7em;
  color: var(--body);
  text-wrap: pretty;
}
.arrow-note::before {
  content: "\2192";           /* → */
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* Reflective question list under a chart — gold arrows, larger, in head white. */
.q-list {
  list-style: none;
  max-width: 660px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.q-list li {
  position: relative;
  padding-left: 1.7em;
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--head);
  text-wrap: pretty;
}
.q-list li::before {
  content: "\2192";           /* → */
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* Reduced footnote size (chart disclaimers). */
.legend-note--sm { font-size: 12px; }
.tag--sm { font-size: 12px; }
.mt-6  { margin-top: 6px; }
.mt-12 { margin-top: 12px; }

/* --------------------------------------------------------------------------
   10. Three-step ladder
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
  margin-top: var(--chart-gap);
  max-width: 1000px;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .step { gap: 16px; }
}

/* --------------------------------------------------------------------------
   11. Proof — Areni band and testimonials
   -------------------------------------------------------------------------- */

/* The whole proof chapter is framed in a light gold hairline, on page
   background, so it reads as a distinct "featured" section between the
   lifted method band above and the closing CTA below. This is a
   section-level frame, not per-testimonial cards (the design brief warns
   against those) — one border around the entire block. It breaks out of
   the narrow text column so the frame is a device in its own right. */
.proof {
  max-width: 764px;
  border: 1px solid rgba(176, 141, 87, 0.45);
  /* Breaks a little past the text column's side padding on mobile so the
     frame gains reading width instead of squeezing it. */
  margin: 0 -8px;
  padding: 36px 20px;
}
.proof > h2 { margin-bottom: 8px; }
/* Inside the frame the Areni block drops its own dark box — a box inside a
   frame nests too heavily — and is set off instead by a hairline above. */
.proof .areni {
  background: none;
  max-width: 100%;
  padding: 32px 0 0;
  margin-top: 32px;
  border-top: 1px solid var(--line);
}
.proof .testimonials { max-width: 100%; }

@media (min-width: 900px) {
  .proof { margin: 0; padding: 64px 56px; }
  .proof > h2 { margin-bottom: 12px; }
  .proof .areni { padding-top: 40px; margin-top: 40px; }
}

.areni {
  background: var(--band);
  max-width: 660px;
  padding: 32px 24px;
  margin-top: var(--chart-gap);
}
.areni-framing {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
  text-align: justify;
}
.areni-title {
  margin-top: 20px;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--gold);
}
.areni-desc { margin-top: 18px; }
.areni-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 900px) {
  .areni { padding: 48px; }
  .areni-framing { font-size: 16px; }
  .areni-title { margin-top: 24px; }
  .areni-desc { margin-top: 20px; }
  .areni-links { flex-direction: row; gap: 16px; margin-top: 32px; }
}

.testimonials {
  max-width: 660px;
  margin-top: 64px;
}
.testimonials figure,
.testimonials blockquote { margin: 0; }
.pull-quote {
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--head);
  text-wrap: pretty;
}
.testimonial-text { margin-top: 20px; }
.attribution {
  margin-top: 20px;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--gold);
}
.rule-gold {
  width: 160px;
  height: 0.75px;
  background: var(--gold);
  border: 0;
  margin: 48px 0;
}

@media (min-width: 900px) {
  .testimonials { margin-top: 96px; }
  .pull-quote { font-size: 23px; }
  .testimonial-text { margin-top: 24px; }
  .attribution { margin-top: 24px; }
  .rule-gold { margin: 64px 0; }
}

/* --------------------------------------------------------------------------
   12. Sankey
   -------------------------------------------------------------------------- */

.sankey { max-width: 1000px; margin-top: var(--chart-gap); }

.sankey-years {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.sankey-year {
  font-size: 14px;
  color: var(--head);
}
.sankey-year span { color: var(--muted); }
.sankey-years-caption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--faint);
}

/* Compact mode below the breakpoint: in-SVG text (year/count labels and the
   in-ribbon labels) is dropped — it would render at ~4–6px — and the years
   appear as HTML under the diagram instead. */
.sk-txt { display: none; }
@media (min-width: 900px) {
  .sk-txt { display: inline; }
  .sankey-compact-years { display: none; }
}

/* Mobile: sized to keep all four chips on one row (Lost/Perdus was wrapping). */
.sankey-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 28px;
}
.sankey-legend div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sankey-legend i {
  width: 9px;
  height: 9px;
  flex: none;
  display: block;
}
.sankey-legend span {
  font-size: 12.5px;
  color: var(--body);
}

@media (min-width: 900px) {
  .sankey-legend { gap: 16px 32px; margin-top: 32px; }
  .sankey-legend div { gap: 10px; }
  .sankey-legend i { width: 12px; height: 12px; }
  .sankey-legend span { font-size: var(--fs-col); }
}

.kpi {
  margin-top: 48px;
  max-width: 660px;
}
.kpi-title {
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--head);
  margin-bottom: 10px;
}
.kpi-question {
  font-size: var(--fs-col);
  line-height: 1.65;
  color: var(--muted);
}
.kpi-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}
.kpi-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kpi-label {
  font-size: var(--fs-col);
  color: var(--body);
  width: 92px;
  flex: none;
}
.kpi-track {
  flex: 1;
  height: 10px;
  background: var(--line);
}
.kpi-fill {
  width: 0;
  height: 100%;
  background: var(--gold);
}
.kpi-value {
  font-size: 18px;
  color: var(--head);
  width: 56px;
  text-align: right;
  flex: none;
}

@media (min-width: 900px) {
  .kpi-row { gap: 20px; }
  .kpi-label { width: 120px; }
  .kpi-value { width: 64px; }
}

/* --------------------------------------------------------------------------
   13. Engagement matrix
   -------------------------------------------------------------------------- */

.matrix-block { max-width: 1000px; margin-top: var(--chart-gap); }

.matrix {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.matrix-yaxis { display: none; }

.matrix-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
.matrix-cell {
  background: var(--bg);
  padding: 20px 16px;
}
.matrix-cell--tint { background: var(--gold-tint); }
.matrix-name {
  font-size: 18px;
  line-height: 1.25;
  color: var(--head);
}
.matrix-desc { display: none; }
.matrix-actions { display: none; }
.matrix-intent {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gold);
}

.matrix-axes {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.axis-y-inline { display: block; }

@media (min-width: 900px) {
  /* Up-arrow stacked above the vertical word, so the arrow is a plain,
     un-rotated glyph that reliably points up (an arrow placed inside the
     rotated writing-mode span renders sideways). */
  .matrix-yaxis {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: none;
  }
  .matrix-yaxis .axis-up {
    font-size: 14px;
    line-height: 1;
    color: var(--muted);
  }
  .matrix-yaxis .axis-word {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .matrix-cell { padding: 32px; }
  .matrix-name { font-size: 23px; }
  .matrix-desc {
    display: block;
    /* Reserve equal height so the italic intention line sits at the same
       level across all four quadrants, whatever the description length. */
    min-height: 3.3em;
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--body);
    text-wrap: pretty;
    text-align: justify;
  }
  .matrix-intent {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.65;
    font-style: italic;
  }
  /* Two actions as a short bulleted list (was a single dot-separated line). */
  .matrix-actions {
    display: block;
    margin: 12px 0 0;
    padding-left: 1.2em;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
  }
  .matrix-actions li { text-wrap: pretty; }
  .matrix-actions li::marker { color: var(--gold); }
  .matrix-axes { justify-content: flex-end; margin-top: 16px; }
  .axis-y-inline { display: none; }
}

/* --------------------------------------------------------------------------
   14. Photo blocks
   -------------------------------------------------------------------------- */

.photo-row {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.photo {
  border-radius: 4px;
  object-fit: cover;
  width: 100%;
}
.photo--formal { height: 240px; object-position: center 20%; }
.photo--informal { height: 280px; object-position: center 22%; }

@media (min-width: 900px) {
  .photo-row { flex-direction: row; gap: 64px; align-items: flex-start; }
  /* ~30% smaller than the original 300×400 — the source resolution reads
     better at this size. */
  .photo--formal { width: 210px; height: 280px; flex: none; }
  .photo--informal { width: 300px; height: 300px; flex: none; }
}

/* À propos opening: h1 → photo → paragraph on mobile; text column beside
   the photo on desktop. */
.about-open {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.about-open > h1        { order: 1; }
.about-open > img       { order: 2; }
.about-open > .about-copy { order: 3; }
/* Successive paragraphs inside the opening copy. */
.about-copy > p + p { margin-top: 18px; }

@media (min-width: 900px) {
  .about-open {
    grid-template-columns: minmax(0, 660px) 300px;
    column-gap: 64px;
    row-gap: 0;
    align-items: start;
  }
  .about-open > h1        { grid-column: 1; grid-row: 1; }
  .about-open > .about-copy { grid-column: 1; grid-row: 2; margin-top: 32px; }
  /* Photo aligns with the opening paragraph (row 2), not the title — the
     matching 32px top offset lines its top up with the first line of text. */
  .about-open > img       { grid-column: 2; grid-row: 2; align-self: start; margin-top: 32px; }
  .about-copy > p + p { margin-top: 20px; }
}

/* --------------------------------------------------------------------------
   15. Legal pages
   -------------------------------------------------------------------------- */

.legal-blocks {
  max-width: 660px;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* Legal sub-headings sit a step down from a section h2: 23px / 20px. */
.legal-blocks h2 { font-size: var(--fs-h3); line-height: 1.25; }
.legal-blocks .body { margin-top: 14px; }
.legal-address {
  margin-top: 14px;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--body);
}
.legal-prose {
  max-width: 660px;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: var(--para-gap);
}

@media (min-width: 900px) {
  .legal-blocks { margin-top: 64px; gap: 48px; }
  .legal-blocks .body { margin-top: 16px; }
  .legal-address { margin-top: 16px; }
  .legal-prose { margin-top: 64px; gap: 20px; }
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--sec);
  border-top: 1px solid var(--line);
  padding-top: var(--footer-pad);
  padding-bottom: var(--footer-pad);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-name { font-size: var(--fs-body); color: var(--head); }
.footer-tag {
  margin-top: 8px;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.footer-copy {
  font-size: var(--fs-small);
  color: var(--faint);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.footer-col {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.footer-col a {
  font-size: var(--fs-small);
  color: var(--body);
}
.footer-col a:hover { color: var(--head); }
.footer-col a.is-current { color: var(--head); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.only-desktop { display: none; }

/* Mobile only: the footer is centred (desktop keeps its left-aligned
   three-column row, restored in the min-width:900 block below). */
@media (max-width: 899px) {
  .footer-inner { align-items: center; text-align: center; }
  .footer-links { justify-content: center; }
  .footer-col { justify-content: center; }
  .footer-bottom { justify-content: center; gap: 28px; }
}

@media (min-width: 900px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
  }
  .footer-links { display: contents; }
  .footer-col {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
  }
  .footer-name { font-size: 18px; }
  .footer-copy--desktop { margin-top: 32px; }
  .footer-bottom { display: none; }
  .only-desktop { display: block; }
  .only-mobile { display: none; }
}

/* --------------------------------------------------------------------------
   17. Accessibility helpers
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  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;
}

/* ==========================================================================
   19. Charte graphique — theming overrides + day/night toggle
   These come last so they win over the earlier component colours; every
   value is a token, so both themes resolve automatically.
   ========================================================================== */

/* Serif where the charter asks for it (chiffres, citations, titres de chart). */
.col-h1, .h1, .chart-title, .why-title, .pull-quote, .tcard .pull,
.legend-name, .kpi-title, .matrix-name, .areni-title { font-family: var(--serif); }
.chart-title { color: var(--head); text-decoration-color: var(--gold); }
.why-title { font-weight: 400; color: var(--title); }

/* Surtitres / numérotation — or éteint, Franklin capitales. */
.eyebrow, .group-label, .label, .demo-kicker { color: var(--gold); font-family: var(--sans); }
.method-list strong { color: var(--title); font-weight: 600; }
.hero-cred strong { color: var(--head); font-weight: 600; }

/* Bandes : filet haut/bas, fond beige. */
.band { background: var(--band); }

/* "Pourquoi" — le beige délimite, pas de cadre. */
.why-card { border: 0; background: var(--band); }
.why-title { color: var(--title); }

/* Témoignages + podcast : définis en section 18 (cartes beige clair via
   --band, textes encre/gris/or, CTA thémable). Un seul point de vérité. */

/* Boutons pleins WhatsApp : le PNG est sombre — on le blanchit pour qu'il
   reste lisible sur l'aplat vert (clair) comme sur l'aplat or (sombre). */
.btn-gold img { filter: brightness(0) invert(1); }

/* ---- Retention bridge & charts — theme-aware fills via class ---- */
.seg-new{fill:var(--c-new)} .seg-ret{fill:var(--c-retained)} .seg-react{fill:var(--c-react)} .seg-lost{fill:var(--c-lost)}
.seg-neutral{fill:var(--c-yearbar)}
.bar-val{fill:#241E1B}                 /* valeurs DANS les barres pastel (foncé dans les deux thèmes) */
.ch-total{fill:var(--chart-ink)}       /* totaux au-dessus, sur le fond */
.ch-ax{fill:var(--chart-mut)}
.ch-base{stroke:var(--line)}
.ch-conn{stroke:var(--c-yearbar)} .ch-conn-ret{stroke:var(--c-retained)}
.ch-pos{fill:var(--brand)}             /* +20 % */
.lab-new{fill:var(--lab-new)} .lab-ret{fill:var(--lab-ret)} .lab-react{fill:var(--lab-react)} .lab-lost{fill:var(--lab-lost)}

/* ---- Footer logo — panthère en sous-bois, via masque (themable) ---- */
.footer-logo {
  display: block;
  width: 168px; height: 112px;
  margin-top: 20px;
  background-color: var(--title);
  -webkit-mask: url("/assets/img/logo-mask.png?v=2") left center / contain no-repeat;
  mask: url("/assets/img/logo-mask.png?v=2") left center / contain no-repeat;
  mix-blend-mode: normal;
}
@media (max-width: 899px){ .footer-logo{ margin-left:auto; margin-right:auto;
  -webkit-mask-position:center; mask-position:center; } }

/* ---- Day / night toggle ---- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; margin:0;
  background:transparent; border:1px solid var(--line); border-radius:50%;
  color:var(--brand); cursor:pointer; font-size:15px; line-height:1;
  transition:border-color .15s, color .15s;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle:hover{ border-color:var(--brand); color:var(--gold); }
.theme-ic-sun{ display:none; } .theme-ic-moon{ display:inline; }
/* Icône lune/soleil : dorée en clair, blanche en sombre (jamais verte). */
.theme-ic-sun, .theme-ic-moon{ color:var(--gold); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-ic-sun,
  :root:not([data-theme="light"]) .theme-ic-moon{ color:var(--head); }
}
:root[data-theme="dark"] .theme-ic-sun,
:root[data-theme="dark"] .theme-ic-moon{ color:var(--head); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-ic-sun{ display:inline; }
  :root:not([data-theme="light"]) .theme-ic-moon{ display:none; }
}
:root[data-theme="dark"] .theme-ic-sun{ display:inline; }
:root[data-theme="dark"] .theme-ic-moon{ display:none; }
:root[data-theme="light"] .theme-ic-sun{ display:none; }
:root[data-theme="light"] .theme-ic-moon{ display:inline; }
.theme-toggle--menu{ display:flex; width:auto; height:auto; border:0; border-radius:0;
  justify-content:flex-start; gap:8px; font-family:var(--sans); font-size:var(--fs-body); color:var(--body); }
.theme-toggle--menu .tt-label{ letter-spacing:0; }
.theme-toggle--menu:hover{ color:var(--gold); }

/* --------------------------------------------------------------------------
   18. Home — hero extras, retention bridge, one-liner, podcast, cards
   -------------------------------------------------------------------------- */

/* Hero: "for whom" line, then the credibility line under the sub-paragraph. */
.hero-for {
  margin-top: 16px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
}
.hero-cred { margin-top: 24px; color: var(--head); }
.hero-cred strong { color: var(--head); font-weight: normal; }

/* Retention-bridge demonstration. */
.demo-kicker {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Space before the sub-heading, trimmed ~30% so both charts can share a
   screen. The gap after it (to the bridge) is trimmed on [data-bridge] below. */
.demo-h2b { margin-top: 28px; }
/* Takeaway line under the bridge: a small, deliberate gap. A plain mt-* helper
   loses to `.q-list { margin: 0 }`, so it is set here, specific enough to win. */
.demo > .q-list { margin-top: 24px; }
@media (min-width: 900px) { .demo-h2b { margin-top: 34px; } }
/* Fit "Les mêmes chiffres, ouverts pour agir." on one line on mobile. */
@media (max-width: 899px) { .demo-h2b { font-size: 17px; } }
.demo [data-bridge] { margin-top: 34px; }
@media (min-width: 900px) { .demo [data-bridge] { margin-top: 45px; } }

/* Each bar scales on Y; transform-box makes it its own frame so scaleY(0)
   collapses onto the edge it grows from (baseline for totals, top edge for a
   block that falls away). A CSS transition keeps running when rAF is
   throttled — see initBridge in site.js. The settled state is scaleY(1),
   i.e. the geometry written in the HTML. */
[data-bar] {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 600ms var(--ease);
}
[data-bar][data-dir="down"] { transform-origin: 50% 0%; }
[data-bar-label],
[data-conn] { transition: opacity 260ms linear; }

/* B2B / B2C one-liner. */
.oneliner {
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--head);
  max-width: 820px;
  text-wrap: balance;
}
.oneliner strong { color: var(--gold); font-weight: normal; }

/* Closing "why it pays" card — subtle gold frame (like the proof block), the
   deliberate exception to the site's normal-weight rule: its title is bold to
   flag this as the conclusion of the chart's argument. */
.why-card {
  max-width: 764px;
  border: 1px solid rgba(176, 141, 87, 0.45);
  background: rgba(176, 141, 87, 0.045);
  margin: 0 -8px;
  padding: 32px 20px;
}
.why-title {
  font-size: var(--fs-h2);
  line-height: 1.25;
  color: var(--head);
  font-weight: 400;   /* Garamond régulier — pas de faux-gras (rendu net) */
}
.why-lead { margin-top: 12px; color: var(--body); }
.why-list { margin-top: 22px; }
.why-list li { font-size: var(--fs-body); line-height: 1.55; color: var(--body); }
.why-close { margin-top: 24px; color: var(--body); }
.why-sign { margin-top: 14px; color: var(--head); }
@media (min-width: 900px) {
  .why-card { margin: 0; padding: 48px; }
}

/* Podcast card — click-to-load Spotify (no third-party frame until asked). */
.podcast {
  margin-top: var(--chart-gap);
  border: 1px solid var(--line);
  background: var(--band);
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  max-width: 820px;
}
/* Square cover holding the episode art, with the play button overlaid.
   The art is square (300×300), so a 1:1 box shows it whole — no crop. */
.podcast-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--band);
}
.podcast-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.podcast-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(11, 11, 13, 0.55);
  color: var(--gold); font: inherit; font-size: 20px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding-left: 4px;
  transition: background 150ms linear;
  -webkit-tap-highlight-color: transparent;
}
/* Hover only where a real pointer exists, so a tap on mobile doesn't leave
   the button stuck in its hover shade. */
@media (hover: hover) {
  .podcast-play:hover { background: rgba(11, 11, 13, 0.78); }
}
.podcast-body { padding: 24px; }
.podcast-kicker { font-size: var(--fs-small); color: var(--gold); letter-spacing: 0.04em; }
.podcast-title { margin-top: 10px; font-size: var(--fs-h3); line-height: 1.3; color: var(--head); }
.podcast-desc { margin-top: 12px; font-size: var(--fs-small); line-height: 1.65; color: var(--muted); }
.podcast-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.play-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cta); color: var(--cta-ink); border: 0; font: inherit;
  font-size: var(--fs-small); padding: 10px 16px; cursor: pointer;
  transition: background 150ms linear;
  -webkit-tap-highlight-color: transparent;
}
.mini-link { border: 1px solid var(--line); color: var(--body); font-size: var(--fs-small); padding: 10px 14px; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  .play-btn:hover { background: var(--cta-hover); }
  .mini-link:hover { border-color: var(--gold); color: var(--gold); }
}
.podcast-frame { width: 100%; border: 0; min-height: 232px; display: block; }

@media (min-width: 900px) {
  .podcast { grid-template-columns: 260px 1fr; }
  .podcast-body { padding: 32px; }
}

/* Testimonials as two cards: pull-quote, full quote, attribution. */
.tcards {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1000px;
}
.tcard {
  margin: 0;                    /* <figure> ships with 40px side margins */
  border: 1px solid var(--line);
  background: var(--band);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.tcard-mark { color: var(--gold); font-size: 36px; line-height: 0.5; height: 20px; }
.tcard .pull {
  margin-top: 8px;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--head);
  text-wrap: pretty;
}
.tcard .tfull {
  margin-top: 18px;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--body);
  text-wrap: pretty;
}
.tcard-attr {
  margin-top: auto;
  padding-top: 20px;
  font-size: var(--fs-body);
  color: var(--gold);
}

/* Two across only where there's real width, and broken a little past the
   text column so the tiles don't read as thin strips. Below this, a single
   full-width column keeps them generous. */
@media (min-width: 1024px) {
  .tcards {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: none;
    margin-left: -48px;
    margin-right: -48px;
  }
  .tcard { padding: 36px 34px; }
}