/* ==========================================================================
   home.css — page-scoped styles for public/index.html (the homepage only).

   Assembled from the three W3 section fragments (A hero/levels/score,
   B features/walkthrough, C devices/compare/science/blog/download) into a
   single `@layer pages` block.  styles.css declares the layer order
   (reset < tokens < base < layout < components < pages < legacy < utilities),
   so everything here wins over the shared components without out-specifying
   them, and no rule here needs a priority override.

   Rules: design tokens only (no literal hex outside var()), font-size only
   through --fs-*, mobile-first with min-width queries at 640/900/1200 to
   match the site breakpoints.  Shared design-system classes (.card, .chip,
   .tag, .rows/.row, .btn*, .table, .icon, .gauge*, .chart*, .orb*,
   .date-strip/.date-chip, .score-circle, .section*, .grid, .divider,
   .group-label, .page-title, .sr-only) are reused, never redefined.

   Loaded on index.html only, via the HOME_CSS flag in
   tools/shell/head-links.html (see tools/shell_sync.py).
   ========================================================================== */

@layer pages {

  /* ========================================================================
     Fragment A — hero, levels, score
     Spec: tasks/redesign/03-homepage.md (D2/D3), 02-design-system.md (C1-C8).
     ======================================================================== */


  /* ---- Hero: two-column layout ----------------------------------------- */
  .hero-grid {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }
  @media (min-width: 900px) {
    .hero-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-xxl);
    }
  }

  .hero-grid__copy .section__lede { margin-top: var(--space-lg); }

  .hero-grid__credibility {
    max-width: 60ch;
    margin-top: var(--space-md);
    font: 400 var(--fs-body-md)/1.43 var(--font-body);
    letter-spacing: .1px;
    color: var(--on-surface-muted);
  }

  .hero-grid__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm-md);
    margin-top: var(--space-xl);
  }
  /* styles.css declares `.btn--secondary, .btn--store` after `.btn--primary`
     at equal specificity, so on an element carrying both `.btn--primary`
     and `.btn--store` (the App Store CTA) the store rule's surface-colour
     background wins over the accent background, leaving on-accent text on
     a near-black fill. Restore the primary look for that combination only. */
  .btn--primary.btn--store { background: var(--accent); color: var(--on-accent); }
  .btn--primary.btn--store:hover { background: color-mix(in srgb, var(--accent) 90%, white); border-color: transparent; }

  .hero-grid__qualifier {
    max-width: 60ch;
    margin-top: var(--space-md);
    color: var(--on-surface-muted);
  }

  .hero-grid__visual { display: flex; justify-content: center; }

  /* ---- Drawn dashboard fragment (no phone bezel) ----------------------- */
  .dash {
    width: min(380px, 100%);
    margin-inline: auto;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .dash:hover { border-color: var(--mood-border); }

  .dash__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm-md);
  }
  .dash .dash__title.page-title { font-size: var(--fs-headline-sm); }
  .dash__head-icons { display: flex; align-items: center; gap: var(--space-sm); color: var(--on-surface-muted); }

  /* Seven 46px chips + six 6px gaps (358px) overrun the panel's content width
     (326px at 390, 348px at the 380px max), so the shared .date-strip's scroll
     + edge mask was cutting today's (aria-current) chip — the one carrying the
     mood ring — in half.  This strip is a fixed illustrated week that never
     needs to scroll: unmask it and let the seven chips share the width. */
  .dash .date-strip {
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .dash .date-chip { flex: 1 1 0; min-width: 0; }

  .dash__orb-wrap { display: flex; justify-content: center; padding-block: var(--space-xs); }

  .dash__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

  .dash__hint {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-sm-md);
    border-radius: var(--radius-md);
    background: var(--surface-container-high);
    font: 400 var(--fs-body-sm)/1.33 var(--font-body);
    letter-spacing: .4px;
    color: var(--on-surface-muted);
  }
  .dash__hint-icon { color: var(--accent); }
  .dash__hint span { flex: 1; }
  /* The only --on-surface-subtle left on this page: a decorative chevron glyph,
     not text.  02-design-system.md C9 bans #6B7380 for text (3.7:1 on the card
     surface) — every label, timestamp, footnote marker and piece of fine print
     here uses --on-surface-muted (7.0:1) instead. */
  .dash__hint-chevron { color: var(--on-surface-subtle); }

  .dash__nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    padding-top: var(--space-sm-md);
    border-top: 1px solid var(--hairline);
  }
  .dash__nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxs);
    color: var(--on-surface-muted);
  }
  .dash__nav-item .icon { width: var(--icon-sm-md); height: var(--icon-sm-md); }
  .dash__nav-label { font: 500 var(--fs-label-sm)/1.2 var(--font-body); letter-spacing: .3px; }
  .dash__nav-item--active {
    position: relative;
    color: var(--accent);
  }
  .dash__nav-item--active::after {
    content: "";
    position: absolute;
    bottom: -8px;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 50%, transparent);
  }

  /* ---- Levels: readiness spectrum bar ----------------------------------- */
  .spectrum { margin-block: var(--space-xl) var(--space-lg); }
  .spectrum__track {
    position: relative;
    display: flex;
    height: 12px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--surface-container-high);
  }
  .spectrum__segment { display: block; height: 100%; width: var(--pct); background: var(--tone); }
  .spectrum__marker {
    position: absolute;
    top: -1px;
    left: var(--pos);
    margin-left: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tone);
    border: 2px solid var(--surface);
    box-shadow:
      0 0 10px color-mix(in srgb, var(--tone) var(--alpha-heavy), transparent),
      0 0 0 1px color-mix(in srgb, var(--tone) var(--alpha-strong), transparent);
  }
  .spectrum__labels { display: none; list-style: none; margin-top: var(--space-sm); }
  @media (min-width: 900px) {
    .spectrum__labels { display: flex; }
    .spectrum__label {
      flex: 0 0 var(--pct);
      text-align: center;
      font: 500 var(--fs-label-sm)/1.45 var(--font-body);
      letter-spacing: .5px;
      color: var(--tone);
    }
  }

  /* ---- Levels: five-row table, coloured dot cell, mobile stacked rows -- */
  .table__level { display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: 600; }
  .table__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--tone); }

  .table--levels thead { display: none; }
  .table--levels, .table--levels tbody, .table--levels tr, .table--levels td { display: block; width: 100%; }
  .table--levels tr { padding-block: var(--space-sm-md); }
  .table--levels tr + tr { border-top: 1px solid var(--hairline); }
  .table--levels td { border-bottom: 0; padding: var(--space-xxs) 0; }
  .table--levels td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-xxs);
    font: 500 var(--fs-label-sm)/1.45 var(--font-body);
    letter-spacing: .5px;
    color: var(--on-surface-muted);
  }
  @media (min-width: 900px) {
    .table--levels thead { display: table-header-group; }
    .table--levels { display: table; width: 100%; }
    .table--levels tbody { display: table-row-group; width: auto; }
    .table--levels tr { display: table-row; width: auto; padding-block: 0; }
    .table--levels tr + tr { border-top: 0; }
    .table--levels td {
      display: table-cell;
      width: auto;
      padding: var(--space-sm-md) var(--space-md);
      border-bottom: 1px solid var(--hairline);
    }
    .table--levels td[data-label]::before { content: none; }
  }

  .levels__note {
    max-width: 68ch;
    margin-top: var(--space-lg);
    font: 400 var(--fs-body-sm)/1.5 var(--font-body);
    letter-spacing: .4px;
    color: var(--on-surface-muted);
  }

  /* ---- Score: pillar grid + stacked sub-component bar ------------------ */
  .score-pillars { margin-top: var(--space-xl); }

  .score-pillar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm-md);
    margin-bottom: var(--space-xs);
  }

  .bar--stacked {
    display: flex;
    margin-top: var(--space-md);
  }
  .bar--stacked__segment { display: block; height: 100%; width: var(--pct); }
  .bar--stacked__segment:nth-child(1) { background: var(--tone); }
  .bar--stacked__segment:nth-child(2) { background: color-mix(in srgb, var(--tone) 65%, transparent); }
  .bar--stacked__segment:nth-child(3) { background: color-mix(in srgb, var(--tone) 40%, transparent); }

  .bar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    margin-top: var(--space-sm);
    list-style: none;
    font: 400 var(--fs-body-sm)/1.33 var(--font-body);
    letter-spacing: .4px;
    color: var(--on-surface-muted);
  }
  .bar__legend li { display: flex; align-items: center; gap: var(--space-xs); }
  .bar__legend li::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tone); }
  .bar__legend li:nth-child(1)::before { background: var(--tone); }
  .bar__legend li:nth-child(2)::before { background: color-mix(in srgb, var(--tone) 65%, transparent); }
  .bar__legend li:nth-child(3)::before { background: color-mix(in srgb, var(--tone) 40%, transparent); }

  /* ========================================================================
     Fragment B — features, how it works, inline CTA
     Spec: tasks/redesign/03-homepage.md (D2/D3), 02-design-system.md (C1-C8).
     ======================================================================== */


  /* ---- Bands (#features) ------------------------------------------------ */
  .fw-bands { display: flex; flex-direction: column; }

  .band {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding-block: var(--space-xl);
  }
  .band + .band { border-top: 1px solid var(--hairline); }
  .band__copy { min-width: 0; }

  /* Decorative product fragment — text beside it carries the meaning. */
  .frag { display: flex; justify-content: center; margin: 0; }
  .frag > figcaption { margin: 0; }

  @media (min-width: 900px) {
    .band { flex-direction: row; align-items: center; gap: var(--space-xxl); }
    .band__copy, .band > .frag { flex: 1 1 0; min-width: 0; }
    .fw-bands > .band:nth-child(even) { flex-direction: row-reverse; }
  }

  /* ---- Notification card (Readiness / Post-Workout / ACWR alert) ------- */
  .fw-notif { width: 100%; max-width: 320px; }
  .fw-notif__head { display: flex; align-items: center; gap: var(--space-xs); }
  .fw-notif__mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: var(--radius-xs);
    background: var(--surface-container-high);
    color: var(--on-surface);
  }
  .fw-notif__app {
    flex: 1;
    font: 600 var(--fs-body-sm)/1.33 var(--font-body);
    letter-spacing: .4px;
    color: var(--on-surface);
  }
  .fw-notif__time { font: 400 var(--fs-label-sm)/1.45 var(--font-body); letter-spacing: .5px; color: var(--on-surface-muted); }
  .fw-notif__title {
    margin-top: var(--space-sm-md);
    font: 600 var(--fs-body-md)/1.43 var(--font-body);
    letter-spacing: .1px;
    color: var(--on-surface);
  }
  .fw-notif__body {
    margin-top: var(--space-xxs);
    font: 400 var(--fs-body-sm)/1.33 var(--font-body);
    letter-spacing: .4px;
    color: var(--on-surface-muted);
  }
  .fw-notif__hr { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm-md); }
  .fw-notif__hr-icon { display: inline-flex; color: var(--tone); }

  /* ---- Session score card (Health) -------------------------------------- */
  .fw-session { width: 100%; max-width: 360px; }
  .fw-session__head { display: flex; align-items: center; gap: var(--space-sm-md); }
  .fw-session__head-text { min-width: 0; }
  .fw-session__label {
    font: 700 var(--fs-body-sm)/1.33 var(--font-body);
    letter-spacing: .4px;
    color: var(--tone);
  }
  .fw-session__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
  .fw-session__metrics {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--hairline);
  }
  .fw-session__metric { display: flex; flex-direction: column; gap: var(--space-xxs); }
  .fw-session__metric-label { font: 400 var(--fs-label-sm)/1.45 var(--font-body); letter-spacing: .5px; color: var(--on-surface-muted); }
  .fw-session__metric-value { font: 600 var(--fs-body-md)/1.43 var(--font-body); letter-spacing: .1px; color: var(--on-surface); }
  .fw-route { display: block; width: 100%; height: auto; margin-top: var(--space-md); overflow: visible; }
  .fw-route line { stroke-width: 4; stroke-linecap: round; }
  .fw-route [data-tone="hrz2"] { stroke: var(--hrz-2); }
  .fw-route [data-tone="hrz3"] { stroke: var(--hrz-3); }
  .fw-route [data-tone="hrz4"] { stroke: var(--hrz-4); }

  /* ---- Training Pulse card (Insights) ------------------------------------ */
  .fw-pulse { width: 100%; max-width: 320px; text-align: center; }
  .fw-pulse .card__header { text-align: left; margin-bottom: var(--space-md); }
  .fw-pulse .gauge { margin-inline: auto; }
  .fw-pulse__chip-row { margin-top: var(--space-sm); }

  /* ---- Leaderboard card (Compete) ---------------------------------------- */
  .fw-leaderboard { width: 100%; max-width: 320px; }
  .fw-leaderboard__rank {
    flex: none;
    width: 24px;
    font: 700 var(--fs-body-sm)/1.43 var(--font-body);
    letter-spacing: .4px;
    color: var(--on-surface-muted);
  }
  .fw-leaderboard__avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    font: 700 var(--fs-body-sm)/1 var(--font-body);
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) var(--alpha-tint), transparent);
  }
  .fw-leaderboard__trailing { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xxs); }
  .fw-leaderboard__row--you {
    margin-inline: calc(-1 * var(--space-sm-md));
    padding-inline: var(--space-sm-md);
    border-left: 2px solid var(--mood-border);
    background: color-mix(in srgb, var(--mood-hue) 6%, transparent);
    border-radius: var(--radius-xs);
  }

  /* ---- Cardio Fitness card (Profile) -------------------------------------- */
  .fw-cardio { width: 100%; max-width: 300px; }
  .fw-cardio__band {
    margin-top: var(--space-md);
    font: 700 var(--fs-headline-sm)/1.33 var(--font-display);
    color: var(--tone);
  }
  .fw-cardio__sub {
    margin-top: var(--space-xxs);
    font: 500 var(--fs-label-sm)/1.45 var(--font-body);
    letter-spacing: .5px;
    color: var(--on-surface-muted);
  }
  .fw-cardio__aerobic { display: flex; justify-content: space-between; align-items: baseline; }
  .fw-cardio__aerobic-label { font: 400 var(--fs-body-md)/1.43 var(--font-body); letter-spacing: .1px; color: var(--on-surface-muted); }
  .fw-cardio__aerobic-value { font: 600 var(--fs-body-md)/1.43 var(--font-body); letter-spacing: .1px; color: var(--on-surface); }

  /* ---- Walkthrough timeline (#how-it-works) ------------------------------ */
  /* The walkthrough is a day-marker timeline, not the numbered .steps component:
     drop the counter and lay each <li> out as a flex row (below).  The
     `#how-it-works .steps { display: grid }` alias that used to fight this from
     `@layer legacy` was deleted from styles.css in this wave, so the declaration
     needs no priority override. */
  ol.steps.steps--timeline { counter-reset: none; display: block; }
  .steps--timeline > li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    position: relative;
    padding: 0 0 var(--space-xxl) 0;
  }
  .steps--timeline > li:last-child { padding-bottom: 0; }
  .steps--timeline > li::before { content: none; }
  .steps--timeline > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 32px;
    bottom: 0;
    left: 43.5px;
    width: 1px;
    background: color-mix(in srgb, var(--accent) var(--alpha-tint), transparent);
  }
  .step__day-col { flex: none; width: 88px; display: flex; justify-content: center; }
  .step__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 var(--space-sm-md);
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--accent) var(--alpha-muted), transparent);
    background: var(--surface);
    font: 600 var(--fs-body-sm)/1 var(--font-body);
    letter-spacing: .4px;
    color: var(--accent);
    white-space: nowrap;
  }
  .step__body { flex: 1; min-width: 0; }
  .steps--timeline .step__title { margin-bottom: var(--space-xs); }
  .steps--timeline p { color: var(--on-surface-muted); }
  .frag--thumb { max-width: 240px; margin-top: var(--space-md); }
  .frag--thumb > * { width: 100%; }

  @media (min-width: 900px) {
    .step__body { display: flex; align-items: flex-start; gap: var(--space-xl); }
    .step__body-text { flex: 1; min-width: 0; }
    /* An explicit width (not just max-width) is required here: as a `flex: none` item
       with no declared width, .frag--thumb falls back to shrink-to-fit sizing, and a
       shrink-to-fit box containing a 100%-width child is a circular/indefinite case —
       browsers resolve it against the child's own intrinsic size. Text using
       `overflow-wrap: anywhere` (the share-sheet thumbnail) legitimately reports a
       near-zero min-content size, which was collapsing that one thumbnail's whole
       column to a sliver. A fixed width sidesteps the shrink-to-fit calculation. */
    .frag--thumb { flex: none; width: 240px; margin-top: 0; }
  }

  /* ---- Permission list thumbnail (walkthrough day 1) --------------------- */
  .fw-permlist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-md);
    padding: var(--space-md);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--surface-container);
  }
  .fw-permlist li {
    display: flex;
    align-items: center;
    gap: var(--space-sm-md);
    font: 400 var(--fs-body-sm)/1.33 var(--font-body);
    letter-spacing: .4px;
    color: var(--on-surface);
  }
  .fw-permlist__icon { display: inline-flex; flex: none; color: var(--tone); }

  /* ---- 15-Day Comparison thumbnail (walkthrough day 15) ------------------ */
  .fw-compare15 { width: 100%; max-width: 260px; }
  .fw-compare15__head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-sm-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--hairline);
    font: 500 var(--fs-label-sm)/1.45 var(--font-body);
    letter-spacing: .5px;
    color: var(--on-surface-muted);
  }
  .fw-compare15__rows { list-style: none; margin-top: var(--space-sm); }
  .fw-compare15__rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-block: var(--space-xs);
  }
  .fw-compare15__label { font: 400 var(--fs-body-md)/1.43 var(--font-body); letter-spacing: .1px; color: var(--on-surface); }

  /* ---- Share-sheet thumbnail (walkthrough, bring a friend) --------------- */
  .fw-share { width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: var(--space-sm-md); }
  .fw-share__text {
    font: 400 var(--fs-body-sm)/1.43 var(--font-body);
    letter-spacing: .4px;
    color: var(--on-surface-muted);
    overflow-wrap: anywhere;
  }

  /* ---- Inline CTA (after the walkthrough) --------------------------------- */
  .cta-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm-md); padding-block: var(--space-lg); }

  @media (min-width: 900px) {
    .cta-inline { padding-block: var(--space-xl); }
  }

  /* ========================================================================
     Fragment C — devices, compare, science, blog preview, download
     Spec: tasks/redesign/03-homepage.md (D2/D3), 02-design-system.md (C1-C8).
     ======================================================================== */


  /* ---- Section link (a lightweight text-button under a section body) --- */
  .section__link { margin-top: var(--space-lg); }

  /* ---- Devices: responsive table — collapses to label:value rows -------- */
  @media (max-width: 767.98px) {
    .table--stack thead { display: none; }
    .table--stack tbody tr {
      display: block;
      padding-block: var(--space-md);
    }
    .table--stack tbody tr + tr { border-top: 1px solid var(--hairline); }
    .table--stack tbody th[scope="row"] {
      display: block;
      padding: 0 0 var(--space-sm-md);
      border-bottom: 0;
      font: 600 var(--fs-body-lg)/1.5 var(--font-body);
      letter-spacing: .15px;
    }
    /* `justify-content: space-between` spreads the cell's flex items evenly, which
       stranded each footnote marker (`Workaround<sup>2</sup>`) alone at the right
       edge, detached from the value it annotates.  Push only the label left and
       keep every value item flush right and adjacent instead. */
    .table--stack tbody td {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: flex-end;
      gap: 0;
      padding: var(--space-xs) 0;
      border-bottom: 0;
      text-align: right;
    }
    .table--stack tbody td::before {
      content: attr(data-label);
      flex: none;
      margin-right: auto;
      padding-right: var(--space-md);
      text-align: left;
      font: 500 var(--fs-body-sm)/1.33 var(--font-body);
      letter-spacing: .4px;
      color: var(--on-surface-muted);
    }
  }

  .devices-aside {
    margin-top: var(--space-sm-md);
    color: var(--on-surface-muted);
  }
  .devices-aside sup a { color: var(--on-surface-muted); }

  /* ---- Footnotes (below a table) ---------------------------------------- */
  .footnotes {
    list-style: none;
    counter-reset: fn;
    margin-top: var(--space-md);
    font: 400 var(--fs-body-sm)/1.5 var(--font-body);
    letter-spacing: .4px;
    color: var(--on-surface-muted);
  }
  .footnotes > li {
    counter-increment: fn;
    position: relative;
    padding-left: 1.6em;
  }
  .footnotes > li + li { margin-top: var(--space-xs); }
  .footnotes > li::before {
    content: counter(fn) ".";
    position: absolute;
    left: 0;
    font-variant-numeric: tabular-nums;
    color: var(--on-surface-muted);
  }
  .footnotes > li:target { color: var(--on-surface); }

  /* Superscript reference markers (inside table cells and the aside note). */
  sup a {
    color: var(--accent);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
  }
  sup a:hover { text-decoration: underline; text-underline-offset: 2px; }

  .compare-footnote {
    margin-top: var(--space-md);
    color: var(--on-surface-muted);
  }

  /* ---- References list (Science) — numbered rows, .rows-adjacent -------- */
  .refs {
    list-style: none;
    counter-reset: ref;
    margin-top: var(--space-lg);
  }
  .refs > li {
    counter-increment: ref;
    position: relative;
    padding: var(--space-md) 0 var(--space-md) 40px;
  }
  .refs > li:first-child { padding-top: 0; }
  .refs > li + li { border-top: 1px solid var(--hairline); }
  .refs > li::before {
    content: counter(ref);
    position: absolute;
    left: 0;
    top: var(--space-md);
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) var(--alpha-tint), transparent);
    font: 600 var(--fs-body-sm)/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
  }
  .refs > li:first-child::before { top: 0; }
  .refs p {
    font: 400 var(--fs-body-md)/1.5 var(--font-body);
    letter-spacing: .1px;
    color: var(--on-surface-muted);
  }
  .refs__cite { font-weight: 600; color: var(--on-surface); }
  .refs a { margin-left: var(--space-xs); white-space: nowrap; }

  /* ---- Download panel (.card.card--mood host) ---------------------------- */
  .download-panel {
    max-width: 640px;
    margin-inline: auto;
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
  }
  .download-panel h2 { margin-bottom: var(--space-sm-md); }
  .download-panel__sub {
    max-width: 52ch;
    margin-inline: auto;
    font: 400 var(--fs-body-lg)/1.5 var(--font-body);
    letter-spacing: .15px;
    color: var(--on-surface-muted);
  }
  .download-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm-md);
    margin-top: var(--space-lg);
  }
  .download-panel__fine-print {
    margin-top: var(--space-md);
    font: 400 var(--fs-body-sm)/1.33 var(--font-body);
    letter-spacing: .4px;
    color: var(--on-surface-muted);
  }

  @media (min-width: 900px) {
    .download-panel { padding: var(--space-xxl) var(--space-xl); }
  }

}