/* ─────────────────────────────────────────────────────────────────────────────
   efta-static.css — the consumer next-step block on the static library pages.

   The eleven public/library/*.html pages do not load the app bundle, so they cannot
   use src/styles/efta.css. This file carries ONLY what the static twin of
   src/components/efta/NextStep.tsx needs: the tokens it references and the rules
   for .efta-next · .efta-h3 · .efta-body · .efta-row · .efta-btn · .efta-btn--sm
   · .efta-footnote (declarations copied from efta.css, EFTA 08 §5). Change the
   component's look in efta.css first, then mirror it here.

   Selectors are nested under .efta-next on purpose: each page has its own hand-
   written stylesheet with element rules (a{color}, h3{margin}) and descendant rules;
   (0,2,0) beats every one of them without !important. The class names on the
   markup are identical to the React component's — libraryNextStep.spec.ts asserts
   that, and that every class used here has a rule below.

   .efta-next-wrap is the static stand-in for the page container the React pages
   provide; --page adds the article column (820 px, 24 px gutters) on the pages
   whose body is not already wrapped.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --efta-green: #4fb387;        /* the answer: CTA fill */
  --efta-green-dark: #45a37a;   /* CTA hover */
  --efta-navy: #2c3e50;         /* authority: the heading, the focus ring */
  --efta-cream: #fff7e6;        /* warmth: the human sections */
  --efta-body: #454754;
  --efta-muted: #5b6570;
  --efta-radius: 12px;
  --efta-font: 'League Spartan', system-ui, sans-serif;
}

.efta-next-wrap { margin: 44px 0 0; }
.efta-next-wrap--page { box-sizing: border-box; max-width: 820px; margin: 48px auto; padding: 0 24px; }

.efta-next { background: var(--efta-cream); border-left: 4px solid var(--efta-green); border-radius: 0 var(--efta-radius) var(--efta-radius) 0; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.efta-next .efta-h3 { font-family: var(--efta-font); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--efta-navy); margin: 0; }
.efta-next .efta-body { font-family: var(--efta-font); font-size: 1.125rem; line-height: 1.6; color: var(--efta-body); margin: 0; }
.efta-next .efta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.efta-next .efta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 28px; border-radius: 8px; font-family: var(--efta-font); font-weight: 700; font-size: 18px; line-height: 1.1; background: var(--efta-green); color: #fff; text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 6px 18px rgba(79, 179, 135, 0.32); transition: background 0.15s, transform 0.15s, border-color 0.15s; }
.efta-next .efta-btn:hover { background: var(--efta-green-dark); color: #fff; }
.efta-next .efta-btn:focus-visible { outline: 3px solid var(--efta-navy); outline-offset: 2px; }
.efta-next .efta-btn--sm { min-height: 46px; font-size: 16px; padding: 0 20px; box-shadow: none; }
.efta-next .efta-footnote { font-size: 0.78rem; font-style: italic; color: var(--efta-muted); }

@media (prefers-reduced-motion: reduce) {
  .efta-next .efta-btn { transition: none; }
}