/**
 * solutions-epd.css — page styles for /solutions/epd/ (page-epd.php · branch solutions-epd).
 *
 * Scoped to .epd-* 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,
 * enqueued alongside). Product minis are token-built LIGHT app objects (DL §1), never dark.
 *
 * §8.5: the only boxed objects are the hero EPD declaration card and the §4 LCA-modules card
 * (elevated distinct objects). The §5 requirements are a slim check-list (no cards), §6 is a
 * borderless beat flow + the reused lifecycle rail, §7 a slim cross-standard strip. No grids.
 *
 * Motion: mid-page reveal via the site .reveal (JS); no bespoke JS. Reduced-motion / no-JS
 * show the designed end-state. Holds 375→2560, zero horizontal scroll.
 */

/* ─────────────────────────────────────────────────────────────
   §1 HERO — EPD declaration card + §4 LCA-modules card share .epd-card chrome
   ───────────────────────────────────────────────────────────── */
.epd-decl,.epd-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}
.epd-card{border-radius:var(--r-lg);box-shadow:var(--sh-lg)}

.epd-decl-head,.epd-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)}
.epd-decl-kick{font-size:var(--t-caption);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-muted)}
.epd-card-title{font-size:var(--t-small);font-weight:700;color:var(--c-heading)}
.epd-decl-prod{margin:0;padding:var(--sp-4) var(--sp-4) 0;font-size:var(--t-h4);font-weight:800;
  color:var(--c-heading)}

/* module chips (A1 → A2 → A3) */
.epd-decl-modules{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4) 0}
.epd-mod{display:inline-flex;align-items:center;font-size:var(--t-caption);font-weight:700;
  color:var(--c-link);background:var(--s-bluelt);border-radius:var(--r-full);padding:4px var(--sp-3)}
.epd-modarrow{color:var(--c-muted)}

.epd-decl-figures{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);padding:var(--sp-4)}
.epd-decl-figures>div{display:flex;flex-direction:column;gap:2px;background:var(--s-alt);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4)}
.epd-fig-v{font-size:var(--t-h4);font-weight:800;color:var(--c-heading);line-height:1.1}
.epd-fig-l{font-size:var(--t-caption);color:var(--c-muted)}
.epd-decl-foot{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:0 var(--sp-4) var(--sp-4);font-size:var(--t-caption);color:var(--c-muted)}
.epd-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)}
.epd-decl .epd-illus{border-top:1px solid var(--c-border)}

/* ─────────────────────────────────────────────────────────────
   §4 MODEL — feature row + LCA-modules flow
   ───────────────────────────────────────────────────────────── */
.epd-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:center}
.epd-visual{display:flex;justify-content:center;min-width:0}
@media (max-width:900px){ .epd-row{grid-template-columns:1fr;gap:var(--sp-8)} .epd-card{max-width:520px} }

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

.epd-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}
.epd-flow .pv-link{height:2px;background:var(--c-border-strong);width:100%;min-width:16px;align-self:center}
.epd-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)}
.epd-flow-l{font-size:var(--t-caption);color:var(--c-muted)}
.epd-flow-v{font-size:var(--t-small);color:var(--c-heading);font-weight:700;white-space:nowrap}
.epd-flow-v b{font-size:var(--t-h4)}
.epd-card .epd-illus{border-top:none;padding-top:var(--sp-3)}
@media (max-width:560px){
  .epd-flow{grid-template-columns:1fr;gap:var(--sp-2)}
  .epd-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 */
}

/* ─────────────────────────────────────────────────────────────
   §5 EN 15804 / PCR — slim check-list (no cards)
   ───────────────────────────────────────────────────────────── */
.epd-reqs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-4) var(--sp-8);max-width:var(--container);width:100%}
.epd-reqs li{display:flex;gap:var(--sp-3);font-size:var(--t-small);color:var(--c-body);line-height:1.5}
.epd-reqs svg{width:18px;height:18px;flex:none;color:var(--c-success);margin-top:2px}
.epd-reqs b{color:var(--c-heading)}
@media (max-width:640px){ .epd-reqs{grid-template-columns:1fr} }

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

/* ─────────────────────────────────────────────────────────────
   §7 OUTCOME (navy) — slim cross-standard strip
   ───────────────────────────────────────────────────────────── */
.epd-cross{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--sp-3)}
.epd-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)}
.epd-cross a:hover,.epd-cross a:focus-visible{background:var(--c-overlay-light)}

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