/**
 * solutions-corsia.css — page styles for /solutions/corsia/ (page-corsia.php · branch
 * solutions-corsia).
 *
 * Scoped to .cor-* so nothing leaks. Tokens ONLY (raw micro-px for hairlines/icon sizes is
 * house style; every colour/space/radius/shadow is a token). Reuses .pv-node/.pv-scope/
 * .pv-name/.pv-val + .pill + .status-pill (components) and .vh-lifecycle (verifier-hub.css).
 * Product minis are token-built LIGHT app objects (DL §1), never dark.
 *
 * §8.5: boxed objects = the hero eligibility card, the §4 pathway→CI card, the §5 CS3 case
 * tile (elevated distinct objects). §3 is a 2-state compare, §6 borderless beats + the reused
 * rail, §7 a slim cross strip. No card grids.
 *
 * no-JS: the site .reveal defaults to opacity:0 (components.css) and is restored by main.js /
 * prefers-reduced-motion. This block ADDS the end-state for JS-disabled + motion-allowed
 * visitors so §3–§9 are never blank (SEO_PLAN §8.6 / DL §4). Scoped here → loads with the page.
 */

@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   §1 HERO eligibility card + §4 pathway card share .cor-card chrome
   ───────────────────────────────────────────────────────────── */
.cor-elig,.cor-card{margin:0;width:100%;max-width:460px;background:var(--s-page);
  border:1px solid var(--c-border);border-radius:var(--r-xl);box-shadow:var(--sh-xl);overflow:hidden}
.cor-card{border-radius:var(--r-lg);box-shadow:var(--sh-lg)}

.cor-elig-head,.cor-card-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--c-border)}
.cor-elig-kick{font-size:var(--t-caption);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-muted)}
.cor-card-title{font-size:var(--t-small);font-weight:700;color:var(--c-heading)}

/* fuel pathway (Feedstock → Conversion → Fuel) — reuses .pv-node grammar */
.cor-path,.cor-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;
  gap:var(--sp-2);padding:var(--sp-6) var(--sp-4) 0}
.cor-path .pv-link,.cor-flow .pv-link{height:2px;background:var(--c-border-strong);width:100%;
  min-width:16px;align-self:center}

/* CI callout (hero) */
.cor-elig-ci{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  margin:var(--sp-6) var(--sp-4) 0;padding:var(--sp-4);background:var(--s-alt);border-radius:var(--r-md)}
.cor-ci-v{font-size:var(--t-h4);color:var(--c-heading);font-weight:700;white-space:nowrap}
.cor-ci-v b{font-size:var(--t-h2)}
.cor-ci-l{font-size:var(--t-caption);color:var(--c-muted)}
.cor-elig-foot{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:var(--sp-4);font-size:var(--t-caption);color:var(--c-muted)}
.cor-illus{margin:0;padding:var(--sp-3) var(--sp-4) var(--sp-4);border-top:1px solid var(--c-border);
  font-size:var(--t-caption);color:var(--c-muted)}

/* §4 pathway card total row */
.cor-flow-total{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:var(--sp-6);padding:var(--sp-4);background:var(--s-alt);border-top:1px solid var(--c-border)}
.cor-flow-l{font-size:var(--t-caption);color:var(--c-muted)}
.cor-flow-v{font-size:var(--t-small);color:var(--c-heading);font-weight:700;white-space:nowrap}
.cor-flow-v b{font-size:var(--t-h4)}
.cor-card .cor-illus{border-top:none;padding-top:var(--sp-3)}

@media (max-width:560px){
  .cor-path,.cor-flow{grid-template-columns:1fr;gap:var(--sp-2)}
  .cor-path .pv-link,.cor-flow .pv-link{width:2px;height:16px;min-width:0;margin-inline:auto} /* min-width:0 — the base rule's min-width:16px otherwise paints a 16x16 square */
}

/* ─────────────────────────────────────────────────────────────
   §4 / §5 feature rows
   ───────────────────────────────────────────────────────────── */
.cor-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:center}
.cor-visual{display:flex;justify-content:center;min-width:0}
@media (max-width:900px){ .cor-row{grid-template-columns:1fr;gap:var(--sp-8)} .cor-card,.cor-tile{max-width:520px} }

.cor-blist{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.cor-blist li{display:flex;gap:var(--sp-3);font-size:var(--t-small);color:var(--c-body);line-height:1.5}
.cor-blist svg{width:18px;height:18px;flex:none;color:var(--c-success);margin-top:2px}
.cor-blist b{color:var(--c-heading)}

/* §5 CS3 case tile */
.cor-tile{width:100%;max-width:460px;background:var(--s-page);border:1px solid var(--c-border);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:var(--sp-6)}
.cor-tile-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.cor-tile-title{margin:var(--sp-3) 0 var(--sp-4);font-size:var(--t-h4);font-weight:800;color:var(--c-heading)}
.cor-tile-stats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.cor-tile-stats li{display:flex;align-items:baseline;gap:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px solid var(--c-border)}
.cor-stat-v{flex:0 0 auto;min-width:88px;font-size:var(--t-h4);font-weight:800;color:var(--c-heading)}
.cor-stat-l{font-size:var(--t-small);color:var(--c-body)}

/* ─────────────────────────────────────────────────────────────
   §6 borderless numbered beats (rail = reused .vh-lifecycle)
   ───────────────────────────────────────────────────────────── */
.cor-beats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8)}
.cor-beats>li{gap:var(--sp-2)}
.cor-beats .h4{margin:var(--sp-1) 0 0}
@media (max-width:760px){ .cor-beats{grid-template-columns:1fr;gap:var(--sp-6)} }

/* ─────────────────────────────────────────────────────────────
   §7 outcome (navy) — slim cross strip
   ───────────────────────────────────────────────────────────── */
.cor-cross{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-6)}
.cor-cross a{display:inline-flex;align-items:center;min-height:var(--tap-min);font-size:var(--t-small);
  font-weight:700;color:var(--c-eyebrow-dark);border:1px solid var(--c-overlay-light);
  border-radius:var(--r-full);padding:var(--sp-2) var(--sp-6)}
.cor-cross a:hover,.cor-cross a:focus-visible{background:var(--c-overlay-light)}

/* On-navy focus ring was patched here; superseded by the global --c-focus-on-dark rule
   in components.css (ratified DESIGN_LANGUAGE §8.6) — which is the exact long-term fix
   this branch flagged. Removed so corsia does not out-specify the global rule and end up
   the one page with a white ring where every other navy band is cyan. */

/* ─────────────────────────────────────────────────────────────
   §8 FAQ + §9 pricing link
   ───────────────────────────────────────────────────────────── */
.cor-faq{display:flex;flex-direction:column;gap:var(--sp-8);max-width:var(--measure);margin-inline:auto;width:100%}
.cor-pricing-link{margin-top:var(--sp-2)}
.cta-panel .cor-pricing-link a{font-weight:700} /* colour now from --ink-link (components.css surface roles) */