/*
 * eSIM Store — per-page styles
 *
 * Ported verbatim from inline <style> blocks in design HTML files:
 *   - index.html          → .hp-* (homepage)
 *   - japan.html          → .pd-* (PDP)
 *   - destinations.html   → .ds-* (catalog / destinations)
 *   - cart.html           → .ct-* (cart)
 *   - checkout.html       → .co-* (checkout)
 *   - order-confirmation  → .oc-* (order confirmation)
 *   - my-esims.html       → .me-* (my account / eSIMs)
 *   - how-it-works.html   → .ed-* (education / how it works)
 *
 * ADR: docs/decisions/ADR-004-components-css-wholesale-port.md
 * Strategy: load site-wide (single HTTP request). At v1 traffic levels
 * the ~20 KB overhead per page is acceptable. Split into conditional
 * per-template enqueues in v2 if Core Web Vitals show measurable impact.
 *
 * All --color-*, --font-*, --radius-*, --spacing-* variables resolved
 * from tokens.css (loaded first in global.css).
 */

/* ─────────────────────────────────────────────
   HOMEPAGE  (.hp-*)
   Source: index.html <style>
   ───────────────────────────────────────────── */

/* Hero */
.hp-hero { padding: 28px 0 72px; }
.hp-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.hp-eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: var(--color-accent-1-soft); color: var(--color-accent-1-hover); border-radius: var(--radius-full); font-size: 13px; font-weight: 600; margin-bottom: 24px; }
.hp-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-1); }
.hp-h1 { font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4.25rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; margin: 0; }
.hp-h1 em { font-style: normal; color: var(--color-accent-1); }
.hp-sub { font-size: 18px; color: var(--color-contrast-muted); line-height: 1.5; margin: 22px 0 28px; max-width: 480px; }
.hp-search-row { display: flex; gap: 10px; align-items: center; max-width: 580px; }
.hp-search-go { padding: 14px 22px; }
.hp-stats { display: flex; gap: 36px; margin-top: 40px; flex-wrap: wrap; }
.hp-stat strong { color: var(--color-contrast); font-weight: 700; font-size: 24px; display: block; font-family: var(--font-family-heading); letter-spacing: -0.02em; }
.hp-stat span { font-size: 13px; color: var(--color-contrast-muted); }

/* ESM-70: `.hp-mosaic` / `-m-tall` / `-m-wide` deleted — the mock's hero collage
   became the WebGL globe (ADR-003). `.hp-section-head` and `.hp-grid-6` too:
   popular destinations renders `.es-section-head` and `.es-country-grid` /
   `-popular` (theme-bridge.css), which is where the tile ratio now lives. */

/* How it works dark section */
.hp-how { background: var(--color-contrast); color: var(--color-base); border-radius: var(--radius-xl); padding: 64px var(--container-gutter); margin: 0 var(--container-gutter); }
.hp-how-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 16px; }
.hp-how-head h2 { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; }
.hp-how-head p { color: rgba(251,247,240,0.65); margin: 8px 0 0; max-width: 460px; font-size: 15px; }
.hp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hp-step { padding: 28px; background: rgba(251,247,240,0.05); border: 1px solid rgba(251,247,240,0.10); border-radius: var(--radius-lg); }
.hp-step-n { width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent-1); color: #FFFFFF; display: grid; place-items: center; font-family: var(--font-family-heading); font-weight: 700; font-size: 16px; margin-bottom: 24px; }
.hp-step h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.hp-step p { color: rgba(251,247,240,0.7); margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; }
.hp-step-detail { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(251,247,240,0.10); font-family: var(--font-family-mono); font-size: 12px; color: rgba(251,247,240,0.55); }

/* ── ESM-79: the three step cards share one internal baseline grid ──────────
 *
 * The cards were already the same HEIGHT — the grid stretches them, all three
 * measured 332.9 @1440 — but nothing inside them lined up, because each row of
 * text is as tall as its own copy. Measured 2026-08-06 @1440:
 *   card 2's <h3> wraps to two lines (46px against 23), so its body copy starts
 *   at y=2499.6 while cards 1 and 3 start at 2476.6 — a 23px step; and the three
 *   footnote rules sat at y=2560.0 / 2605.5 / 2582.5, no two the same.
 *
 * `subgrid` is the fix rather than a set of `min-height`s because it states the
 * actual intent — "these four rows are shared by the three cards" — and derives
 * every height from the content instead of from a number that has to be
 * re-measured whenever the copy changes. Row 3 (the body) takes `1fr`, so the
 * slack collects there and BOTH the body top and the footnote top land on a
 * shared line; a `margin-top: auto` on the footnote alone would have aligned its
 * bottom and left the rules ragged, which is the edge a reader actually sees.
 *
 * `row-gap: 0` is required: `.hp-steps` carries `gap: 24px` for the space
 * BETWEEN cards, and inside a subgrid that same row gap would be inserted three
 * times inside every card. The column gap is restated so the cards keep their
 * 24px. Both are scoped to ≥1024 — below that `.hp-steps` is a single column,
 * where the cards are stacked and sharing row heights would only add slack.
 *
 * `@supports` guard: without subgrid the section renders exactly as it does
 * today (ragged, not broken). Baseline support since 2023; the guard is there so
 * the degradation is stated rather than discovered. */
