/* ════════════════════════════════════════════════════════════
   julienlescure.io — ADDITIONS (2026 two-lane positioning)
   New layout patterns for the adapted homepage + how-it-works.
   Append this block to styles.css. Purely additive — new classes
   only, all colours/spacing derived from existing tokens.

   Patterns:
   1. .problem-duo      — homepage two-block Problem section
   2. .lane-fork        — homepage two-lane card fork
   3. .components-grid  — how-it-works three-component definition block
   4. .method-steps     — how-it-works three-step method sequence
   5. .restore-cols     — two-column outcome bullet list
   ════════════════════════════════════════════════════════════ */

/* Buttons: preserve intended color on hover. The per-page inline
   `a:hover { color: var(--turquoise); }` rule was catching .btn
   anchors and turning both the text and the arrow (stroke=currentColor)
   turquoise — invisible on the turquoise .btn--turq. */
.btn:hover { color: var(--white); }
.btn--turq:hover { color: var(--purple); }
.btn--outline:hover { color: var(--purple); }

/* Buttons: keep label on a single line. The base `.btn { width: 264px }`
   was too narrow for FR labels ("Comment ça marche", "Se connecter sur
   LinkedIn"), forcing two-line wraps. Auto-width + nowrap + a min-width
   floor keeps the visual weight consistent while letting long labels
   expand horizontally. Mobile override (styles.css:1367) still stretches
   to full width via max-width: 320px. */
.btn {
  width: auto;
  min-width: 264px;
  padding: 0 32px;
  white-space: nowrap;
}

/* Language switcher reveal — active now that /fr/ pages exist. */
.lang-switcher { display: inline-flex; align-items: center; }
@media (max-width: 960px) {
  .lang-switcher { display: flex; }
}
/* Make the inner <a> inside a language option behave like the <li>.
   Explicit white (not inherit): on .reading pages the theme rule
   `.reading .nav-links a { color: var(--purple) }` out-specifies the
   old inherit rule, rendering the unselected language purple-on-purple
   (invisible) in the dropdown. `.nav-links .lang-menu li a` (0,2,2)
   outranks the reading override (0,2,1). */
.nav-links .lang-menu li a {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.nav-links .lang-menu li:hover a,
.nav-links .lang-menu li a:hover { color: var(--turquoise); }

/* ─────────────────────────────────────────────────────────
   1 — Two-block Problem section (homepage, WHITE)
   One section title, two equal-weight sub-blocks split by a
   hairline, then a full-width closing line at larger scale.
   Echoes .change-row / .pain-index editorial hairline rhythm.
   ───────────────────────────────────────────────────────── */
.problem-duo,
.problem-trio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 2px solid var(--purple);
}
/* Three-column variant: two problem statements + a filled conclusion cell.
   The conclusion reads as the payoff of the row, aligned right. */
.problem-trio {
  grid-template-columns: 1fr 1fr 0.9fr;
  align-items: stretch;
}
.problem-trio .problem-duo__block {
  padding: 56px 44px 40px 0;
}
.problem-duo__block {
  padding: 56px 64px 8px 0;
}
.problem-duo__block + .problem-duo__block {
  border-left: 1px solid rgba(64, 31, 76, 0.16);
  padding-left: 64px;
}
.problem-duo__head {
  margin: 0 0 22px;
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--purple);
  text-wrap: balance;
}
.problem-duo__body {
  margin: 0;
  font-size: 17px;
  line-height: 1.72;
  color: rgba(64, 31, 76, 0.82);
  max-width: 46ch;
}
.problem-duo__body b { color: var(--purple); }

.problem-close {
  margin: 64px 0 0;
  padding-top: 48px;
  border-top: 1px solid rgba(64, 31, 76, 0.16);
}
.problem-close__line {
  margin: 24px 0 0;
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--purple);
  max-width: 22ch;
  text-wrap: balance;
}
.problem-close__line em {
  font-style: normal;
  color: var(--purple);
  white-space: nowrap;
  background-image: linear-gradient(var(--turquoise), var(--turquoise));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.16em;
}

