.bcv2 {
  --bcv2-primary: var(--color-primary, #1e293b);
  --bcv2-accent: var(--color-secondary, #e37e00);
  --bcv2-secondary: #475569;
  --bcv2-bg: var(--color-bg, #ffffff);
  --bcv2-bg-alt: var(--color-bg-alt, #f5f7fa);
  --bcv2-card: var(--color-bg, #ffffff);
  --bcv2-text: var(--color-text, #172033);
  --bcv2-muted: var(--color-text-muted, #5c667a);
  --bcv2-border: color-mix(in srgb, var(--bcv2-text) 16%, transparent);

  /* Readable ink for anything sitting ON a brand colour, decided by the browser rather than by us.
     The old code hardcoded #111827 on --bcv2-accent and #fff on --bcv2-primary, which silently
     assumed a light accent and a dark primary. Give it a mid-blue accent — as the first real
     business case did — and the step numbers, the RECOMMENDED pill and the decision button all
     rendered near-black on mid-blue.

     This computes WCAG relative luminance in CSS: inside rgb(from …) the channel keywords are
     numbers, and pow() gamma-expands them. 0.1791 is the exact crossover where black and white
     give equal contrast, so the clamp snaps to one or the other. It works whether the brand
     arrives as literal hex (page mode) or as a theme var (theme mode) whose value HubL cannot see
     at render time.

     Do NOT simplify this to an OKLCH-lightness threshold. That was tried: OKLCH lightness is
     perceptual and does not track luminance, and across a 2,040-colour sweep the best possible
     threshold still left 95 colours below AA, worst 3.42:1 — on saturated blues, exactly the case
     that started this. The luminance version measures 0/2040 below AA, worst 4.55:1, against a
     theoretical ceiling of 4.58:1.

     clamp(0, r, 255) guards the pow(): a brand colour outside sRGB yields negative channels, and
     pow() of a negative base is NaN, which invalidates the whole declaration silently. */
  --bcv2-on-accent: rgb(from var(--bcv2-accent)
    calc(clamp(0, (0.1791 - (0.2126 * pow(clamp(0, r, 255) / 255, 2.2) + 0.7152 * pow(clamp(0, g, 255) / 255, 2.2) + 0.0722 * pow(clamp(0, b, 255) / 255, 2.2))) * 100000, 1) * 255)
    calc(clamp(0, (0.1791 - (0.2126 * pow(clamp(0, r, 255) / 255, 2.2) + 0.7152 * pow(clamp(0, g, 255) / 255, 2.2) + 0.0722 * pow(clamp(0, b, 255) / 255, 2.2))) * 100000, 1) * 255)
    calc(clamp(0, (0.1791 - (0.2126 * pow(clamp(0, r, 255) / 255, 2.2) + 0.7152 * pow(clamp(0, g, 255) / 255, 2.2) + 0.0722 * pow(clamp(0, b, 255) / 255, 2.2))) * 100000, 1) * 255));
  --bcv2-on-primary: rgb(from var(--bcv2-primary)
    calc(clamp(0, (0.1791 - (0.2126 * pow(clamp(0, r, 255) / 255, 2.2) + 0.7152 * pow(clamp(0, g, 255) / 255, 2.2) + 0.0722 * pow(clamp(0, b, 255) / 255, 2.2))) * 100000, 1) * 255)
    calc(clamp(0, (0.1791 - (0.2126 * pow(clamp(0, r, 255) / 255, 2.2) + 0.7152 * pow(clamp(0, g, 255) / 255, 2.2) + 0.0722 * pow(clamp(0, b, 255) / 255, 2.2))) * 100000, 1) * 255)
    calc(clamp(0, (0.1791 - (0.2126 * pow(clamp(0, r, 255) / 255, 2.2) + 0.7152 * pow(clamp(0, g, 255) / 255, 2.2) + 0.0722 * pow(clamp(0, b, 255) / 255, 2.2))) * 100000, 1) * 255));
  /* Softened ink for supporting copy on a brand panel — follows the ink, not a hardcoded white. */
  /* 92%, not 80%: on a lighter brand primary the full ink only reaches ~4.8:1, and an 80%
     mix dropped supporting copy to 4.05:1 — measured on the rendered page. Softening is
     a look; falling under AA is a defect. */
  --bcv2-on-primary-soft: color-mix(in srgb, var(--bcv2-on-primary) 92%, transparent);
  --bcv2-on-primary-faint: color-mix(in srgb, var(--bcv2-on-primary) 20%, transparent);
  --bcv2-on-primary-wash: color-mix(in srgb, var(--bcv2-on-primary) 10%, transparent);

  /* Lighter/darker of the brand itself, so panels and the hero get depth from the customer's
     colour instead of a flat slab of one hue. */
  --bcv2-primary-light: oklch(from var(--bcv2-primary) clamp(0, calc(l + .10), 1) c h);
  --bcv2-primary-dark: oklch(from var(--bcv2-primary) clamp(0, calc(l - .12), 1) c h);
  --bcv2-accent-soft: color-mix(in srgb, var(--bcv2-accent) 14%, transparent);

  --bcv2-shadow: 0 18px 50px -34px color-mix(in srgb, var(--bcv2-primary) 45%, transparent);
  --bcv2-radius: 1rem;
  --bcv2-shell: 72rem;
  --bcv2-section-space: clamp(4rem, 8vw, 7rem);
  background: var(--bcv2-bg);
  color: var(--bcv2-text);
  font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 1rem;
  line-height: 1.65;
  overflow: clip;

  /* No full-bleed breakout here, deliberately — width stays auto.

     business-case.html is a plain {% module %} on base-barebone.html, so the parent chain is
     body > main.barebone-main > .hs_cos_wrapper: all unstyled, all already the full content
     width. There is no .row-fluid cap to escape. That cap is real, but only for a module dropped
     into a dnd_area, which this one never is (one template, one named instance).

     The old code forced width/max-width:100vw + margin-inline:calc(50% - 50vw) anyway, and 100vw
     INCLUDES the classic scrollbar while the parent's 100% excludes it. Measured on the live page
     at a 1440px window: a 1424px box inside a 1409px content area, sitting at left:-7.5px and
     running 7.5px past the right edge, with 21 descendants inheriting the overhang — a permanent
     horizontal scrollbar at every window width. Dropping these three declarations makes .bcv2
     exactly 1409px: still edge to edge, zero overflow.

     Do NOT re-add the breakout with overflow-x:clip on html to hide the symptom — that leaves the
     content optically off-centre by half a scrollbar. Inner content is held to --bcv2-shell by
     .bcv2-shell, so backgrounds still go edge to edge on their own. */
}

/* Needs relative colour syntax AND pow() (Chrome 111+/119+, Safari 15.4+/16.4+, Firefox 118+/128+).
   Anything older keeps the previous fixed pairing, which is right for the default palette and no
   worse than what shipped before. Testing rgb(from …) specifically — the oklch() form can be
   supported while this one is not. */
@supports not (color: rgb(from red calc(r) calc(g) calc(b))) {
  .bcv2 {
    --bcv2-on-accent: #111827;
    --bcv2-on-primary: #fff;
    --bcv2-on-primary-soft: rgba(255, 255, 255, .92);
    --bcv2-on-primary-faint: rgba(255, 255, 255, .2);
    --bcv2-on-primary-wash: rgba(255, 255, 255, .1);
    --bcv2-primary-light: var(--bcv2-primary);
    --bcv2-primary-dark: var(--bcv2-primary);
  }
}

.bcv2--wide { --bcv2-shell: 82rem; }
.bcv2 *, .bcv2 *::before, .bcv2 *::after { box-sizing: border-box; }
.bcv2 img { display: block; max-width: 100%; }
.bcv2 a { color: inherit; }
.bcv2 p, .bcv2 h1, .bcv2 h2, .bcv2 h3, .bcv2 dl, .bcv2 dd { margin-top: 0; }
.bcv2 h1, .bcv2 h2, .bcv2 h3 {
  color: inherit;
  font-family: var(--font-heading, inherit);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.08;
}
.bcv2 h1 { font-size: clamp(2.7rem, 7vw, 5.75rem); max-width: 15ch; margin-bottom: 1.5rem; }
.bcv2 h2 { font-size: clamp(2rem, 4vw, 3.45rem); margin-bottom: 1rem; max-width: 19ch; }
.bcv2 h3 { font-size: clamp(1.12rem, 2vw, 1.42rem); margin-bottom: .7rem; }
.bcv2 p:last-child, .bcv2 li:last-child { margin-bottom: 0; }
.bcv2 :focus-visible { outline: 3px solid var(--bcv2-accent); outline-offset: 4px; }

.bcv2-skip {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: 1rem;
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: var(--bcv2-accent);
  color: var(--bcv2-on-accent);
  font-weight: 800;
  transform: translateY(-200%);
}
.bcv2-skip:focus { transform: translateY(0); }

.bcv2-shell { width: min(calc(100% - 2.5rem), var(--bcv2-shell)); margin-inline: auto; }
.bcv2-shell--narrow { max-width: 54rem; }
.bcv2-section { padding: var(--bcv2-section-space) 0; background: var(--bcv2-bg); }
.bcv2-section--tint { background: var(--bcv2-bg-alt); }
.bcv2-section--summary { padding-top: clamp(3rem, 6vw, 5rem); }
.bcv2-section--dark { background: var(--bcv2-primary); color: var(--bcv2-on-primary); }
.bcv2 [id] { scroll-margin-top: 5rem; }

.bcv2-heading { margin-bottom: clamp(2rem, 4vw, 3.2rem); max-width: 52rem; }
.bcv2-heading--compact { margin-bottom: 1.25rem; }
.bcv2-heading--compact h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 0; max-width: none; }
.bcv2-heading > p:not(.bcv2-eyebrow) { color: var(--bcv2-muted); font-size: 1.08rem; max-width: 68ch; }
.bcv2-section--dark .bcv2-heading > p { color: var(--bcv2-on-primary-soft); }
.bcv2-eyebrow, .bcv2-kicker {
  display: block;
  color: var(--bcv2-accent);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .13em;
  line-height: 1.4;
  margin-bottom: .6rem;
  text-transform: uppercase;
}

.bcv2-grid { display: grid; gap: 1.25rem; }
.bcv2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bcv2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bcv2-stack { display: grid; gap: 1rem; }

.bcv2-card {
  background: var(--bcv2-card);
  border: 1px solid var(--bcv2-border);
  border-radius: var(--bcv2-radius);
  box-shadow: var(--bcv2-shadow);
  padding: clamp(1.35rem, 3vw, 2rem);
}
.bcv2-card__top { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.bcv2-card__top h3 { flex: 1; }

.bcv2-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  line-height: 1.2;
  padding: .85rem 1.25rem;
  text-decoration: none;
  transition: transform .16s ease, background-color .16s ease;
}
.bcv2-button:hover { transform: translateY(-1px); }
.bcv2 .bcv2-button--light { background: #fff; color: #172033; }
.bcv2 .bcv2-button--outline { border-color: color-mix(in srgb, var(--bcv2-on-primary) 65%, transparent); color: var(--bcv2-on-primary); }
.bcv2 .bcv2-button--accent { background: var(--bcv2-accent); color: var(--bcv2-on-accent); }

.bcv2-jump {
  background: color-mix(in srgb, var(--bcv2-card) 94%, transparent);
  border-bottom: 1px solid var(--bcv2-border);
  box-shadow: 0 12px 30px -28px var(--bcv2-text);
  position: sticky;
  top: 0;
  z-index: 20;
}
.bcv2-jump__links {
  align-items: center;
  display: flex;
  gap: .35rem;
  min-height: 3.6rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.bcv2-jump a {
  align-items: center;
  border-radius: 999px;
  color: var(--bcv2-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .86rem;
  font-weight: 800;
  min-height: 2.75rem;
  padding: .55rem .85rem;
  text-decoration: none;
}
.bcv2-jump a:hover { background: var(--bcv2-bg-alt); color: var(--bcv2-text); }

.bcv2-scoreboard {
  background: var(--bcv2-primary);
  color: var(--bcv2-on-primary);
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.bcv2-scoreboard__grid { display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bcv2-scoreboard__grid article { border-left: 1px solid var(--bcv2-on-primary-faint); padding: .25rem 1.25rem; }
.bcv2-scoreboard__grid article:first-child { border-left: 0; padding-left: 0; }
.bcv2-scoreboard__grid p { color: rgba(255,255,255,.84); font-size: .95rem; }
.bcv2-scoreboard .bcv2-eyebrow, .bcv2-scoreboard .bcv2-kicker { color: var(--bcv2-accent); }

.bcv2-status {
  align-items: center;
  background: color-mix(in srgb, var(--bcv2-secondary) 12%, var(--bcv2-card));
  border: 1px solid color-mix(in srgb, var(--bcv2-secondary) 32%, transparent);
  border-radius: 999px;
  color: var(--bcv2-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .035em;
  line-height: 1.2;
  padding: .36rem .62rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.bcv2-status--confirmed, .bcv2-status--actual, .bcv2-status--complete { background: #dff7e9; border-color: #82cfa2; color: #14532d; }
.bcv2-status--proposed, .bcv2-status--estimate { background: #e6efff; border-color: #9bb8eb; color: #1e3a8a; }
.bcv2-status--later, .bcv2-status--target, .bcv2-status--directional { background: #fff4cf; border-color: #d9bd5e; color: #6b4f00; }
.bcv2-status--to_validate, .bcv2-status--tbc, .bcv2-status--historic { background: #eef0f4; border-color: #b9bec8; color: #3e4655; }
.bcv2-status--at_risk { background: #ffe6e2; border-color: #dc9288; color: #7f1d1d; }

.bcv2-hero {
  /* Gradient rather than a flat slab, derived from the customer's own primary, so a case with no
     hero asset still looks deliberate. When hero.background IS set, the <img> and scrim sit on
     top of this and it never shows. */
  background: linear-gradient(135deg, var(--bcv2-primary-light) 0%, var(--bcv2-primary) 46%, var(--bcv2-primary-dark) 100%);
  color: var(--bcv2-on-primary);
  min-height: min(51rem, 92vh);
  position: relative;
}
.bcv2-hero__image { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.bcv2-hero__scrim { background: linear-gradient(102deg, color-mix(in srgb, var(--bcv2-primary) 96%, #000 4%) 0 46%, color-mix(in srgb, var(--bcv2-primary) 68%, transparent) 78%, color-mix(in srgb, var(--bcv2-primary) 48%, transparent)); inset: 0; position: absolute; }
.bcv2-hero .bcv2-shell { position: relative; z-index: 1; }
.bcv2-topbar { align-items: center; border-bottom: 1px solid rgba(255,255,255,.2); display: flex; gap: 2rem; justify-content: space-between; min-height: 6rem; }
.bcv2-brand { align-items: center; display: flex; gap: 1rem; min-width: 0; }
.bcv2-brand img { max-height: 3rem; max-width: 10rem; object-fit: contain; }
.bcv2-brand span { border-left: 1px solid rgba(255,255,255,.38); color: rgba(255,255,255,.78); padding-left: 1rem; }
.bcv2-hero__content { padding: clamp(4rem, 9vw, 7.5rem) 0; max-width: 62rem; }
.bcv2-hero__subtitle { color: var(--bcv2-on-primary-soft); font-size: clamp(1.08rem, 2.2vw, 1.35rem); max-width: 52rem; }
.bcv2-hero__decisions { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 2.4rem 0 1.5rem; }
.bcv2-hero__decisions article { backdrop-filter: blur(8px); background: var(--bcv2-on-primary-wash); border: 1px solid var(--bcv2-on-primary-faint); border-radius: .8rem; padding: 1.2rem; }
.bcv2-hero__decisions .bcv2-kicker { color: var(--bcv2-accent); }
.bcv2-date { align-items: center; display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: 1.5rem 0; }
.bcv2-date > span:first-child { color: rgba(255,255,255,.7); }
.bcv2-date .bcv2-status { background: rgba(255,255,255,.92); }

.bcv2-change { counter-reset: change; display: grid; gap: 1rem; }
.bcv2-change__row { align-items: start; background: var(--bcv2-card); border: 1px solid var(--bcv2-border); border-radius: var(--bcv2-radius); display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; padding: 1.5rem; }
.bcv2-change__row p { color: var(--bcv2-muted); }
.bcv2-change__row > div:nth-child(2) { border-inline: 1px solid var(--bcv2-border); padding-inline: 1.5rem; }

.bcv2-outcome .bcv2-kicker { margin-top: .8rem; }
.bcv2-measure { border-top: 1px solid var(--bcv2-border); margin-top: 1.1rem; padding-top: 1rem; }

.bcv2-scope__column { background: var(--bcv2-card); border: 1px solid var(--bcv2-border); border-radius: var(--bcv2-radius); padding: 1.5rem; }
.bcv2-scope__column--now { border-top: 5px solid var(--bcv2-accent); box-shadow: var(--bcv2-shadow); }
.bcv2-scope__column--out { opacity: .82; }
.bcv2-scope ul { list-style: none; margin: 0; padding: 0; }
.bcv2-scope li { border-top: 1px solid var(--bcv2-border); padding: 1rem 0; }
.bcv2-scope li:first-child { border-top: 0; padding-top: .3rem; }
.bcv2-scope li span { color: var(--bcv2-muted); display: block; font-size: .92rem; margin-top: .3rem; }

.bcv2-flow { display: grid; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.bcv2-flow li { display: grid; gap: 1.25rem; grid-template-columns: 2.7rem 1fr; padding: 1.25rem 0; position: relative; }
.bcv2-flow li:not(:last-child)::after { background: rgba(255,255,255,.25); content: ""; height: calc(100% - 3.6rem); left: 1.31rem; position: absolute; top: 3.6rem; width: 2px; }
.bcv2-flow__number { align-items: center; background: var(--bcv2-accent); border-radius: 50%; color: var(--bcv2-on-accent); display: flex; flex: 0 0 auto; font-weight: 900; height: 2.7rem; justify-content: center; position: relative; width: 2.7rem; z-index: 1; }
.bcv2-flow h3 { margin-top: .55rem; }
.bcv2-flow p { color: rgba(255,255,255,.78); }
.bcv2-flow__outcome { border-left: 2px solid var(--bcv2-accent); margin-top: 1rem; padding-left: 1rem; }

.bcv2-operating { display: grid; gap: .85rem; }
.bcv2-operating__row {
  align-items: start;
  background: var(--bcv2-card);
  border: 1px solid var(--bcv2-border);
  border-radius: var(--bcv2-radius);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(10rem, .7fr) minmax(12rem, 1fr) minmax(12rem, 1fr) minmax(12rem, 1fr);
  padding: 1.25rem;
}
.bcv2-operating__row > div + div { border-left: 1px solid var(--bcv2-border); padding-left: 1.5rem; }
.bcv2-operating__row p { color: var(--bcv2-muted); font-size: .93rem; }
.bcv2-operating__row p + p { margin-top: 1rem; }
.bcv2-operating__stage { align-items: center; display: flex; gap: .85rem; }
.bcv2-operating__stage h3 { margin: 0; }

.bcv2-system { border-top: 4px solid var(--bcv2-primary); }
.bcv2-system__direction { border-top: 1px solid var(--bcv2-border); color: var(--bcv2-muted); margin-top: 1rem; padding-top: 1rem; }

.bcv2-metric dl { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.bcv2-metric dl div { border-top: 1px solid var(--bcv2-border); padding-top: .8rem; }
.bcv2-metric dt { color: var(--bcv2-muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.bcv2-metric dd { font-weight: 650; }
.bcv2-callout { background: var(--bcv2-primary); border-radius: var(--bcv2-radius); color: var(--bcv2-on-primary); display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.25rem; padding: 1.5rem; }
.bcv2-callout > div + div { border-left: 1px solid rgba(255,255,255,.25); padding-left: 1.5rem; }

.bcv2-option { position: relative; }
.bcv2-option--recommended { border: 2px solid var(--bcv2-accent); transform: translateY(-.5rem); }
.bcv2-recommended { background: var(--bcv2-accent); border-radius: 999px; color: var(--bcv2-on-accent); display: inline-block; font-size: .72rem; font-weight: 900; letter-spacing: .06em; margin-bottom: 1rem; padding: .4rem .7rem; text-transform: uppercase; }
.bcv2-option .bcv2-kicker { margin-top: 1.1rem; }

.bcv2-risk { align-items: start; background: var(--bcv2-card); border: 1px solid var(--bcv2-border); border-left: 5px solid var(--bcv2-accent); border-radius: var(--bcv2-radius); display: grid; gap: 2rem; grid-template-columns: 1fr minmax(10rem, .25fr); padding: 1.5rem; }
.bcv2-risk__meta { display: grid; gap: 1rem; justify-items: start; }

.bcv2-timeline { list-style: none; margin: 0; max-width: 58rem; padding: 0; }
.bcv2-timeline li { display: grid; gap: 1.25rem; grid-template-columns: 2.5rem 1fr; padding-bottom: 1.5rem; position: relative; }
.bcv2-timeline li:not(:last-child)::before { background: var(--bcv2-border); content: ""; height: calc(100% - 2rem); left: 1.2rem; position: absolute; top: 2.7rem; width: 2px; }
.bcv2-timeline__marker { align-items: center; background: var(--bcv2-primary); border-radius: 50%; color: var(--bcv2-on-primary); display: flex; flex: 0 0 auto; font-weight: 900; height: 2.5rem; justify-content: center; position: relative; width: 2.5rem; z-index: 1; }
.bcv2-timeline__content { background: var(--bcv2-card); border: 1px solid var(--bcv2-border); border-radius: var(--bcv2-radius); padding: 1.4rem; }
.bcv2-timeline__when { color: var(--bcv2-accent); font-weight: 800; }
.bcv2-timeline__content .bcv2-kicker { margin-top: .9rem; }

.bcv2-decision { background: var(--bcv2-primary); color: var(--bcv2-on-primary); }
.bcv2-decision__grid { display: grid; gap: clamp(2rem, 6vw, 5rem); grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); }
/* The decision ask is a SENTENCE, not a section title, so it does not take the section-title
   scale. Measured on a live case: every other h2 on the page is 10-27 characters, this one was
   295 — and inheriting `.bcv2 h2` (clamp(2rem,4vw,3.45rem) inside a 19ch measure) rendered it at
   55px across 15 lines, 894px tall. The tight 19ch measure is what does most of the damage; it is
   right for "Why change" and wrong for a paragraph. */
.bcv2 .bcv2-decision__ask { font-size: clamp(1.35rem, 2.2vw, 2rem); max-width: 34ch; text-wrap: pretty; }
/* Safety valve for a genuinely long ask. ONE threshold, deliberately not a ladder: tiers spaced a
   few dozen characters apart just move the cliff around, so this sits well clear of a normal ask
   and only catches the runaway case.

   A flat 32px, not a fluid clamp: a clamp tops out only at the widest windows and would quietly
   render 24-29px on anything narrower than ~1330px, which is not the size that was asked for.
   Stepped down at the 640px breakpoint below so a 300-character ask does not eat a phone screen. */
.bcv2 .bcv2-decision__ask--long { font-size: 2rem; max-width: 46ch; }
.bcv2-decision__next { color: var(--bcv2-on-primary-soft); font-size: 1.1rem; max-width: 48rem; }
/* The CTA follows a paragraph, so it needs its own breathing room — .bcv2-button carries no
   margin of its own (it is used inline in the topbar and hero too). */
.bcv2-decision .bcv2-button { margin-top: 2rem; }
.bcv2-decision__meta { background: var(--bcv2-on-primary-wash); border: 1px solid var(--bcv2-on-primary-faint); border-radius: var(--bcv2-radius); padding: 1.5rem; }
.bcv2-decision__meta > p, .bcv2-decision__meta > div { border-top: 1px solid var(--bcv2-on-primary-faint); margin: 0; padding: 1rem 0; }
.bcv2-decision__meta > :first-child { border-top: 0; padding-top: 0; }
.bcv2-decision__meta ul { list-style: none; margin: .6rem 0 0; padding: 0; }
.bcv2-decision__meta li { align-items: start; display: flex; gap: 1rem; justify-content: space-between; padding: .45rem 0; }
.bcv2-decision__meta .bcv2-status { background: rgba(255,255,255,.94); }

.bcv2-faqs { border-top: 1px solid var(--bcv2-border); }
.bcv2-faqs details { border-bottom: 1px solid var(--bcv2-border); }
.bcv2-faqs summary { cursor: pointer; font-size: 1.08rem; font-weight: 800; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; position: relative; }
.bcv2-faqs summary::-webkit-details-marker { display: none; }
.bcv2-faqs summary::after { color: var(--bcv2-accent); content: "+"; font-size: 1.5rem; position: absolute; right: .25rem; top: 1rem; }
.bcv2-faqs details[open] summary::after { content: "–"; }
.bcv2-faqs details p { color: var(--bcv2-muted); padding: 0 2.5rem 1.25rem 0; }

.bcv2-footer { background: color-mix(in srgb, var(--bcv2-primary) 86%, #000 14%); color: var(--bcv2-on-primary); padding: 2.5rem 0; }
.bcv2-footer .bcv2-shell { align-items: start; display: grid; gap: 1.5rem; grid-template-columns: auto 1fr; }
.bcv2-footer img { max-height: 2.5rem; max-width: 9rem; object-fit: contain; }
.bcv2-footer__meta { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; justify-content: flex-end; }
.bcv2-footer__meta p { color: rgba(255,255,255,.8); font-size: .88rem; margin: 0; }
.bcv2-footer__fine { border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.64); font-size: .8rem; grid-column: 1 / -1; margin: 0; padding-top: 1rem; }

.bcv2[data-theme="dark"] {
  --bcv2-bg: #0f172a;
  --bcv2-bg-alt: #151f33;
  --bcv2-card: #1b263b;
  --bcv2-text: #f5f7fb;
  --bcv2-muted: #c3cada;
  --bcv2-border: rgba(255,255,255,.15);
}
.bcv2[data-theme="dark"] .bcv2-status--confirmed,
.bcv2[data-theme="dark"] .bcv2-status--actual,
.bcv2[data-theme="dark"] .bcv2-status--complete { color: #14532d; }

@media (prefers-color-scheme: dark) {
  .bcv2[data-theme="auto"] {
    --bcv2-bg: #0f172a;
    --bcv2-bg-alt: #151f33;
    --bcv2-card: #1b263b;
    --bcv2-text: #f5f7fb;
    --bcv2-muted: #c3cada;
    --bcv2-border: rgba(255,255,255,.15);
  }
}

@media (max-width: 900px) {
  .bcv2-grid--3 { grid-template-columns: 1fr; }
  .bcv2-grid--2 { grid-template-columns: 1fr; }
  .bcv2-change__row { grid-template-columns: 1fr; }
  .bcv2-change__row > div:nth-child(2) { border: 0; border-block: 1px solid var(--bcv2-border); padding: 1.25rem 0; }
  .bcv2-option--recommended { transform: none; }
  .bcv2-decision__grid { grid-template-columns: 1fr; }
  .bcv2-scoreboard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bcv2-scoreboard__grid article:nth-child(3) { border-left: 0; padding-left: 0; }
  .bcv2-scoreboard__grid article:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.24); padding-top: 1.25rem; }
  .bcv2-operating__row { grid-template-columns: 1fr 1fr; }
  .bcv2-operating__row > div:nth-child(3) { border-left: 0; padding-left: 0; }
}

@media (max-width: 640px) {
  .bcv2-shell { width: min(calc(100% - 1.5rem), var(--bcv2-shell)); }
  .bcv2-topbar { align-items: flex-start; flex-direction: column; gap: 1rem; padding: 1.2rem 0; }
  .bcv2-topbar .bcv2-button { width: 100%; }
  .bcv2-brand span { display: none; }
  .bcv2-hero { min-height: auto; }
  .bcv2-hero__content { padding: 3.5rem 0 4.5rem; }
  .bcv2-hero__decisions { grid-template-columns: 1fr; }
  .bcv2 .bcv2-decision__ask--long { font-size: 1.5rem; }
  .bcv2-date { align-items: flex-start; flex-direction: column; }
  .bcv2-risk { grid-template-columns: 1fr; }
  .bcv2-metric dl { grid-template-columns: 1fr; }
  .bcv2-callout { grid-template-columns: 1fr; }
  .bcv2-callout > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.25); padding-left: 0; padding-top: 1.5rem; }
  .bcv2-footer .bcv2-shell { grid-template-columns: 1fr; }
  .bcv2-footer__meta { justify-content: flex-start; }
  .bcv2-scoreboard__grid { grid-template-columns: 1fr; }
  .bcv2-scoreboard__grid article,
  .bcv2-scoreboard__grid article:first-child,
  .bcv2-scoreboard__grid article:nth-child(3) { border-left: 0; padding: 1rem 0; }
  .bcv2-scoreboard__grid article + article { border-top: 1px solid rgba(255,255,255,.24); }
  .bcv2-operating__row { grid-template-columns: 1fr; }
  .bcv2-operating__row > div + div { border-left: 0; border-top: 1px solid var(--bcv2-border); padding-left: 0; padding-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bcv2 *, .bcv2 *::before, .bcv2 *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media print {
  .bcv2 { --bcv2-bg: #fff; --bcv2-bg-alt: #f5f7fa; --bcv2-card: #fff; --bcv2-text: #111827; --bcv2-muted: #4b5563; }
  .bcv2-skip, .bcv2-button, .bcv2-jump { display: none; }
  .bcv2-hero, .bcv2-section--dark, .bcv2-decision { background: #fff !important; color: #111827 !important; min-height: auto; }
  .bcv2-hero__image, .bcv2-hero__scrim { display: none; }
  .bcv2-card, .bcv2-change__row, .bcv2-risk, .bcv2-timeline__content { box-shadow: none; break-inside: avoid; }
}