@media (min-width: 1024px) {
  @supports (grid-template-rows: subgrid) {
    .hp-steps { grid-template-rows: auto auto 1fr auto; row-gap: 0; column-gap: 24px; }
    .hp-step  { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
  }
}

/* Regional feature cards */
.hp-regional { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; }
/* ESM-87 — the base background is a GRADIENT, not a flat fill. The modifier
 * below is interpolated from the live `product_region` slug, so a slug with no
 * rule of its own lands here; before this it landed on a flat white card
 * standing next to gradient neighbours, which reads as breakage rather than as
 * a card whose region has no colour yet. Cream → white keeps the shape of the
 * treatment without claiming a region identity. */
.hp-region { background: linear-gradient(135deg, var(--color-base), var(--color-base-elevated)); border: 1px solid var(--color-neutral); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; min-height: 240px; text-decoration: none; color: inherit; transition: box-shadow var(--transition-duration); }
.hp-region:hover { box-shadow: var(--shadow-md); }
.hp-region-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hp-region-title { font-family: var(--font-family-heading); font-size: 26px; font-weight: 600; letter-spacing: -0.025em; }
.hp-region-sub { color: var(--color-contrast-muted); font-size: 14.5px; margin-top: 6px; }
/* ESM-70: `.hp-region-flags` / `-flag` deleted — ESM-4 dropped the fanned flag
   stack with the hardcoded country list it was drawn from. */
.hp-region-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; }
.hp-region-price strong { font-family: var(--font-family-heading); font-weight: 700; font-size: 28px; letter-spacing: -0.025em; }
.hp-region-price small { display: block; color: var(--color-contrast-muted); font-size: 12.5px; margin-top: 2px; font-family: var(--font-family-mono); }
/* Keyed to the REAL `product_region` slug — patterns/region-card.php builds
 * `hp-region--{$slug}` from the taxonomy, so a card can carry any slug the
 * taxonomy holds the moment that region is one of the two with the most plans.
 *
 * ESM-87 — REWRITTEN FROM THE TOKENS, because the old set was keyed to neither
 * the taxonomy nor the palette:
 *
 *   · `mena` had NO rule while being a live slug with 17 plans, so a MENA card
 *     would have rendered flat beside six gradient neighbours;
 *   · four of the six rules wore ANOTHER region's colour. `--americas` started
 *     on `oceania`'s soft (#D5E8E4), `--africa` on `mena`'s (#F6DDB4),
 *     `--global` on `africa`'s (#E5DCEE) — that last pair being the mock's
 *     `--tucana` gradient kept verbatim under a new name — and `--oceania`
 *     opened on #D9E7F2, a hex that appears in no token file at all. So adding
 *     `mena` from the tokens was not additive: it would have made MENA and
 *     Africa the same card.
 *   · all twelve stops were hardcoded hex, in a theme whose rule is that colour
 *     comes from the tokens.
 *
 * Now every region is `<its own soft token> → <the page's cream>`: one derived
 * shape, no invented values, and each slug wears its own colour. The mapping is
 * the SAME one `.es-region-{slug}` already uses for the tile chips
 * (theme-bridge.css), so a region reads as the same colour wherever it appears.
 *
 * COVERAGE, checked against the database rather than against the homepage
 * (`wp term list product_region`, 2026-08-06): africa, americas, asia, europe,
 * global, local, mena, oceania — eight terms, seven of them here. `local` is
 * absent DELIBERATELY: patterns/region-card.php `continue`s past it (it is the
 * importer's marker for single-country bundles, not a region anyone browses),
 * verified by rendering the pattern against that term alone and getting no
 * card. Should that exclusion ever be lifted, `local` lands on the `.hp-region`
 * base gradient above and renders plain-but-deliberate — which is also what a
 * region slug introduced by a future import will do, instead of the flat white
 * card that started this. That base default is the reason no rule is written
 * here "in case": ESM-70 deleted exactly such a promise (`--orion`, `--tucana`)
 * and it should not come back in a new spelling. */
.hp-region--europe   { background: linear-gradient(135deg, var(--color-region-europe-soft),   var(--color-base)); }
.hp-region--asia     { background: linear-gradient(135deg, var(--color-region-asia-soft),     var(--color-base)); }
.hp-region--americas { background: linear-gradient(135deg, var(--color-region-americas-soft), var(--color-base)); }
.hp-region--mena     { background: linear-gradient(135deg, var(--color-region-mena-soft),     var(--color-base)); }
.hp-region--africa   { background: linear-gradient(135deg, var(--color-region-africa-soft),   var(--color-base)); }
.hp-region--oceania  { background: linear-gradient(135deg, var(--color-region-oceania-soft),  var(--color-base)); }
.hp-region--global   { background: linear-gradient(135deg, var(--color-region-global-soft),   var(--color-base)); }

/* ESM-70: the trust bar's mock rules (`.hp-trustline`, `.hp-trust-item`,
   `.hp-trust-icon`) are gone — patterns/trust-bar.php emits `.es-trust-bar` /
   `-item` / `-icon-wrap`, all in theme-bridge.css, which still cites the mock's
   measurements as the source of its numbers. */