/* Filled conclusion cell — third column of the trio, the payoff */
.problem-conclusion {
  background: var(--purple);
  color: var(--white);
  padding: 56px 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.problem-conclusion__quote {
  font-weight: 800;
  font-size: 120px;
  line-height: 0.6;
  color: var(--turquoise);
  height: 0.5em;
  overflow: visible;
}
.problem-conclusion__line {
  margin: 0;
  font-weight: 800;
  font-size: clamp(23px, 1.9vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Julien 2026-07-15: both languages now use turquoise text on the
   emphasised phrase — the earlier turquoise underline stripe is gone. */
.problem-conclusion__line em {
  font-style: normal;
  color: var(--turquoise);
  white-space: normal;
}

/* ─────────────────────────────────────────────────────────
   2 — Two-lane card fork (homepage)
   Two cards side-by-side. Lane 1 (flagship / MOAT) is the filled
   purple card and takes slightly more width; Lane 2 (growth lane)
   is the lighter outlined card. Stacks on mobile.
   ───────────────────────────────────────────────────────── */
.lane-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  align-items: stretch;
}
.lane-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  border-radius: 16px;
  padding: 52px 52px 44px;
}
.lane-card--flagship {
  background: var(--purple);
  color: var(--white);
}
.lane-card--growth {
  background: var(--turquoise);
  color: var(--purple);
}
.lane-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 26px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lane-card__eyebrow::before {
  content: "";
  width: 40px;
  height: 8px;
  background: var(--turquoise);
  flex: none;
}
.lane-card--flagship .lane-card__eyebrow { color: var(--turquoise); }
.lane-card--growth .lane-card__eyebrow { color: var(--purple); }
.lane-card--growth .lane-card__eyebrow::before { background: var(--purple); }
.lane-card__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lane-card--flagship .lane-card__title { color: var(--white); }
.lane-card--growth .lane-card__title { color: var(--purple); }
.lane-card__body {
  margin: 0;
  font-size: 17px;
  line-height: 1.68;
}
.lane-card--flagship .lane-card__body { color: rgba(255, 255, 255, 0.88); }
.lane-card--growth .lane-card__body { color: rgba(64, 31, 76, 0.82); }
.lane-card__cta {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: gap .2s ease;
}
.lane-card__cta svg { width: 30px; height: 14px; flex: none; }
.lane-card__cta:hover { gap: 18px; }
.lane-card--flagship .lane-card__cta { color: var(--turquoise); }
.lane-card--flagship .lane-card__cta svg path { stroke: var(--turquoise); }
.lane-card--growth .lane-card__cta { color: var(--purple); }
.lane-card--growth .lane-card__cta svg path { stroke: var(--purple); }

/* Full-width flagship banner (how-it-works Lane 1 opener) — mirrors the
   page-1 card so the two pages read as the same story. Horizontal layout:
   eyebrow across the top, title left, body right. */
.lane-card--wide {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas:
    "eyebrow eyebrow"
    "title   body";
  column-gap: 60px;
  row-gap: 30px;
  align-items: start;
  padding: 60px 64px;
}
.lane-card--wide .lane-card__eyebrow { grid-area: eyebrow; margin: 0; }
.lane-card--wide .lane-card__title {
  grid-area: title;
  margin: 0;
  font-size: clamp(30px, 3.4vw, 48px);
}
.lane-card--wide .lane-card__body {
  grid-area: body;
  margin: 0;
  align-self: center;
  font-size: 18px;
}

/* ─────────────────────────────────────────────────────────
   Four silent killers — 2×2 table on a purple section.
   Hairline dividers via a 1px grid gap over a light rule colour;
   cells fill purple. Each cell: killer number, title, symptoms/cost.
   ───────────────────────────────────────────────────────── */
.killers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.killer {
  background: var(--purple);
  padding: 44px 48px 48px;
}
.killer__num {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--turquoise);
}
.killer__title {
  margin: 18px 0 30px;
  font-weight: 800;
  font-size: clamp(24px, 1.9vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
  text-wrap: balance;
}
.killer__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.killer__row {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 20px;
  align-items: baseline;
}
.killer__label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--turquoise);
  padding-top: 2px;
}
.killer__val {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}
.killer__val em { font-style: italic; color: var(--white); }

/* ─────────────────────────────────────────────────────────
   3 — Three-component definition block (how-it-works, Lane 2)
   Skills / Agents / Context. Numbered 01–03, turquoise top rule.
   Definition list, not a sequence. Sits on a purple section.
   ───────────────────────────────────────────────────────── */
.components-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 8px;
}
/* 4-component variant (Context / Skills / Tools / Agents). Falls back
   to 2×2 on tablet, 1 col on mobile via the existing media override. */
