/* ============================================================================
   SOLUTIONS — Issuer + Acquirer pages (solutions-issuers.html / -acquirers.html)
   Shared core (tokens, navbar, buttons chrome, footer, reveal, reduced-motion)
   lives in css/styles.css. This file styles the .sol-* sections, built 1:1 from
   the Figma exports. 1440 design, fluid 1280–1600 per the site standard.
   Namespace: .sol-*.
   ============================================================================ */

/* shared page container (1280 content column, site gutter) */
.sol-wrap {
  width: min(1280px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

/* ============================================================
   SOL §1 · HERO — warm gradient band, centred heading + lead
   (design: Section 548px, bg #FFF5F0 → #FBFBFB; the SVG rasterized
    the gradient black — the CSS dump is ground truth here).
   ============================================================ */
.sol-hero {
  background: linear-gradient(180deg, #FFF5F0 0%, var(--bg) 100%);
  padding: 44px 0 84px;
}
.sol-hero__top {
  width: min(1280px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto 40px;
}
.sol-pill {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 95, 22, 0.08); border: 1px solid rgba(255, 95, 22, 0.18);
  font-size: 13px; font-weight: 500; line-height: 17px;
  letter-spacing: -0.32px; color: var(--brand);   /* #FF5F16 by marketing's decision (2026-10-13); the AA shade #c03e0b before it */
}
.sol-hero__inner {
  width: min(620px, calc(100% - 2 * var(--gutter)));   /* was 820: the 2026-09-02 copy spans ~604px, so the left-aligned block sat ~100px left of centre — the column now hugs the text (user: "not centred, move it right") */
  margin-inline: auto;
}
.sol-hero__h1 {
  margin: 0; max-width: 640px;   /* was 820 — 2026-09-02 copy "Clarity and control over / Visa & Mastercard fees." needs 563 ≤ box < 674 to break like the Figma */
  font-size: 56px; font-weight: 400; line-height: 59px;
  letter-spacing: -1.568px; color: var(--text-strong);
}
.sol-hero__lead {
  margin: 26px 0 0; max-width: 620px;   /* was 689 — shared lead "Deeply specialized engagements, each combining our analytics platform / with senior advisory…" needs 604 ≤ box < 645 */
  font-size: 19px; font-weight: 400; line-height: 29px;
  letter-spacing: -0.32px; color: var(--text);
}

/* ---- audience sub-nav ("For issuers / For acquirers") ---- */
.sol-subnav {
  background: rgba(251, 251, 251, 0.92);
  border-bottom: 1px solid #EDEDED;   /* full-width hairline under the audience tabs (design; removed 2026-08-24, user asked for it back 2026-09-02) */
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.sol-subnav__inner {
  width: min(1280px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto; height: 68px;
  display: flex; align-items: center; gap: 30px;
}
.sol-subnav__link {
  font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: -0.32px;
  color: var(--text); text-decoration: none; opacity: 0.75;
  transition: opacity .2s ease, color .2s ease;
}
.sol-subnav__link:hover { opacity: 1; }
.sol-subnav__link.is-active { color: var(--text-strong); opacity: 1; }

/* (the former §2 intro section was removed 2026-08-25 — its
   audience-specific copy now lives in the hero lead) */

/* ============================================================
   SOL · MODULE — 2-col: copy (eyebrow + h2 + lead + checks +
   Learn more + savings pill) | a data/mockup card. Repeats per
   solution (Scheme Billing, Operational Excellence, …).
   ============================================================ */
.sol-mod { background: var(--bg); padding: 100px 0; scroll-margin-top: 74px; }  /* deep-link target (landing service cards) lands below the 74px sticky nav */
.sol-mod__inner {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 80px;
  align-items: center;
}
.sol-eyebrow {
  display: block;
  font-size: 13px; font-weight: 500; line-height: 17px;
  letter-spacing: 0.78px; text-transform: uppercase;
  color: var(--brand);   /* #FF5F16 by marketing's decision (2026-10-13); the AA shade #c03e0b before it */
}
.sol-mod__h2 {
  margin: 16px 0 0; max-width: 485px;
  font-size: 40px; font-weight: 400; line-height: 46px;
  letter-spacing: -1px; color: var(--text-strong);
}
.sol-mod__lead {
  margin: 16px 0 0;
  font-size: 18px; font-weight: 400; line-height: 28px;
  letter-spacing: -0.32px; color: var(--text);
}
.sol-checks { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sol-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; color: var(--text-strong); }
.sol-check { flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; background: rgba(255, 95, 22, 0.1); border-radius: 11px; color: var(--brand); }
.sol-check .icon { width: 11px; height: 11px; }
.sol-mod__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

/* buttons */
.sol-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 500; line-height: 1;
  letter-spacing: -0.32px; text-decoration: none; border: 0; cursor: pointer;
  font-family: inherit;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.sol-btn svg { transition: transform .2s ease; }
.sol-btn--dark { background: var(--text-strong); color: #fff; }
.sol-btn--dark:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10, 23, 51, .2); }
.sol-btn--dark:hover svg { transform: translateX(3px); }

/* ---- module card: "Scheme fee leakage" bar-list ---- */
.sol-card {
  box-sizing: border-box;
  background: var(--surface); border: 1px solid #EDEDED; border-radius: 24px;   /* design hairline (--border #d9d9d9 is heavier); dark reverts to var(--border) like .pcard */
  box-shadow: 0 1px 2px rgba(10, 23, 51, 0.04), 0 8px 24px rgba(10, 23, 51, 0.06);
  padding: 28px;
}
.sol-leak__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sol-leak__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 21px; letter-spacing: -0.32px; color: var(--text-strong); }
.sol-leak__big { margin: 2px 0 0; font-size: 28px; font-weight: 600; line-height: 36px; letter-spacing: -0.56px; color: var(--text-strong); }
.sol-leak__tag,
.sol-ix__tag {
  flex: none; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 99px;
  background: rgba(255, 95, 22, 0.1); color: var(--brand);
  font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: -0.32px;
}
.sol-leak__rows { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.sol-leak__row { display: grid; grid-template-columns: 143px 1fr 50px; align-items: center; gap: 12px; }
.sol-leak__label,
.sol-ix__label { font-size: 13px; font-weight: 400; line-height: 17px; letter-spacing: -0.32px; color: var(--text-strong); }
.sol-leak__bar,
.sol-ix__bar { height: 8px; border-radius: 4px; background: #F4F4F4; overflow: hidden; }
.sol-leak__fill,
.sol-ix__fill { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.sol-leak__val,
.sol-ix__val { font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: -0.32px; color: var(--text); text-align: right; }

/* ---- module card: "Total interchange fee income" bar list (§6) ----
   Same bar/tag anatomy as the §3 leakage card (rules co-targeted above);
   only the header layout + row geometry differ. */
.sol-ix { padding: 20px 33px 26px 45px; }
.sol-ix__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sol-ix__title { margin: 0; font-size: 13px; font-weight: 400; line-height: 17px; letter-spacing: -0.32px; color: var(--text); }
.sol-ix__big { margin: 0; font-size: 28px; font-weight: 600; line-height: 36px; letter-spacing: -0.56px; color: var(--text-strong); }
.sol-ix__up { color: #4DB25C; margin-left: 6px; font-weight: 400; }   /* the delta reads thinner than the 600 figure (the user, 2026-10-14: «make the font of this 3 thinner»; the deck's «font thinner») */
.sol-ix__tag { align-self: center; margin-top: 14px; }   /* seats the chip beside the big figure */
.sol-ix__rows { margin-top: 28px; padding-right: 32px; display: flex; flex-direction: column; gap: 8px; }
.sol-ix__row { display: grid; grid-template-columns: 123px 1fr 50px; align-items: center; column-gap: 12px; }

/* ---- flipped module (card LEFT, copy RIGHT — §4, §6). Copy stays first
   in the DOM (meaningful content first); grid placement swaps the columns. */
.sol-mod__inner--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
.sol-mod__inner--flip .sol-mod__copy { grid-column: 2; }
.sol-mod__inner--flip .sol-card { grid-column: 1; grid-row: 1; }
/* balance the 2-line heading break ("The faster path from / insight to impact") */
.sol-mod__inner--flip .sol-mod__h2 { max-width: 430px; }
/* §6's copy column is the design's wider 607 (its h2 must break after
   "issuer"). Declared after --flip so it wins when the classes combine. */
.sol-mod__inner--wide-copy { grid-template-columns: minmax(0, 1fr) minmax(0, 607px); }
.sol-mod__inner--wide-copy .sol-mod__h2 { max-width: 607px; }

/* the ACQUIRER interchange module: STANDARD order (copy LEFT) on the
   design's wider 607 copy col; its h2 must break after "value"
   ("Capture more value / from every merchant" — the h2 text box is
   392 in the dump, capped at 400 here). */
.sol-mod__inner--wide-left { grid-template-columns: minmax(0, 607px) minmax(0, 1fr); }
.sol-mod__inner--wide-left .sol-mod__h2 { max-width: 400px; }

/* ---- module card: "Top Opportunities Forecast" bar chart ---- */
.sol-fc { --fc-bar: #0A1F5C; --fc-track: #F3F4F6; --fc-hi: #F97316; padding: 32px; }
.sol-fc__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 22px;
}
.sol-fc__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: -0.32px; color: var(--text-strong); }
.sol-fc__sub { margin: 0; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: -0.2px; color: #4A5565; white-space: nowrap; }
.sol-fc__sub b { font-weight: 600; color: var(--text-strong); }
.sol-fc__rows { display: flex; flex-direction: column; gap: 11px; }
.sol-fc__row { display: grid; grid-template-columns: 118px 1fr 62px; align-items: center; gap: 14px; }
.sol-fc__label { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.2px; color: var(--text-strong); }
.sol-fc__bar { height: 22px; border-radius: 6px; background: var(--fc-track); overflow: hidden; }
.sol-fc__fill { display: block; height: 100%; border-radius: 6px; background: var(--fc-bar); }
.sol-fc__fill--hi { background: var(--fc-hi); }
.sol-fc__val { font-size: 13px; font-weight: 400; line-height: 16px; letter-spacing: -0.2px; color: #364153; text-align: right; }

/* ---- module card: "Profitability by MCC" bar chart (ACQUIRER interchange) ----
   Live rebuild of the design's 502×233 plot: %-positioned gridlines, bars
   and labels inside a fixed-height chart box, so the card can flex with
   its fluid grid column (geometry verbatim from the Figma dump). */
.sol-mcc {
  --mcc-pos: #0A1F5C; --mcc-neg: #F97316;
  --mcc-grid: #F1F1F1; --mcc-zero: #D1D5DB; --mcc-mut: #8A8FA8;
  padding: 28px 28px 17px;   /* design: 28.5 top/sides, ~16.5 bottom (card = 333) */
}
.sol-mcc__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 23px; letter-spacing: -0.3px; color: var(--text-strong); }
.sol-mcc__sub { margin: 2px 0 0; font-size: 12px; font-weight: 400; line-height: 18px; color: var(--mcc-mut); }
.sol-mcc__chart { position: relative; height: 233px; margin-top: 12px; }
.sol-mcc__grid { position: absolute; left: 9.56%; right: 1.59%; height: 1px; background: var(--mcc-grid); }
.sol-mcc__grid--zero { background: var(--mcc-zero); }   /* the darker 0% baseline */
.sol-mcc__ylab {
  position: absolute; left: 0; width: 7.97%; transform: translateY(-50%);
  font-size: 11px; font-weight: 400; line-height: 14px; text-align: right; color: var(--mcc-mut);
}
.sol-mcc__bar { position: absolute; width: 7.97%; border-radius: 3px; background: var(--mcc-pos); }
.sol-mcc__bar--neg { background: var(--mcc-neg); }
.sol-mcc__val {
  position: absolute; width: 7.97%;
  font-size: 11px; font-weight: 700; line-height: 14px; text-align: center; color: var(--mcc-pos);
}
.sol-mcc__val--neg { color: var(--mcc-neg); }
.sol-mcc__cat {
  position: absolute; top: 92.62%; transform: translateX(-50%); white-space: nowrap;
  font-size: 11px; font-weight: 400; line-height: 14px; color: var(--mcc-mut);
}

/* ---- alternating band: the design paints §4/§6 WHITE (§3/§5 keep --bg) ---- */
.sol-mod--alt { background: var(--surface); }

/* §5's 3-line heading needs the design's full 560 column (the shared 485
   would force a 4th line) */
.sol-mod__h2--wide { max-width: 560px; }

/* ---- module card: "Scheme Comparison" (Scheme A vs Scheme B) ----
   Deliberately different chrome than .sol-card: radius 16, lighter
   border + shadow (a "dashboard widget" look, per the Figma). */
.sol-cmp {
  --cmp-title: #364153; --cmp-muted: #99A1AF; --cmp-val: #4A5565;
  --cmp-pos: #009966;
  --cmp-a: #F97316;  --cmp-a-bg: #FFF7ED; --cmp-a-line: #FED7AA;
  --cmp-b: #1E3A5F;  --cmp-b-bg: #F0F4F9; --cmp-b-line: #BFCFE7;
  --cmp-b-fill: #1E3A5F;
  --cmp-chip-bg: #F9FAFB; --cmp-track: #FFFFFF;
  --cmp-best-bg: #FFFFFF; --cmp-best-line: #FFD6A8;
  box-sizing: border-box;
  background: var(--surface); border: 1px solid #F3F4F6; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  padding: 24px;
}
.sol-cmp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.sol-cmp__title { margin: 2px 0 0; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: -0.2px; color: var(--cmp-title); }
.sol-cmp__chip {
  flex: none; display: inline-flex; align-items: baseline; gap: 4px;
  padding: 6px 12px; border-radius: 14px; background: var(--cmp-chip-bg);
  font-size: 11px; font-weight: 400; line-height: 16px; color: var(--cmp-muted); white-space: nowrap;
}
.sol-cmp__chip b { font-size: 12px; font-weight: 700; line-height: 18px; color: var(--cmp-val); }
.sol-cmp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sol-cmp__scheme {
  box-sizing: border-box; min-height: 270px;
  display: flex; flex-direction: column;
  padding: 16px; border-radius: 14px; border: 1px solid;
}
.sol-cmp__scheme--a { background: var(--cmp-a-bg); border-color: var(--cmp-a-line); }
.sol-cmp__scheme--b { background: var(--cmp-b-bg); border-color: var(--cmp-b-line); }
.sol-cmp__shead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; min-height: 33px; box-sizing: border-box; }
.sol-cmp__sname { font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: -0.2px; }
.sol-cmp__scheme--a .sol-cmp__sname { color: var(--cmp-a); }
.sol-cmp__scheme--b .sol-cmp__sname { color: var(--cmp-b); }
.sol-cmp__best {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--cmp-best-bg); border: 1px solid var(--cmp-best-line);
  font-size: 10px; font-weight: 600; line-height: 15px; color: #FF6900; white-space: nowrap;
}
.sol-cmp__best svg { flex: none; }
.sol-cmp__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sol-cmp__row + .sol-cmp__row { margin-top: 8px; }
.sol-cmp__lbl { font-size: 11px; font-weight: 400; line-height: 16px; color: var(--cmp-muted); }
.sol-cmp__lbl--net { font-weight: 500; color: #6A7282; }
.sol-cmp__val { font-size: 12px; font-weight: 600; line-height: 18px; color: var(--cmp-val); }
.sol-cmp__val--pos { color: var(--cmp-pos); }
.sol-cmp__rule { height: 1px; margin: 12px 0; }
.sol-cmp__scheme--a .sol-cmp__rule { background: var(--cmp-a-line); }
.sol-cmp__scheme--b .sol-cmp__rule { background: var(--cmp-b-line); }
.sol-cmp__net { font-size: 16px; font-weight: 700; line-height: 24px; }
.sol-cmp__scheme--a .sol-cmp__net { color: var(--cmp-a); }
.sol-cmp__scheme--b .sol-cmp__net { color: var(--cmp-b); }
.sol-cmp__foot { margin-top: auto; }   /* "vs current" + track anchor to the card bottom */
.sol-cmp__vs { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; }
.sol-cmp__vslbl { font-size: 10px; font-weight: 400; line-height: 15px; color: var(--cmp-muted); }
.sol-cmp__delta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; line-height: 16px; color: var(--cmp-pos); }
.sol-cmp__track { display: block; height: 6px; border-radius: 999px; background: var(--cmp-track); overflow: hidden; }
.sol-cmp__tfill { display: block; height: 100%; border-radius: 999px; opacity: 0.7; }
.sol-cmp__scheme--a .sol-cmp__tfill { background: var(--cmp-a); }
.sol-cmp__scheme--b .sol-cmp__tfill { background: var(--cmp-b-fill); }

/* ============================================================
   SOL §7 · METHODOLOGY — centered header + 5-step strip. The
   numbered circles sit ON a gradient connector line (their solid
   surface bg punches the line out behind each one).
   ============================================================ */
.sol-meth { background: var(--bg); padding: 100px 0; }
.sol-meth__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sol-meth__h2 {
  margin: 16px 0 0;
  font-size: 40px; font-weight: 400; line-height: 46px;
  letter-spacing: -1px; color: var(--text-strong);
}
.sol-meth__lead {
  margin: 20px 0 0; max-width: 640px;
  font-size: 18px; font-weight: 400; line-height: 28px;
  letter-spacing: -0.32px; color: var(--text);
}
.sol-meth__steps {
  list-style: none; margin: 64px 0 0; padding: 0;
  position: relative;
  /* FIXED 240px columns, centred (was padding 0 40px + repeat(5, 1fr)): at ≥1440 the wrap is 1280
     so the geometry is identical (5×240 = 1200 inside 40px insets), but at the 1280 floor the 1fr
     columns shrank to 219 and every description re-wrapped away from the Figma — the desc box
     must stay 228 at EVERY width. The 1200 grid overflows the 1177 wrap by 11px a side there,
     into the gutter (no surfaces, nothing clips). */
  display: grid; grid-template-columns: repeat(5, 240px); justify-content: center;
}
.sol-meth__steps::before {
  content: ""; position: absolute; left: 5%; right: 5%; top: 24px; height: 2px;
  background: linear-gradient(90deg, #FF5F16 0%, #006CFF 100%); opacity: 0.25;
}
.sol-meth__step {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 6px; text-align: center;   /* was 12: the 1280 wrap − 80 ol padding = 240 per column, and
                                           the 2026-09-02 step copy needs a 228 desc box (240 − 2×6) */
}
.sol-meth__num {
  box-sizing: border-box; width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 24px;
  background: var(--surface); border: 2px solid var(--brand);
  font-size: 16px; font-weight: 600; line-height: 1;
  letter-spacing: -0.32px; color: var(--brand);   /* #FF5F16 by marketing's decision (2026-10-13); the AA shade #c03e0b before it */
}
.sol-meth__name {
  margin: 20px 0 0;
  font-size: 18px; font-weight: 500; line-height: 23px;
  letter-spacing: -0.36px; color: var(--text-strong);
}
.sol-meth__desc {
  margin: 8px 0 0; max-width: 228px;
  font-size: 14px; font-weight: 400; line-height: 21px;
  letter-spacing: -0.32px; color: var(--text);
}
/* 228 (was 216): with the 2026-09-02 step copy the design's line breaks need "analytics to keep
   improving payment" (223.6px) to fit while "allocate, and monitor payment costs in" (234.3)
   must not — 228 sits between (measured @1536 with a nowrap probe span). */

/* ============================================================
   SOL §8 · STAT BAND — fixed navy #0A1733 in BOTH themes (the
   presence/experts-band precedent; the design ships light only).
   ============================================================ */
.sol-stats { background: #0A1733; padding: 80px 0; }
/* each stat shrinks to its content and centres in its quarter, so the
   band reads balanced (user-requested; the raw design left-aligns cells
   which left the right side visually empty) */
.sol-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; }
.sol-stats__cell { padding: 36px 0; width: max-content; }
.sol-stats__big {
  margin: 0;
  font-size: 56px; font-weight: 500; line-height: 56px;
  letter-spacing: -2.24px; color: #fff;
}
.sol-stats__label {
  margin: 8px 0 0;
  font-size: 14px; font-weight: 400; line-height: 22px;
  letter-spacing: -0.32px; color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   SOL §9 · CLOSING CTA — centered h2 + lead + orange pill over
   the coral line-wave (wave-cta-solutions.svg, extracted from the
   Figma Section export; blur + 0.1 opacity baked in the SVG).
   ============================================================ */
.sol-cta { position: relative; background: #FBF9F9; overflow: hidden; padding: 100px 0 59px; }
.sol-cta__wave {
  position: absolute; pointer-events: none; user-select: none;
  max-width: none; width: 3660px;
  /* 1:1 design alignment: the asset's viewBox starts 1500px left of the
     1440 frame → left edge at centre − (720 + 1500); top is flush */
  left: 50%; margin-left: -2220px; top: 0;
}
.sol-cta__inner {
  position: relative; z-index: 1;
  max-width: 720px; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center;
}
.sol-cta__h2 {
  margin: 0; max-width: 500px;
  font-size: 40px; font-weight: 400; line-height: 46px;
  letter-spacing: -1px; color: var(--text-strong);
}
.sol-cta__lead {
  margin: 0; max-width: 600px;
  font-size: 18px; font-weight: 400; line-height: 28px;
  letter-spacing: -0.32px; color: var(--text);
}

/* ---- Email-capture pill (issuer page, 2026-09-02 copy: "Talk to us. We'll guide you to the right fit."
   + a "What's your work email?" / "Get started" pill in place of the "Talk to a payments expert" button).
   Same anatomy as the hero pill (Frame 480: 449x58, 48px button inset 5) + the shared client-side
   validation in main.js (wireEmailForm). Both solutions pages use this pill (the acquirer's <a> button
   was ported to it the same day; the old .sol-cta__btn + .sol-savings rules were retired 2026-09-07). ---- */
.sol-cta__form { position: relative; margin-top: 40px; width: 449px; max-width: 100%; height: 58px;
  background: #FFFFFF; border: 1px solid #F7F7F7; border-radius: 999px;
  box-shadow: 0 12px 32px rgba(10, 23, 51, .08);
  display: flex; align-items: center; text-align: left; }
.sol-cta__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  padding: 0 155px 0 24px; font-family: inherit; font-size: 16px; letter-spacing: -0.02em;
  color: var(--text-strong); outline: none; border-radius: inherit; }   /* inherit = the pill's 999px: a browser-painted background (the autofill tint) stays inside the pill shape (correction 47) */
.sol-cta__input::placeholder { color: #565656; opacity: 1; }
.sol-cta__form:has(.sol-cta__input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sol-cta__submit { position: absolute; right: 5px; top: 5px; height: 48px; padding: 0 20px;
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 47px;
  background: var(--brand); color: #FFFFFF; font-family: inherit; font-size: 16px; letter-spacing: -0.02em;   /* #FF5F16 by marketing's decision (2026-10-13); --brand-strong before it */
  white-space: nowrap; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.sol-cta__submit:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255, 95, 22, .35); }
.sol-cta__submit .icon { transition: transform .2s ease; }
.sol-cta__submit:hover .icon { transform: translateX(3px); }
.sol-cta__form[hidden], .sol-cta__done[hidden] { display: none; }   /* the flex displays beat [hidden] */
.sol-cta__form.is-error { border-color: #d02e2e; }
.sol-cta__form-error { position: absolute; top: calc(100% + 10px); left: 24px; right: 24px; margin: 0;
  font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; color: #d02e2e; }
.sol-cta__done { display: flex; align-items: center; gap: 10px; min-height: 58px; margin: 40px 0 0;
  font-size: 18px; letter-spacing: -0.02em; color: var(--text-strong); outline: none; }
.sol-cta__done .icon { color: var(--brand); }
:root[data-theme="dark"] .sol-cta__form { background: var(--surface); border-color: var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }
:root[data-theme="dark"] .sol-cta__input::placeholder { color: var(--text); }
:root[data-theme="dark"] .sol-cta__form.is-error { border-color: #ff8f8f; }
:root[data-theme="dark"] .sol-cta__form-error { color: #ff8f8f; }

/* ============================================================
   MODULE POPUPS — the Solutions pages load css/products.css +
   js/products.js and reuse the whole .pr-modal system (card, backdrop,
   motion) and its .pr-fmp__ / .pr-cap-card content classes; only
   solutions-specific tweaks live here (this file loads after
   products.css so these win). ⚠ never write "star slash" inside
   these comments — it terminates the comment and eats rules.
   ============================================================ */
/* the solutions popups use the Figma card width (1058) — the
   products popups keep their approved 1200 */
.pr-modal--narrow .pr-modal__card { max-width: 1058px; }
/* the Figma popup FRAMES are #FBFBFB in all five exports (portfolio / scheme / OE / interchange / interchange-acq) with
   WHITE cards on them — on our white card the step + cap cards vanished behind their hairline (user, 2026-09-07:
   "they look a different shade than the Figma"). Light = the Figma's literal frame fill; dark keeps the surface card
   and lifts the inner cards a touch instead (the pill already uses var(--bg) there). Products popups untouched. */
.pr-modal--narrow .pr-modal__card { background: #FBFBFB; }
:root[data-theme="dark"] .pr-modal--narrow .pr-modal__card { background: var(--surface); }
:root[data-theme="dark"] .pr-modal--narrow .pr-fmp__caps .pr-cap-card,
:root[data-theme="dark"] .pr-modal--narrow .pr-fmp__step { background: rgba(255, 255, 255, 0.04); }
/* the solutions popups reproduce the Figma head 1:1. The Figma head uses a
   SMALLER type scale than the products popups (h2 28 / lead 13 / checks 11,
   vs 40 / 18 / 15) laid out in TWO EQUAL columns — that is what makes the h2
   break to exactly 2 lines and every check sit on ONE line. Reproducing that
   scale here (card 1058 ~= the Figma's 1025 frame, so ~1:1) is the only way
   to match how the copy sits; the products popups keep the big scale. */
.pr-modal--narrow .pr-fmp__head { grid-template-columns: 1fr 1fr; gap: 80px; }
.pr-modal--narrow .pr-eyebrow { font-size: 10px; line-height: 12px; letter-spacing: 0.6px; }   /* line 12 (was the base 17) — 2026-09-07 template */
.pr-modal--narrow .pr-fmp__h2 { margin-top: 12px; font-size: 29px; line-height: 35px; letter-spacing: -0.72px; }
.pr-modal--narrow .pr-fmp__lead { margin-top: 15px; font-size: 14px; line-height: 21px; letter-spacing: -0.24px; }   /* +15 (was 12) — template */
/* Operational Excellence popup head, 2026-09-02 copy ("Unlock savings only insiders / know where to look." +
   the 4-line "Our experts don't just find savings…" lead). The head column is 441 wide: the h2 needs a
   355–430 box to break after "insiders" (id-scoped so the other narrow popups keep the full column). The
   LEAD needs a 450–460 box: at 441 Chrome breaks INSIDE "in-house" at the hyphen (a per-word probe hides
   that) and the tail becomes "…costs from / the inside."; at 455 the lines end "how to / in-house / from
   the / inside." exactly like the Figma — so it overhangs the column by 14px into the 80px gap (empty).
   Same id on both solutions pages → both get it. */
#sol-modal-opex .pr-fmp__h2 { max-width: 420px; }
#sol-modal-opex .pr-fmp__lead { width: 455px; max-width: none; }
.pr-modal--narrow .pr-fmp__intro .pr-btn { margin-top: 23px; }   /* +23 (was 18) — template; size stays the shared .pr-btn */
/* checks sit in the right column, dropped to 108 so row 1 sits level with the lead's first line (was 84 = 27px above it) */
.pr-modal--narrow .pr-fmp__checks { margin-top: 108px; gap: 10px; }
.pr-modal--narrow .pr-fmp__checks li { font-size: 12px; line-height: 16px; letter-spacing: -0.24px; }
/* the bottom CTA takes the same Figma type scale (28/13 in the export, not 40/18) — since correction 20 (2026-10-14)
   every solutions popup closes with an h2 + the email pill (no cta lead, no cta button any more) */
.pr-modal--narrow .pr-fmp__cta-h2 { font-size: 29px; line-height: 34px; letter-spacing: -0.72px; }
/* ── THE 2026-09-07 POPUP TEMPLATE — now ALL FIVE solutions popups (user, 2026-09-07: "apply the geometry now").
   Source: the Operational Excellence export ("OE- Pop-up window.svg" @1026 → ×1.031) and the Scheme Fees Analytics
   export ("Section Scheme Billing Pop-up Window.svg" @1058 → ×1.0). The three August popups (interchange, portfolio,
   interchange-acq) were built from exports at the SAME small scale but reused the site's big cap cards (32px icon
   tiles blown up to 44, 22px titles) and 22px check circles — this block brings them to their exports' scale too.
   Their COPY and closing blocks are untouched (some cards will still be redesigned — expect their own exports).
   Frame inset top 65 (design 63.4/65.4); bottom per popup (products default 56 unless a delta says otherwise).
   Head rhythm (folded into the .pr-modal--narrow rules above): eyebrow line 12 → h2 +12 → lead +15 → button +23
   (shared .pr-btn size — the Figma's 101×34 button was rejected as too small on the page); checks at 108 = level
   with the lead's first line, 16px circles with 8px marks, gap 9, pitch 26. Cap cards at the Figma scale: 11px
   gaps, pad 24/24/38, r18, hairline #EDEDED, 32px icon tile, title 16/21 (+15), desc 11/17 (+7). The 240px desc
   wrap cap is probe-tuned for the opex + scheme copy ONLY (opex must-fit 228.8 / must-not 251.2; scheme 230.7 /
   246.3) — the legacy popups' descs use the full card width until their cards are redesigned. Closing pill (where a
   popup has one): 493 wide, 44 under the h2. ⚠ the designs draw the pill off-centre with an uneven button inset —
   normalised to the approved pill anatomy. */
.pr-modal--narrow .pr-modal__inner { padding-top: 65px; }
.pr-modal--narrow .pr-fmp__checks li { gap: 9px; }
.pr-modal--narrow .pr-fmp__check { width: 16px; height: 16px; border-radius: 8px; margin: 1px 0 -1px; }   /* keep the 1px nudge without growing the 16px row */
.pr-modal--narrow .pr-fmp__check .icon { width: 8px; height: 8px; }
.pr-modal--narrow .pr-fmp__caps { gap: 11px; }
.pr-modal--narrow .pr-fmp__caps .pr-cap-card { padding: 24px 24px 38px; border-radius: 18px; border-color: #EDEDED; }
.pr-modal--narrow .pr-fmp__caps .pr-cap-card:hover { border-color: rgba(10, 23, 51, 0.12); }
.pr-modal--narrow .pr-cap-card__icon { width: 32px; height: 32px; }
.pr-modal--narrow .pr-cap-card__title { margin-top: 15px; font-size: 16px; line-height: 21px; letter-spacing: -0.32px; }
.pr-modal--narrow .pr-cap-card__desc { margin-top: 7px; font-size: 11px; line-height: 17px; letter-spacing: -0.24px; }
:is(#sol-modal-opex, #sol-modal-scheme) .pr-cap-card__desc { max-width: 240px; }
.pr-modal--narrow .sol-cta__form, .pr-modal--narrow .sol-cta__done { margin-top: 44px; }
.pr-modal--narrow .sol-cta__form { width: 493px; }
:root[data-theme="dark"] .pr-modal--narrow .pr-fmp__caps .pr-cap-card { border-color: var(--border); }
:root[data-theme="dark"] .pr-modal--narrow .pr-fmp__caps .pr-cap-card:hover { border-color: rgba(255, 255, 255, 0.14); }
:root[data-theme="dark"] .pr-modal--narrow .sol-cta__form { background: var(--bg); }   /* the card IS var(--surface) — a surface pill would vanish on it */
/* per-popup deltas (the designs anchor the mock row and the closing block at fixed y, so the gaps differ) */
#sol-modal-opex .pr-modal__inner { padding-bottom: 77px; }   /* design 75 × 1.031 */
#sol-modal-opex .pr-fmp__mocks { margin-top: 23px; }         /* frame edge 35 under the button, as drawn */
#sol-modal-opex .pr-fmp__cta { margin-top: 90px; }
#sol-modal-scheme .pr-modal__inner { padding-bottom: 46px; }  /* artboard 1181 − the pill's derived bottom 1134.6 */
#sol-modal-scheme .pr-fmp__lead { width: 450px; max-width: none; }   /* 3-line break "…scheme fees / invoices, … Gain visibility / into…": probe window [437, 463) */
#sol-modal-scheme .pr-fmp__mocks { margin-top: 64px; }        /* frames at y 368 as drawn (button bottom 291.8 + the assets' 12px top padding) */
#sol-modal-scheme .pr-fmp__cta { margin-top: 56px; }          /* the 2-line h2 grew upward from the template's anchored container (design h2 top 966, cards bottom 909.65) */
#sol-modal-scheme .pr-fmp__cta-h2 { max-width: 441px; }      /* the design's box: "Are you paying more than you / should?" (probe: 373 fits, 480 must not) */
#sol-modal-portfolio .pr-fmp__cta-h2 { max-width: 441px; }   /* 2026-09-07 crop: "Are you getting enough from your / agreement?" (probe: "…your" 420.2 must fit, the 1-line 578.7 must not → any cap in [421, 578); the head lead breaks like the crop at the default 441 column — no rule needed) */
/* the ISSUER Interchange Analytics popup — correction 19 (2026-10-14), rebuilt to "Portfolio Optimization - Pop-up
   window.svg" (= this popup; card 1004 wide, content 863) + "Container (18).svg". Fonts and vertical gaps 1:1 with the
   design, the horizontal layout fluid in our 962 content. Every wrap below is probe-measured (line 1 must fit, line 1
   + the next word must not; the cap sits 2–4px under the tightest must-not; no hyphen splits a word). */
#sol-modal-interchange .pr-fmp__h2 { max-width: 429px; }     /* "Manage interchange economics / at the cardholder level": window [401.6, 432.6) */
#sol-modal-interchange .pr-fmp__lead { width: 426px; max-width: none; }   /* 3 lines ending "…interchange and / …cardholders, and / …activity.": window [388.8, 429.2) */
#sol-modal-interchange .pr-fmp__rewards { margin-top: 38px; }   /* box top 37.8 under the button (design 302.3 → 340.1) */
#sol-modal-interchange .pr-fmp__mocks--duo { grid-template-columns: 337fr 487fr; gap: 68.8px; margin-right: -20px; }   /* same image scale s = 913.2/824 ≈ 1.108 for both; the visible frame gap = 79.3·s (the table's frame starts 17.2·s inside its box); the row runs 20px into the card padding so the TABLE FRAME ends on the content edge like the rewards box + cards (its right shadow pad sits in the padding) */
#sol-modal-interchange .pr-fmp__mocks { margin-top: 61px; }   /* frame tops 61 under the rewards box (633.9 → 695) */
#sol-modal-interchange .pr-fmp__caps { margin-top: 91px; }   /* cards 117.5 under the frame bottoms (1028.5 → 1146); the table box carries ~26.4px of bottom shadow pad below its frame */
#sol-modal-interchange .pr-cap-card__title, #sol-modal-interchange-acq .pr-cap-card__title { max-width: 211px; }   /* "Manage your interchange / income" · "Complete your profitability / analysis" · "Reporting built for your / teams": window [190.9, 214.5) */
#sol-modal-interchange .pr-cap-card__desc, #sol-modal-interchange-acq .pr-cap-card__desc { max-width: 240px; }    /* "…to uncover / savings…" · "…directly in / incontrol." · "…tailored to / your workflows.": window [222.0, 243.1) */
#sol-modal-interchange .pr-fmp__cta { margin-top: 100px; }   /* h2 ink top 107.5 under the cards (1336 → 1443.5) */
#sol-modal-interchange-acq .pr-fmp__cta-h2 { max-width: 506px; }   /* "Stop leaving interchange income / behind.": window [411.6, 509.5) — moved with the heading from the issuer popup (correction 21) */
#sol-modal-interchange-acq .sol-cta__form, #sol-modal-interchange-acq .sol-cta__done { margin-top: 20px; }   /* pill top 25.6 under the h2's last baseline (the issuer design 1497.7 → 1523.3), moved with the heading (correction 21); the issuer popup's one-line "Find the margin you’re missing." keeps the template 44 (≈ the deck crop) */
#sol-modal-interchange .pr-modal__inner { padding-bottom: 77px; }   /* pill bottom 1580.3 → card bottom 1657 = 76.7 */
/* the Scheme Billing popup shows TWO unequal mockups (warm invoice
   card | steel spreadsheet card) instead of the products' 3-up row;
   columns + gap match the Figma export (both assets are 340 tall,
   so they render equal height) */
.pr-fmp__mocks--duo { grid-template-columns: 529fr 375fr; gap: 50px; }
/* the Operational Experts popup shows a WIDE orange savings-forecast card |
   a NARROW blue "No fee" card; columns match the exports' natural widths
   (504 | 349) so both render at equal height, and the gap is widened per
   the Figma (id-scoped so the Scheme popup's ratio is untouched) */
#sol-modal-opex .pr-fmp__mocks--duo { grid-template-columns: 504fr 349fr; gap: 60px; }
/* the Portfolio Optimization popup duo: both exports share IDENTICAL frame
   geometry (a 329.93 frame at x17.14 y11.43 inside their shadow padding), so
   same-scale columns (= the viewBox widths 514:365) render the frames at equal
   height with aligned tops automatically — no viewBox cropping needed. The
   small gap is intentional: each export carries ~18 units of built-in shadow
   padding per side, so the VISUAL gap between frames lands at the design's ~55. */
#sol-modal-portfolio .pr-fmp__mocks--duo { grid-template-columns: 514fr 365fr; gap: 17px; }
/* ── the Agreement Negotiation mockups ANIMATE THEIR INSIDES on open (user, 2026-09-07: "the inside, not a hover
   effect"). products.js (the loader moved there from solutions.js on 2026-09-19) swaps the two <img data-inline-svg> for the SVG documents (lazily; the <img> is the fallback)
   whose groups carry classes baked into the asset files: po-agreement = .pa-sheet--back / --mid / --front (the two
   faded sheets + the front document; they live inside the frame's clip, so the rise is cropped at the frame edge) +
   .pa-pill (the "$183M agreed incentives" pill — nested in the front sheet's clip, so it settles in place instead of
   sliding in from outside); po-schememix = .pm-card--1/2/3 (the card stack) + .pm-pill (the "Best scheme mix
   identified" pill, wrapped in a new <g>) + .pm-badge (its green check). Timeline, from the popup opening (the row
   itself reveals at .09s): the LEFT mockup first — sheets rise .45 / .57 / .69, its pill settles 1.15 — then the
   RIGHT — cards deal .95 / 1.07 / 1.19, its pill settles 1.65, the check pops 2.0; then the picture rests. The two
   run in SEQUENCE on purpose: in parallel (cards at .55/.67/.79) six shadowed groups moved at once and the entrance
   measured 34–35 fps; sequenced it holds 53–59 (same run, warm opens) (an idle float was tried and dropped: a permanent repaint loop of two
   path-heavy SVGs for a 4px bob). The modal is display:none while closed, so this replays on every open. Reduced
   motion = the finished picture, no motion.
   PERF (measured in the pane, 1536): SVG filters are the whole cost — with every filter off the entrance holds 60 fps,
   with them ~45. So (1) each inline svg gets its own compositor layer (will-change) and (2) products.js strips the
   OUTER frame's drop-shadow filter (static, yet re-filtered on every repaint of the moving groups) and this CSS
   drop-shadow — the same two shadows (0/.71/1.43 @.04 + 0/5.71/17.14 @.06 in asset units, ×1.076 rendered) — is
   applied to the svg root instead, where it is composited. The inner shadows (sheets, cards, pills) stay in the SVG:
   they belong to the parts that move. */
/* the shared .pr-mock-svg base rules, the own-shadow opt-out and the pr-mock-rise/deal/settle/pop keyframes live in css/products.css since 2026-09-19 (they now also serve the Products page's Fee Manager popup; products.css loads before this file). */
.pr-fmp__mocks--anim :is(.pa-sheet, .pa-pill, .pm-card, .pm-pill, .pm-badge) { transform-box: fill-box; transform-origin: 50% 50%; }
.pr-fmp__mocks--anim .pa-sheet--back  { animation: pr-mock-rise .7s cubic-bezier(.22, 1, .36, 1) .45s both; }
.pr-fmp__mocks--anim .pa-sheet--mid   { animation: pr-mock-rise .7s cubic-bezier(.22, 1, .36, 1) .57s both; }
.pr-fmp__mocks--anim .pa-sheet--front { animation: pr-mock-rise .7s cubic-bezier(.22, 1, .36, 1) .69s both; }
.pr-fmp__mocks--anim .pa-pill    { animation: pr-mock-settle .6s cubic-bezier(.22, 1, .36, 1) 1.15s both; }
.pr-fmp__mocks--anim .pm-card--1 { animation: pr-mock-deal .6s cubic-bezier(.22, 1, .36, 1) .95s both; }
.pr-fmp__mocks--anim .pm-card--2 { animation: pr-mock-deal .6s cubic-bezier(.22, 1, .36, 1) 1.07s both; }
.pr-fmp__mocks--anim .pm-card--3 { animation: pr-mock-deal .6s cubic-bezier(.22, 1, .36, 1) 1.19s both; }
.pr-fmp__mocks--anim .pm-pill    { animation: pr-mock-settle .55s cubic-bezier(.22, 1, .36, 1) 1.65s both; }
.pr-fmp__mocks--anim .pm-badge   { animation: pr-mock-pop .5s cubic-bezier(.22, 1, .36, 1) 2s both; }
/* ── Operational Excellence mockups (2026-09-07, both solutions pages): the user asked for "a selector that goes through
   all the penalty fees, then the total savings card pops in place" and "the paper comes out of the shredder".
   opex-forecast.svg: a NEW <rect class="of-sel"> (orange hairline + .08 tint, attribute opacity 0 so the <img> fallback and
   reduced motion never show it) sits after the two card groups, outside their shadow filters; of-scan slides it row to
   row with dwells — rows measured with PyMuPDF: y 120.33 (25.6 tall) · blurred 153 · 185.84 (37 tall, two-line) ·
   blurred 230 · 262.74 (37) — scaleY grows it for the two-line rows (vector-effect non-scaling-stroke keeps the 1.5px
   line), then it fades and .of-total (the "Total savings $4M" pill group) pops. opex-nofee.svg: its single shredder PNG
   was SPLIT into a head layer (.nf-head, the face + slit inpainted behind the paper, its own shadow continuous) and — since
   2026-10-14, rebuilt from the original raster with real alpha — two .nf-paper layers (the paper's own shadow in its own clip,
   the paper body + the two text paths in the slit clip; nothing else moves with the paper); nf-feed drives the paper down out of
   the slit. Both PNGs stay embedded (base64) — the asset is still one self-contained file and renders identically as <img>. */
.pr-fmp__mocks--anim .of-sel { transform-box: fill-box; transform-origin: 50% 0; animation: of-scan 2.4s cubic-bezier(.4, 0, .2, 1) .5s both; }
@keyframes of-scan {
  0%   { opacity: 0; transform: translateY(0) scaleY(1); }
  6%   { opacity: 1; transform: translateY(0) scaleY(1); }
  18%  { opacity: 1; transform: translateY(0) scaleY(1); }
  25%  { transform: translateY(32.67px) scaleY(1); }
  37%  { transform: translateY(32.67px) scaleY(1); }
  44%  { transform: translateY(65.51px) scaleY(1.444); }
  56%  { transform: translateY(65.51px) scaleY(1.444); }
  63%  { transform: translateY(109.67px) scaleY(1); }
  75%  { transform: translateY(109.67px) scaleY(1); }
  82%  { opacity: 1; transform: translateY(142.41px) scaleY(1.444); }
  94%  { opacity: 1; transform: translateY(142.41px) scaleY(1.444); }
  100% { opacity: 0; transform: translateY(142.41px) scaleY(1.444); }
}
.pr-fmp__mocks--anim .of-total { transform-box: fill-box; transform-origin: 50% 50%; animation: pr-mock-pop .55s cubic-bezier(.22, 1, .36, 1) 2.95s both; }
@keyframes nf-feed { from { transform: translateY(-235.9px); } to { transform: translateY(0); } }
.pr-fmp__mocks--anim .nf-paper { animation: nf-feed 1.3s cubic-bezier(.3, .7, .25, 1) 1.5s both; }
/* ── Scheme Fees Analytics mockups (2026-09-08, both pages). The user: "the same selector but going from bottom to up and
   then it moves to the card"; the right one was left to us. scheme-invoice.svg: .si-sel (a NEW rect, attribute opacity 0)
   starts on the bottom activity row and climbs — rows from the table's divider hairlines, equal 22.69 pitch (2026-10-14):
   283.50 (May 29 · ComAir) → 260.81 (May 29 · «Rocket Rides Trip CA», one line) → 238.12 → 215.43 (May 30). The card group
   sits OUTSIDE the panel's shadow group (filter1): nested inside it, the card's shadow was cut to filter1's box — a hard-edged
   dark band right of the panel, the deck's «weird shade» (2026-10-14). The selector then TRAVELS up-right to the navy
   credit card (its centre 371,121) shrinking + fading; as it lands .si-selcard (a NEW outline rect on the card's own
   rounded bbox) lights up and the card group .si-card gives a small pop; the outline fades. The card's 3000×2250 raster
   was cropped to its visible window and downscaled ×4 of display (the file went 2 MB → ~230 KB). scheme-spreadsheet.svg:
   every #CAD5E2 cell bar is .ss-cell .ss-r1…11 (row from its y, pitch 24.344 from 53.463) and fades in row by row like
   data loading; then .ss-pill ("Savings opportunities detected · 300 K") slides in from the left, .ss-check pops, the
   wrapped .ss-badge pops. Timeline: selector .5 → 2.7 (lands 2.26), outline 2.25 → 3.5, card pop 2.3; cells 1.1 → 2.1,
   pill 2.2, check 2.55, badge 2.75. Reduced motion = the finished picture (the two selector rects stay at opacity 0). */
.pr-fmp__mocks--anim .si-sel { transform-box: fill-box; transform-origin: 50% 0; animation: si-scan 2.2s cubic-bezier(.4, 0, .2, 1) .5s both; }
@keyframes si-scan {
  0%   { opacity: 0; transform: translate(0, 0) scale(1, 1); }
  7%   { opacity: 1; transform: translate(0, 0) scale(1, 1); }
  20%  { opacity: 1; transform: translate(0, 0) scale(1, 1); }
  27%  { transform: translate(0, -22.69px) scale(1, 1); }
  40%  { transform: translate(0, -22.69px) scale(1, 1); }
  47%  { transform: translate(0, -45.38px) scale(1, 1); }
  60%  { transform: translate(0, -45.38px) scale(1, 1); }
  67%  { transform: translate(0, -68.07px) scale(1, 1); }
  80%  { opacity: 1; transform: translate(0, -68.07px) scale(1, 1); }
  100% { opacity: 0; transform: translate(108.25px, -173.68px) scale(.5, .5); }
}
.pr-fmp__mocks--anim .si-selcard { animation: si-mark 1.25s ease-out 2.25s both; }
@keyframes si-mark { 0% { opacity: 0; } 20% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }
.pr-fmp__mocks--anim .si-card { transform-box: fill-box; transform-origin: 50% 50%; animation: si-pop .55s cubic-bezier(.22, 1, .36, 1) 2.3s both; }
@keyframes si-pop { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
.pr-fmp__mocks--anim .ss-cell { animation: ss-in .3s ease-out both; }
@keyframes ss-in { from { opacity: 0; } to { opacity: 1; } }
.pr-fmp__mocks--anim .ss-r1 { animation-delay: 1.10s; }
.pr-fmp__mocks--anim .ss-r2 { animation-delay: 1.17s; }
.pr-fmp__mocks--anim .ss-r3 { animation-delay: 1.24s; }
.pr-fmp__mocks--anim .ss-r4 { animation-delay: 1.31s; }
.pr-fmp__mocks--anim .ss-r5 { animation-delay: 1.38s; }
.pr-fmp__mocks--anim .ss-r6 { animation-delay: 1.45s; }
.pr-fmp__mocks--anim .ss-r7 { animation-delay: 1.52s; }
.pr-fmp__mocks--anim .ss-r8 { animation-delay: 1.59s; }
.pr-fmp__mocks--anim .ss-r9 { animation-delay: 1.66s; }
.pr-fmp__mocks--anim .ss-r10 { animation-delay: 1.73s; }
.pr-fmp__mocks--anim .ss-r11 { animation-delay: 1.80s; }
.pr-fmp__mocks--anim .ss-pill { transform-box: fill-box; transform-origin: 50% 50%; animation: ss-slide .6s cubic-bezier(.22, 1, .36, 1) 2.2s both; }
@keyframes ss-slide { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
.pr-fmp__mocks--anim .ss-check, .pr-fmp__mocks--anim .ss-badge { transform-box: fill-box; transform-origin: 50% 50%; }
.pr-fmp__mocks--anim .ss-check { animation: pr-mock-pop .5s cubic-bezier(.22, 1, .36, 1) 2.55s both; }
.pr-fmp__mocks--anim .ss-badge { animation: pr-mock-pop .5s cubic-bezier(.22, 1, .36, 1) 2.75s both; }
/* ── Acquirer Interchange Analytics mockups (2026-09-08, solutions-acquirers.html only; our choreography). ixa-dashboard.svg:
   the two orange filter pills (wrapped .ixd-pill--1/2) PULSE in turn as if just applied, the two KPI cards (.ixd-kpi--1/2)
   refresh (pr-mock-deal), then the four "By Jurisdiction" bars (.ixd-bar--n, transform-origin bottom) GROW from the
   baseline one after another and their value/label pairs (.ixd-lbl--n) fade in behind them. ixa-merchants.svg: the
   table's rows populate top → bottom (every #565656 text path classed .ixm-row .ixm-r{n} from the divider list; the card
   title above the table stays), then the "5 merchants require attention" alert (.ixm-alert) slides in from the left and
   its red icon (wrapped .ixm-icon) pops. Timeline: pills .5 / .7 · KPIs .95 / 1.1 · bars 1.35 → 2.4 (labels +.4) · rows
   1.2 → 2.2 · alert 2.3 · icon 2.7. Reduced motion = the finished picture. ⚠ ixa-dashboard.svg keeps its OWN SVG
   frame shadow (data-keep-filter → .pr-mock-svg--own-shadow): its dashboard card is clipped to itself, not to the frame,
   and runs to the viewBox edge — the shared CSS drop-shadow follows the svg's whole alpha and would wrap that edge. */
.pr-fmp__mocks--anim :is(.ixd-pill, .ixd-kpi, .ixd-bar, .ixm-alert, .ixm-icon) { transform-box: fill-box; transform-origin: 50% 50%; }
.pr-fmp__mocks--anim .ixd-pill { animation: ixd-pulse .45s ease-out both; }
.pr-fmp__mocks--anim .ixd-pill--1 { animation-delay: .5s; }
.pr-fmp__mocks--anim .ixd-pill--2 { animation-delay: .7s; }
@keyframes ixd-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.pr-fmp__mocks--anim .ixd-kpi { animation: pr-mock-deal .6s cubic-bezier(.22, 1, .36, 1) both; }
.pr-fmp__mocks--anim .ixd-kpi--1 { animation-delay: .95s; }
.pr-fmp__mocks--anim .ixd-kpi--2 { animation-delay: 1.1s; }
.pr-fmp__mocks--anim .ixd-bar { transform-origin: 50% 100%; animation: ixd-grow .7s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ixd-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.pr-fmp__mocks--anim .ixd-bar--1 { animation-delay: 1.35s; }
.pr-fmp__mocks--anim .ixd-bar--2 { animation-delay: 1.47s; }
.pr-fmp__mocks--anim .ixd-bar--3 { animation-delay: 1.59s; }
.pr-fmp__mocks--anim .ixd-bar--4 { animation-delay: 1.71s; }
.pr-fmp__mocks--anim .ixd-lbl { animation: ss-in .3s ease-out both; }
.pr-fmp__mocks--anim .ixd-lbl--1 { animation-delay: 1.75s; }
.pr-fmp__mocks--anim .ixd-lbl--2 { animation-delay: 1.87s; }
.pr-fmp__mocks--anim .ixd-lbl--3 { animation-delay: 1.99s; }
.pr-fmp__mocks--anim .ixd-lbl--4 { animation-delay: 2.11s; }
.pr-fmp__mocks--anim .ixm-row { animation: ss-in .3s ease-out both; }
.pr-fmp__mocks--anim .ixm-r1 { animation-delay: 1.20s; }
.pr-fmp__mocks--anim .ixm-r2 { animation-delay: 1.30s; }
.pr-fmp__mocks--anim .ixm-r3 { animation-delay: 1.40s; }
.pr-fmp__mocks--anim .ixm-r4 { animation-delay: 1.50s; }
.pr-fmp__mocks--anim .ixm-r5 { animation-delay: 1.60s; }
.pr-fmp__mocks--anim .ixm-r6 { animation-delay: 1.70s; }
.pr-fmp__mocks--anim .ixm-r7 { animation-delay: 1.80s; }
.pr-fmp__mocks--anim .ixm-r8 { animation-delay: 1.90s; }
.pr-fmp__mocks--anim .ixm-alert { animation: ss-slide .6s cubic-bezier(.22, 1, .36, 1) 2.3s both; }
.pr-fmp__mocks--anim .ixm-icon { animation: pr-mock-pop .5s cubic-bezier(.22, 1, .36, 1) 2.7s both; }
/* ── Issuer Interchange Analytics mockups (2026-09-16, solutions-issuers.html only; our choreography). ix-cardbiz.svg:
   the "Card Business Profitability" table POPULATES top → bottom — each row's rank / scheme / type / segment cells
   (#717182 text paths classed .cb-row .cb-r{n} from the divider bands) fade in, then the row's EUR value (.cb-val = the
   5th cell + row 1's clipped #CAD5E2 6th-column figure) slides in from the right .3 s behind its row, as if computed.
   The frame filter is stripped as usual (clip0 IS the frame rect, so the content is clipped to the frame and the shared
   CSS drop-shadow is clean); the card's own shadow (filter1_dd) stays and the cells animate inside it (opacity + a 10 px
   translate — the spreadsheet / merchant-table precedent). ix-dashboard-iss.svg is the SAME design as the acquirer's
   ixa-dashboard.svg in a different crop (2 visible bars) → it reuses the ixd-* classes and the ixd rules above verbatim
   (pills .5 / .7 · KPIs .95 / 1.1 · bars 1.35 / 1.47 · labels 1.75 / 1.87) and, like ixa-dashboard, keeps its OWN frame
   shadow (data-keep-filter): its dashboard card runs to the viewBox edge. Timeline: rows .5 → 1.0 · values .8 → 1.3
   (+.45) · dashboard .5 → 2.2; everything rests by ~2.3 s. Reduced motion = the finished picture. */
.pr-fmp__mocks--anim .cb-row { animation: ss-in .3s ease-out both; }
.pr-fmp__mocks--anim .cb-val { animation: cb-val .45s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes cb-val { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.pr-fmp__mocks--anim .cb-r1 { animation-delay: .5s; }
.pr-fmp__mocks--anim .cb-r2 { animation-delay: .6s; }
.pr-fmp__mocks--anim .cb-r3 { animation-delay: .7s; }
.pr-fmp__mocks--anim .cb-r4 { animation-delay: .8s; }
.pr-fmp__mocks--anim .cb-r5 { animation-delay: .9s; }
.pr-fmp__mocks--anim .cb-r6 { animation-delay: 1s; }
.pr-fmp__mocks--anim .cb-val.cb-r1 { animation-delay: .8s; }
.pr-fmp__mocks--anim .cb-val.cb-r2 { animation-delay: .9s; }
.pr-fmp__mocks--anim .cb-val.cb-r3 { animation-delay: 1s; }
.pr-fmp__mocks--anim .cb-val.cb-r4 { animation-delay: 1.1s; }
.pr-fmp__mocks--anim .cb-val.cb-r5 { animation-delay: 1.2s; }
.pr-fmp__mocks--anim .cb-val.cb-r6 { animation-delay: 1.3s; }
@media (prefers-reduced-motion: reduce) {
  .pr-fmp__mocks--anim :is(.pa-sheet, .pa-pill, .pm-card, .pm-pill, .pm-badge, .of-sel, .of-total, .nf-paper, .si-sel, .si-selcard, .si-card, .ss-cell, .ss-pill, .ss-check, .ss-badge, .ixd-pill, .ixd-kpi, .ixd-bar, .ixd-lbl, .ixm-row, .ixm-alert, .ixm-icon, .cb-row, .cb-val) { animation: none; }
}
/* the ACQUIRER Interchange popup — correction 20 (2026-10-14, deck slides 25–26). The mockups are a plain duo (the
   merchant table first, the dashboard second, no captions): both exports share IDENTICAL 447×375 geometry (411 frame +
   17.6 shadow padding each side), so the columns are EQUAL; the 32px gap between boxes + the built-in padding = the
   visual ~68 between frames (unchanged from the captioned row it replaces). */
#sol-modal-interchange-acq .pr-fmp__mocks--duo { grid-template-columns: 1fr 1fr; gap: 32px; }
#sol-modal-interchange-acq .pr-fmp__h2 { max-width: 361px; }   /* "Increase gross profit by up / to 17%." like the deck crop: window [332.1, 364.7); the Spanish breaks «Aumente la utilidad bruta / hasta un 17%.» in it too (315 fits, 391.6 must not) */
#sol-modal-interchange-acq .pr-modal__inner { padding-bottom: 77px; }   /* pill bottom → card bottom 77, like the issuer Interchange popup */

/* ---- ACQUIRER Interchange popup: "The Opportunity at a Glance" strip ----
   Live HTML (never a flat image): hairline container, centered uppercase
   title band, 3 divided cells of big brand-orange number + label.
   (33px/600 orange on the light bg = large-text AA 3:1, same rationale as
   the portfolio popup's €124M stat.) */
.pr-fmp__glance { margin-top: 84px; border: 1px solid #EDEDED; border-radius: 14px; overflow: hidden; }   /* design: strip top 355 − button bottom ~270.7 */
/* design: the mockup boxes sit 60 below the strip (the shared .pr-fmp__mocks
   margin is 72, tuned for rows that directly follow the head) */
#sol-modal-interchange-acq .pr-fmp__mocks { margin-top: 60px; }
.pr-fmp__glance-title {
  margin: 0; padding: 10px 16px;
  background: #FAFAFA; border-bottom: 1px solid #EDEDED;
  text-align: center; text-transform: uppercase;
  font-size: 9.5px; font-weight: 600; line-height: 14px; letter-spacing: 0.66px;
  color: var(--text-strong);
}
.pr-fmp__glance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-fmp__glance-cell { display: flex; align-items: flex-start; gap: 14px; padding: 24px 28px; }
.pr-fmp__glance-cell + .pr-fmp__glance-cell { border-left: 1px solid #EDEDED; }
.pr-fmp__glance-num { flex: none; font-size: 33px; font-weight: 600; line-height: 33px; letter-spacing: -0.82px; color: var(--brand); }
.pr-fmp__glance-text { margin: 0; padding-top: 3px; font-size: 11.2px; font-weight: 400; line-height: 17px; color: var(--text-strong); }

/* ---- ISSUER Interchange popup: "Rewards are outpacing transaction margins" (correction 19, Container (18).svg) ----
   Live HTML: hairline container (no body fill — the card shows through, as drawn) with a centred uppercase title band
   (the glance strip's anatomy), then the US-market figures with their bars on the LEFT and the orange callout on the
   RIGHT. Design box 863 × 292 → our 962 content: the two columns keep the design's proportions (315 : 422 with the 56
   gap = 7.06% of the inner width), fonts 1:1 (Geist fitted to the export's ink widths: title 328.1, meta 326.1,
   "1.3¢" 72.1, labels 127.5 / 123.8). The colours #0E1729 / #F05A28 / #C43A00 are the design's own (not the brand
   #FF5F16). Contrast (light): title 17.0 · meta + labels 7.09 · note 4.63 · 1.3¢ 17.3 · 1.5¢ 3.27 (40px/600 =
   large text, AA 3:1 — the glance strip's precedent) · callout 5.02 on #FFF7F3. */
.pr-fmp__rewards { border: 1px solid #EDEDED; border-radius: 14px; overflow: hidden; }
.pr-fmp__rewards-title {
  margin: 0; padding: 10px 16px;   /* band 36.5 + its 1px rule, title centred */
  background: #FAFAFA; border-bottom: 1px solid #EDEDED;
  text-align: center; text-transform: uppercase;
  font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.6px;   /* Geist fitted: 327.3 vs the design's 328.1 */
  color: var(--text-strong);
}
.pr-fmp__rewards-body { display: grid; grid-template-columns: minmax(0, 315fr) minmax(0, 422fr); column-gap: 7.06%; align-items: center; padding: 24px 35px 37px; }   /* side insets 35 as drawn */
.pr-fmp__rewards-meta { margin: 0; text-transform: uppercase; font-size: 11px; font-weight: 500; line-height: 14px; letter-spacing: -0.1px; color: var(--text); }   /* 326.7 vs 326.1 */
.pr-fmp__rewards-stat { margin-top: 16px; }
.pr-fmp__rewards-stat--cost { margin-top: 37px; }
.pr-fmp__rewards-row { display: flex; align-items: baseline; margin: 0; }   /* the label's first baseline = the figure's baseline, as drawn */
.pr-fmp__rewards-num { flex: 0 0 92px; font-size: 40px; font-weight: 600; line-height: 40px; letter-spacing: -0.6px; color: #0E1729; }   /* labels start 92 right of the bar (design 128.5 − 35.9) */
.pr-fmp__rewards-stat--cost .pr-fmp__rewards-num { color: #F05A28; }
.pr-fmp__rewards-label { font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0.15px; color: var(--text); }
.pr-fmp__rewards-note { display: block; color: #717182; }
.pr-fmp__rewards-bar { display: block; height: 8px; margin-top: 9px; border-radius: 4px; background: #E2E8F0; overflow: hidden; }
.pr-fmp__rewards-stat--cost .pr-fmp__rewards-bar { margin-top: 8px; }
.pr-fmp__rewards-fill { display: block; width: 65%; height: 100%; border-radius: 4px; background: #0E1729; }
.pr-fmp__rewards-stat--cost .pr-fmp__rewards-fill { width: 75%; background: #F05A28; }
.pr-fmp__rewards-callout { position: relative; top: 4px; justify-self: end; width: 425px; padding: 15px 14px 15px 45.8px; border: 1px solid #FBD5C4; border-radius: 12px; background: #FFF7F3; }   /* the design's 422 box: right-aligned at the 35 inset, text 46.8 from the border's left edge and its widest line ~28 from the right border, as drawn; centred in the body, then top 4 = the design draws it ~4px below the centre (box-local top 100.9) */
.pr-fmp__rewards-icon { position: absolute; top: 17px; left: 17px; width: 16px; height: 16px; }   /* 18 from the border box (inside its 1px border), as drawn */
.pr-fmp__rewards-text { margin: 0; max-width: 363px; font-size: 14px; font-weight: 400; line-height: 23px; letter-spacing: 0.2px; color: #C43A00; }   /* 4 lines like the design: window [350.0, 366.1) */
.pr-fmp__rewards-text b { font-weight: 600; }

/* ---- Portfolio popup: HOW IT WORKS split header + 4 numbered step cards ----
   (this popup has no cap-card row — steps + a proof stat band instead) */
.pr-fmp__how { margin-top: 72px; }
.pr-fmp__how-head { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.pr-modal--narrow .pr-fmp__how-h2 { margin-top: 12px; max-width: 430px; }   /* forces the design's break: "…analysis to / ongoing optimization" */
.pr-fmp__how-lead { margin: 42px 0 0; font-size: 14px; line-height: 21px; letter-spacing: -0.24px; color: var(--text-strong); }
.pr-fmp__steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.pr-fmp__step {
  margin: 0; padding: 20px 26px 26px;
  background: var(--surface);
  border: 1px solid #EDEDED;   /* hairline, like .sol-card / the design */
  border-radius: 17px;
}
:root[data-theme="dark"] .pr-fmp__step { border-color: var(--border); }
.pr-fmp__step-num { display: block; font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: 0.44px; color: var(--brand); }   /* #FF5F16 by marketing's decision (2026-10-13) */
.pr-fmp__step-title { margin: 18px 0 0; font-size: 17px; font-weight: 500; line-height: 22px; letter-spacing: -0.34px; color: var(--text-strong); }
.pr-fmp__step-desc { margin: 9px 0 0; font-size: 11px; font-weight: 400; line-height: 17px; letter-spacing: -0.23px; color: var(--text-strong); }

/* the acquirer Interchange popup (#sol-modal-interchange-acq: head/glance/mocks/caps/cta) and, since correction 19, the
   issuer one (#sol-modal-interchange: head/rewards/mocks/caps/cta) have 5 inner children — extend
   the products.css stagger (which defines delays up to nth-child(4)). The portfolio popup dropped to 4 when its €124M
   proof band was removed (2026-09-07). */
.pr-modal--narrow .pr-modal__inner > *:nth-child(5) { animation-delay: .36s; }

/* ============================================================
   DARK THEME
   ============================================================ */
:root[data-theme="dark"] .sol-hero {
  background: linear-gradient(180deg, rgba(255, 95, 22, 0.06) 0%, var(--bg) 100%);
}
:root[data-theme="dark"] .sol-subnav { background: rgba(17, 26, 46, 0.85); border-bottom-color: var(--border); }
:root[data-theme="dark"] .sol-pill { background: rgba(255, 95, 22, 0.12); border-color: rgba(255, 95, 22, 0.24); }
:root[data-theme="dark"] .sol-leak__bar,
:root[data-theme="dark"] .sol-ix__bar { background: rgba(255, 255, 255, 0.08); }
/* forecast card: the #0A1F5C navy bars read as invisible on the dark surface →
   lift to a steel blue; track + value text also need dark-legible values. */
:root[data-theme="dark"] .sol-fc { --fc-bar: #5674a6; --fc-track: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .sol-fc__sub { color: var(--text); }
:root[data-theme="dark"] .sol-fc__val { color: var(--text); }
/* MCC chart: same navy→steel lift as .sol-fc; hairlines get alpha-white
   (the light greys vanish on the dark surface); orange negatives keep. */
:root[data-theme="dark"] .sol-mcc {
  --mcc-pos: #5674a6;
  --mcc-grid: rgba(255, 255, 255, 0.08); --mcc-zero: rgba(255, 255, 255, 0.28);
  --mcc-mut: var(--text);
}
/* glance strip: hairlines → theme border; the #FAFAFA band → a faint lift */
:root[data-theme="dark"] .pr-fmp__glance,
:root[data-theme="dark"] .pr-fmp__glance-title,
:root[data-theme="dark"] .pr-fmp__glance-cell + .pr-fmp__glance-cell { border-color: var(--border); }
:root[data-theme="dark"] .pr-fmp__glance-title { background: rgba(255, 255, 255, 0.04); }
/* rewards section (correction 19): the glance strip's treatment (hairlines → theme border, band → a faint lift), the
   navy figure + bar → light ink + the site's steel, the grey note → a lighter grey, the callout → a dark orange tint
   with a light orange text. Contrast on the #111a2e card: title 13.2 (on the lifted band) · meta + labels 7.94 ·
   note 5.90 · 1.3¢ 14.6 · 1.5¢ 5.12 · callout text 7.61 on its tint. */
:root[data-theme="dark"] .pr-fmp__rewards,
:root[data-theme="dark"] .pr-fmp__rewards-title { border-color: var(--border); }
:root[data-theme="dark"] .pr-fmp__rewards-title { background: rgba(255, 255, 255, 0.04); }
:root[data-theme="dark"] .pr-fmp__rewards-num { color: var(--text-strong); }
:root[data-theme="dark"] .pr-fmp__rewards-stat--cost .pr-fmp__rewards-num { color: #F05A28; }
:root[data-theme="dark"] .pr-fmp__rewards-note { color: #8d97ab; }
:root[data-theme="dark"] .pr-fmp__rewards-bar { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .pr-fmp__rewards-fill { background: #5674a6; }
:root[data-theme="dark"] .pr-fmp__rewards-stat--cost .pr-fmp__rewards-fill { background: #F05A28; }
:root[data-theme="dark"] .pr-fmp__rewards-callout { background: rgba(240, 90, 40, 0.10); border-color: rgba(240, 90, 40, 0.28); }
:root[data-theme="dark"] .pr-fmp__rewards-text { color: #ff9a73; }
/* the white alternating band has no dark equivalent in the design → stay flat */
:root[data-theme="dark"] .sol-mod--alt { background: var(--bg); }
/* the light #EDEDED card hairline vanishes on dark → back to the theme border */
:root[data-theme="dark"] .sol-card { border-color: var(--border); }
/* methodology: the AA-deepened numeral reverts to vivid brand on dark;
   the 25%-alpha connector needs a nudge to stay visible on the dark bg */
:root[data-theme="dark"] .sol-meth__steps::before { opacity: 0.4; }
/* closing CTA: warm paper → the dark page bg; the wave line-art is drawn
   for a light ground → lift it (same treatment as .au-wave) */
:root[data-theme="dark"] .sol-cta { background: var(--bg); }
:root[data-theme="dark"] .sol-cta__wave { opacity: .55; filter: invert(1) hue-rotate(180deg); }
/* Scheme-comparison card: retint the pastel sub-cards + lift the navy
   Scheme-B ink (near-invisible on the dark surface) to steel */
:root[data-theme="dark"] .sol-cmp {
  --cmp-title: var(--text-strong); --cmp-muted: #8a94a8; --cmp-val: var(--text-strong);
  --cmp-pos: #35bd85;
  --cmp-a-bg: rgba(249, 115, 22, 0.08); --cmp-a-line: rgba(249, 115, 22, 0.3);
  --cmp-b: #93aed6; --cmp-b-bg: rgba(86, 116, 166, 0.12); --cmp-b-line: rgba(86, 116, 166, 0.4);
  --cmp-b-fill: #5674a6;
  --cmp-chip-bg: rgba(255, 255, 255, 0.06); --cmp-track: rgba(255, 255, 255, 0.12);
  --cmp-best-bg: rgba(255, 255, 255, 0.06); --cmp-best-line: rgba(255, 214, 168, 0.3);
  border-color: var(--border);
}
:root[data-theme="dark"] .sol-cmp__lbl--net { color: var(--text); }
/* the navy "Learn more" button would vanish on the dark bg → invert to the surface */
:root[data-theme="dark"] .sol-btn--dark { background: var(--surface); color: var(--text-strong); border: 1px solid var(--border); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sol-subnav__link, .sol-btn, .sol-btn svg, .sol-cta__submit, .sol-cta__submit .icon { transition: none; }
  .sol-btn--dark:hover, .sol-cta__submit:hover, .sol-cta__submit:hover .icon { transform: none; }
}