/* Device compat teaser */
.hp-compat { background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: var(--radius-xl); padding: 48px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.hp-compat h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.hp-compat p { color: var(--color-contrast-muted); margin: 16px 0 24px; font-size: 15.5px; line-height: 1.6; }
.hp-compat-card { background: var(--color-base); border-radius: var(--radius-lg); padding: 24px; border: 1px solid var(--color-neutral); }
/* KEPT DELIBERATELY, though nothing renders them today (ESM-70, ADR-011 §2).
 * These style the two-select "does my phone support eSIM?" form that
 * patterns/device-compat-checker.php removed as a dead control, saying "when a
 * real lookup ships, restore the form". `git log -S 'hp-compat-row'` shows that
 * exact markup being taken out, so these are the rules it comes back into, not a
 * guess. If the form is ever ruled out for good, delete these three with it. */
.hp-compat-row { display: flex; gap: 10px; margin-bottom: 12px; }
.hp-compat-row select { flex: 1; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-neutral); background: #FFFFFF; font: inherit; font-size: 15px; color: var(--color-contrast); }
.hp-compat-result { padding: 14px 16px; background: var(--color-success-soft); border-radius: var(--radius-md); font-size: 14.5px; color: #1F5740; display: flex; align-items: center; gap: 10px; }

/* Globe wrapper */
.hp-globe-wrap { position: relative; aspect-ratio: 1; max-width: 600px; margin-left: auto; }
.hp-globe-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(63,138,110,0.12) 0%, rgba(216,122,92,0.06) 40%, transparent 70%); pointer-events: none; }

/* Homepage responsive */
@media (max-width: 1023.98px) {
  .hp-hero-grid { grid-template-columns: 1fr; }
  /* ESM-18: `margin: 0 auto` on a GRID ITEM makes it shrink-to-fit, and every
     child of this wrapper is absolutely positioned except `.es-globe`,
     whose own width is 100% of the wrapper. Once `.es-globe` lost its
     420px floor the max-content size became 0 and the globe collapsed to
     0x0 on the phone. `width: 100%` pins the wrapper to the grid track,
     so the globe scales down with the rail instead of vanishing. */
  .hp-globe-wrap { width: 100%; max-width: 480px; margin: 0 auto; }
  .hp-steps { grid-template-columns: 1fr; }
  .hp-regional { grid-template-columns: 1fr; }
  .hp-compat { grid-template-columns: 1fr; padding: 32px; }
}
/* ESM-70: the 767px block held only `.hp-grid-6`, `.hp-section-head` and
   `.hp-trustline`; their replacements carry their own narrow-viewport rules. */

/* ─────────────────────────────────────────────
   PDP — Product Detail Page  (.pd-*)
   Source: japan.html <style>
   ───────────────────────────────────────────── */

/* ── Most of the .pd-* dictionary was deleted here — ESM-70, ADR-011 ────────
 * The country PDP was rebuilt on `.es-pdp-*` / `.es-carriers` /
 * `.es-install-stepper` (theme-bridge.css), so of the 46 classes ported into
 * this section only three groups are still rendered by anything:
 * `.pd-plans-grid`, `.pd-faq*` and `.pd-related-grid` — which is why the
 * responsive rules at the bottom still name them. ADR-011 has the full
 * mock → live mapping. One deletion is worth singling out: `.pd-coverage*` was
 * a decorative map of Japan with three floating pins, and it has no replacement
 * at all — the real coverage answer is `.es-coverage-list`. */
