/* legs-telling — section CSS (BUILD-SECTION, 2026-09-15). Source: brief/legs-telling.md + cache/legs-telling.{desktop,mobile}.json.
   Scope: every rule is under .legs-telling. Mobile-first: base = 0–767 (anchor 390), 768–1023 pseudo-tablet
   (panel splits into a row, D-6; mobile design inside each column), 1024+ desktop (--vw-base 1619).
   Section-local tokens (D-LT-13) and spacing live as custom properties on .legs-telling, one block per band. */

/* ---------------------------------------------------------------------------
   SECTION TOKENS — moved out of the page's tokens.css.

   Read by THIS block and nothing else on the site, so they belong here rather
   than in a site-wide :root. In Shopify a section can be dropped onto any
   template from the theme editor, so a section that reads a token from a
   page-level scope breaks the moment it is moved; scoped to the block's own
   class, it travels with it.

   EVERY band is carried verbatim from the old tokens.css, in that file's own
   order — so the cascade is unchanged whether the page was written
   desktop-first (base + max-width overrides) or mobile-first (base +
   min-width overrides). Verified by computed-style diff at
   375/768/1024/1440/1920.
--------------------------------------------------------------------------- */

.legs-telling {
  --font-serif:    'Roboto Serif', Georgia, 'Times New Roman', serif;
  --font-mono:     'Roboto Mono', ui-monospace, 'Courier New', monospace;
  --c-accent:      #e63329;
  --c-eyebrow:     #b3aeae;
  --c-on-accent:   #ffffff;
  --c-on-footer:   #f9fcff;
  --c-surface:     #ffffff;
  --c-border:      #d6e2e7;
  --radius-pill:   9999px;
  --text-h2:       clamp(18px, calc(22px + (var(--max-vw) - 390px) * 0.015), 43px);
  --lh-h2:         1.2;
  --ls-h2:         -0.025em;
  --text-h3-panel: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 39px);
  --lh-h3-panel:   1.25;
  --ls-h3-panel:   -0.025em;
  --text-eyebrow:  clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-eyebrow:    1.5;
  --ls-eyebrow:    0.2em;
  --ls-lead:       0;
  --text-subnote:  clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-subnote:    1.5;
  --ls-subnote:    0;
  --section-pad-y: clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 63px);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .legs-telling {
    --text-h2:       clamp(22px, calc(22px + (var(--max-vw) - 768px) * 0.025), 46.425px);
    --text-h3-panel: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 46.425px);
    --text-eyebrow:  clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 21.493px);
    --text-subnote:  clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 13.639px);
    --section-pad-y: clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 75px);
  }
}

@media (min-width: 1024px) {
  .legs-telling {
    --text-h2:       clamp(29px, calc(46.425px * (var(--max-vw) / var(--vw-base))), 55px);
    --lh-h2:         1.16;
    --ls-h2:         -0.012em;
    --text-h3-panel: clamp(29px, calc(46.425px * (var(--max-vw) / var(--vw-base))), 55px);
    --lh-h3-panel:   1.16;
    --ls-h3-panel:   -0.012em;
    --text-eyebrow:  clamp(14px, calc(21.493px * (var(--max-vw) / var(--vw-base))), 25px);
    --lh-eyebrow:    normal;
    --ls-eyebrow:    0.1em;
    --ls-lead:       0;
    --text-subnote:  clamp(9px, calc(13.639px * (var(--max-vw) / var(--vw-base))), 16px);
    --lh-subnote:    normal;
    --ls-subnote:    -0.03em;
    --section-pad-y: clamp(47px, calc(75px * (var(--max-vw) / var(--vw-base))), 89px);
  }
}