.components-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .components-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
.component-def {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 26px;
  border-top: 3px solid var(--turquoise);
}
.component-def__num {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--turquoise);
}
.component-def__title {
  margin: 6px 0 0;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.component-def__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}
/* Light-section variant, if reused on white */
.section--white .component-def__title { color: var(--purple); }
.section--white .component-def__body { color: rgba(64, 31, 76, 0.82); }

/* Credentials block on a white section ("Who am I" on the homepage).
   Base .credential styles assume a dark background — recolour the text. */
.section--white .credential h4 { color: var(--purple); }
.section--white .credential p { color: rgba(64, 31, 76, 0.82); }

/* ─────────────────────────────────────────────────────────
   4 — Three-step method sequence (how-it-works, Lane 2)
   Frame · Define · Test. Same footprint as the definition block,
   but a chevron connector signals order. Sits on a purple section.
   ───────────────────────────────────────────────────────── */
.method-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.method-step {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 34px 34px 38px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.method-step__label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--turquoise);
}
.method-step__label span {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
}
.method-step__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}
/* Chevron connector between steps */
.method-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 52px;
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--turquoise);
  border-right: 3px solid var(--turquoise);
  transform: rotate(45deg);
  z-index: 2;
}

/* ─────────────────────────────────────────────────────────
   5 — Two-column outcome bullets ("Value path restored")
   For Marketing & Sales | For the C-level. Reuses .bullets item
   styling but forces a single column inside each side.
   ───────────────────────────────────────────────────────── */
.restore-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
  margin-top: 8px;
}
.restore-col__head {
  margin: 0 0 24px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple);
  display: flex;
  align-items: center;
  gap: 14px;
}
.restore-col__head::before {
  content: "";
  width: 40px;
  height: 3px;
  background: var(--turquoise);
  flex: none;
}
.restore-col .bullets {
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 0;
}

/* ─────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .problem-duo,
  .problem-trio { grid-template-columns: 1fr; }
  .problem-duo__block,
  .problem-trio .problem-duo__block { padding: 40px 0 8px; }
  .problem-duo__block + .problem-duo__block {
    border-left: 0;
    border-top: 1px solid rgba(64, 31, 76, 0.16);
    padding-left: 0;
    padding-top: 40px;
  }
  .problem-duo__body { max-width: 640px; }
  .problem-conclusion {
    margin-top: 8px;
    padding: 44px 40px 46px;
  }
  .problem-conclusion__line { max-width: 32ch; }

  .lane-fork { grid-template-columns: 1fr; gap: 24px; }
  .lane-card { padding: 40px 36px 36px; }
  .lane-card--wide {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "body";
    row-gap: 22px;
    padding: 40px 36px;
  }

  .killers-grid { grid-template-columns: 1fr; }
  .killer { padding: 36px 32px 40px; }

  .components-grid { grid-template-columns: 1fr; gap: 28px; }
  .component-def { padding-top: 22px; }

  .method-steps { grid-template-columns: 1fr; gap: 20px; }
  /* Rotate the connector to point downward when stacked */
  .method-step:not(:last-child)::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -16px;
    transform: translateX(-50%) rotate(135deg);
  }

  .restore-cols { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 560px) {
  .lane-card { padding: 32px 26px 30px; }
  .method-step { padding: 28px 26px 30px; }

  /* Homepage problem-trio — prevent min-content blowout on mobile.
     The `white-space: nowrap` on the em inside the conclusion was
     forcing the grid track to expand past the viewport, dragging
     the .problem-duo__body text off the right edge. */
  .problem-trio > *, .problem-duo > * { min-width: 0; }
  .problem-conclusion__line em,
  .problem-close__line em { white-space: normal; }

  /* Silent-killers rows: stack label above content on mobile so
     "SYMPTÔMES / CoÛT" reads top-down instead of cramped in a
     narrow first column with the body squeezed on the right. */
  .killer__row { grid-template-columns: 1fr; gap: 6px; }
  .killer__label { padding-top: 0; }
}

/* ════════════════════════════════════════════════════════════
   6 — TWO-LANE HIERARCHY (how-it-works)
   Level 1 = Lane header: full-width punchy turquoise band, the
   largest title on the page after the hero — reads as a chapter
   opener and breaks the rhythm.
   Level 2 = Component: a dark card on a calm white section,
   medium title, clearly separated from its siblings by gaps.
   ════════════════════════════════════════════════════════════ */