.pd-plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* FAQ */
.pd-faq { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.pd-faq h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.pd-faq-list { background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: var(--radius-lg); }
.pd-faq-list details { border-top: 1px solid var(--color-neutral); }
.pd-faq-list details:first-child { border-top: 0; }
.pd-faq-list summary { padding: 18px 22px; cursor: pointer; font-size: 15.5px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; list-style: none; min-height: 56px; }
.pd-faq-list summary::-webkit-details-marker { display: none; }
.pd-faq-list summary::after { content: ""; width: 14px; height: 14px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%230F1A2E' stroke-width='1.75' stroke-linecap='round'><path d='m3 5 4 4 4-4'/></svg>"); background-repeat: no-repeat; transition: transform var(--transition-duration); }
.pd-faq-list details[open] summary::after { transform: rotate(180deg); }
.pd-faq-list .pd-faq-body { padding: 0 22px 18px; color: var(--color-contrast-muted); font-size: 14.5px; line-height: 1.6; }

/* Related */
.pd-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* ESM-70: the `.pd-related-grid .es-tile` ratio went with `.es-tile`; the grid
   holds `.es-country-tile`, sized in theme-bridge.css. */

/* PDP responsive */
@media (max-width: 1023.98px) {
  .pd-faq { grid-template-columns: 1fr; }
  .pd-plans-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .pd-plans-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIVE PAGE DICTIONARIES WERE DELETED HERE — ESM-70 (see docs/decisions/ADR-011)
   ═══════════════════════════════════════════════════════════════════════════
   `.ds-*` catalog · `.ct-*` cart · `.co-*` checkout · `.oc-*` order confirmation
   · `.me-*` my eSIMs — 310 lines, 158 class names, none of them emitted by the
   theme, either plugin, post content, options or any rendered page. Those five
   surfaces were rebuilt on WooCommerce Blocks plus the theme's `.es-*` names, so
   the mock's stylesheet for them never had anything to attach to. ADR-011 has
   the mock → live mapping; the replacements are all in theme-bridge.css.

   ESM-52 is carried forward out of the checkout block because it is a decision,
   not a rename. The mock's card form, wallet buttons and payment-method list
   (18 rules over `.co-pay-option*`, `.co-card-form`, `.co-card-stripe`,
   `.co-wallet-*`) were deleted in that card because this site has no card
   gateway and will not get one — `forge-test-gateway` is the only payment
   method (Andrew, 2026-07-30). Payment selection is WooCommerce's own
   `.wc-block-components-radio-control__option`, styled in theme-bridge.css.
   That was the third trace of a payment stack the site will not have, after the
   mock artwork and the go-live slot in patterns/footer-bottom.php — the slot is
   deliberately empty; do not "finish" it. See websites/esim-store/CLAUDE.md
   §Plugins.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   HOW IT WORKS / EDUCATION  (.ed-*)
   Source: how-it-works.html <style>
   ───────────────────────────────────────────── */

.ed-hero { padding: 56px 0 36px; }
.ed-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; max-width: 14ch; }
.ed-hero p { color: var(--color-contrast-muted); margin: 22px 0 0; font-size: 18px; line-height: 1.5; max-width: 620px; }
.ed-toc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 28px; }
.ed-toc a { font-size: 13px; padding: 8px 14px; border-radius: var(--radius-full); background: var(--color-base-elevated); border: 1px solid var(--color-neutral); text-decoration: none; color: var(--color-contrast); font-weight: 500; }
.ed-toc a:hover { background: var(--color-base); }

.ed-section h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 14px; }
.ed-section .ed-lede { color: var(--color-contrast-muted); font-size: 16px; max-width: 640px; margin-bottom: 28px; line-height: 1.55; }

.ed-explain { background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: var(--radius-xl); padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.ed-explain h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 10px; }
.ed-explain p { color: var(--color-contrast-muted); font-size: 15px; line-height: 1.6; }
.ed-vs { display: grid; gap: 14px; }
.ed-vs-card { padding: 22px; background: var(--color-base); border: 1px solid var(--color-neutral); border-radius: var(--radius-md); }
.ed-vs-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ed-vs-card h4 { font-family: var(--font-family-heading); font-weight: 600; font-size: 15px; letter-spacing: -0.015em; }
.ed-vs-pill { font-size: 10.5px; padding: 2px 7px; border-radius: var(--radius-sm); font-family: var(--font-family-mono); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.ed-vs-pill--esim { background: var(--color-success-soft); color: var(--color-success); }
.ed-vs-pill--roam { background: var(--color-warning-soft); color: var(--color-warning); }
.ed-vs-card p { font-size: 13.5px; color: var(--color-contrast-muted); line-height: 1.55; margin: 0; }

.ed-install-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ed-install-card { padding: 28px; background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: var(--radius-lg); }
.ed-install-n { width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent-1); color: #FFFFFF; display: grid; place-items: center; font-family: var(--font-family-heading); font-weight: 700; font-size: 16px; margin-bottom: 20px; }
.ed-install-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.ed-install-card p { color: var(--color-contrast-muted); font-size: 14.5px; line-height: 1.55; margin: 10px 0 18px; }
.ed-install-card ul { margin: 0; padding-left: 16px; font-size: 13.5px; color: var(--color-contrast-muted); display: flex; flex-direction: column; gap: 6px; }
.ed-install-card code { font-family: var(--font-family-mono); font-size: 12px; background: var(--color-base); padding: 1px 5px; border-radius: 3px; color: var(--color-contrast); }

.ed-compat-card { background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: var(--radius-xl); padding: 40px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.ed-compat-card h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; }
.ed-compat-card .ed-lede { color: var(--color-contrast-muted); font-size: 15px; line-height: 1.55; margin: 14px 0 22px; }
.ed-compat-table { background: var(--color-base); border: 1px solid var(--color-neutral); border-radius: var(--radius-lg); overflow: hidden; }
.ed-compat-row { display: grid; grid-template-columns: 80px 1.6fr 0.8fr; gap: 12px; padding: 14px 18px; align-items: center; border-top: 1px solid var(--color-neutral); }
.ed-compat-row:first-of-type { border-top: 0; background: var(--color-base-elevated); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-contrast-faint); font-weight: 600; }
.ed-compat-brand { font-weight: 600; font-size: 14px; }
.ed-compat-models { font-size: 13.5px; color: var(--color-contrast-muted); }
.ed-compat-yes { font-family: var(--font-family-mono); font-size: 11px; padding: 3px 9px; border-radius: var(--radius-sm); background: var(--color-success-soft); color: var(--color-success); font-weight: 700; letter-spacing: 0.06em; text-align: center; }
.ed-compat-checker { background: var(--color-base); border: 1px solid var(--color-neutral); border-radius: var(--radius-lg); padding: 22px; margin-top: 20px; }
.ed-compat-checker h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
/* ESM-70: `.ed-compat-row-form` deleted, and the contrast with `.hp-compat-row`
   above — which was KEPT — is the whole test. That markup existed and was
   removed; this one never existed (`git log -S` finds nothing in any commit),
   and patterns/page-how-it-works.php says plainly that it does not reproduce the
   mock's brand/model form. There is nothing here to come back. */