/* ============================== tokens — mobile (0–767) ============================== */
.legs-telling {
  --lt-tab:          clamp(8px,  calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lt-card-title:   clamp(11px, calc(13px + (var(--max-vw) - 390px) * 0.015), 26px);
  --lt-item:         clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);

  --lt-lead-gap:     clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --lt-tabs-gap:     clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 39px);
  --lt-panel-gap:    clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 39px);
  --lt-eyebrow-gap:  clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 39px);
  --lt-h3-gap:       clamp(7px,  calc(8px  + (var(--max-vw) - 390px) * 0.015), 16px);
  --lt-lists-gap:    clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --lt-card-gap:     clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --lt-action-gap:   clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 39px);
  --lt-subnote-gap:  clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);

  --lt-track-pad:    clamp(3px,  calc(4px  + (var(--max-vw) - 390px) * 0.015), 8px);
  --lt-track-gap:    clamp(3px,  calc(4px  + (var(--max-vw) - 390px) * 0.015), 8px);
  --lt-tab-pad-y:    clamp(7px,  calc(8px  + (var(--max-vw) - 390px) * 0.015), 16px);

  --lt-card-pad:     clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --lt-row1-pt:      clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --lt-row-pt:       clamp(7px,  calc(8px  + (var(--max-vw) - 390px) * 0.015), 16px);
  --lt-row-pb:       clamp(7px,  calc(8px  + (var(--max-vw) - 390px) * 0.015), 16px);
  --lt-row-gap:      clamp(8px,  calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lt-icon:         clamp(15px, calc(18px + (var(--max-vw) - 390px) * 0.015), 35px);
  --lt-icon-mt:      2px;
  --lt-col-gap:      0px;
}

/* ============================== tokens — pseudo-tablet (768–1023) ============================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .legs-telling {
    --lt-tab:          clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 16.359px);
    --lt-card-title:   clamp(13px, calc(13px + (var(--max-vw) - 768px) * 0.025), 21.493px);
    --lt-item:         clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 13.791px);

    --lt-lead-gap:     clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 14px);
    --lt-tabs-gap:     clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 29px);
    --lt-panel-gap:    clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 47.27px);
    --lt-h3-gap:       clamp(8px,  calc(8px  + (var(--max-vw) - 768px) * 0.025), 13px);
    --lt-lists-gap:    clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 20px);
    --lt-action-gap:   clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 30px);
    --lt-col-gap:      clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 54px);
    --lt-tab-pad-y:    clamp(8px,  calc(8px  + (var(--max-vw) - 768px) * 0.025), 15.291px);
    /* mobile-only structure (no desktop counterpart): ceiling = the mobile M-max */
    --lt-card-gap:     clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 24px);
    --lt-subnote-gap:  clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 24px);
    --lt-track-pad:    4px;   /* RESPONSIVE: brief §2 track padding M 4 >= D 2.41 → the pseudo-tablet clamp resolves to M-base (was rising to 8px at 928+) */
    --lt-track-gap:    clamp(4px,  calc(4px  + (var(--max-vw) - 768px) * 0.025), 8px);
    --lt-card-pad:     clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 31px);
    --lt-row1-pt:      clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 24px);
    --lt-row-pt:       clamp(8px,  calc(8px  + (var(--max-vw) - 768px) * 0.025), 16px);
    --lt-row-pb:       clamp(8px,  calc(8px  + (var(--max-vw) - 768px) * 0.025), 16px);
    --lt-row-gap:      clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 20px);
    --lt-icon:         clamp(18px, calc(18px + (var(--max-vw) - 768px) * 0.025), 35px);
  }
}