/* ── Level 1 — Lane header ─────────────────────────────────── */
.lane-header {
  background: var(--turquoise);
  color: var(--purple);
}
.lane-header__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
}
.lane-header__eyebrow::before {
  content: "";
  width: 56px;
  height: 8px;
  background: var(--purple);
  flex: none;
}
.lane-header__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(40px, 5.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--purple);
  max-width: 18ch;
  text-wrap: balance;
}
.lane-header__lead {
  margin: 32px 0 0;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.56;
  color: rgba(64, 31, 76, 0.82);
  max-width: 60ch;
}

/* ── Level 2 — Component cards on a calm white section ─────── */
.lane-body {
  background: var(--white);
}
.lane-body__stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.lane-comp {
  background: var(--purple);
  color: var(--white);
  border-radius: 22px;
  padding: 54px 60px 58px;
}
.lane-comp__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--turquoise);
}
.lane-comp__eyebrow::before {
  content: "";
  width: 40px;
  height: 8px;
  background: var(--turquoise);
  flex: none;
}
.lane-comp__title {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(26px, 2.7vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--white);
  max-width: 40ch;
  text-wrap: balance;
}
.lane-comp__lead {
  margin: 0 0 36px;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 64ch;
}

/* Two-column split used inside the collaboration cards */
.lane-comp__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ── Recolour reused content for the dark card background ──── */
.lane-comp .subhead { margin-top: 0; color: var(--turquoise); }
.lane-comp .subhead + .subhead,
.lane-comp .lane-comp__col + .lane-comp__col .subhead { margin-top: 0; }
.lane-comp .bullets li { color: rgba(255, 255, 255, 0.9); }
.lane-comp .bullets li b { color: var(--white); }
.lane-comp .component-detail__body { color: rgba(255, 255, 255, 0.85); }
.lane-comp .component-def__title { color: var(--white); }
.lane-comp .component-def__body { color: rgba(255, 255, 255, 0.86); }
/* Killers table: the card is the frame, so drop the outer border */
.lane-comp .killers-grid { margin-top: 40px; border: none; }
.lane-comp .killers-grid .killer { padding: 0 40px 8px; }
.lane-comp .killers-grid .killer:nth-child(odd) { padding-left: 0; }
.lane-comp .killers-grid .killer:nth-child(1),
.lane-comp .killers-grid .killer:nth-child(2) { padding-top: 0; }
.lane-comp .killers-grid .killer:nth-child(3),
.lane-comp .killers-grid .killer:nth-child(4) { padding-top: 40px; }
.lane-comp .components-grid { margin-top: 0; }
.lane-comp .method-steps { margin-top: 0; }
/* Method steps inside a dark card use the on-purple variant */
.lane-comp .steps { margin-bottom: 0; }
.lane-comp .step__lede { color: var(--turquoise); opacity: 0.85; }

/* ── Light component variant — alternates with the dark fill so a
   stack of components doesn't read as one heavy block. White card,
   hairline outline, purple content; turquoise stays as the accent. ── */
.lane-comp--light {
  background: var(--white);
  color: var(--purple);
  border: 1.5px solid rgba(64, 31, 76, 0.16);
}
.lane-comp--light .lane-comp__title { color: var(--purple); }
.lane-comp--light .lane-comp__lead { color: rgba(64, 31, 76, 0.74); }
.lane-comp--light .subhead { color: var(--purple); }
.lane-comp--light .bullets li { color: rgba(64, 31, 76, 0.85); }
.lane-comp--light .bullets li b { color: var(--purple); }
.lane-comp--light .component-detail__body { color: rgba(64, 31, 76, 0.82); }
.lane-comp--light .component-def__title { color: var(--purple); }
.lane-comp--light .component-def__body { color: rgba(64, 31, 76, 0.82); }
.lane-comp--light .step__lede { color: var(--purple); opacity: 0.7; }
/* method-steps recoloured for the light card */
.lane-comp--light .method-step {
  background: rgba(64, 31, 76, 0.04);
  border-color: rgba(64, 31, 76, 0.14);
}
.lane-comp--light .method-step__body { color: rgba(64, 31, 76, 0.82); }
.lane-comp--light .method-step__label span { color: rgba(64, 31, 76, 0.5); }

/* ── Collapsible component (optional deep-dive cards) ─────────
   Native <details>; summary is the clickable title with a +/×
   toggle icon. Collapsed by default. ── */