.ed-faq-list { background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: var(--radius-lg); }
.ed-faq-list details { border-top: 1px solid var(--color-neutral); }
.ed-faq-list details:first-child { border-top: 0; }
.ed-faq-list summary { padding: 18px 22px; cursor: pointer; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; list-style: none; min-height: 60px; }
/*
 * ESM-5 — the tail of the .ed-* port was missing: the accordion chevron, the
 * answer body and the whole final-CTA block had no rules in this file, so the
 * ported /how-it-works/ page would have rendered a UA-default <details> and an
 * unstyled dark CTA. Copied verbatim from deliverables/design/how-it-works.html.
 */
.ed-faq-list summary::-webkit-details-marker { display: none; }
.ed-faq-list summary::after { content: ""; width: 14px; height: 14px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%230F1A2E' stroke-width='1.75' stroke-linecap='round'><path d='m3 5 4 4 4-4'/></svg>"); background-repeat: no-repeat; transition: transform var(--transition-duration); flex: 0 0 auto; margin-left: 16px; }
.ed-faq-list details[open] summary::after { transform: rotate(180deg); }
.ed-faq-body { padding: 0 22px 20px; color: var(--color-contrast-muted); font-size: 14.5px; line-height: 1.6; }
.ed-faq-body code { font-family: var(--font-family-mono); font-size: 12.5px; background: var(--color-base); padding: 1px 6px; border-radius: 3px; color: var(--color-contrast); }

.ed-final { background: var(--color-contrast); color: var(--color-base); border-radius: var(--radius-xl); padding: 56px; text-align: center; }
.ed-final h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; max-width: 16ch; margin: 0 auto; }
.ed-final p { color: rgba(251,247,240,0.7); margin: 14px auto 26px; max-width: 420px; font-size: 15px; line-height: 1.55; }

/*
 * Breakpoints aligned with the mock's own <style> block (ESM-5): the theme had
 * dropped the padding/gap collapse and kept a 2-column install grid at ≤1023,
 * where the design goes to one. Divergences like this are what make a "the mock
 * and the page look the same" check unreliable at anything but 1440.
 */
@media (max-width: 1023.98px) {
  .ed-explain, .ed-compat-card { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
  .ed-install-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL DOCUMENTS — /terms/, /privacy-policy/, /refund-policy/  (ESM-38)
   ═══════════════════════════════════════════════════════════════════════════
   NO DESIGN MOCK EXISTS for these pages: deliverables/design/ has index,
   destinations, japan, cart, checkout, my-esims, order-confirmation and
   how-it-works, and nothing legal. So there is no measured source to port and
   no fidelity entry to gate — stated plainly here so nobody later reads these
   numbers as mock-derived. They are not.

   Every value is instead DERIVED from the one prose page that IS mock-derived,
   `.ed-*` (how-it-works): same hero rhythm, same h2 scale, same muted body
   colour, same card treatment. Colours and radii come from tokens.css; type is
   in rem, never px, so the page respects a browser text-size setting — which
   for a legal document is not a nicety.

   The prose measure is `--measure-prose` (44rem), not the 73rem content rail.
   A terms page set at 1168px wide is technically on-brand and unreadable.

   ESM-99/100/101 — the measure is now owned by ONE rule, the `.es-measure-grid`
   on the <article> itself (components.css, read the comment there). Every child
   lands in the centred measure track by construction and none of them carries a
   `max-width` any more: the six that did were all pinned to the left of the rail
   by their own `margin: … 0 0` shorthand. `.es-measure-grid` is written on the
   element in inc/legal-documents.php and inc/about-document.php, so it is
   visible where the markup is, not only here.
   ═════════════════════════════════════════════════════════════════════════ */
.es-legal { padding: 3.5rem 0 4.5rem; }

/* Grid items do not collapse margins with their siblings. Every rule below
   therefore states its own `margin-top` as a longhand — no shorthand in this
   family, so nothing can zero a side by accident again. `.es-legal-head` no
   longer needs a rule of its own: its only declaration was the `max-width` the
   grid track now supplies. */
.es-legal-head h1 {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
}
.es-legal-updated {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-contrast-faint);
  margin: 1rem 0 0;
}
.es-legal-lede {
  color: var(--color-contrast-muted);
  font-size: 1.125rem;
  line-height: 1.55;
  margin: 1.125rem 0 0;
}

/* Pre-launch status notice. Scoped, so the shared `.es-callout` rules stay
   exactly as the country-PDP fidelity check (`callout-h` 77.5) measured them —
   the PDP callout is a single flowing text run, this one is two paragraphs. */
.es-legal-status { margin-top: 2rem; align-items: flex-start; }
.es-legal-status .es-callout-body p { margin: 0 0 0.625rem; }
.es-legal-status .es-callout-body p:last-child { margin-bottom: 0; }
.es-legal-status-title { font-weight: 600; }

/* Jump links. Same pill as `.ed-toc a`, wrapped to a column-friendly grid
   because a legal document has ten or more sections, not five. */
.es-legal-toc { margin-top: 2.25rem; }
.es-legal-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.es-legal-toc li { margin: 0; }
.es-legal-toc a {
  display: inline-block;
  font-size: 0.8125rem;
  line-height: 1.4;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-full);
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  text-decoration: none;
  color: var(--color-contrast);
  font-weight: 500;
}
.es-legal-toc a:hover { background: var(--color-base); }