/* ============================== tokens — desktop (1024+) ============================== */
@media (min-width: 1024px) {
  .legs-telling {
    --lt-s: calc(var(--max-vw) / var(--vw-base));

    --lt-tab:          clamp(10px, calc(16.359px * var(--lt-s)), 19px);
    --lt-card-title:   clamp(14px, calc(21.493px * var(--lt-s)), 25px);
    --lt-item:         clamp(9px,  calc(13.791px * var(--lt-s)), 16px);

    --lt-lead-gap:     clamp(9px,  calc(14px * var(--lt-s)), 17px);
    --lt-lead-w:       clamp(536px, calc(848px * var(--lt-s)), 1006px);
    --lt-tabs-gap:     clamp(18px, calc(29px * var(--lt-s)), 34px);
    --lt-panel-gap:    clamp(30px, calc(47.27px * var(--lt-s)), 56px);
    --lt-col-gap:      clamp(34px, calc(54px * var(--lt-s)), 64px);
    --lt-media-w:      clamp(344px, calc(544px * var(--lt-s)), 645px);
    --lt-content-top:  clamp(9px,  calc(14px * var(--lt-s)), 17px);
    --lt-text-inset:   clamp(9px,  calc(15px * var(--lt-s)), 18px);
    --lt-action-inset: clamp(9px,  calc(14px * var(--lt-s)), 17px);
    --lt-h3-gap:       clamp(8px,  calc(13px * var(--lt-s)), 15px);
    --lt-h3-w:         clamp(385px, calc(609px * var(--lt-s)), 722px);
    --lt-lists-gap:    clamp(13px, calc(20px * var(--lt-s)), 24px);
    --lt-action-gap:   clamp(19px, calc(30px * var(--lt-s)), 36px);
    --lt-subnote-gap:  clamp(7px,  calc(11.81px * var(--lt-s)), 14px);

    --lt-track-pad:    clamp(1px,  calc(1.41px * var(--lt-s)), 2px);   /* drawn 2.41 offset = 1px border + 1.41 (D-LT-3) */
    --lt-tab-pad-y:    clamp(10px, calc(15.291px * var(--lt-s)), 18px);
    --lt-tab-pad-b:    clamp(9px,  calc(14.487px * var(--lt-s)), 17px);
    --lt-tab-pad-x:    clamp(23px, calc(35.69px * var(--lt-s)), 42px);

    --lt-lists-w:      clamp(393px, calc(621px * var(--lt-s)), 736px);
    --lt-notice-w:     clamp(188px, calc(298px * var(--lt-s)), 353px);
    --lt-help-w:       clamp(204px, calc(323px * var(--lt-s)), 383px);
    --lt-list-pt:      clamp(18px, calc(28px * var(--lt-s)), 33px);
    --lt-list-pb:      clamp(22px, calc(34px * var(--lt-s)), 40px);
    --lt-notice-pl:    clamp(21px, calc(33px * var(--lt-s)), 39px);
    --lt-help-pl:      clamp(27px, calc(42px * var(--lt-s)), 50px);
    --lt-title-gap:    clamp(12px, calc(19px * var(--lt-s)), 23px);
    --lt-row-step:     clamp(6px,  calc(10px * var(--lt-s)), 12px);
    --lt-row-gap:      clamp(6px,  calc(9.74px * var(--lt-s)), 12px);
    --lt-icon:         clamp(20px, calc(31.333px * var(--lt-s)), 37px);
    --lt-icon-mt:      0px;
  }
}

/* ============================== section shell (Pattern A) ============================== */
.legs-telling {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

/* ---------- header: h2 + lead ---------- */
.legs-telling .legs-telling__title {
  font-family: var(--font-serif);
  font-weight: 700;
  /* Mobile: drawn as ONE line at 390 (ink 344.3px of 350 = 15.65em). The fluid token shrinks 0.015px per
     viewport px while the column shrinks 1px per px, so below ~385 the line wrapped. Cap the size by the
     column width (15.8em of text per line) — at 390 the token (22px) is still the smaller value, so the
     drawn width renders unchanged. 768+ restores the plain token (row/desktop layouts). */
  font-size: min(var(--text-h2), calc((100vw - 2 * var(--gutter)) / 15.8));
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--c-ink);
  text-align: center;
}
.legs-telling .legs-telling__lead {
  margin-top: var(--lt-lead-gap);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--c-text);
  text-align: left;
}

/* ---------- tabs (bespoke ARIA tablist) ---------- */
.legs-telling .legs-telling__tabs {
  display: flex;
  gap: var(--lt-track-gap);
  width: 100%;
  margin-top: var(--lt-tabs-gap);
  padding: var(--lt-track-pad);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
}
.legs-telling .legs-telling__tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lt-tab-pad-y) 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-text);
  text-align: center;
  white-space: nowrap;
}
.legs-telling .legs-telling__tab-label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--lt-tab);
  line-height: 1.5;
  letter-spacing: 0;
  pointer-events: none;
}
.legs-telling .legs-telling__tab-more { display: none; }
.legs-telling .legs-telling__tab:hover { color: var(--c-ink); }
.legs-telling .legs-telling__tab[aria-selected="true"] {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.legs-telling .legs-telling__tab:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .legs-telling .legs-telling__tab { transition: background-color 150ms ease, color 150ms ease; }
}

