.vls.v2 {
  /* ── local sizing tokens (design px ÷ 18) ───────────────────────────── */
  --vls-v2-num-s: 3.5rem;        /* milestone year numeral 88px */
  --vls-v2-left-w: 40rem;          /* LeftContentBox w-[720px] */
  --vls-v2-sec-gap: 3.556rem;      /* 64px between the top row + milestone row */

  overflow: clip;

  /* About "Values Panel": solid var(--lt-txt) layer (~ primary-dark surface) with the
     neighborhood photo at opacity ~20% on top — no extra darkening overlay.
     Match the artifact: image at 20% on the dark section surface, no ::after. */
  picture.bg img {
    object-fit: cover;
    opacity: 0.20 !important;
  }

  /* ── overall composition: top row stacked above the milestone row ───── */
  .vls-v2-content {
    align-items: flex-start;
    gap: var(--vls-v2-sec-gap);   /* artifact Content gap-[64px] */
  }

  /* ── TOP: two-column row ────────────────────────────────────────────────
     Standardized header-left/content-right layout — framework half/half row
     (flx-at-1280 f_gp f_b) supplies the 50/50 split, gap, and bottom align. */
  .vls-v2-top {
    width: 100%;
  }

  /* LEFT column — headline box, content left-aligned (items-start) */
  .vls-v2-left {
    align-items: flex-start;
  }

  /* Headline uses the framework Title-1 ramp (fnt_t-1) for responsive sizing +
     palette-correct color; no bespoke .vls-v2-ttl rule. */

  /* accent word "PLAYBOOK."— uses the semantic --accent so it adapts to the section
     palette (lime on primary-dark today; orange if swapped to an alternate palette). */
  .vls-v2-ttl-accent {
    display: inline;
    color: var(--accent);
  }

  /* RIGHT column — flair + body + buttons (artifact Frame1: flex-1 col,
     items-start, gap-16). It fills the remaining width and aligns left. */
  .vls-v2-right {
    align-items: flex-start;
  }

  /* orange flair (artifact Frame1 flair: bug glyph + tally lines, all var(--lt-alt-accent)).
     The shared <FlairLeft/> paints with var(--link-color); locally remap it to
     the orange token so the flair reads orange (not the dark-palette lime). */
  .vls-v2-flair {
    align-items: center;
    --link-color: var(--dk-lnk-hov);   /* var(--lt-alt-accent) orange */
    color: var(--dk-lnk-hov);
  }

  /* flair svg sized centrally by .flr-lft in theme.css */

  /* body paragraph — artifact: SUSE normal 16px, leading-1.6, white. */
  .vls-v2-body {
    margin: 0;
    color: var(--text-color);
    font-family: var(--fnt-m);    /* SUSE */
    max-width: 34rem;
  }

  /* ── BELOW: one milestone row of 4 columns ──────────────────────────── */
  /* Milestone row: the framework responsive grid on the <ol>
     (grd mx-4 ato-fit gp_sp) handles the 4 → 2 → 1 column breakdown via
     container queries; only the list reset lives here. */
  .vls-v2-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .vls-v2-step {
    align-items: flex-start;      /* artifact column items-start */
  }

  .vls-v2-num {
    display: block;
    width: 100%;
    font-family: var(--fnt-t);    /* Archivo */
    font-size: var(--vls-v2-num-s);
    line-height: 1; /* was 0.9 — policy: never < 1 */

    @media screen and (min-width:1280px) {
      & {
        --vls-v2-num-s: 4.889rem; 
      }
    }
  }

  /* milestone title — artifact LowerText: Archivo bold 24px, leading-1.4, white */
  .vls-v2-step-ttl {
    color: var(--text-color);
    font-family: var(--fnt-t);    /* Archivo */
  }

  /* milestone caption — artifact LowerText: Archivo normal 18px, leading-1.4, white */
  .vls-v2-step-cap {
    margin: 0;
    color: var(--text-color);
    font-family: var(--fnt-t);    /* Archivo (NOT SUSE) */
  }
}