.lane-comp--toggle { padding: 0; }
.lane-comp__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 38px 60px;
  border-radius: inherit;
}
.lane-comp__summary::-webkit-details-marker { display: none; }
.lane-comp--toggle .lane-comp__title { margin: 0; font-size: clamp(20px, 1.9vw, 27px); }
.lane-comp__toggle-icon {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  transition: transform .28s ease, border-color .2s ease, background .2s ease;
}
.lane-comp__toggle-icon::before,
.lane-comp__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
}
.lane-comp__toggle-icon::before { width: 13px; height: 2px; }
.lane-comp__toggle-icon::after { width: 2px; height: 13px; }
.lane-comp__summary:hover .lane-comp__toggle-icon { border-color: var(--turquoise); }
.lane-comp--toggle[open] .lane-comp__toggle-icon { transform: rotate(135deg); border-color: var(--turquoise); }
.lane-comp__reveal { padding: 0 60px 48px; }
.lane-comp__reveal .lane-comp__lead { margin-top: 0; }
/* Light-card toggle icon (if the collapsible ever uses the light variant) */
.lane-comp--light .lane-comp__toggle-icon { border-color: rgba(64, 31, 76, 0.35); }
.lane-comp--light .lane-comp__toggle-icon::before,
.lane-comp--light .lane-comp__toggle-icon::after { background: var(--purple); }
.lane-comp--light .lane-comp__summary:hover .lane-comp__toggle-icon,
.lane-comp--light.lane-comp--toggle[open] .lane-comp__toggle-icon { border-color: var(--purple); }

@media (max-width: 960px) {
  .lane-comp { padding: 40px 34px 42px; border-radius: 18px; }
  .lane-comp--toggle { padding: 0; }
  .lane-comp__summary { padding: 28px 30px; gap: 18px; }
  .lane-comp__reveal { padding: 0 30px 34px; }
  .lane-comp__split { grid-template-columns: 1fr; gap: 36px; }
  .lane-comp .killers-grid .killer,
  .lane-comp .killers-grid .killer:nth-child(odd) { padding: 0 0 8px; }
  .lane-comp .killers-grid .killer:nth-child(2),
  .lane-comp .killers-grid .killer:nth-child(3),
  .lane-comp .killers-grid .killer:nth-child(4) { padding-top: 36px; }
}

/* ═══════════════════════════════════════════════════════════
   Killers grid — cross-cell row alignment (desktop only).
   Each paired killer-row (01+02 on top, 03+04 on bottom) must have
   its num labels, titles, Symptoms rows and Cost rows aligned across
   the two cells so readers can compare like-for-like.
   Approach: declare 4 explicit sub-rows per killer-row on the outer
   grid, then have each .killer opt into `grid-template-rows: subgrid`
   for those 4 rows. Mobile keeps the existing 1-column stacking.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 961px) {
  .killers-grid {
    /* 2 killer-rows × 4 internal rows = 8 explicit row tracks */
    grid-template-rows: repeat(2, auto auto auto auto);
    /* Kill the row-gap so the 1px bg-bleed doesn't show between internal rows */
    row-gap: 0;
    /* Keep the vertical 1px hairline between columns */
    column-gap: 1px;
  }
  .killer {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    /* Tight base gap so Symptoms↔Cost sits close (16px).
       Larger gaps for num→title and title→Symptoms come from paddings below. */
    row-gap: 16px;
  }
  /* Legacy title margins and meta wrapper undercut subgrid — reset them */
  .killer__title {
    margin: 0;
    /* Restores a comfortable num→title gap (16 row-gap + 8 padding = 24px) */
    padding-top: 8px;
  }
  .killer__meta { display: contents; }
  /* Symptoms row (first .killer__row of type) gets extra padding-top so
     title→Symptoms is airy (16 row-gap + 24 padding = 40px), while Cost row
     inherits just the tight 16px row-gap → Symptoms↔Cost close as requested. */
  .killer__row:first-of-type {
    padding-top: 24px;
  }
  /* Horizontal hairline between top killer-row and bottom killer-row.
     Symmetric breathing room above and below: 72px each side.
     NB: uses full `.lane-comp .killers-grid .killer:nth-child(N)` so we win
     on specificity over `.lane-comp .killers-grid .killer { padding: 0 40px 8px }`
     which was silently forcing padding-bottom back to 8px. */
  .lane-comp .killers-grid .killer:nth-child(1),
  .lane-comp .killers-grid .killer:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    padding-bottom: 72px;
  }
  .lane-comp .killers-grid .killer:nth-child(3),
  .lane-comp .killers-grid .killer:nth-child(4) {
    padding-top: 72px;
  }
}