/* ---------- panels ---------- */
/* never override [hidden] with a display rule */
.legs-telling .legs-telling__panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--lt-col-gap);
  margin-top: var(--lt-panel-gap);
}
.legs-telling .legs-telling__panel:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
}

.legs-telling .legs-telling__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .10);   /* D-LT-12: alpha .10, section-local */
}
.legs-telling .legs-telling__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Panels 2–3 (drawn on desktop only, Figma 3289:2) carry the desktop line breaks as <br>; below 1024 the
   text wraps by the column like panel 1's mobile layout. The <br> sits after a space (or a hyphen), so
   hiding it leaves correct text. */
.legs-telling .legs-telling__br { display: none; }

.legs-telling .legs-telling__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.legs-telling .legs-telling__eyebrow {
  margin-top: var(--lt-eyebrow-gap);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-eyebrow);
}
.legs-telling .legs-telling__panel-title {
  margin-top: var(--lt-h3-gap);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-h3-panel);
  line-height: var(--lh-h3-panel);
  letter-spacing: var(--ls-h3-panel);
  color: var(--c-ink);
}

/* ---------- lists: mobile = two separate cards ---------- */
.legs-telling .legs-telling__lists {
  display: flex;
  flex-direction: column;
  gap: var(--lt-card-gap);
  margin-top: var(--lt-lists-gap);
}
.legs-telling .legs-telling__list {
  padding: var(--lt-card-pad);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.legs-telling .legs-telling__list--notice { background: var(--c-surface); }
.legs-telling .legs-telling__list--help { background: var(--c-page); }
.legs-telling .legs-telling__list-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--lt-card-title);
  line-height: 1.5;
  color: var(--c-ink);
}
.legs-telling .legs-telling__item {
  display: flex;
  align-items: flex-start;
  gap: var(--lt-row-gap);
  padding-top: var(--lt-row-pt);
}
.legs-telling .legs-telling__item:first-child { padding-top: var(--lt-row1-pt); }
.legs-telling .legs-telling__item:last-child { padding-bottom: var(--lt-row-pb); }
.legs-telling .legs-telling__icon {
  flex: none;
  width: var(--lt-icon);
  height: var(--lt-icon);
  margin-top: var(--lt-icon-mt);
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  background: transparent;
}
.legs-telling .legs-telling__glyph { display: none; }   /* D-LT-10: no glyph below 1024 */
.legs-telling .legs-telling__item-text {
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--lt-item);
  line-height: 1.45;
  color: var(--c-text);
}

/* ---------- action: mobile = subnote (centred) above CTA ---------- */
.legs-telling .legs-telling__action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--lt-subnote-gap);
  margin-top: var(--lt-action-gap);
}
.legs-telling .legs-telling__subnote {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-subnote);
  line-height: var(--lh-subnote);
  letter-spacing: var(--ls-subnote);
  color: var(--c-text);
  text-align: center;
}

/* ============================== 768–1023: panel becomes a row (D-6) ============================== */
/* Below the drawn 390 frame the optical-size axis would widen the glyphs as the size drops (Roboto Serif
   opsz), breaking the 15.65em ratio the cap above relies on; pin opsz to the drawn 22px there only. */