.es-legal-body { margin-top: 2.75rem; }

/* `scroll-margin-top` so a jump link does not park a heading under the sticky
   header — the classic anchor-link defect nothing in the gate suite can see. */
.es-legal-section { scroll-margin-top: 7rem; }
.es-legal-section + .es-legal-section { margin-top: 2.5rem; }
.es-legal-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}
.es-legal-section p {
  color: var(--color-contrast-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 0.875rem;
}
.es-legal-section p:last-child { margin-bottom: 0; }
.es-legal-section a { color: var(--color-accent-1-hover); text-decoration: underline; text-underline-offset: 0.1875rem; }
.es-legal-section a:hover { color: var(--color-contrast); }
.es-legal-section strong { color: var(--color-contrast); font-weight: 600; }

/* One emphasised sentence per section, maximum — the fact a reader must not
   miss (validity starts at order confirmation; nothing identifying reaches the
   supplier). Left rule instead of a second callout box, so the page does not
   turn into a wall of alert panels. */
.es-legal-lead {
  color: var(--color-contrast) !important;
  font-size: 1.0625rem !important;
  font-weight: 500;
  line-height: 1.55 !important;
  border-left: 3px solid var(--color-accent-1);
  padding-left: 1rem;
  margin: 0 0 1rem !important;
}

.es-legal-section ul {
  list-style: none;
  margin: 0 0 0.875rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.es-legal-section ul:last-child { margin-bottom: 0; }
.es-legal-section li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--color-contrast-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.es-legal-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6875rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--color-neutral-strong);
}

@media (max-width: 767.98px) {
  .es-legal { padding: 2rem 0 3rem; }
  .es-legal-body { margin-top: 2rem; }
  .es-legal-section + .es-legal-section { margin-top: 2rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT — /about/  (ESM-98)
   ═══════════════════════════════════════════════════════════════════════════
   `.es-about` is a MODIFIER on the `.es-legal` prose shell above, not a second
   vocabulary. Same 44rem measure, same heading scale, same muted body colour,
   same pre-launch status callout — because it is the same kind of page (a long
   read at a readable measure) and a parallel `.es-about-*` prefix would be
   sixty duplicated lines with two places to fix. The class name says "legal" on
   a page that is not a legal document; that is a naming wart, kept deliberately
   over a rename that would move markup the ESM-43 legal reconciler pins.

   Only three things here are genuinely new, and all three are things the legal
   documents do not have: the computed figures row, the numbered delivery path,
   and the pair of buttons at the foot.

   No design mock exists for this page — deliverables/design/ has index,
   destinations, japan, cart, checkout, my-esims, order-confirmation and
   how-it-works, and nothing About. Every value below is DERIVED from the legal
   pages (which were themselves derived from how-it-works, the one prose page
   that IS mock-derived), so nobody later reads these numbers as ported. They
   are not. Type is in rem throughout.
   ═════════════════════════════════════════════════════════════════════════ */

/* Computed figures. A row is only ever rendered when its figure exists
   (inc/about-document.php drops the others), so there is no empty-cell state to
   style — an absent row is honest, an empty one reads as "we have none".

   ESM-99 made this the one element on either page that took the full rail, on
   the reasoning that four figures in a row want the width. ESM-103 took that
   back: rendered, the row ran 136…1304 while every other line on the page ran
   368…1072 — 464px wider than the text it sits inside, which reads as a
   different page. The width was not buying anything measurable. At the measure
   each cell is 151.5px and all four values still sit on one line; only the
   labels get tighter, and none of them wraps. `.es-rail-wide` is gone from the
   markup, so this row now takes the same track as the prose. */
.es-about-figures { margin-top: 2rem; }
.es-about-figure-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: var(--radius-lg);
}
/* `column-reverse`, and it is load-bearing rather than a shortcut. The markup
   is <dt>label</dt><dd>number</dd> — the only order in which a definition list
   means what it says ("destinations: 159"). The design wants the number on top.
   Reversing here gives the designed picture and the correct reading order at
   once; swapping the tags would give the picture and a screen reader announcing
   "159" as the term being defined. */
.es-about-figure {
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  /* Packs the pair to the TOP of the row rather than the bottom (on a
     `column-reverse` axis, main-end IS the top). Identical picture while every
     label is one line — measured, tops 21/21/21/21 either way — and load-
     bearing the moment one is not: forcing "plans in the catalogue right now"
     into the 151.5px cell dropped the other three numbers 17.5px each, a
     stair-step of four different baselines. ESM-103 narrowed these cells, so
     the day a label wraps is closer than it was; this is the guard for it.
     The tightest label has 19.7px of room at 1440 and 2.7px at 375. */
  justify-content: flex-end;
  gap: 0.25rem;
}
.es-about-figure-value {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-contrast);
}
.es-about-figure-label {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-contrast-muted);
}
.es-about-figures-note {
  margin: 0.75rem 0 0;
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-contrast-faint);
}

