/* ============================================================
   /solutions/45v/ — 45V clean hydrogen. Page-specific styles.
   Built ONLY from tokens.css; enqueue AFTER components.css and
   verifier-hub.css (functions.php: cs3-solutions-45v depends on
   cs3-verifier-hub → cs3-components → cs3-tokens).
   Scoped under .s45-*. No new tokens. Raw px = 1px hairlines +
   breakpoints only; every other value is a token; bar widths are
   proportional percentages (∝ tier value), not design tokens.
   No JS (static page); no auto-motion. The only transitions are
   inherited component hovers, already clamped by the global
   prefers-reduced-motion rule in components.css.
   ============================================================ */

/* ---------------------------------------------------------------
   §1 HERO — 45V tier ladder (elevated LIGHT card; DL §1 / §8.5 earned box).
   Four rungs = the four 45V tiers (FACTS R8). Bar width ∝ $/kg. The top
   ($3.00) rung reads GREEN — the node-state "verified/complete" meaning:
   the tier you reach once your carbon intensity is third-party verified.
   Lower rungs read BLUE (action/data). State colour is NOT decorative.
   --------------------------------------------------------------- */
.s45-ladder{width:100%;background:var(--s-page);border:1px solid var(--c-border);
  border-radius:var(--r-xl);box-shadow:var(--sh-xl);padding:var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-4)}
.s45-ladder-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4)}
.s45-ladder-head .eyebrow{margin-bottom:0}
.s45-unit{font-size:var(--t-caption);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--c-muted)}

.s45-rungs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.s45-rung{display:flex;flex-direction:column;gap:var(--sp-2)}
.s45-rung-lead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.s45-tier-val{font-size:var(--t-h4);font-weight:800;color:var(--c-heading);letter-spacing:-.02em}
.s45-rung--top .s45-tier-val{font-size:var(--t-h2)}

.s45-verified{display:inline-flex;align-items:center;gap:var(--sp-1);
  font-size:var(--t-caption);font-weight:700;letter-spacing:.02em;
  padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full);
  background:var(--c-success-tint);color:var(--c-success)}
.s45-verified .cs-icon{width:var(--sp-4);height:var(--sp-4);color:var(--c-success)}

.s45-track{position:relative;height:var(--sp-3);border-radius:var(--r-full);
  background:var(--s-sunken);border:1px solid var(--c-border);overflow:hidden}
.s45-bar{position:absolute;inset-block:0;left:0;border-radius:var(--r-full);background:var(--c-action)}
.s45-bar--t1{width:20%}
.s45-bar--t2{width:33%}
.s45-bar--t3{width:58%}
.s45-bar--t4{width:100%;background:var(--c-success)} /* verified top tier = green */

.s45-ladder-cap{font-size:var(--t-small);color:var(--c-muted);margin:0;
  padding-top:var(--sp-3);border-top:1px solid var(--c-border)}

/* ---------------------------------------------------------------
   §4 MODEL → VERIFY — borderless numbered flow (NOT step-cards; §8.5).
   --------------------------------------------------------------- */
.s45-flow{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--sp-8)}
.s45-beat{min-width:0}
@media (max-width:768px){ .s45-flow{grid-template-columns:1fr;gap:var(--sp-6)} }

/* ---------------------------------------------------------------
   §5 AMMONIA — feature-row (media ↔ copy) + CS5 proof tile (earned box).
   --------------------------------------------------------------- */
.s45-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:center}
@media (max-width:768px){ .s45-row{grid-template-columns:1fr;gap:var(--sp-8)} }

.s45-tile{background:var(--s-page);border:1px solid var(--c-border);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}
.s45-tile-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.s45-tile-head .eyebrow{margin-bottom:0}
.s45-tile-title{font-size:var(--t-h4);font-weight:800;color:var(--c-heading);margin:0}
.s45-path{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.s45-pnode{font-size:var(--t-caption);font-weight:700;color:var(--c-body);
  background:var(--s-sunken);border:1px solid var(--c-border);border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-3)}
.s45-pnode--out{background:var(--s-bluelt);border-color:var(--c-border-accent);color:var(--c-link)}
.s45-parrow{color:var(--c-border-strong);flex:none}

/* ---------------------------------------------------------------
   §6 CORSIA — slim inline cross-band (not a card; §8.5).
   --------------------------------------------------------------- */
.s45-cross{display:flex;gap:var(--sp-6);align-items:flex-start;
  max-width:calc(var(--measure) + var(--sp-16));margin-inline:auto}
.s45-cross .icon-chip{flex:none}
@media (max-width:600px){ .s45-cross{flex-direction:column;gap:var(--sp-4)} }

/* ---------------------------------------------------------------
   §7 OUTCOME — stat tiles + cliff callout on the navy band.
   Stat tiles = parallel comparable data (earned boxes). .stat-num /
   .stat-label are navy-aware (components.css). Overrides beat the
   `.section--navy p/…` role colour with equal-or-higher specificity.
   --------------------------------------------------------------- */
.s45-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6);
  max-width:calc(var(--measure) + var(--sp-16));margin-inline:auto}
.s45-stat{text-align:center;background:var(--c-overlay-light);
  border:1px solid var(--c-border-on-dark);border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-6)}
@media (max-width:600px){ .s45-stats{grid-template-columns:1fr} }
.s45-stat-unit{font-size:var(--t-h4);font-weight:700;color:var(--c-on-dark-muted)}

.s45-cliff{max-width:var(--measure);margin-inline:auto;
  background:var(--c-overlay-light);border:1px solid var(--c-border-on-dark);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-6);font-weight:600}
.section--navy .s45-cliff{color:var(--c-on-dark)} /* AA: full white for the urgency line */

/* ---------------------------------------------------------------
   §8 FAQ — stacked prose Q&A with hairline dividers (extractable DOM).
   --------------------------------------------------------------- */
.s45-faq{max-width:calc(var(--measure) + var(--sp-16));margin-inline:auto}
.s45-qa{padding-block:var(--sp-6)}
.s45-qa + .s45-qa{border-top:1px solid var(--c-border)}

/* §9 CLOSING CTA — tertiary "See pricing" link inside the navy panel.
   The local recolour that lived here (and on four sibling pages, all picking the same
   token) is gone: .cta-panel now sets --ink-link like any other dark surface, so the
   global rule reaches it. */
.s45-pricing-link{margin-top:var(--sp-2)}