@media (max-width: 389.98px) {
  .legs-telling .legs-telling__title { font-variation-settings: "opsz" 22; }
}
@media (min-width: 768px) {
  .legs-telling .legs-telling__title { font-size: var(--text-h2); }
  .legs-telling .legs-telling__panel:not([hidden]) {
    flex-direction: row;
    align-items: flex-start;
  }
  .legs-telling .legs-telling__media,
  .legs-telling .legs-telling__content {
    flex: 1 1 0;
    min-width: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .legs-telling .legs-telling__eyebrow { margin-top: 0; }
}

/* ============================== desktop (1024+) ============================== */
@media (min-width: 1024px) {
  .legs-telling .legs-telling__lead {
    max-width: var(--lt-lead-w);
    margin-inline: auto;
    text-align: center;
  }

  /* tab track: three hug pills, centred (D-LT-3) */
  .legs-telling .legs-telling__tabs {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    gap: 0;
  }
  .legs-telling .legs-telling__tab {
    flex: 0 0 auto;
    padding: var(--lt-tab-pad-y) var(--lt-tab-pad-x) var(--lt-tab-pad-b);
  }
  .legs-telling .legs-telling__tab-label {
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.03em;
  }
  .legs-telling .legs-telling__tab-more { display: inline; }
  .legs-telling .legs-telling__br { display: inline; }
  .legs-telling .legs-telling__tab[aria-selected="true"] { color: var(--c-on-footer); }

  /* split: photo | content */
  .legs-telling .legs-telling__media {
    flex: 0 0 var(--lt-media-w);
    width: var(--lt-media-w);
    aspect-ratio: 544 / 525;
    border-radius: 10px;
    box-shadow: 21.689px 27.529px 114.953px 0 rgba(0, 0, 0, .13);
  }
  .legs-telling .legs-telling__content {
    flex: 1 1 0;
    margin-top: var(--lt-content-top);
  }
  .legs-telling .legs-telling__eyebrow {
    margin-top: 0;
    margin-left: var(--lt-text-inset);
  }
  .legs-telling .legs-telling__panel-title {
    margin-left: var(--lt-text-inset);
    max-width: var(--lt-h3-w);
  }

  /* lists: ONE outer card + nested right card (D-LT-9) */
  .legs-telling .legs-telling__lists {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: var(--lt-lists-w);
    max-width: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 20px;
    box-shadow: 22.262px 28.255px 117.988px 0 rgba(0, 0, 0, .13);
  }
  .legs-telling .legs-telling__list {
    border-radius: 20px;
    padding: var(--lt-list-pt) 0 var(--lt-list-pb);
  }
  .legs-telling .legs-telling__list--notice {
    flex: 0 0 calc(var(--lt-notice-w) - 1px);   /* 298 from the outer edge, minus the outer 1px border */
    padding-top: calc(var(--lt-list-pt) - 1px);   /* insets are drawn from the OUTER edge; this column starts inside the 1px border */
    padding-bottom: calc(var(--lt-list-pb) - 1px);
    padding-left: calc(var(--lt-notice-pl) - 1px);
    border: 0;
    background: transparent;
  }
  .legs-telling .legs-telling__list--help {
    flex: 0 0 var(--lt-help-w);
    margin: -1px -1px -1px 0;                   /* flush with the outer card's top/right/bottom edge */
    padding-top: calc(var(--lt-list-pt) - 1px); /* Figma stroke is OUTSIDE; our 1px border is inside the box */
    padding-bottom: calc(var(--lt-list-pb) - 1px);
    padding-left: calc(var(--lt-help-pl) - 1px);
  }
  .legs-telling .legs-telling__list-title { line-height: normal; }
  .legs-telling .legs-telling__items { margin-top: var(--lt-title-gap); }
  .legs-telling .legs-telling__item,
  .legs-telling .legs-telling__item:first-child,
  .legs-telling .legs-telling__item:last-child {
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .legs-telling .legs-telling__item + .legs-telling__item { margin-top: var(--lt-row-step); }
  .legs-telling .legs-telling__icon {
    display: grid;
    place-items: center;
    border-width: 1.468px;
  }
  .legs-telling .legs-telling__list--notice .legs-telling__icon { background: var(--c-surface); }
  .legs-telling .legs-telling__glyph {
    display: block;
    width: calc(var(--lt-icon) * var(--gw) / 31.333);
    height: auto;
  }
  .legs-telling .legs-telling__item-text {
    line-height: var(--lh, 1.189);
    max-width: var(--cap, none);   /* D-LT-8: per-row cap in em, so it scales with the font (same formula) */
  }
  .legs-telling .legs-telling__item--single .legs-telling__item-text { white-space: nowrap; }

  /* action: CTA above subnote, left-aligned (D-LT-4) */
  .legs-telling .legs-telling__action {
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-left: var(--lt-action-inset);
  }
  .legs-telling .legs-telling__subnote { text-align: left; }
}