/* ═══════════════════════════════════════════════════════════
   Hero — drop the outlined/stroke treatment for a plain white fill.
   Julien 2026-07-09: replace the turquoise-border-only Urbanist look
   with solid white. Kept the letter-spacing so the highlighted word
   still tracks the same as the surrounding hero-mega text.
   ═══════════════════════════════════════════════════════════ */
.hero-mega .outlined {
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: var(--white);
  color: var(--white);
}

/* Narrow phones — hero stays clearly larger than section titles
   (which clamp to 32px on mobile) so the visual hierarchy holds. */
@media (max-width: 500px) {
  .hero-mega {
    font-size: clamp(52px, 15vw, 72px);
  }
  /* Force "-moi" onto its own line on mobile (FR contact hero) */
  .hero-mega .hero-line2 { display: block; }
}

/* ═══════════════════════════════════════════════════════════
   Mobile: stack the two "Who am I" credential cards
   (Silicon Valley Product Group + Awards) instead of the
   960px-tablet 2-column layout.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .credentials-extras {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Mobile menu language switcher → two plain nav-style links
   "English" / "Français". No dropdown, no toggle. Uses the
   language-agnostic data-value attributes so this CSS works
   on both EN and FR pages without touching per-page markup.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .lang-switcher { display: block !important; margin-top: 16px !important; }
  .lang-toggle { display: none !important; }
  .lang-menu,
  .lang-menu[hidden] {
    display: block !important;
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    top: auto !important;
    right: auto !important;
  }
  .lang-menu li {
    position: relative;
    padding: 12px 0 !important;
    background: transparent !important;
    color: var(--white) !important;
    font-size: 0 !important;
    line-height: 1.15;
  }
  /* Anchor overlays the whole li so the entire label is tappable,
     and its own "FR"/"EN" text stays hidden via inherited font-size 0. */
  .lang-menu li a {
    position: absolute;
    inset: 0;
    color: transparent !important;
    text-decoration: none;
  }
  .lang-menu li[data-value="en"]::before {
    content: "English";
    font-size: 26px;
    font-weight: 700;
    color: var(--white);
  }
  .lang-menu li[data-value="fr"]::before {
    content: "Français";
    font-size: 26px;
    font-weight: 700;
    color: var(--white);
  }
  /* Current language reads turquoise (matches the .is-active nav pattern) */
  .lang-menu li[aria-selected="true"]::before {
    color: var(--turquoise);
  }
}

/* ═══════════════════════════════════════════════════════════
   Steps grid — 3-column variant for Lane 2's Frame · Define · Test.
   Julien 2026-07-09: previously the container carried inline
   `style="grid-template-columns: repeat(3, 1fr)"` which won on
   specificity and blocked the mobile stacking. Now a class-based
   rule that stacks to 1 column at tablet + phone, same as Lane 1.
   ═══════════════════════════════════════════════════════════ */
.steps--3col {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) {
  .steps--3col {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   Footer link colours — restore contrast.
   The <style> block in each HTML sets `a { color: var(--purple) }`
   for body prose, but that overrides the inherited white on the
   dark footer, making the nav links + social icons unreadable.
   ═══════════════════════════════════════════════════════════ */
.footer__nav a,
.footer__social a {
  color: var(--white);
}

/* ═══════════════════════════════════════════════════════════
   Insights index pagination (assets/pagination.js) — appears
   only when the article list exceeds 5 cards.
   ═══════════════════════════════════════════════════════════ */
.list-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--measure);
  margin: 48px auto 96px;
  padding: 24px clamp(24px, 5vw, 28px) 0;
  border-top: 1px solid var(--rule, rgba(64, 31, 76, 0.14));
}
@media (max-width: 560px) {
  .list-pager { margin-bottom: 64px; }
}
.list-pager__btn {
  background: none;
  border: 0;
  padding: 8px 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  color: var(--purple);
  cursor: pointer;
}
.list-pager__btn:hover:not(:disabled) { color: var(--turquoise); }
.list-pager__btn:disabled { opacity: 0.3; cursor: default; }
.list-pager__info {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(64, 31, 76, 0.6);
}