/* The delivery path. `.es-legal-section ul` above strips the marker and draws
   its own dot; an ORDERED list must keep its numbers — losing them would turn
   a sequence into a set, which is the one thing this list is for. Numbers are
   drawn with a counter rather than `list-style` so they can take the mono face
   and the accent colour without a ::marker rule that Safari still ignores. */
.es-about-steps {
  list-style: none;
  counter-reset: es-about-step;
  margin: 0 0 0.875rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.es-about-steps:last-child { margin-bottom: 0; }
.es-legal-section .es-about-steps li {
  counter-increment: es-about-step;
  position: relative;
  padding-left: 2rem;
  color: var(--color-contrast-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
/* Overrides the shared bullet dot from `.es-legal-section li::before`. */
.es-legal-section .es-about-steps li::before {
  content: counter(es-about-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--color-accent-1);
  color: var(--color-base);
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.375rem;
  text-align: center;
}

.es-about-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.75rem;
}

@media (max-width: 767.98px) {
  .es-about-figure-list { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Search results (ESM-54) ─────────────────────────────────────────────
 * templates/search.html + patterns/search-results.php.
 *
 * No new visual vocabulary: the destination grid is the catalog's
 * `.es-country-grid`, the plan grid is the PDP's `.es-plan-grid`, and the empty
 * state is `.es-empty-state`, the same component My eSIMs uses. Only the page
 * head, the two link lists and the section rhythm are new — everything a
 * result IS renders through the component that already draws it elsewhere.
 * ───────────────────────────────────────────────────────────────────────── */
.es-sr-head { padding: 0 0 1.5rem; }
.es-sr-title {
  margin: 0.5rem 0 0;
  font-family: var(--font-family-heading);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.es-sr-summary {
  margin: 0.5rem 0 0;
  color: var(--color-contrast-muted);
  font-size: 0.9375rem;
}

.es-sr-section + .es-sr-section { margin-top: 3rem; }
.es-sr-section-title {
  margin: 0 0 1.25rem;
  font-family: var(--font-family-heading);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* The search grid tiles are the home grid's tiles; the home grid pins them to
 * aspect-ratio 1 via `.es-country-grid-popular`, which does not apply here, so
 * state the height explicitly rather than letting content decide it. */
.es-country-grid-search .es-country-tile { aspect-ratio: 5 / 4.5; }

.es-sr-region-list,
.es-sr-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.es-sr-region-link,
.es-sr-page-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-contrast);
  transition: border-color var(--transition-duration), box-shadow var(--transition-duration);
}
.es-sr-region-link:hover,
.es-sr-page-link:hover { border-color: var(--color-neutral-strong); box-shadow: var(--shadow-sm); }
.es-sr-region-name,
.es-sr-page-title { font-weight: 600; font-size: 1rem; }
.es-sr-region-count { color: var(--color-contrast-muted); font-size: 0.8125rem; white-space: nowrap; }

.es-sr-page-link { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.es-sr-page-excerpt { color: var(--color-contrast-muted); font-size: 0.875rem; line-height: 1.5; }

.es-sr-more {
  margin: 1.25rem 0 0;
  color: var(--color-contrast-muted);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.es-sr-empty { margin-top: 1rem; }
.es-sr-empty-title {
  margin: 0.5rem 0 0;
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-contrast);
}
.es-sr-empty-body { margin: 0.75rem auto 0; max-width: 30rem; line-height: 1.6; }
.es-sr-empty-actions { margin: 1.5rem 0 0; }

@media (max-width: 767.98px) {
  .es-sr-title { font-size: 1.625rem; }
  .es-sr-section + .es-sr-section { margin-top: 2.25rem; }
  .es-sr-section-title { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT — EVIDENCE DRAFT  /about-draft/  (ESM-105)
   ═══════════════════════════════════════════════════════════════════════════
   A SEPARATE vocabulary from `.es-legal` / `.es-about`, and that is the point
   rather than an oversight. Those two share a shell because they are the same
   kind of page: a long read at a 44rem prose measure. This one is not — it is
   two tables, a figure grid and short prose between them, and the client is
   being asked whether a page that looks like THIS is better than a page that
   looks like the legal documents. Reusing the shell would have answered the
   question before it was asked.

   Everything here is scoped under `.es-ev`. If the draft is not adopted, this
   block deletes cleanly and nothing else moves.

   The rail is wider than the prose measure (56rem vs 44rem) because a
   three-column table at 44rem puts the price column under the plan count on a
   laptop. Prose inside the sections is still capped — `.es-ev p` — so the
   reading measure does not follow the table's width. Two different measures on
   one page, on purpose: one for reading, one for comparing.
   ═════════════════════════════════════════════════════════════════════════ */

.es-ev {
  --es-ev-rail: 56rem;
  --es-ev-read: 40rem;
  max-width: var(--es-ev-rail);
  margin-inline: auto;
  padding: 2.5rem 0 4rem;
}

.es-ev-head { margin-bottom: 3rem; }
.es-ev-head h1 {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
}
.es-ev-lede {
  max-width: var(--es-ev-read);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-contrast-muted);
  margin: 0 0 1rem;
}

.es-ev-section { margin-top: 3.5rem; }
/* A hairline above each heading rather than a card around each section: the
   legal pages already use bordered blocks, and the brief was "not that". */
.es-ev-section > h2 {
  margin: 0 0 1.25rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--color-contrast);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.es-ev p {
  max-width: var(--es-ev-read);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-contrast-muted);
  margin: 0 0 1rem;
}
/* `:not(.es-btn)` is not tidiness — without it this page shipped a button whose
   text was invisible. `.es-ev a` is (0,1,1) and `.es-btn-primary` is (0,1,0), so
   `color: inherit` won and the primary CTA rendered rgb(15,26,46) on
   rgb(15,26,46): contrast 1.0, a dark pill with nothing in it. Both CTAs also
   picked up an underline they were never meant to have.

   This is the same shape as the defect on /my-account/ (ESM-106): a broad
   descendant rule quietly outranking a component rule by one selector. A link
   style scoped to a whole page must exclude the things that are links but are
   not link-shaped. */
.es-ev a:not(.es-btn) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.es-ev a:not(.es-btn):hover { color: var(--color-accent-1); }

/* Notes are the page's own footnotes about its own numbers — where it says how
   a figure was produced and what it does NOT mean. Mono, because they are
   about the machinery. */
.es-ev-note {
  font-family: var(--font-family-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-contrast-faint);
  max-width: var(--es-ev-read);
  margin: 1rem 0 0;
}

/* ── Tables ───────────────────────────────────────────────────────────────
   `overflow-x: auto` on the wrapper, not on the table: a table that is allowed
   to scroll inside its own box keeps the page from scrolling sideways on a
   phone, which is the failure this theme has already had once (ESM-18). */
.es-ev-tablewrap { overflow-x: auto; margin: 1.5rem 0 0; }
.es-ev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.es-ev-caption {
  caption-side: top;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--color-contrast-faint);
  padding-bottom: 0.75rem;
}
.es-ev-table th,
.es-ev-table td {
  text-align: left;
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--color-neutral);
  vertical-align: top;
}
.es-ev-table thead th {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-contrast-faint);
  font-weight: 600;
  border-bottom-color: var(--color-contrast);
}
.es-ev-table tbody th { font-weight: 600; color: var(--color-contrast); }
.es-ev-table tbody td { color: var(--color-contrast-muted); }
/* `tabular-nums`: the whole point of this table is that a reader can add the
   column up, and proportional digits make columns of numbers ragged. */
.es-ev-num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}
.es-ev-table tfoot th,
.es-ev-table tfoot td {
  font-weight: 700;
  color: var(--color-contrast);
  border-bottom: 0;
  border-top: 2px solid var(--color-contrast);
}
.es-ev-table--split tbody td { width: 50%; padding-right: 1.5rem; }

/* ── Facts grid ───────────────────────────────────────────────────────────
   Deliberately NOT the rounded card the live About page uses for its figures.
   Rules instead of a box, and the value set in the heading face at a size that
   reads as data rather than as decoration. */
.es-ev-facts {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-neutral);
  border-block: 1px solid var(--color-neutral);
}
.es-ev-facts > li {
  background: var(--color-base);
  padding: 1.25rem 1.25rem 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
}
.es-ev-facts > li:nth-child(even) { padding-left: 1.25rem; }
.es-ev-fact-v {
  font-family: var(--font-family-heading);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-contrast);
  font-variant-numeric: tabular-nums;
}
.es-ev-fact-l {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-contrast-muted);
}

/* ── Lists ─────────────────────────────────────────────────────────────── */
.es-ev-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: var(--es-ev-read);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.es-ev-list > li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-contrast-muted);
  margin: 0;
}
.es-ev-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 6px;
  height: 1px;
  background: var(--color-accent-1);
}
.es-ev-list strong { color: var(--color-contrast); font-weight: 600; }

/* ── What is not true yet ─────────────────────────────────────────────────
   The one tinted block on the page. It is the section a reader is most likely
   to skip and the one they most need, so it gets the only fill. */
.es-ev-pending {
  background: var(--color-base-elevated);
  border-left: 3px solid var(--color-accent-1);
  padding: 1.75rem;
  border-radius: var(--radius-lg);
}
.es-ev-pending > h2 { border-top: 0; padding-top: 0; }
.es-ev-pending-title {
  font-weight: 700;
  color: var(--color-contrast) !important;
  margin-bottom: 0.75rem !important;
}

.es-ev-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 3.5rem;
}

@media (max-width: 767.98px) {
  .es-ev-facts { grid-template-columns: minmax(0, 1fr); }
  .es-ev-facts > li:nth-child(even) { padding-left: 0; }
  .es-ev-table--split tbody td { width: auto; }
  .es-ev-section { margin-top: 2.5rem; }
}