/* The brand typefaces, finally delivered.
   `tokens.css` has named DM Sans, Inter and IBM Plex Mono since the design
   system was written, and until these files existed nothing loaded any of them
   -- no @font-face, no next/font, no bundled file anywhere in the repository. Every visitor fell
   through to `system-ui`, so the site rendered in SF Pro on a Mac, Segoe UI on
   Windows, Roboto on Android and DejaVu Sans on most Linux, and the layouts
   were tuned -- unknowingly -- to whichever of those the person measuring them
   happened to be using.

   That was not cosmetic. Every width in this file was implicitly calibrated
   against SF Pro, because CI ran the browser suite only on the macOS fleet.
   Moving E2E onto Linux surfaced the first casualty within one run: at 768px
   the three header nav links came out 14px wider than their row had spare and
   "Pricing" was clipped inside its scroller, for every non-Mac visitor, in
   production. The tier note further down records the slack bought back.

   Variable for the heading and body families, and that is load-bearing rather
   than a byte optimisation. The stylesheets in this app ask for
   `font-weight: 650`, `750` and `850` in 31 places; only a continuous weight
   axis renders those as written, and a static instance snaps each to the
   nearest of 600/700/800. The mono family has no variable release upstream and
   asks for no fractional weight, so it ships as static instances -- see its
   own note below.

   `swap` rather than `block` or `optional`: the fallback is a real system font
   rather than a blank, so showing text immediately and reflowing beats holding
   the first paint. That reflow is the price of self-hosting honestly, and the
   preload links in document.ts are what keep it short.

   Latin subset only, ~177 KB across the seven faces. See src/fonts/README.md
   for the licence and how to regenerate them. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-variable-latin.woff2') format('woff2');
}

/* Italic is a real face, not a slant. 24 rules in this app set
   `font-style: italic` -- scenario notes, pull quotes, helper text -- and every
   one of them resolves to the body family. Registering only the upright face
   would leave the browser to synthesise an oblique by shearing the glyphs,
   which is visibly worse than the genuine system italic those elements were
   getting before this change: it fakes the slant and keeps the upright letter
   shapes, so Inter's true italic `a` and `f` never appear.

   Upright-only would therefore have made this a REGRESSION for those elements
   while improving everything else. Not registered for DM Sans, because no
   italic rule in this app resolves to the heading family -- checked, it is zero
   -- and a face nothing requests is 50 KB nobody downloads for a reason. */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-italic-variable-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/fonts/dmsans-variable-latin.woff2') format('woff2');
}

/* IBM Plex Mono, the third name in the token set and the last one nothing
   delivered. `--wf-font-mono` is used by 122 rules across this app -- the
   figure columns, the stat rows, the When You Stop tables -- and every one of
   them fell through to `ui-monospace`: SF Mono on macOS, DejaVu Sans Mono on
   most Linux, Consolas on Windows. That is the same per-glyph width spread
   that clipped "Pricing" in the header, still live in exactly the places where
   widths accumulate across a row of digits.

   Static, one file per weight, because upstream has no variable release: the
   Google Fonts catalogue carries IBM Plex Mono only as named instances. Four
   of them, the weights the mono rules actually ask for -- 400, 500, 600, 700 --
   at ~10 KB each. The 13 rules asking for 800 match the 700 face, which is
   what they already did against every system mono; Plex Mono has no heavier
   weight to ship. Italic is not registered because no italic rule in this app
   resolves to the mono family. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibmplexmono-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibmplexmono-500-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibmplexmono-600-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibmplexmono-700-latin.woff2') format('woff2');
}

body {
  --wm-money-canvas: var(--wf-color-background-canvas, #f9f9ff);
  --wm-money-ink: var(--wf-color-text-primary, #151b2a);
  --wm-money-copy: var(--wf-color-text-secondary, #3d4a42);
  --wm-money-muted: #4f5f56;
  --wm-money-line: var(--wf-color-border-strong, #bccac0);
  --wm-money-surface-rgb: 255, 255, 255;
  --wm-money-surface-soft: var(--wf-color-background-surface-subtle, #f1f3ff);
  --wm-money-border-soft: rgba(188, 202, 192, 0.15);
  --wm-money-border-muted: rgba(188, 202, 192, 0.1);
  --wm-money-border-medium: rgba(188, 202, 192, 0.2);
  --wm-money-border-strong-alpha: rgba(188, 202, 192, 0.65);
  --wm-money-canvas-translucent: rgba(249, 249, 255, 0.92);
  --wm-money-accent: var(--wf-color-action-secondary-text, #006948);
  --wm-money-accent-active: var(--wf-color-action-primary-bg, #047857);
  --wm-money-accent-chart: #006a61;
  --wm-money-accent-strong: var(--wf-color-status-success-text, #064e3b);
  --wm-money-accent-soft: var(--wf-color-action-secondary-border, #85f8c4);
  --wm-money-accent-deep: var(--wf-color-action-secondary-text, #005137);
  --wm-money-accent-wash: var(--wf-color-action-secondary-bg, #89f5e7);
  --wm-money-chip: var(--wf-color-status-info-bg, #e2e8fc);
  --wm-money-chip-strong: var(--wf-color-status-info-border, #dce2f6);
  --wm-money-danger: var(--wf-color-status-error-text, #ba1a1a);
  /* Was 0.35 alpha, which resolved to ~2.4:1 on white — under the 3:1 floor
     for meaningful non-text marks. The pricing comparison's "not included"
     markers carry real purchasing information at this colour. */
  --wm-money-copy-disabled: rgba(61, 74, 66, 0.65);
  --wm-money-muted-disabled: rgba(109, 122, 114, 0.55);
  --wm-money-success-wash-soft: rgba(236, 253, 245, 0.3);
  --wm-money-shimmer: linear-gradient(90deg, rgba(220, 226, 246, 0.4), rgba(220, 226, 246, 0.9), rgba(220, 226, 246, 0.4));
  --wm-money-shadow-hairline: 0 1px 2px rgba(0, 0, 0, 0.05);
  --wm-money-shadow-side: 20px 0 40px -15px rgba(0, 0, 0, 0.04);
  --wm-money-shadow-side-strong: 40px 0 40px -15px rgba(21, 27, 42, 0.04);
  --wm-money-focus-shadow: 0 0 0 2px rgba(6, 95, 70, 0.24);
  --wm-money-accent-shadow-faint: 0 25px 50px -12px rgba(0, 105, 72, 0.05);
  --wm-money-accent-shadow-soft: 0 10px 15px -3px rgba(0, 105, 72, 0.2), 0 4px 6px -4px rgba(0, 105, 72, 0.2);
  --wm-money-accent-shadow-muted: 0 10px 15px -3px rgba(0, 105, 72, 0.18), 0 4px 6px -4px rgba(0, 105, 72, 0.18);
  --wm-card-radius: 32px;
  margin: 0;
  font-family: var(--wf-font-body);
  color: var(--wm-money-ink);
  background:
    linear-gradient(180deg, var(--wm-money-canvas) 0%, var(--wm-money-canvas) 55%, var(--wf-color-background-surface) 100%);
}

/*
 * ===== Scenario metrics tier (W9 / WMA-117) ================================
 *
 * Contract: docs/product/pack-visual-system-tokens.md. Read it before adding,
 * renaming or consuming anything here.
 *
 * Holds (1) five surface/accent values rescued from `--wm-wys-*` in
 * when-you-stop/styles.css, which pack-shell consumed without defining, and
 * (2) the metrics half of Layout 1's token set (D3) — type, control sizing,
 * focus, ink. Layout 1's depth half stays a pack signal as `--wm-pack-*`.
 *
 * Declared on `body` because `chrome` is the first source in every bundle
 * (lib/styles/route-bundles.ts), which is what makes these reachable from
 * every scenario stylesheet. Values that exist as platform primitives are
 * referenced, never restated; spacing and radius have no alias here at all.
 */
body {
  /* --- Surface and accent ------------------------------------------------ */
  --wm-scenario-accent: var(--wm-money-accent-active, #047857);
  --wm-scenario-accent-deep: var(--wm-money-accent-strong, #064e3b);
  --wm-scenario-accent-wash: rgba(4, 120, 87, 0.08);
  --wm-scenario-line: var(--wm-money-border-medium, rgba(188, 202, 192, 0.2));
  --wm-scenario-surface: rgba(var(--wm-money-surface-rgb, 255, 255, 255), 1);

  /* --- Ink --------------------------------------------------------------- */
  --wm-scenario-ink: var(--wm-money-ink, #0b1220);
  --wm-scenario-copy: var(--wm-money-copy, #334155);
  --wm-scenario-muted: var(--wm-money-muted, #4f5f56);
  --wm-scenario-border: var(--wm-money-line, #cbd5e1);
  --wm-scenario-danger: var(--wm-money-danger, #9f1239);

  /* --- Type -------------------------------------------------------------- */
  /*
   * Sizes come from the platform scale wherever it has the step; 13px and 15px
   * are the money app's own and have no `--wf-font-*` equivalent. The
   * line-heights are the app's tighter set, not the platform's (label-sm is
   * 12/16 upstream, 12/17 here), so they are stated rather than referenced.
   * `text-min-size` is D2's hard floor and is the same 12px as `text-xs`; it
   * exists as a separate name so a rule can say "this is at the floor" and a
   * reviewer can grep for it.
   */
  --wm-scenario-text-min-size: var(--wf-font-size-min, 12px);

  --wm-scenario-text-xs-size: var(--wf-font-size-min, 12px);
  --wm-scenario-text-xs-line: 17px;

  --wm-scenario-text-sm-size: 13px;
  --wm-scenario-text-sm-line: 18px;

  --wm-scenario-text-md-size: var(--wf-font-body-sm-size, 14px);
  --wm-scenario-text-md-line: var(--wf-font-body-sm-line-height, 20px);

  --wm-scenario-text-lg-size: 15px;
  --wm-scenario-text-lg-line: 22px;

  --wm-scenario-text-xl-size: var(--wf-font-body-md-size, 16px);
  --wm-scenario-text-xl-line: 22px;

  --wm-scenario-text-2xl-size: var(--wf-font-body-lg-size, 18px);
  --wm-scenario-text-2xl-line: 24px;

  --wm-scenario-heading-font: var(--wf-font-heading, 'DM Sans', system-ui, sans-serif);
  --wm-scenario-mono-font: var(--wf-font-mono, 'IBM Plex Mono', ui-monospace, monospace);

  /* --- Controls ---------------------------------------------------------- */
  /*
   * D1: 44px for anything a finger operates in a main flow, 24px as the hard
   * floor for everything interactive. `-compact` (40px) is the one step below
   * the primary size that Layout 1's grid genuinely needs — the wizard stepper
   * button and the phone tab strip — and it still clears the floor. There is
   * deliberately no step between 24px and 40px: a control that wants one is a
   * control that should be 40px or 44px.
   */
  --wm-scenario-control-min: var(--wf-control-target-min, 24px);
  --wm-scenario-control-height: var(--wf-control-target-comfortable, 44px);
  --wm-scenario-control-height-compact: 40px;

  /* --- Focus ------------------------------------------------------------- */
  /*
   * One ring for every scenario surface. The colour is the platform's focus
   * primitive; it used to alias `--wm-scenario-accent`, the action-FILL green,
   * which no ring in the product drew — taking it would have closed WMA-88 on
   * width and reopened it on colour (Lane G, 8 Sep 2026).
   *
   * 3px is the default because 3px is what 28 rules in 10 stylesheets draw;
   * the previous 2px "default" described only the pack surfaces, which keep it
   * as `-flush` (3px crosses a neighbouring card edge in that dense dialog).
   * `-tight` is 1px, for a control sitting flush inside a bordered parent.
   */
  --wm-scenario-focus-ring-width: 2px;
  --wm-scenario-focus-ring-color: var(--wf-color-focus-ring, #065f46);
  --wm-scenario-focus-ring: var(--wm-scenario-focus-ring-width) solid var(--wm-scenario-focus-ring-color);
  --wm-scenario-focus-ring-offset: 3px;
  --wm-scenario-focus-ring-offset-flush: 2px;
  --wm-scenario-focus-ring-offset-tight: 1px;
}

.money-auth-lock {
  overflow: hidden;
}

.money-auth-overlay[hidden],
.money-auth-password-field[hidden],
.money-auth-status[hidden],
.money-auth-recovery-panel[hidden],
.money-app-gate-content[hidden],
.money-app-gate-empty[hidden],
.money-app-gate-loading[hidden],
[data-auth-app-chrome][hidden],
[data-auth-public-chrome][hidden],
.money-app-account-popover[hidden] {
  display: none !important;
}

.money-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}

.money-auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(6px);
}

.money-auth-dialog {
  position: relative;
  width: min(940px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.money-auth-surface {
  display: grid;
  background: var(--wf-color-background-surface);
  color: var(--wf-color-text-primary);
  overflow: hidden;
}

.money-auth-modal {
  min-height: 580px;
  grid-template-columns: 392px minmax(0, 1fr);
  border-radius: 24px;
}

.money-auth-page {
  min-height: 100vh;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
}

.money-auth-page-shell,
.money-auth-callback {
  min-height: 100vh;
  background: var(--wm-money-canvas, var(--wf-color-background-canvas));
}

/* Standalone auth routes carry no site header or footer, so they get their own
   minimal branded bar. It sits above the surface at every width, which also
   fixes the mobile case where the value panel (and with it the wordmark) is
   ordered below the form. */
.money-auth-page-shell {
  display: flex;
  flex-direction: column;
}

.money-auth-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 40px;
  border-bottom: 1px solid rgba(188, 202, 192, 0.28);
}

.money-auth-page-back {
  color: var(--wf-color-text-secondary);
  font-family: var(--wf-font-heading);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  /* D1 target floor. A flex item of .money-auth-page-header, so its display
     is blockified and min-height applies. */
  display: inline-flex;
  align-items: center;
  min-height: var(--wm-scenario-control-min, 24px);
}

.money-auth-page-back:hover,
.money-auth-page-back:focus-visible {
  color: var(--wm-money-accent);
}

.money-auth-page-brand:focus-visible,
.money-auth-page-back:focus-visible {
  border-radius: var(--wf-radius-sm);
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 3px;
}

.money-auth-page-shell .money-auth-page {
  flex: 1;
  min-height: 0;
}

/* The bar above already carries the wordmark; the value panel's 14px repeat
   would be a second, smaller lockup on the same screen. */
.money-auth-page-shell .money-auth-brand {
  display: none;
}

.money-auth-value-panel {
  display: grid;
  align-content: start;
  gap: 44px;
  padding: 48px;
  background: var(--wf-color-status-success-bg);
  color: #042f2e;
}

.money-auth-page .money-auth-value-panel {
  padding-top: 72px;
}

.money-auth-brand {
  display: inline-flex;
  width: fit-content;
  color: var(--wm-money-accent);
  text-decoration: none;
}

.money-auth-brand-mark {
  font-family: var(--wf-font-heading);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.money-auth-value-copy {
  display: grid;
  gap: 16px;
}

.money-auth-value-title {
  max-width: 8.8em;
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 34px;
  line-height: 1.08;
  font-weight: 700;
  color: #042f2e;
}

.money-auth-value-body {
  max-width: 19rem;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  /* 0.85 is the contrast floor, not a taste call: at 0.72 this composites to
     ~4.3:1 on the mint value panel, under WCAG AA's 4.5:1. 0.85 lands ~6:1. */
  color: rgba(19, 78, 74, 0.85);
}

.money-auth-value-list {
  display: grid;
  gap: 16px;
}

.money-auth-value-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: rgba(4, 47, 46, 0.9);
  font-family: var(--wf-font-heading);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.money-auth-check {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--wf-radius-pill);
  background: var(--wf-color-background-surface);
  color: var(--wm-money-accent);
}

.money-auth-check svg {
  width: 16px;
  height: 16px;
}

.money-auth-form-panel {
  position: relative;
  display: grid;
  align-content: center;
  padding: 64px 82px 32px;
  background: var(--wf-color-background-surface);
}

/* The dialog's only visible dismiss affordance: give it a real hit area, a
   4.5:1 glyph colour and a surface that appears on hover/focus. */
.money-auth-close.wf-icon-button {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-color: transparent;
  background: transparent;
  color: var(--wf-color-text-secondary);
}

.money-auth-close.wf-icon-button .wf-icon {
  font-size: var(--wf-control-icon-lg);
}

.money-auth-close.wf-icon-button:hover:not(:disabled),
.money-auth-close.wf-icon-button:focus-visible {
  background: var(--wf-color-background-surface-subtle);
  color: var(--wf-color-text-primary);
}

.money-auth-form {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 384px;
  margin: 0 auto;
}

.money-auth-form-header {
  display: grid;
  gap: 8px;
  padding-bottom: 4px;
}

.money-auth-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: #042f2e;
}

.money-auth-body {
  margin: 0;
  color: var(--wf-color-text-muted);
  font-size: 15px;
  line-height: 24px;
}

.money-auth-label,
.money-auth-form .wf-label {
  margin: 0;
  /* 0.62 composites to ~4.4:1 on the white card, under 4.5:1; 0.7 clears
     ~5.6:1 at this size. */
  color: rgba(4, 47, 46, 0.7);
  font-family: var(--wf-font-heading);
  /* D2 type floor. This also raises packages/ui's shared .wf-label back to
     its own 14px default inside this form; it was pinned to 11px here, not
     in the component itself (packages/ui/src/styles.css's .wf-label is
     var(--wf-font-label-md-size), 14px). */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.money-auth-method {
  display: grid;
  gap: 8px;
}

.money-auth-segments.wf-segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-height: 42px;
  padding: 4px;
  border: 1px solid rgba(226, 232, 240, 0.65);
  background: var(--wf-color-background-canvas);
}

.money-auth-segments .wf-segment,
.money-auth-segments .wf-segment-label {
  width: 100%;
}

.money-auth-segments .wf-segment-label {
  min-height: 32px;
  font-family: var(--wf-font-heading);
  font-size: 12px;
  font-weight: 700;
}

.money-auth-fields {
  display: grid;
  gap: 16px;
}

.money-auth-password-field,
.money-auth-reset-password-fields {
  display: grid;
  gap: 16px;
}

.money-auth-password-control {
  position: relative;
}

.money-auth-input.wf-input-shell {
  min-height: 55px;
  border-radius: var(--wf-radius-pill);
  border-color: #e2e8f0;
  background: var(--wf-color-background-surface);
  padding-inline: 18px;
}

.money-auth-password-input.wf-input-shell {
  padding-right: 54px;
}

.money-auth-input .wf-input {
  font-size: 16px;
  line-height: 20px;
  /* D1 target floor: the bare <input> renders shorter than the 55px
     wf-input-shell wrapper (align-items: center on an intrinsic-height
     control), so it needs its own floor. */
  min-height: var(--wm-scenario-control-min, 24px);
}

.money-auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--wf-radius-pill);
  background: transparent;
  color: rgba(4, 47, 46, 0.62);
  cursor: pointer;
  transform: translateY(-50%);
}

.money-auth-password-toggle:hover {
  color: var(--wm-money-accent);
  background: var(--wf-color-action-secondary-bg);
}

.money-auth-password-toggle:focus-visible {
  outline: 2px solid var(--wm-money-accent);
  outline-offset: 2px;
}

.money-auth-eye-icon {
  width: 20px;
  height: 20px;
}

.money-auth-eye-icon[hidden] {
  display: none;
}

.money-auth-status {
  border: 1px solid var(--wf-color-status-info-border);
  border-radius: var(--wf-radius-md);
  padding: 12px 14px;
  color: var(--wf-color-status-info-text);
  background: var(--wf-color-status-info-bg);
  font-size: 14px;
  line-height: 20px;
}

.money-auth-status[data-tone='success'] {
  color: var(--wf-color-status-success-text);
  background: var(--wf-color-status-success-bg);
  border-color: var(--wf-color-status-success-border);
}

.money-auth-status[data-tone='error'] {
  color: var(--wf-color-status-error-text);
  background: var(--wf-color-status-error-bg);
  border-color: var(--wf-color-status-error-border);
}

.money-auth-cta {
  display: grid;
  gap: 12px;
  padding-top: 8px;
}

/* Was #059669, which put white 14px label text at 3.77:1 — below AA. The
   primary action token is the one green every other primary CTA uses. */
.money-auth-submit {
  width: 100%;
  min-height: 52px;
  background: var(--wf-color-action-primary-bg);
  border-color: var(--wf-color-action-primary-border);
  font-family: var(--wf-font-heading);
  font-weight: 700;
}

.money-auth-helper,
.money-auth-legal,
.money-auth-forgot {
  margin: 0;
  /* 12px helper copy at 0.55 composited to ~3.5:1 on white; 0.7 is ~5.6:1. */
  color: rgba(4, 47, 46, 0.7);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.money-auth-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
}

.money-auth-links-center {
  justify-content: center;
}

.money-auth-switch-link.wf-button {
  /* D1 target floor: was `auto`, which discarded .wf-size-sm's built-in
     30px floor along with the padding this rule also strips. */
  min-height: var(--wm-scenario-control-min, 24px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wf-color-action-primary-bg);
  font-family: var(--wf-font-heading);
  font-size: 12px;
  font-weight: 700;
}

.money-auth-forgot {
  text-decoration: none;
  color: var(--wf-color-text-muted);
  font-family: var(--wf-font-heading);
  font-weight: 700;
  /* D1 target floor. A flex item of .money-auth-links, so its display is
     blockified and min-height applies; centre the text within the taller
     box rather than letting it sit at the top. */
  display: inline-flex;
  align-items: center;
  min-height: var(--wm-scenario-control-min, 24px);
}

.money-auth-forgot:hover {
  color: var(--wm-money-accent);
}

.money-auth-legal {
  /* No color override: slate-400 #94a3b8 was 2.6:1 on white. The shared
     auth fine-print color above passes.
     D2 type floor: also raises the child link below, which inherits this
     and sets no font-size of its own. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
}

.money-auth-legal a {
  color: var(--wm-money-accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  white-space: nowrap;
}

.money-auth-legal a:hover {
  color: var(--wm-money-accent-deep);
}

.money-auth-legal a:focus-visible {
  outline: none;
  border-radius: var(--wf-radius-sm);
  box-shadow: 0 0 0 var(--wf-border-width-strong) var(--wf-color-focus-ring);
}

.money-auth-callback {
  display: grid;
  place-items: center;
  padding: 32px;
}

.money-auth-callback-brand {
  position: fixed;
  top: 28px;
  left: 32px;
}

.money-auth-callback-card {
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
  padding: 32px;
  border: 1px solid var(--wf-color-border-default);
  border-radius: 24px;
  background: var(--wf-color-background-surface);
  box-shadow: var(--wf-shadow-soft);
}

.money-auth-recovery-panel {
  width: min(940px, 100%);
}

.money-auth-recovery-panel .money-auth-page {
  min-height: min(680px, calc(100vh - 64px));
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}

.money-app-gate {
  min-height: 52vh;
  display: grid;
  place-items: center;
}

.money-app-gate-loading,
.money-app-gate-content,
.money-app-gate-empty {
  width: min(640px, 100%);
}

@media (max-width: 820px) {
  .money-auth-overlay {
    display: none;
  }

  /* The bar is brand + "Back to site" on one row, and adding the mark to the
     lockup pushed that row past the 40px desktop gutter on a 320px phone —
     both labels wrapped and the bar grew to two lines. Compacting here also
     lines the gutter up with the form panel's own 24px edge, which the 40px
     value never matched. */
  .money-auth-page-header {
    gap: 12px;
    padding: 16px 24px;
  }

  .money-auth-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .money-auth-page .money-auth-form-panel {
    order: 1;
    min-height: auto;
    padding: 48px 40px;
  }

  .money-auth-page .money-auth-value-panel {
    order: 2;
    padding: 48px 40px calc(48px + env(safe-area-inset-bottom));
    background: rgba(133, 248, 196, 0.2);
  }

  .money-auth-page .money-auth-brand-mark {
    font-size: 24px;
  }

  .money-auth-page .money-auth-value-title {
    max-width: none;
    font-size: 24px;
    line-height: 32px;
  }

  .money-auth-page .money-auth-value-body {
    max-width: 100%;
    font-size: 14px;
  }

  .money-auth-form {
    max-width: 100%;
  }

  .money-auth-title {
    font-size: 30px;
  }
}

@media (max-width: 480px) {
  .money-auth-page .money-auth-form-panel,
  .money-auth-page .money-auth-value-panel {
    padding-inline: 24px;
  }

  /* Scoped to the auth bar, which unlike the site header has to fit the whole
     lockup and "Back to site" on ONE row. At 320px the 24px wordmark alone
     already overran that row before the mark existed; this buys back the
     headroom so neither label wraps. The site header is a two-row grid at this
     width and keeps the larger lockup. */
  .money-auth-page-brand .money-brand-logo {
    font-size: 21px;
  }

  .money-auth-page-brand .money-brand-mark {
    width: 24px;
    height: 24px;
  }

  .money-auth-fields {
    gap: 20px;
  }

  .money-auth-links {
    flex-direction: column;
    justify-content: center;
  }
}

.debt-scenario-route {
  --debt-surface: #f6f7ff;
  --debt-surface-strong: #eef1ff;
  --debt-card: var(--wf-color-background-surface);
  --debt-border: rgba(32, 44, 78, 0.08);
  --debt-ink: #1d2740;
  --debt-muted: #6a7289;
  --debt-emerald: #0c7a58;
  --debt-emerald-strong: #076246;
  --debt-emerald-soft: #d8fff0;
  --debt-cyan: #6ee2df;
  --debt-red: #c64752;
  --debt-red-soft: #f1ccd5;
  --debt-shadow: 0 18px 48px rgba(31, 42, 74, 0.08);
  background:
    radial-gradient(circle at top left, rgba(122, 219, 199, 0.18), transparent 30%),
    linear-gradient(180deg, #fbfbff 0%, #f7f8ff 44%, var(--wf-color-background-surface) 100%);
  color: var(--debt-ink);
}

.debt-scenario-top-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 251, 255, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(32, 44, 78, 0.05);
}

.debt-scenario-top-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 56px;
}

.debt-scenario-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 56px 96px;
}

.debt-scenario-layout {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.debt-scenario-sidebar {
  position: sticky;
  top: 128px;
  display: grid;
  gap: 28px;
}

.debt-scenario-sidebar-head {
  display: grid;
  gap: 6px;
  padding: 8px 0;
}

.debt-scenario-sidebar-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}


.debt-scenario-sidebar-nav {
  display: grid;
  gap: 6px;
}

.debt-scenario-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--wf-space-12);
  padding: 12px 16px;
  border-radius: var(--wf-radius-pill);
  color: var(--debt-muted);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.debt-scenario-sidebar-link:hover,
.debt-scenario-sidebar-link:focus-visible {
  background: rgba(12, 122, 88, 0.08);
  color: var(--debt-emerald-strong);
  transform: translateX(2px);
}

.debt-scenario-sidebar-link.is-active {
  background: var(--debt-emerald);
  color: #fff;
  box-shadow: 0 12px 24px rgba(12, 122, 88, 0.22);
}

.debt-scenario-sidebar-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.debt-scenario-sidebar-icon svg {
  width: 100%;
  height: 100%;
}

.debt-scenario-sidebar-actions {
  padding-top: 8px;
}

.debt-scenario-reset-link {
  width: 100%;
  justify-content: center;
  background: var(--debt-cyan);
  color: #0f3f46;
  border-color: transparent;
}

.debt-scenario-main {
  display: grid;
  gap: 36px;
}

.debt-scenario-hero {
  display: grid;
  gap: var(--wf-space-16);
}

.debt-scenario-mobile-pill {
  display: none;
  margin: 0 0 8px;
  width: fit-content;
  padding: 6px 10px;
  border-radius: var(--wf-radius-pill);
  background: rgba(12, 122, 88, 0.12);
  color: var(--debt-emerald-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-title {
  margin: 0;
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.debt-scenario-subcopy {
  max-width: 42rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--debt-muted);
}

.debt-scenario-inputs-surface {
  padding: 40px;
  border: 1px solid rgba(142, 160, 211, 0.12);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(238, 241, 255, 0.9) 0%, rgba(244, 246, 255, 0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(var(--wm-money-surface-rgb, 255, 255, 255), 0.8);
}

.debt-scenario-inputs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wf-space-32);
}

.debt-scenario-input-column {
  display: grid;
  gap: 22px;
}


.debt-scenario-field {
  display: grid;
  gap: 10px;
}

.debt-scenario-input.wf-input-shell {
  min-height: auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(32, 44, 78, 0.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.debt-scenario-input.wf-input-shell:has(.wf-input:focus-visible) {
  border-color: var(--debt-emerald);
  box-shadow: none;
}

.debt-scenario-input .wf-input {
  padding: 0 0 8px;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--debt-ink);
}

.debt-scenario-apr-stack {
  display: grid;
  gap: 8px;
}

.debt-scenario-apr-slider {
  width: 100%;
  appearance: none;
  height: 8px;
  border-radius: var(--wf-radius-pill);
  background: linear-gradient(90deg, rgba(12, 122, 88, 0.25) 0%, rgba(12, 122, 88, 0.76) 50%, rgba(32, 44, 78, 0.18) 100%);
  outline: none;
}

.debt-scenario-apr-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--debt-emerald);
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(12, 122, 88, 0.25);
}

.debt-scenario-apr-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--debt-emerald);
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(12, 122, 88, 0.25);
}

.debt-scenario-apr-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--debt-muted);
}

.debt-scenario-input-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}

.debt-scenario-forecast-button {
  min-width: 220px;
}

.debt-scenario-section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.debt-scenario-strategy-card.wf-surface {
  position: relative;
  display: grid;
  gap: 22px;
  min-height: 100%;
  padding: 28px;
  border-radius: var(--wf-radius-xl);
  border-color: rgba(32, 44, 78, 0.06);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--debt-shadow);
}

.debt-scenario-strategy-card.is-selected {
  transform: translateY(-4px);
}

.debt-scenario-strategy-card.is-recommended.wf-surface {
  background: linear-gradient(180deg, #0d6e50 0%, #08533d 100%);
  color: #fff;
  box-shadow: 0 22px 48px rgba(8, 83, 61, 0.34);
}

.debt-scenario-strategy-head {
  display: grid;
  gap: 14px;
}

.debt-scenario-strategy-title-row {
  display: flex;
  justify-content: space-between;
  gap: var(--wf-space-16);
  align-items: start;
}

.debt-scenario-strategy-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.debt-scenario-strategy-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: currentColor;
}

.debt-scenario-strategy-icon svg {
  width: 100%;
  height: 100%;
}

.debt-scenario-recommended-badge.wf-badge {
  justify-self: end;
  min-height: 24px;
  padding: 0 10px;
  border: 0;
  background: rgba(216, 255, 240, 0.92);
  color: #0b5b42;
}

.debt-scenario-strategy-metrics {
  display: grid;
  gap: var(--wf-space-16);
}

.debt-scenario-metric-panel {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  background: #f3f5ff;
}

.debt-scenario-strategy-card.is-recommended .debt-scenario-metric-panel,
.debt-scenario-strategy-card.is-recommended .debt-scenario-recommended-panel {
  background: rgba(255, 255, 255, 0.12);
}

.debt-scenario-metric-value,
.debt-scenario-recommended-title,
.debt-scenario-summary-chip-value,
.debt-scenario-insight-value {
  margin: 0;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

.debt-scenario-metric-value.is-negative {
  color: var(--debt-red);
}

.debt-scenario-strategy-card.is-recommended .debt-scenario-metric-value.is-negative {
  color: #ffd3d8;
}

.debt-scenario-recommended-panel {
  display: grid;
  gap: 20px;
  margin-top: auto;
  padding: 16px;
  border-radius: 18px;
}

.debt-scenario-efficiency {
  display: grid;
  gap: 8px;
}

.debt-scenario-efficiency-row {
  display: flex;
  justify-content: space-between;
  gap: var(--wf-space-12);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-efficiency-track {
  height: 10px;
  border-radius: var(--wf-radius-pill);
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.debt-scenario-efficiency-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6ee2df 0%, #bbffd9 100%);
}

.debt-scenario-select-button {
  width: 100%;
  justify-content: center;
  background: var(--debt-emerald-soft);
  color: #064632;
  border-color: transparent;
}

.debt-scenario-strategy-footer {
  display: grid;
  gap: 14px;
  margin-top: auto;
}

.debt-scenario-strategy-note {
  margin: 0;
  color: var(--debt-muted);
  line-height: 1.55;
}

.debt-scenario-strategy-link {
  color: var(--debt-emerald-strong);
  font-weight: 700;
  text-decoration: none;
}

.debt-scenario-progress {
  display: grid;
  gap: 22px;
  padding: 34px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(230, 236, 255, 0.92) 0%, rgba(237, 242, 255, 0.98) 100%);
}

.debt-scenario-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}

.debt-scenario-progress-title {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.debt-scenario-progress-copy {
  margin: 0;
  color: var(--debt-muted);
}

.debt-scenario-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.875rem;
  color: #42506d;
}

.debt-scenario-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.debt-scenario-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.debt-scenario-legend-dot.is-savings {
  background: var(--debt-emerald);
}

.debt-scenario-legend-dot.is-debt {
  background: var(--debt-red);
}

.debt-scenario-chart-card {
  display: grid;
  gap: var(--wf-space-16);
}

.debt-scenario-chart-frame {
  position: relative;
  min-height: 420px;
  padding: 64px 18px 18px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.debt-scenario-chart-bars {
  position: absolute;
  inset: 64px 18px 18px;
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.debt-scenario-bar-group {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 100%;
}

.debt-scenario-bar {
  display: block;
  width: 100%;
}

.debt-scenario-bar-debt {
  background: linear-gradient(180deg, rgba(198, 71, 82, 0.96) 0%, rgba(198, 71, 82, 0.34) 100%);
  border-radius: 12px 12px 0 0;
}

.debt-scenario-bar-savings {
  background: linear-gradient(180deg, rgba(13, 110, 80, 0.74) 0%, rgba(13, 110, 80, 1) 100%);
  border-radius: 0 0 12px 12px;
}

.debt-scenario-goal-line {
  position: absolute;
  left: 18px;
  right: 18px;
  border-top: 1px solid rgba(90, 111, 162, 0.42);
  z-index: 2;
}

.debt-scenario-goal-line-label {
  position: absolute;
  right: 0;
  top: -28px;
  padding: 4px 10px;
  border-radius: var(--wf-radius-pill);
  background: rgba(32, 44, 78, 0.08);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #42506d;
}

.debt-scenario-milestone-marker {
  position: absolute;
  top: 12px;
  width: 0;
  transform: translateX(-50%);
  z-index: 3;
}



.debt-scenario-milestone-line {
  display: block;
  width: 1px;
  height: 42px;
  margin: 0 auto;
  background: rgba(66, 80, 109, 0.35);
}

.debt-scenario-x-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--wf-space-12);
  padding: 0 8px;
  font-size: 0.75rem;
  color: #5d6885;
}

.debt-scenario-milestones-summary,
.debt-scenario-insight-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wf-space-16);
}

.debt-scenario-summary-chip,
.debt-scenario-insight-card {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.56);
}

.debt-scenario-assumptions {
  font-size: 0.92rem;
  color: #5d6885;
}

.debt-scenario-footer {
  padding-top: 0;
}

@media (max-width: 1120px) {
  .debt-scenario-top-nav-inner,
  .debt-scenario-page {
    padding-left: 24px;
    padding-right: 24px;
  }

  .debt-scenario-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .debt-scenario-sidebar {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wf-space-16);
    padding: 18px;
    border: 1px solid var(--debt-border);
    border-radius: var(--wf-radius-xl);
    background: rgba(var(--wm-money-surface-rgb, 255, 255, 255), 0.8);
  }

  .debt-scenario-sidebar-head,
  .debt-scenario-sidebar-actions {
    grid-column: 1 / -1;
  }

  .debt-scenario-sidebar-nav {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debt-scenario-inputs-grid,
  .debt-scenario-section-grid,
  .debt-scenario-milestones-summary,
  .debt-scenario-insight-row {
    grid-template-columns: 1fr;
  }

  .debt-scenario-progress-head {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .debt-scenario-top-nav-inner {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .debt-scenario-top-nav .money-nav-links,
  .debt-scenario-top-nav .money-nav-actions {
    display: none;
  }

  .debt-scenario-page {
    padding-top: 24px;
    padding-bottom: 56px;
  }

  .debt-scenario-mobile-pill {
    display: inline-flex;
  }

  .debt-scenario-sidebar {
    display: none;
  }

  .debt-scenario-inputs-surface,
  .debt-scenario-progress {
    padding: 24px 18px;
  }

  .debt-scenario-input .wf-input,
  .debt-scenario-metric-value,
  .debt-scenario-recommended-title,
  .debt-scenario-summary-chip-value,
  .debt-scenario-insight-value {
    font-size: 1.75rem;
  }

  .debt-scenario-progress-title {
    font-size: 1.75rem;
  }

  .debt-scenario-chart-frame {
    min-height: 360px;
    padding-top: 72px;
  }

  .debt-scenario-chart-bars {
    gap: 4px;
  }

}

.debt-scenario-route {
  --debt-bg: var(--wm-money-canvas);
  --debt-sidebar: var(--wm-money-surface-soft, #f1f3ff);
  --debt-soft: #eef1ff;
  --debt-card: var(--wf-color-background-surface);
  --debt-line: rgba(188, 202, 192, 0.3);
  --debt-line-soft: rgba(188, 202, 192, 0.18);
  --debt-ink: var(--wm-money-ink);
  --debt-copy: var(--wm-money-copy);
  --debt-muted: var(--wm-money-muted);
  --debt-green: var(--wm-money-accent);
  --debt-chart-green: var(--wm-money-accent-chart);
  --debt-danger: var(--wm-money-danger);
  background: var(--debt-bg);
  color: var(--debt-ink);
}

.debt-scenario-top-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--debt-bg);
  border-bottom: 1px solid var(--wm-money-border-muted);
}

.debt-scenario-top-nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1440px;
  min-height: 84px;
  margin: 0 auto;
  padding: 24px 56px;
}

.debt-scenario-primary-nav {
  display: flex;
  align-items: center;
  gap: var(--wf-space-32);
}

.debt-scenario-top-nav .money-brand,
.debt-scenario-top-nav .money-brand-link {
  grid-column: 1;
  grid-row: 1;
}

.debt-scenario-top-nav .money-brand,
.debt-scenario-top-nav .money-brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--wf-font-heading);
  font-weight: 700;
  letter-spacing: -0.05em;
  font-size: 20px;
  color: var(--debt-green);
}

.debt-scenario-top-nav .money-nav-link {
  color: var(--debt-copy);
  font-size: 14px;
  font-weight: 500;
}

.debt-scenario-top-nav .money-nav-link.is-active {
  border-bottom: 2px solid var(--debt-green);
  color: var(--debt-green);
  font-weight: 600;
  padding-bottom: 6px;
}

.debt-scenario-nav-icons {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--debt-muted);
  font-size: 18px;
}

.debt-scenario-nav-icons span,
.debt-scenario-sidebar-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.debt-scenario-nav-icons svg,
.debt-scenario-sidebar-icon svg {
  width: 100%;
  height: 100%;
}

.debt-scenario-page {
  max-width: none;
  min-height: calc(100vh - 84px);
  margin: 0;
  padding: 0;
  background: var(--debt-bg);
}

.debt-scenario-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  display: flex;
  width: 288px;
  padding: 96px 33px 32px 32px;
  flex-direction: column;
  background: var(--debt-sidebar);
  border-right: 1px solid var(--wm-money-border-muted);
}

.debt-scenario-sidebar-head {
  display: grid;
  gap: 4px;
}

.debt-scenario-sidebar-title {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0;
}


.debt-scenario-sidebar-actions {
  padding-top: 32px;
}

.debt-scenario-reset-link {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  background: var(--debt-green);
  border-color: var(--debt-green);
  box-shadow: 0 10px 15px -3px rgba(0, 105, 72, 0.1), 0 4px 6px -4px rgba(0, 105, 72, 0.1);
  color: #fff;
}

.debt-scenario-sidebar-nav {
  display: grid;
  gap: 4px;
  padding-top: 36px;
}

.debt-scenario-sidebar-link,
.debt-scenario-settings-link {
  display: flex;
  align-items: center;
  gap: var(--wf-space-12);
  min-height: 44px;
  padding: 12px 16px;
  border-radius: var(--wm-card-radius);
  color: var(--debt-copy);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.debt-scenario-sidebar-link.is-active {
  background: var(--wm-money-chip-strong);
  color: var(--debt-green);
}

.debt-scenario-sidebar-icon {
  width: 16px;
  color: currentColor;
}

.debt-scenario-settings-link {
  margin-top: auto;
  border-top: 1px solid var(--wm-money-border-medium, rgba(188, 202, 192, 0.2));
  border-radius: 0;
  padding-top: 33px;
}

.debt-scenario-main {
  display: grid;
  max-width: 992px;
  margin: 0 auto;
  padding: 56px;
  gap: 64px;
}

.debt-scenario-hero {
  display: grid;
  max-width: 896px;
  gap: var(--wf-space-16);
}

.debt-scenario-back-link {
  width: fit-content;
  color: var(--debt-green);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
}

.debt-scenario-title {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 48px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0;
}

.debt-scenario-subcopy {
  max-width: 672px;
  margin: 0;
  color: var(--debt-copy);
  font-size: 18px;
  line-height: 29px;
}

.debt-scenario-section-heading {
  display: grid;
  gap: var(--wf-space-24);
}

.debt-scenario-section-heading h2,
.debt-scenario-section-title,
.debt-scenario-progress-title {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0;
}

.debt-scenario-section-heading p,
.debt-scenario-progress-copy {
  margin: 0;
  color: var(--debt-copy);
  font-size: 16px;
  line-height: 24px;
}

.debt-scenario-at-glance {
  display: grid;
  gap: 40px;
}

.debt-scenario-glance-shell {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--wf-space-24);
  width: 100%;
  padding: 29px 37px;
  border: 5px solid var(--debt-sidebar);
  border-radius: 48px;
  background: var(--debt-card);
}

.debt-scenario-glance-field {
  display: grid;
  min-width: 0;
  gap: 4px;
}


.debt-scenario-glance-input.wf-input-shell {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.debt-scenario-glance-input .wf-control-leading,
.debt-scenario-glance-input .wf-control-trailing {
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.debt-scenario-glance-input .wf-input {
  height: 28px;
  width: 7ch;
  min-width: 0;
  padding: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.debt-scenario-glance-input.is-percent .wf-input {
  width: 4ch;
}

.debt-scenario-glance-field:has([name="monthly_savings_contribution"]) .wf-input,
.debt-scenario-glance-field:has([name="monthly_savings_contribution"]) .wf-control-leading {
  color: var(--debt-green);
}

.debt-scenario-glance-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.debt-scenario-section {
  display: grid;
  gap: 40px;
}

.debt-scenario-section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wf-space-32);
}

.debt-scenario-option-card.wf-surface {
  position: relative;
  display: grid;
  min-height: 252px;
  padding: 33px;
  gap: var(--wf-space-24);
  border-color: var(--debt-line-soft);
  border-radius: 8px;
  background: var(--debt-card);
  box-shadow: none;
}

.debt-scenario-option-card.is-selected.wf-surface {
  border-color: var(--debt-green);
  box-shadow: 0 0 0 1px var(--debt-green);
}

.debt-scenario-option-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.debt-scenario-option-card-link:focus-visible {
  outline: 3px solid var(--wf-color-focus-ring);
  outline-offset: 4px;
}

.debt-scenario-option-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.debt-scenario-option-head p {
  margin: 8px 0 0;
  color: var(--debt-copy);
  font-size: 12px;
  line-height: 20px;
}

.debt-scenario-option-title {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0;
}

.debt-scenario-option-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--debt-green);
}

.debt-scenario-option-icon svg {
  width: 100%;
  height: 100%;
}

.debt-scenario-split-note {
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--debt-copy);
  font-size: 12px;
  line-height: 16px;
}

.debt-scenario-split-note span {
  width: 5px;
  height: 6px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--debt-green);
}

.debt-scenario-split-note p {
  margin: 0;
}

.debt-scenario-adjust-link {
  position: relative;
  z-index: 2;
  width: fit-content;
  color: var(--debt-green);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.debt-scenario-option-metrics {
  display: grid;
  gap: 20px;
  margin: 0;
}

.debt-scenario-option-metrics div {
  display: flex;
  justify-content: space-between;
  gap: var(--wf-space-16);
  padding-top: 16px;
  border-top: 1px solid rgba(188, 202, 192, 0.18);
}

.debt-scenario-option-metrics dd {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: right;
}

.debt-scenario-option-metrics dd.is-good {
  color: var(--debt-green);
}

.debt-scenario-option-metrics dd.is-cost {
  color: var(--debt-danger);
}

.debt-scenario-tune {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: start;
  padding: var(--wf-space-32);
  border-radius: 8px;
  background: var(--debt-sidebar);
}

.debt-scenario-tune-copy {
  display: grid;
  gap: 4px;
}

.debt-scenario-tune-copy h3 {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0;
}

.debt-scenario-tune-copy p {
  max-width: 410px;
  margin: 0;
  color: var(--debt-copy);
  font-size: 12px;
  line-height: 20px;
}

.debt-scenario-tune-control {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 8px;
  background: var(--debt-card);
}

.debt-scenario-tune-button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 6px;
  color: var(--debt-copy);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-decoration: none;
}

.debt-scenario-tune-button:focus-visible,
.debt-scenario-chart-tab:focus-visible,
.debt-scenario-adjust-link:focus-visible {
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 3px;
}

.debt-scenario-tune-button.is-active {
  background: var(--debt-green);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 105, 72, 0.2);
}

.debt-scenario-tune-result {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--wf-space-16);
}

.debt-scenario-tune-result p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0;
  color: var(--debt-green);
  font-family: var(--wf-font-mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

.debt-scenario-tune-rule {
  width: min(448px, 100%);
  height: 1px;
  background: rgba(188, 202, 192, 0.3);
}

.debt-scenario-tune-result .debt-scenario-tune-note {
  color: var(--debt-copy);
  font-family: var(--wf-font-body);
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  line-height: 20px;
}

.debt-scenario-progress {
  display: grid;
  gap: 40px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.debt-scenario-progress-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--wf-space-24);
}

.debt-scenario-progress-head > div {
  display: grid;
  max-width: 576px;
  gap: 8px;
}

.debt-scenario-chart-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 5px;
  border: 1px solid var(--debt-line-soft);
  border-radius: var(--wf-radius-pill);
  background: var(--debt-sidebar);
}

.debt-scenario-chart-tab {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  padding: 8px 22px;
  border-radius: var(--wf-radius-pill);
  color: var(--debt-copy);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  text-decoration: none;
}

.debt-scenario-chart-tab.is-active {
  background: #fff;
  color: var(--debt-green);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.debt-scenario-chart-card {
  display: grid;
  gap: var(--wf-space-16);
  padding: 41px;
  border: 1px solid var(--debt-line);
  border-radius: 8px;
  background: #fff;
}

.debt-scenario-legend {
  display: flex;
  justify-content: center;
  gap: var(--wf-space-32);
}

.debt-scenario-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.debt-scenario-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.debt-scenario-legend-dot.is-savings {
  background: var(--debt-chart-green);
}

.debt-scenario-legend-dot.is-debt {
  background: rgba(186, 26, 26, 0.3);
}

.debt-scenario-chart-frame {
  position: relative;
  min-height: 392px;
  padding: 104px 16px 56px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.debt-scenario-chart-bars {
  --chart-gap: 18px;
  --chart-columns: 7;
  --chart-column-width: calc((100% - ((var(--chart-columns) - 1) * var(--chart-gap))) / var(--chart-columns));
  --chart-center-offset: calc(var(--chart-column-width) / 2);
  --chart-track-width: calc(100% - var(--chart-column-width));
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(42px, 1fr));
  align-items: center;
  gap: var(--chart-gap);
  min-height: 256px;
}

.debt-scenario-zero-line {
  position: absolute;
  top: 130px;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(188, 202, 192, 0.5);
}

.debt-scenario-bar-slot {
  position: relative;
  display: grid;
  grid-template-rows: 128px 4px 128px;
  justify-items: center;
  min-width: 42px;
  border-radius: 6px;
  cursor: default;
}

.debt-scenario-bar-slot:focus-visible {
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 4px;
}

.debt-scenario-bar-half {
  display: flex;
  width: 100%;
  justify-content: center;
}

.debt-scenario-bar-half.is-savings {
  align-items: end;
}

.debt-scenario-bar-half.is-debt {
  align-items: start;
}

.debt-scenario-zero-gap {
  height: 4px;
}

.debt-scenario-bar {
  display: block;
  width: min(32px, 70%);
  min-height: 0;
}

.debt-scenario-bar-savings {
  border-radius: 2px 2px 0 0;
  background: var(--debt-chart-green);
}

.debt-scenario-bar-debt {
  border-radius: 0 0 2px 2px;
  background: rgba(186, 26, 26, 0.3);
}

.debt-scenario-bar-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 5;
  display: grid;
  gap: 4px;
  min-width: 148px;
  padding: 10px 12px;
  border: 1px solid var(--debt-line);
  border-radius: 8px;
  background: var(--wf-color-background-surface);
  box-shadow: 0 12px 30px rgba(21, 27, 42, 0.14);
  color: var(--debt-copy);
  font-size: 12px;
  line-height: 16px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.debt-scenario-bar-tooltip strong {
  color: var(--debt-ink);
  font-size: 12px;
}

.debt-scenario-bar-slot:hover .debt-scenario-bar-tooltip,
.debt-scenario-bar-slot:focus-visible .debt-scenario-bar-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.debt-scenario-chart-warning {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--wf-color-status-warning-border);
  border-radius: 8px;
  background: var(--wf-color-status-warning-bg);
  color: var(--wf-color-status-warning-text);
  font-size: 13px;
  line-height: 20px;
}

.debt-scenario-chart-scroll {
  --chart-gap: 18px;
  --chart-columns: 7;
  --chart-min-column-width: 42px;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.debt-scenario-chart-scroll-inner {
  min-width: max(
    100%,
    calc(
      (var(--chart-columns) * var(--chart-min-column-width)) +
      ((var(--chart-columns) - 1) * var(--chart-gap)) +
      32px
    )
  );
}


.debt-scenario-chart-marker.is-buffer {
  top: 66px;
}

.debt-scenario-chart-marker.is-debt-cleared {
  bottom: 14px;
}

.debt-scenario-chart-marker-label {
  position: relative;
  display: inline-grid;
  gap: 2px;
  justify-items: center;
}

.debt-scenario-chart-marker-label::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  background: rgba(124, 138, 131, 0.45);
  transform: translateX(-50%);
}

.debt-scenario-chart-marker.is-buffer .debt-scenario-chart-marker-label::after {
  top: calc(100% + 6px);
  height: 102px;
}

.debt-scenario-chart-marker.is-debt-cleared .debt-scenario-chart-marker-label::after {
  bottom: calc(100% + 6px);
  height: 86px;
}


.debt-scenario-x-axis {
  --chart-gap: 18px;
  --chart-columns: 7;
  --chart-column-width: calc((100% - ((var(--chart-columns) - 1) * var(--chart-gap))) / var(--chart-columns));
  --chart-center-offset: calc(var(--chart-column-width) / 2);
  --chart-track-width: calc(100% - var(--chart-column-width));
  position: relative;
  min-height: 56px;
  margin: 0 16px;
  padding: 17px 0 0;
  border-top: 1px solid var(--wm-money-border-muted);
  font-family: var(--wf-font-mono);
  letter-spacing: 0;
  text-transform: none;
}



.debt-scenario-assumptions {
  margin: -48px 0 0;
  color: var(--debt-muted);
  font-size: 13px;
  line-height: 20px;
}

.debt-scenario-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-12);
  justify-content: flex-end;
  margin-top: var(--wf-space-24);
}

.debt-scenario-next-primary,
.debt-scenario-next-secondary {
  align-items: center;
  border-radius: var(--wf-radius-pill);
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  line-height: 20px;
  min-height: 44px;
  padding: 12px 24px;
  text-decoration: none;
}

.debt-scenario-next-primary {
  background: var(--debt-green);
  box-shadow: 0 10px 15px -3px rgba(0, 105, 72, 0.18), 0 4px 6px -4px rgba(0, 105, 72, 0.18);
  color: #fff;
}

.debt-scenario-next-secondary {
  background: var(--debt-chip);
  color: var(--debt-green);
}

.debt-scenario-footer {
  margin-left: 288px;
  padding-top: 0;
}

@media (max-width: 1120px) {
  .debt-scenario-top-nav-inner {
    grid-template-columns: 1fr auto;
    padding: 20px 24px;
  }

  .debt-scenario-nav-icons {
    grid-column: 2;
  }

  .debt-scenario-primary-nav {
    display: none;
  }

  .debt-scenario-sidebar {
    display: none;
  }

  .debt-scenario-main,
  .debt-scenario-footer {
    max-width: none;
    margin-left: 0;
  }

  .debt-scenario-main {
    padding: 32px 24px 56px;
    gap: 44px;
  }

  .debt-scenario-glance-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: var(--wf-radius-xl);
    padding: 21px;
  }

  .debt-scenario-section-grid {
    grid-template-columns: 1fr;
    gap: var(--wf-space-16);
  }

  .debt-scenario-option-card.wf-surface {
    min-height: auto;
    padding: 25px;
  }

  .debt-scenario-option-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .debt-scenario-option-metrics div {
    display: grid;
    justify-items: center;
    padding-top: 8px;
    border-top: 0;
  }

  .debt-scenario-tune,
  .debt-scenario-progress-head {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .debt-scenario-tune-control,
  .debt-scenario-chart-tabs {
    justify-content: center;
    overflow-x: auto;
  }
}

@media (max-width: 720px) {
  .debt-scenario-top-nav-inner {
    min-height: 72px;
  }

  .debt-scenario-title {
    font-size: 32px;
    line-height: 38px;
  }

  .debt-scenario-subcopy,
  .debt-scenario-section-heading p,
  .debt-scenario-progress-copy {
    font-size: 14px;
    line-height: 22px;
  }

  .debt-scenario-section-heading h2,
  .debt-scenario-section-title,
  .debt-scenario-progress-title {
    font-size: 24px;
    line-height: 30px;
  }

  .debt-scenario-glance-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
  }

  .debt-scenario-glance-field {
    min-height: 112px;
    padding: 16px;
    background: var(--debt-soft);
    border: 1px solid rgba(249, 249, 255, 0.9);
  }

  .debt-scenario-tune {
    padding: var(--wf-space-32);
  }

  .debt-scenario-tune-button {
    min-width: 90px;
    padding: 0 14px;
  }

  .debt-scenario-tune-result p {
    font-size: 20px;
    line-height: 28px;
  }

  .debt-scenario-chart-card {
    padding: 25px;
  }

  .debt-scenario-chart-frame {
    min-height: 320px;
    padding-right: 0;
    padding-left: 0;
  }

  .debt-scenario-chart-scroll {
    --chart-gap: 6px;
    --chart-min-column-width: 42px;
    margin-right: -25px;
    margin-left: -25px;
    padding-right: 25px;
    padding-left: 25px;
  }

  .debt-scenario-chart-bars {
    --chart-gap: 6px;
    grid-template-columns: repeat(7, minmax(28px, 1fr));
    gap: 6px;
  }

  .debt-scenario-x-axis {
    --chart-gap: 6px;
    margin-right: 0;
    margin-left: 0;
  }

  .debt-scenario-bar {
    width: min(22px, 80%);
  }

  .debt-scenario-chart-tabs {
    justify-content: start;
  }

  .debt-scenario-chart-tab {
    min-width: auto;
    padding: 8px 16px;
  }

  .debt-scenario-phase-labels {
    display: none;
  }

  .debt-scenario-x-axis {
    padding-right: 0;
    padding-left: 0;
  }
}

a {
  color: inherit;
}

.money-screen-reader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
}

/*
 * WMA-117: honour the OS motion preference. The rule above was unconditional,
 * so a reader who has asked their system not to animate still got an animated
 * jump on every in-page anchor and every `scrollIntoView` -- which is the case
 * `prefers-reduced-motion` exists for, and the one group most likely to be
 * affected by it.
 *
 * It is also why the rerun-confirmation screenshots flaked at 5-77px. Those
 * shots are scoped to the opaque dialog card, but its rounded corners let the
 * backdrop -- and so the page behind it -- show through; with a scroll still
 * animating, the background sat at a different offset from run to run. The
 * visual project already runs `reducedMotion: 'reduce'`, so fixing the real
 * defect settles the diff as a side effect, rather than masking pixels.
 *
 * Not a substitute for `behavior: 'instant'` at the call sites: this only
 * covers readers who set the preference. See the unguarded `behavior: 'smooth'`
 * calls in the five scenario clients, tracked for Wave 3.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.money-page {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 0 40px 80px;
}

.money-top-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(249, 249, 255, 0.9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(188, 202, 192, 0.28);
}

.money-top-nav-inner {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-space-24);
}

.money-top-nav-main,
.money-nav-links,
.money-nav-actions {
  display: flex;
  align-items: center;
}

/* The brand + nav-link cluster is the only part of the header allowed to give
   ground as the viewport narrows. The auth actions never shrink and never wrap
   onto a second row of their own — see the responsive tiers below. */
.money-top-nav-main {
  flex: 1 1 auto;
  min-width: 0;
  gap: 40px;
}

.money-brand-link,
.money-hero-brand,
.money-footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* The mark ships as inline SVG (lib/brand-mark.ts) so it paints with the
   markup. Sizing lives here rather than on the element so the footer and the
   narrow-viewport steps can scale it against the wordmark beside it. */
.money-brand-mark {
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}

.money-footer-brand-link .money-brand-mark {
  width: 28px;
  height: 28px;
}

.money-brand-link:focus-visible,
.money-hero-brand:focus-visible,
.money-footer-brand-link:focus-visible,
.money-button-link:focus-visible,
.money-social-link:focus-visible {
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 3px;
}

.money-brand-logo,
.money-hero-logo,
.money-footer-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--wf-font-heading);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--wm-money-accent);
}

.money-nav-links {
  gap: 28px;
  flex-wrap: nowrap;
  min-width: 0;
}

.money-nav-actions {
  gap: var(--wf-space-12);
  flex: 0 0 auto;
}

.money-nav-link {
  color: var(--wf-color-text-secondary);
  text-decoration: none;
  font-family: var(--wf-font-heading);
  font-size: 15px;
  /* D1 target floor: the link's own line-height sets its rendered height
     (there is no ancestor row to keep taut here), so it takes the 24px
     type-2xl line rather than the 22px paired with this font-size. */
  line-height: var(--wm-scenario-text-2xl-line, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color 120ms ease;
}

.money-nav-link.is-active,
.money-nav-link:hover,
.money-nav-link:focus-visible {
  color: var(--wm-money-accent);
}

.money-nav-link:focus-visible {
  border-radius: var(--wf-radius-sm);
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 4px;
}

.money-button-link {
  text-decoration: none;
}

.money-nav-primary {
  min-width: 170px;
  box-shadow: 0 10px 18px rgba(0, 105, 72, 0.16);
}

.money-nav-secondary {
  border-color: transparent;
  background: transparent;
  color: var(--wf-color-text-secondary);
}

.money-hero {
  padding: 48px 0 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 48px;
  align-items: center;
}

.money-hero-copy {
  display: grid;
  gap: 20px;
  max-width: 592px;
}

/* The header already carries the wordmark two rows above this, and a near-white
   pill on a near-white canvas read as a stray floating box rather than a
   lockup. The hero brand is hidden; the markup stays in routes/public.ts so the
   home page keeps its self-referencing brand link out of the visible layout. */
.money-hero-brand {
  display: none;
}

.money-hero-logo {
  font-size: 44px;
}

.money-hero-heading {
  margin: 0;
  display: grid;
  gap: 4px;
  font-family: var(--wf-font-heading);
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -0.055em;
  color: var(--wm-money-ink);
}

.money-hero-accent {
  color: var(--wm-money-accent);
}

.money-hero-kicker {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wm-money-accent);
}

.money-hero-body {
  margin: 0;
  max-width: 560px;
  font-size: 1.25rem;
  line-height: 1.62;
  color: var(--wm-money-copy);
}

.money-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-16);
}

.money-hero-primary,
.money-hero-secondary {
  min-width: 194px;
}

.money-hero-primary {
  box-shadow: 0 10px 20px rgba(0, 105, 72, 0.18);
}

/* Let wf-button-secondary supply the surface instead of a lavender override —
   the whole site now ships one secondary pair. */
.money-hero-secondary {
  background: var(--wf-color-action-secondary-bg);
  border-color: var(--wf-color-action-secondary-border);
  color: var(--wf-color-action-secondary-text);
}

.money-hero-tertiary-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--wf-color-text-muted);
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.money-inline-arrow {
  width: 14px;
  height: 14px;
}

.money-trend-icon,
.money-check-icon {
  width: 16px;
  height: 16px;
}

.money-hero-preview {
  position: relative;
}

.money-hero-preview-glow {
  position: absolute;
  border-radius: var(--wf-radius-pill);
  filter: blur(32px);
  pointer-events: none;
}

.money-hero-preview-glow-top {
  top: -20px;
  right: -12px;
  width: 96px;
  height: 96px;
  background: rgba(104, 219, 169, 0.26);
}

.money-hero-preview-glow-bottom {
  left: -28px;
  bottom: -28px;
  width: 160px;
  height: 160px;
  background: rgba(134, 242, 228, 0.16);
}

.money-hero-preview-card {
  position: relative;
  background: var(--wf-color-background-surface);
  border: 1px solid rgba(188, 202, 192, 0.18);
  border-radius: var(--wm-card-radius);
  padding: 28px;
  display: grid;
  gap: var(--wf-space-24);
  box-shadow: 0 18px 48px rgba(21, 27, 42, 0.06);
}

.money-hero-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}

.money-hero-preview-head-copy {
  display: grid;
  gap: 10px;
}

.money-hero-preview-pill {
  width: fit-content;
  padding: 4px 12px;
  border-radius: var(--wf-radius-pill);
  background: #68dba9;
  color: #064e3b;
  /* D2 type floor. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.money-hero-preview-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--wm-money-ink);
}

.money-hero-preview-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--wm-money-accent);
}

.money-hero-preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wf-space-12);
}

.money-hero-preview-metric {
  padding: 16px;
  border-radius: 10px;
  background: var(--wm-money-surface-soft, #f1f3ff);
  display: grid;
  gap: 6px;
}

.money-hero-preview-metric-highlight {
  border-left: 4px solid var(--wm-money-accent);
  padding-left: 12px;
}

.money-hero-preview-metric-label {
  margin: 0;
  color: var(--wf-color-text-muted);
  /* D2 type floor. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.money-hero-preview-metric-value {
  margin: 0;
  font-family: var(--wf-font-mono);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--wm-money-ink);
}

.money-hero-preview-metric-value.is-danger {
  color: var(--wm-money-danger);
}

.money-hero-preview-metric-value.is-success {
  color: var(--wm-money-accent);
}

.money-hero-preview-bars {
  display: grid;
  gap: 14px;
}

.money-hero-preview-bar-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wf-space-12);
}

.money-hero-preview-bar-label,
.money-hero-preview-bar-value {
  font-size: 12px;
  line-height: 18px;
  color: var(--wf-color-text-secondary);
}

.money-hero-preview-bar-label {
  min-width: 88px;
}

.money-hero-preview-bar-label.is-success,
.money-hero-preview-bar-value.is-success {
  color: var(--wm-money-accent);
}

.money-hero-preview-bar-track {
  height: 8px;
  border-radius: var(--wf-radius-pill);
  overflow: hidden;
  background: var(--wm-money-chip);
}

.money-hero-preview-bar-fill {
  display: block;
  height: 100%;
}

.money-hero-preview-bar-fill.is-muted {
  background: #cbd5e1;
}

.money-hero-preview-bar-fill.is-success {
  background: var(--wm-money-accent);
}

.money-hero-preview-note {
  display: flex;
  align-items: center;
  gap: var(--wf-space-12);
  padding: 16px 18px;
  border-radius: var(--wf-radius-xl);
  background: rgba(0, 105, 72, 0.05);
  border: 1px solid rgba(0, 105, 72, 0.12);
}

.money-hero-preview-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--wf-radius-pill);
  background: var(--wm-money-accent);
  color: var(--wf-color-background-surface);
  flex-shrink: 0;
}

.money-hero-preview-note-copy {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--wm-money-ink);
}

.money-hero-preview-note-copy strong {
  color: var(--wm-money-accent);
}

/* The inputs the example card was run on, printed under it so the numbers can be
   checked rather than taken on faith. */
.money-hero-preview-inputs {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--wm-money-muted);
}

.money-section {
  padding: 64px 0 0;
}

.money-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--wf-space-24);
  margin-bottom: 32px;
}

.money-section-head.is-compact {
  margin-bottom: 28px;
}

.money-section-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wm-money-ink);
}

.money-section-title.is-centered,
.money-section-body.is-centered {
  text-align: center;
}

.money-section-body {
  margin: 10px 0 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 24px;
  color: var(--wm-money-copy);
}

.money-scenarios {
  padding: 40px;
  background: var(--wm-money-surface-soft, #f1f3ff);
  border-radius: 40px;
  overflow: hidden;
}

.money-scenario-carousel-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.money-scenario-carousel-button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(188, 202, 192, 0.36);
  border-radius: var(--wf-radius-pill);
  background: rgba(255, 255, 255, 0.86);
  color: var(--wm-money-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(21, 27, 42, 0.05);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.money-scenario-carousel-button svg {
  width: 18px;
  height: 18px;
}

.money-scenario-carousel-button:hover,
.money-scenario-carousel-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(21, 27, 42, 0.08);
}

.money-scenario-carousel-button:focus-visible {
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 3px;
}

.money-scenario-carousel-button:disabled {
  opacity: 0.42;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.money-scenario-carousel-progress {
  min-width: 48px;
  text-align: center;
  font-family: var(--wf-font-mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--wf-color-text-muted);
}

.money-scenario-grid {
  display: flex;
  gap: var(--wf-space-24);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  overscroll-behavior-inline: contain;
  padding: 2px 2px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 105, 72, 0.28) transparent;
}

.money-scenario-grid:focus-visible {
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 4px;
  border-radius: var(--wm-card-radius);
}

.money-scenario-card.wf-surface {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  background: var(--wm-money-canvas);
  border-color: rgba(188, 202, 192, 0.08);
  border-radius: var(--wm-card-radius);
  padding: 28px;
  display: grid;
  gap: 18px;
  scroll-snap-align: start;
  box-shadow: 0 10px 40px -10px rgba(21, 27, 42, 0.04);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.money-scenario-card.wf-surface:hover,
.money-scenario-card.wf-surface:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(21, 27, 42, 0.08);
}

.money-scenario-card-top,
.money-scenario-copy {
  display: grid;
}

.money-scenario-card-top {
  gap: var(--wf-space-16);
}

.money-scenario-copy {
  gap: 8px;
}

.money-scenario-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--wf-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.money-scenario-icon.is-income {
  background: rgba(0, 133, 93, 0.1);
  color: var(--wm-money-accent);
}

.money-scenario-icon.is-bill,
.money-scenario-icon.is-debt {
  background: rgba(0, 133, 93, 0.1);
  color: var(--wm-money-accent);
}

.money-scenario-icon.is-muted {
  background: rgba(113, 105, 132, 0.11);
  color: #716984;
}

.money-scenario-icon-svg {
  width: 20px;
  height: 20px;
}

.money-scenario-eyebrow {
  margin: 0;
  /* D2 type floor. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wf-color-text-muted);
  font-weight: 600;
}

.money-scenario-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--wm-money-ink);
}

.money-scenario-question {
  margin: 0;
  min-height: 48px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  color: var(--wm-money-ink);
}

.money-scenario-summary {
  margin: 0;
  min-height: 66px;
  font-size: 14px;
  line-height: 22.75px;
  color: var(--wm-money-copy);
}

/* One example-result component. The landing carousel and the scenario library
   render the same three example strings, so they share one surface, one accent
   bar and one quote face rather than a lavender/mono pair and a grey/bold pair. */
.money-scenario-example,
.scenario-library-example {
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--wf-color-background-surface-subtle);
  border-left: 2px solid var(--wm-money-accent);
  display: grid;
  gap: 4px;
}

.money-scenario-example.is-income {
  border-left-color: var(--wm-money-accent);
}

.money-scenario-example.is-bill,
.money-scenario-example.is-debt {
  border-left-color: var(--wm-money-accent);
}

.money-scenario-example.is-muted {
  background: #f4f2fa;
  border-left-color: #9b91b3;
}

.money-scenario-example-label,
.scenario-library-example p {
  margin: 0;
  /* D2 type floor. No exemption for the uppercase kicker treatment. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wf-color-text-muted);
  font-weight: 600;
}

.money-scenario-example-quote,
.scenario-library-example strong {
  margin: 0;
  font-family: var(--wf-font-mono);
  font-size: 16px;
  line-height: 24px;
  font-style: italic;
  font-weight: 400;
  color: var(--wm-money-ink);
}

/* The inputs the example was run on. Small and quiet — it is provenance for the
   quoted result, not a second claim. */
.money-scenario-example-inputs {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--wm-money-muted);
}

.money-scenario-link {
  border: 0;
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--wm-money-accent);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  /* D1 target floor. */
  min-height: var(--wm-scenario-control-min, 24px);
}

.money-scenario-link:hover,
.money-scenario-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.money-scenario-link:focus-visible {
  border-radius: var(--wf-radius-sm);
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 3px;
}

.money-scenario-link.is-bill,
.money-scenario-link.is-debt {
  color: var(--wm-money-accent);
}

.money-scenario-link.is-muted,
.money-scenario-link.is-disabled {
  color: #716984;
}

.money-scenario-link.is-disabled {
  cursor: default;
  text-decoration: none;
}

.money-scenario-card.is-coming-soon {
  border-color: rgba(113, 105, 132, 0.12);
}

.money-process-head {
  display: grid;
  gap: var(--wf-space-12);
  justify-items: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.money-process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wf-space-32);
}

.money-process-line {
  position: absolute;
  top: 40px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(188, 202, 192, 0.5);
}

.money-process-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 20px;
  text-align: center;
}

.money-process-step-index {
  width: 80px;
  height: 80px;
  border-radius: var(--wf-radius-pill);
  display: grid;
  place-items: center;
  background: var(--wm-money-chip-strong);
  border: 4px solid var(--wm-money-canvas);
  box-shadow: 0 10px 40px -10px rgba(21, 27, 42, 0.04);
  font-family: var(--wf-font-mono);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: var(--wm-money-accent);
}

.money-process-step.is-active .money-process-step-index {
  background: var(--wm-money-accent);
  color: var(--wf-color-background-surface);
}

.money-process-step-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--wm-money-ink);
}

.money-benefits-head {
  margin-bottom: 40px;
}

.money-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wf-space-32);
}

.money-benefit-card {
  display: grid;
  gap: 20px;
}

.money-benefit-visual {
  min-height: 224px;
  border-radius: var(--wm-card-radius);
  background: var(--wm-money-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wf-space-24);
}

.money-benefit-visual-compare {
  gap: var(--wf-space-16);
}

.money-mini-plan {
  width: 112px;
  padding: 12px;
  border-radius: 10px;
  background: var(--wf-color-background-surface);
  border: 1px solid rgba(188, 202, 192, 0.12);
  box-shadow: 0 10px 30px rgba(21, 27, 42, 0.05);
  display: grid;
  gap: 8px;
}

.money-mini-plan.is-strong .money-mini-plan-title {
  color: var(--wm-money-accent);
}

.money-mini-plan-title {
  margin: 0;
  /* D2 type floor. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  font-weight: 600;
  color: var(--wf-color-text-muted);
}

.money-mini-plan-rows {
  display: grid;
  gap: 4px;
}

.money-mini-plan-rows span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  /* D2 type floor; also raises the strong/em children below, which inherit
     this size and set no font-size of their own. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  color: var(--wm-money-ink);
}

.money-mini-plan-rows strong,
.money-mini-plan-rows em {
  font-style: normal;
  font-weight: 400;
}

.money-benefit-visual-tradeoffs {
  flex-direction: column;
  gap: 14px;
}

.money-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--wf-radius-pill);
  border: 1px solid transparent;
  /* D2 type floor. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  font-weight: 600;
}

.money-chip svg {
  width: 12px;
  height: 12px;
}

.money-chip .money-scenario-icon-svg {
  width: 12px;
  height: 12px;
}

.money-chip.is-income {
  background: rgba(0, 105, 72, 0.1);
  border-color: rgba(0, 105, 72, 0.16);
  color: var(--wm-money-accent);
}

.money-chip.is-bill {
  background: rgba(0, 106, 97, 0.1);
  border-color: rgba(0, 106, 97, 0.16);
  color: var(--wm-money-accent-chart);
}

.money-chip.is-debt {
  background: rgba(75, 65, 225, 0.1);
  border-color: rgba(75, 65, 225, 0.16);
  color: #4b41e1;
}

.money-checklist-card {
  width: min(240px, 100%);
  padding: 20px;
  border-radius: 10px;
  background: var(--wf-color-background-surface);
  border: 1px solid rgba(188, 202, 192, 0.12);
  box-shadow: 0 10px 30px rgba(21, 27, 42, 0.05);
  display: grid;
  gap: var(--wf-space-12);
}

.money-checklist-card p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 16px;
  color: var(--wm-money-ink);
}

.money-checklist-card p.is-muted {
  color: var(--wf-color-text-muted);
}

.money-checklist-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  color: var(--wm-money-accent);
}

.money-benefit-copy {
  display: grid;
  gap: var(--wf-space-12);
}

.money-audience-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--wm-money-ink);
}

.money-audience-body {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--wm-money-copy);
}

.money-alpha-teaser {
  padding-top: 56px;
}

.money-alpha-teaser-card {
  max-width: 700px;
  margin: 0 auto;
  padding: 32px 36px;
  border-radius: var(--wm-card-radius);
  background: #f5f7ff;
  border: 1px solid rgba(188, 202, 192, 0.16);
  display: grid;
  gap: 14px;
  text-align: center;
}

.money-alpha-teaser-eyebrow {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wm-money-accent);
}

.money-alpha-teaser-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  color: var(--wm-money-ink);
}

.money-alpha-teaser-body {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--wf-color-text-secondary);
}

.money-alpha-teaser-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--wm-money-accent);
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  /* D1 target floor. */
  min-height: var(--wm-scenario-control-min, 24px);
}

.money-waitlist-section {
  padding-top: 40px;
}

.money-waitlist {
  position: relative;
  overflow: hidden;
  border-radius: var(--wm-card-radius);
  background: linear-gradient(180deg, #152233 0%, #101a28 100%);
  padding: 48px 40px;
  display: grid;
  gap: var(--wf-space-24);
  justify-items: center;
  text-align: center;
}

.money-waitlist-copy {
  display: grid;
  gap: var(--wf-space-16);
  max-width: 640px;
}

.money-waitlist-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  color: var(--wf-color-background-surface);
}

.money-waitlist-body {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.82);
}

/* The email field takes the full row, so the button and the status line below it
   centre under the field rather than hanging off its left edge. */
.money-waitlist-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--wf-space-12);
  width: min(520px, 100%);
}

.money-waitlist-input {
  width: 100%;
}

.money-waitlist-input.wf-input-shell {
  border-radius: var(--wf-radius-pill);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.money-waitlist-input .wf-input {
  color: var(--wf-color-background-surface);
  /* D1 target floor: the bare <input> renders shorter than its wf-input-shell
     wrapper (align-items: center on an intrinsic-height control). */
  min-height: var(--wm-scenario-control-min, 24px);
}

.money-waitlist-input .wf-input::placeholder {
  color: rgba(255, 255, 255, 0.52);
}

.money-waitlist-input:focus-within {
  box-shadow: 0 0 0 2px rgba(133, 248, 196, 0.24);
}

.money-waitlist-cta {
  white-space: nowrap;
  background: var(--wf-color-action-primary-bg);
  border-color: var(--wf-color-action-primary-border);
  color: var(--wf-color-action-primary-text);
}

.money-waitlist-disclaimer {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.56);
}

.money-waitlist-disclaimer.is-success {
  color: var(--wm-money-accent);
}

.money-waitlist-disclaimer.is-error {
  color: var(--wf-color-status-error-border);
}

.money-waitlist-form.is-submitting .money-waitlist-cta {
  opacity: 0.72;
}

.money-footer {
  margin-top: 56px;
  border-top: 1px solid rgba(188, 202, 192, 0.24);
}

.money-footer-inner {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 32px 40px 48px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.money-footer-brand-block {
  max-width: 360px;
  display: grid;
  gap: var(--wf-space-16);
}

.money-footer-logo {
  font-size: 26px;
}

.money-footer-note {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--wf-color-text-muted);
}

/* Two columns: Plan and Company. The third ("Follow") is only rendered when
   footer.socialLinks is non-empty (page-chrome.ts) — bump the count back to 3
   here at the same time if an owned social profile is ever linked again. */
.money-footer-columns {
  flex: 0 1 520px;
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: end;
  column-gap: var(--wf-space-64);
  row-gap: var(--wf-space-32);
}

.money-footer-column {
  display: grid;
  gap: var(--wf-space-12);
  align-content: start;
}

.money-footer-heading {
  margin: 0;
  /* D2 type floor. No exemption for the uppercase kicker treatment. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wf-color-text-muted);
}

.money-footer-link {
  color: var(--wm-money-copy);
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  /* D1 target floor. A grid item of .money-footer-column, so its display is
     blockified and min-height applies; centre the text within the taller
     box rather than letting it sit at the top. */
  display: flex;
  align-items: center;
  min-height: var(--wm-scenario-control-min, 24px);
}

.money-footer-link:focus-visible {
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 3px;
}

.money-footer-deferred {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wf-color-text-muted);
  cursor: not-allowed;
}

.money-footer-deferred-note {
  border: 1px solid var(--wf-color-border-default);
  border-radius: var(--wf-radius-pill);
  padding: 1px 7px;
  color: var(--wf-color-text-muted);
  font-size: var(--wm-scenario-text-min-size);
  line-height: 14px;
  text-transform: uppercase;
}

.money-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.money-social-link {
  width: 36px;
  height: 36px;
  border-radius: var(--wf-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--wm-money-ink);
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.money-fallback-page {
  padding-top: 80px;
}

.money-fallback-card.wf-surface {
  max-width: 640px;
  margin: 0 auto;
  border-radius: var(--wf-radius-xl);
  padding: 40px;
  display: grid;
  gap: var(--wf-space-16);
}

.money-fallback-title {
  margin: 0;
  font-size: 36px;
  line-height: 40px;
}

.money-fallback-body {
  margin: 0;
  color: var(--wf-color-text-secondary);
}

.money-not-found-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px 120px;
  min-height: 60vh;
}

.money-not-found-card {
  max-width: 640px;
  width: 100%;
  background: var(--wf-color-surface, #ffffff);
  border: 1px solid var(--wf-color-border-subtle, #e5e7f0);
  border-radius: var(--wf-radius-xl, 24px);
  padding: 48px 40px;
  display: grid;
  gap: 20px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.money-not-found-eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wm-money-accent, #2f6d4a);
}

.money-not-found-heading {
  margin: 0;
  font-size: 36px;
  line-height: 1.15;
  color: var(--wm-money-ink, #0f172a);
}

.money-not-found-body {
  margin: 0;
  color: var(--wf-color-text-secondary, #475569);
  line-height: 1.55;
}

.money-not-found-path {
  font-family: var(--wf-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.95em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--wm-money-surface-soft, #f1f3ff);
  color: var(--wm-money-ink, #0f172a);
  word-break: break-all;
}

.money-not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .money-not-found-page {
    padding: 56px 16px 80px;
  }

  .money-not-found-card {
    padding: 32px 20px;
  }

  .money-not-found-heading {
    font-size: 28px;
  }
}

.money-route-app {
  background: #f9f9ff;
}

.money-route-app .money-app-gate {
  display: block;
  min-height: 52vh;
}

.money-route-app .money-app-gate-content {
  width: 100%;
}

.money-route-app .money-app-gate-loading,
.money-route-app .money-app-gate-empty {
  width: min(720px, calc(100% - 40px));
  min-height: 56vh;
  margin: 0 auto;
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
}

.money-route-app .money-app-gate-loading p,
.money-app-empty-state p:first-child {
  margin: 0;
  color: var(--wm-money-accent);
  font-family: var(--wf-font-heading);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.money-route-app .money-app-gate-loading h1,
.money-app-empty-state h1 {
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: 36px;
  line-height: 42px;
  font-weight: 800;
}

.money-app-empty-state {
  width: min(560px, 100%);
  padding: 40px;
  display: grid;
  justify-items: center;
  gap: 16px;
  border: 1px solid var(--wm-money-border-muted);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--wm-money-shadow-hairline);
}

.money-app-empty-state p {
  margin: 0;
  color: var(--wm-money-copy);
}

.money-app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(249, 249, 255, 0.94);
  border-bottom: 1px solid rgba(188, 202, 192, 0.15);
  backdrop-filter: blur(18px);
}

.money-app-topbar-desktop {
  width: min(1280px, 100%);
  min-height: 72px;
  margin: 0 auto;
  padding: 16px 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}

.money-app-brand {
  width: fit-content;
  color: var(--wm-money-accent);
  font-family: var(--wf-font-heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.05em;
  text-decoration: none;
}

.money-app-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.money-app-nav-link,
.money-app-mobile-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wm-money-copy);
  font-family: var(--wf-font-heading);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 10px;
  /* D1 target floor. The mobile bottom-tab variant already clears this by a
     wide margin under its own media-query sizing; this only raises the
     desktop topbar link, which had nothing enforcing 24px before. */
  min-height: var(--wm-scenario-control-min, 24px);
}

.money-app-nav-link.is-active {
  padding-bottom: 6px;
  color: var(--wm-money-accent);
  font-weight: 700;
  border-bottom: 2px solid var(--wm-money-accent);
}

.money-app-nav-link.is-muted {
  /* 14px/500 on the #f9f9ff topbar: slate-400 #94a3b8 was 2.44:1. Slate-500
     clears 4.5:1 here (4.54:1) and keeps the link visibly quieter than the
     #3d4a42 copy links beside it. */
  color: #64748b;
}

.money-app-account-menu {
  position: relative;
  display: inline-flex;
}

.money-app-account-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--wf-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  /* D1 target floor: the button has no border/padding of its own, so its
     height otherwise comes straight from the nested nav-link's line-height. */
  min-height: var(--wm-scenario-control-min, 24px);
}

.money-app-account-trigger .money-app-nav-link {
  cursor: inherit;
}

.money-app-account-trigger .money-app-mobile-tab {
  cursor: inherit;
}

.money-app-account-trigger .money-app-bottom-link {
  cursor: inherit;
}

.money-app-account-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  min-width: 178px;
  padding: 8px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(188, 202, 192, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 46px rgba(21, 27, 42, 0.12);
  backdrop-filter: blur(12px);
}

.money-app-account-menu-item {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--wm-money-heading);
  font-family: var(--wf-font-heading);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.money-app-account-menu-item:hover {
  background: #f1f5f9;
}

.money-app-account-menu-item.is-danger {
  color: #b42318;
}

.money-app-avatar-link {
  justify-self: end;
  display: inline-flex;
  border-radius: var(--wf-radius-pill);
  text-decoration: none;
}

.money-app-avatar,
.money-app-avatar svg {
  display: inline-flex;
  width: 40px;
  height: 40px;
}

.money-app-avatar {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(188, 202, 192, 0.24);
  border-radius: var(--wf-radius-pill);
  background: #dce2f6;
  color: #064e3b;
}

.money-app-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 19px;
  padding: 2px 8px;
  border-radius: var(--wf-radius-pill);
  /* D2 type floor. No exemption for the uppercase badge treatment. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.money-app-badge.is-live {
  color: #005137;
  background: #68dba9;
}

.money-app-badge.is-soon {
  /* 9-10px bold uppercase on #e2e8f0: #64748b was 3.86:1; #475569 is 6.15:1. */
  color: #475569;
  background: #e2e8f0;
}

.money-app-badge.is-nav {
  padding-inline: 6px;
  font-family: var(--wf-font-heading);
  /* D2 type floor. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
}

.money-app-topbar-mobile,
.money-app-mobile-tabs,
.money-app-bottom-nav {
  display: none;
}

.money-app-dashboard {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 56px 56px 80px;
  display: grid;
  gap: 64px;
}

.money-app-hero {
  min-height: 454px;
  padding: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  overflow: hidden;
  border-radius: 32px;
  background: #f1f3ff;
}

.money-app-hero-copy {
  flex: 1 1 620px;
  max-width: 672px;
  display: grid;
  gap: 24px;
}

.money-app-hero h1 {
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: 60px;
  line-height: 60px;
  font-weight: 800;
  letter-spacing: 0;
}

.money-app-hero p {
  max-width: 512px;
  margin: 0;
  color: rgba(61, 74, 66, 0.8);
  font-size: 20px;
  line-height: 32px;
}

.money-app-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 16px;
}

.money-app-primary-link,
.money-app-scenario-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wf-radius-pill);
  background: #006948;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
}

.money-app-primary-link {
  min-height: 56px;
  padding: 0 32px;
  font-size: 16px;
  line-height: 24px;
}

.money-app-secondary-link,
.money-app-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #006948;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
}

.money-app-arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.money-app-hero-preview {
  flex: 0 1 384px;
  height: 326px;
  position: relative;
}

.money-app-preview-card {
  position: absolute;
  width: min(100%, 384px);
  min-height: 96px;
  padding: 25px;
  display: grid;
  align-content: center;
  border-radius: 48px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(188, 202, 192, 0.1);
  box-shadow: 0 4px 12px rgba(21, 27, 42, 0.08);
}

.money-app-preview-card.is-top {
  top: 0;
  right: 8px;
  transform: rotate(-1.8deg);
  opacity: 0.82;
}

.money-app-preview-card.is-main {
  top: 108px;
  left: -8px;
  z-index: 1;
  border-color: rgba(0, 105, 72, 0.2);
  box-shadow: 0 20px 25px -5px rgba(21, 27, 42, 0.12), 0 8px 10px -6px rgba(21, 27, 42, 0.12);
}

.money-app-preview-card.is-bottom {
  bottom: 0;
  right: 4px;
  transform: rotate(1.8deg);
  opacity: 0.82;
}

/* The 0.82 card opacity blends the copy toward the #f1f3ff hero: #006a61 lands
   at 4.41:1 on the flanking cards (the main card, at full opacity, is 6.43:1).
   A deeper teal is 6.02:1 through the same opacity. */
.money-app-preview-card.is-top p,
.money-app-preview-card.is-bottom p {
  color: #004d46;
}

.money-app-preview-card h2 {
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
}

.money-app-preview-card.is-main h2 {
  font-size: 20px;
}

.money-app-preview-card p {
  margin: 0;
  color: #006a61;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.money-app-preview-card.is-main p {
  font-size: 14px;
  line-height: 20px;
}

.money-app-alpha-card {
  width: min(1024px, 100%);
  margin: 0 auto;
  padding: 33px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border: 1px solid rgba(188, 202, 192, 0.1);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--wm-money-shadow-hairline);
  backdrop-filter: blur(12px);
}

.money-app-alpha-copy {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.money-app-alpha-icon {
  width: 52px;
  height: 48px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: var(--wf-radius-pill);
  background: #85f8c4;
  color: #006948;
}

.money-app-alpha-icon svg {
  width: 20px;
  height: 20px;
}

.money-app-section-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.money-app-alpha-card h2,
.money-app-section h2,
.money-app-compare-card h2,
.money-app-coming-soon-panel h1 {
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
}

.money-app-alpha-card h2 {
  font-size: 20px;
  line-height: 28px;
}

.money-app-alpha-card p,
.money-app-section-head p,
.money-app-compare-card p,
.money-app-coming-soon-panel p {
  margin: 0;
  color: var(--wm-money-copy);
  font-size: 16px;
  line-height: 24px;
}

.money-app-section {
  display: grid;
  gap: 32px;
}

.money-app-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.money-app-section-head > div {
  display: grid;
  gap: 4px;
}

.money-app-scenario-section-actions {
  display: grid;
  justify-items: end;
  gap: 12px;
}

.money-app-scenario-carousel-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.money-app-scenario-carousel-button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(0, 105, 72, 0.16);
  border-radius: var(--wf-radius-pill);
  background: rgba(255, 255, 255, 0.86);
  color: #006948;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wm-money-shadow-hairline);
  cursor: pointer;
}

.money-app-scenario-carousel-button svg {
  width: 18px;
  height: 18px;
}

.money-app-scenario-carousel-button:focus-visible {
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 3px;
}

.money-app-scenario-carousel-button:disabled {
  opacity: 0.42;
  cursor: default;
  box-shadow: none;
}

.money-app-scenario-carousel-progress {
  min-width: 48px;
  text-align: center;
  /* 12px mono on #f9f9ff: the 0.7-alpha copy colour was 3.94:1; the shell's
     muted token is 6.45:1. */
  color: var(--wm-money-muted);
  font-family: var(--wf-font-mono);
  font-size: 12px;
  line-height: 18px;
}

.money-app-section-head.is-muted h2 {
  color: #64748b;
}

.money-app-section-head.is-muted p {
  color: rgba(61, 74, 66, 0.6);
}

.money-app-coming-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.money-app-scenario-grid {
  display: flex;
  gap: 24px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  overscroll-behavior-inline: contain;
  padding: 2px 2px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 105, 72, 0.28) transparent;
}

.money-app-scenario-grid:focus-visible {
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 4px;
  border-radius: 32px;
}

.money-app-scenario-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  min-height: 300px;
  padding: 26px;
  display: grid;
  grid-template-rows: 48px minmax(28px, auto) minmax(66px, auto) minmax(44px, auto) auto 44px;
  align-content: start;
  gap: 16px;
  scroll-snap-align: start;
  border: 2px solid rgba(0, 105, 72, 0.2);
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.money-app-scenario-icon {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 32px;
  color: #006948;
}

.money-app-scenario-icon svg {
  width: 22px;
  height: 22px;
}

.money-app-scenario-card.is-income-drop .money-app-scenario-icon {
  color: #ba1a1a;
  background: rgba(255, 218, 214, 0.24);
}

.money-app-scenario-card.is-surprise-bill .money-app-scenario-icon {
  color: #006a61;
  background: rgba(137, 245, 231, 0.22);
}

.money-app-scenario-card.is-debt-vs-savings .money-app-scenario-icon {
  color: #064e3b;
  background: rgba(133, 248, 196, 0.24);
}

.money-app-scenario-card.is-muted {
  opacity: 0.72;
  border-color: rgba(113, 105, 132, 0.18);
}

.money-app-scenario-card.is-muted .money-app-scenario-icon {
  color: #716984;
  background: rgba(113, 105, 132, 0.11);
}

.money-app-scenario-card h3,
.money-app-coming-card h3 {
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
}

.money-app-scenario-card p,
.money-app-coming-card p {
  margin: 0;
  color: var(--wm-money-copy);
  font-size: 14px;
  line-height: 22px;
}

.money-app-scenario-card p {
  min-height: 0;
}

.money-app-scenario-question {
  color: var(--wm-money-ink);
  font-weight: 700;
}

.money-app-scenario-description {
  min-height: 44px;
}

.money-app-scenario-tags {
  min-height: 19px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.money-app-scenario-tag {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 2px 8px;
  border-radius: 16px;
  background: #f1f5f9;
  color: #475569;
  /* D2 type floor. No exemption for the uppercase tag treatment. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.money-app-scenario-cta {
  width: 100%;
  align-self: end;
  margin-top: auto;
  border: 0;
}

.money-app-scenario-cta.is-disabled {
  background: #e6e4ee;
  color: #716984;
  cursor: default;
}

.money-app-coming-card {
  min-height: 196px;
  padding: 25px;
  display: grid;
  grid-template-rows: minmax(28px, auto) minmax(48px, auto) 40px;
  align-content: start;
  gap: 14px;
  opacity: 0.62;
  border: 1px solid rgba(188, 202, 192, 0.1);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.5);
}

.money-app-coming-card h3,
.money-app-compare-card h2 {
  color: #475569;
}

.money-app-coming-button,
.money-app-compare-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wf-radius-pill);
  background: #f1f5f9;
  /* 12-14px bold on #f1f5f9: #94a3b8 was 2.34:1 and slate-500 only 4.34:1;
     slate-600 is 6.92:1. */
  color: #475569;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.money-app-coming-button {
  align-self: end;
  margin-top: auto;
}

.money-app-compare-card {
  min-height: 168px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  /* No opacity: fading the whole card took its heading to 3.46:1, its
     paragraph to 3.89:1 and the SOON badge to 2.36:1. The washed
     background and slate heading carry the "not yet" treatment on their own. */
  border-radius: 32px;
  background: rgba(241, 245, 249, 0.52);
}

.money-app-compare-card > div {
  display: grid;
  gap: 8px;
}

.money-app-compare-button {
  min-width: 232px;
  min-height: 60px;
  gap: 12px;
  padding: 0 40px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.money-app-coming-soon-page {
  min-height: 62vh;
  align-items: center;
}

.money-app-coming-soon-panel {
  width: min(720px, 100%);
  padding: 48px;
  display: grid;
  gap: 18px;
  border: 1px solid var(--wm-money-border-muted);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--wm-money-shadow-hairline);
}

.money-app-coming-soon-kicker {
  color: var(--wm-money-accent);
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.money-app-brand:focus-visible,
.money-app-nav-link:focus-visible,
.money-app-avatar-link:focus-visible,
.money-app-account-trigger:focus-visible,
.money-app-account-menu-item:focus-visible,
.money-app-mobile-brand:focus-visible,
.money-app-mobile-tab:focus-visible,
.money-app-bottom-link:focus-visible,
.money-app-primary-link:focus-visible,
.money-app-secondary-link:focus-visible,
.money-app-inline-link:focus-visible,
.money-app-scenario-cta:focus-visible {
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 3px;
}

.scenario-library-page {
  display: grid;
  gap: 96px;
  padding: 0 56px 42px;
  background: var(--wm-money-canvas);
}

.scenario-library-hero {
  width: min(1536px, 100%);
  margin: 0 auto;
  padding-top: 112px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}

.scenario-library-hero-copy {
  display: grid;
  gap: 24px;
  align-content: center;
}

.scenario-library-hero h1 {
  max-width: 9.2em;
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 60px;
  line-height: 75px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--wm-money-ink);
}

.scenario-library-hero-body,
.scenario-library-hero-emphasis,
.scenario-library-hero-subtitle {
  max-width: 576px;
  margin: 0;
  color: var(--wm-money-copy);
}

.scenario-library-hero-body {
  font-size: 18px;
  line-height: 29px;
}

.scenario-library-hero-subtitle {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: var(--wm-money-accent);
}

.scenario-library-hero-emphasis {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  color: var(--wm-money-ink);
}

.scenario-library-available {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--wm-money-copy);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.scenario-library-available strong {
  color: var(--wm-money-accent);
  font-family: var(--wf-font-mono);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.scenario-library-hero-actions,
.scenario-library-bottom-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.scenario-library-button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wf-radius-pill);
  padding: 0 32px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  text-decoration: none;
}

/* One primary / one secondary pair, shared with wf-button-primary and
   wf-button-secondary. These used #065F46-as-background and a lavender
   #DCE2F6 that belong to no other part of the green brand. */
.scenario-library-button.is-primary {
  background: var(--wf-color-action-primary-bg);
  color: var(--wf-color-action-primary-text);
  box-shadow: var(--wm-money-accent-shadow-soft);
}

.scenario-library-button.is-secondary {
  background: var(--wf-color-action-secondary-bg);
  border: 1px solid var(--wf-color-action-secondary-border);
  color: var(--wf-color-action-secondary-text);
}

.scenario-library-preview {
  position: relative;
  isolation: isolate;
}

.scenario-library-preview::before {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -1;
  border-radius: 48px;
  background: rgba(0, 105, 72, 0.05);
  transform: rotate(-2deg);
}

.scenario-library-preview-card {
  padding: 33px;
  display: grid;
  gap: 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 48px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
}

.scenario-library-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.scenario-library-pill {
  width: fit-content;
  margin: 0 0 8px;
  padding: 4px 12px;
  border-radius: var(--wf-radius-pill);
  background: var(--wm-money-accent-wash);
  color: #005049;
  font-family: var(--wf-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  text-transform: uppercase;
}

.scenario-library-preview h2 {
  max-width: 16em;
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
}

.scenario-library-preview-icon {
  width: 33px;
  height: 24px;
  color: var(--wm-money-accent-chart);
}

.scenario-library-preview-icon svg {
  width: 100%;
  height: 100%;
}

.scenario-library-preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.scenario-library-preview-metrics div {
  min-width: 0;
  padding: 16px;
  display: grid;
  gap: 4px;
  border-radius: 32px;
  background: var(--wm-money-surface-soft);
}

.scenario-library-preview-metrics span {
  color: var(--wm-money-copy);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.scenario-library-preview-metrics strong {
  color: var(--wm-money-ink);
  font-family: var(--wf-font-mono);
  font-size: 20px;
  line-height: 28px;
}

.scenario-library-preview-note {
  margin: 0;
  padding: 20px 24px;
  border-left: 4px solid var(--wm-money-accent);
  border-radius: 32px;
  background: rgba(0, 133, 93, 0.1);
  color: var(--wm-money-copy);
  font-size: 14px;
  line-height: 23px;
  font-style: italic;
}

.scenario-library-preview-link {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--wm-money-accent);
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
  text-decoration: none;
  /* D1 target floor (covers the mobile font/line-height override below too,
     since that rule only touches text metrics). */
  min-height: var(--wm-scenario-control-min, 24px);
}

.scenario-library-arrow {
  width: 16px;
  height: 16px;
}

.scenario-library-chooser,
.scenario-library-live,
.scenario-library-soon,
.scenario-library-bottom-cta {
  width: min(1536px, 100%);
  margin: 0 auto;
}

.scenario-library-chooser {
  display: grid;
  gap: 8px;
  scroll-margin-top: 112px;
}

.scenario-library-chooser h2,
.scenario-library-section-head h2,
.scenario-library-process h2,
.scenario-library-bottom-cta h2 {
  margin: 0;
  font-family: var(--wf-font-heading);
  color: var(--wm-money-ink);
  font-weight: 800;
}

.scenario-library-chooser h2 {
  font-size: 24px;
  line-height: 32px;
}

.scenario-library-chooser p,
.scenario-library-section-head p,
.scenario-library-process-head p,
.scenario-library-bottom-cta > div:first-child > p {
  margin: 0;
  color: var(--wm-money-copy);
}

.scenario-library-chip-row {
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.scenario-library-chip {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wf-radius-pill);
  padding: 0 24px;
  background: var(--wf-color-action-secondary-bg);
  border: 1px solid var(--wf-color-action-secondary-border);
  color: var(--wf-color-action-secondary-text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.scenario-library-chip.is-active {
  background: var(--wf-color-action-primary-bg);
  border-color: var(--wf-color-action-primary-border);
  color: var(--wf-color-action-primary-text);
  box-shadow: var(--wm-money-shadow-hairline);
}

.scenario-library-chip.is-disabled {
  background: var(--wm-money-surface-soft);
  color: var(--wm-money-copy-disabled);
  cursor: default;
}

.scenario-library-section-head {
  display: grid;
  gap: 16px;
  margin-bottom: 48px;
}

.scenario-library-section-head h2 {
  font-size: 36px;
  line-height: 40px;
}

.scenario-library-section-head p {
  max-width: 1080px;
  font-size: 18px;
  line-height: 28px;
}

.scenario-library-section-head strong {
  color: var(--wm-money-accent);
}

.scenario-library-live-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.scenario-library-card {
  min-height: 678px;
  padding: 33px;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr auto auto;
  gap: 18px;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 32px;
  background: #fff;
  box-shadow: var(--wm-money-shadow-hairline);
  scroll-margin-top: 112px;
}

.scenario-library-card h3 {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  color: var(--wm-money-ink);
}

.scenario-library-card-eyebrow,
.scenario-library-answer-block p {
  margin: 0;
  /* D2 type floor. No exemption for the uppercase kicker treatment. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scenario-library-card-eyebrow {
  color: var(--wm-money-accent);
}

.scenario-library-card-icon {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--wf-radius-pill);
  background: rgba(0, 133, 93, 0.1);
  color: var(--wm-money-accent);
}

.scenario-library-card-icon svg {
  width: 22px;
  height: 22px;
}

/* The library presents five sibling cards as one matched set, so their chips
   share one treatment. Per-scenario accents still apply inside each scenario
   page; they just do not colour-code the shared card grid. */
.scenario-library-card.is-bill .scenario-library-card-icon,
.scenario-library-card.is-debt .scenario-library-card-icon {
  background: rgba(0, 133, 93, 0.1);
  color: var(--wm-money-accent);
}

.scenario-library-card-question {
  margin: 0;
  color: var(--wm-money-ink);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

.scenario-library-card-summary {
  margin: 0;
  color: var(--wm-money-copy);
  font-size: 16px;
  line-height: 26px;
}

.scenario-library-answer-block {
  display: grid;
  align-content: start;
  gap: 16px;
}

.scenario-library-answer-block p {
  color: var(--wm-money-copy);
}

.scenario-library-answer-block ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.scenario-library-answer-block li {
  position: relative;
  padding-left: 14px;
  color: var(--wm-money-copy);
  font-size: 14px;
  line-height: 20px;
}

.scenario-library-answer-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

/* Surface, accent bar, label and quote all come from the shared
   `.money-scenario-example` rules above. */

/* Provenance for the quoted result: the inputs it was run on. */
.scenario-library-example-inputs {
  color: var(--wm-money-muted);
  font-size: 12px;
  line-height: 18px;
}

.scenario-library-card-cta {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: var(--wf-radius-pill);
  color: var(--wm-money-accent);
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
  text-decoration: none;
}

.scenario-library-card.is-debt .scenario-library-card-cta {
  color: var(--wm-money-accent);
}

.scenario-library-soon {
  display: grid;
}

.scenario-library-soon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.scenario-library-soon-card {
  padding: 25px;
  display: grid;
  gap: 16px;
  border: 1px solid rgba(188, 202, 192, 0.1);
  border-radius: 32px;
  background: var(--wm-money-surface-soft);
}

.scenario-library-soon-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.scenario-library-soon-head h3 {
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
}

.scenario-library-soon-head span {
  flex: 0 0 auto;
  border-radius: 16px;
  padding: 2px 8px;
  background: var(--wm-money-chip-strong);
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-min-size);
  line-height: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scenario-library-soon-summary,
.scenario-library-soon-takeaway {
  margin: 0;
  color: var(--wm-money-copy);
}

.scenario-library-soon-summary {
  font-size: 14px;
  line-height: 22px;
}

.scenario-library-soon-takeaway {
  color: var(--wm-money-accent);
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
}

.scenario-library-soon-button {
  min-height: 44px;
  border: 0;
  border-radius: var(--wf-radius-pill);
  background: var(--wm-money-chip-strong);
  color: var(--wm-money-copy-disabled);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
  cursor: not-allowed;
}

.scenario-library-process {
  margin-inline: calc(50% - 50vw);
  padding: 128px max(56px, calc(50vw - 768px));
  display: grid;
  gap: 80px;
  background: var(--wm-money-surface-soft);
}

.scenario-library-process-head {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.scenario-library-process h2 {
  font-size: 36px;
  line-height: 40px;
}

.scenario-library-process-head p {
  font-size: 18px;
  line-height: 28px;
}

/* Four steps, matching the home page and /about. The connector runs between the
   centres of the first and last markers, which sit an eighth of the way in. */
.scenario-library-step-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.scenario-library-step-grid::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 12.5%;
  right: 12.5%;
  border-top: 2px dashed var(--wm-money-line);
}

.scenario-library-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.scenario-library-step span {
  width: 64px;
  height: 64px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--wf-radius-pill);
  background: var(--wm-money-accent);
  color: #fff;
  font-family: var(--wf-font-heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.scenario-library-step h3 {
  margin: 16px 0 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
}

.scenario-library-step p {
  max-width: 320px;
  margin: 0;
  color: var(--wm-money-copy);
  font-size: 16px;
  line-height: 24px;
}

.scenario-library-bottom-cta {
  padding: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  overflow: hidden;
  border-radius: 48px;
  background: #2a3040;
  color: #edf0ff;
}

.scenario-library-bottom-cta > div:first-child {
  display: grid;
  gap: 24px;
}

.scenario-library-bottom-cta h2 {
  max-width: 672px;
  color: #edf0ff;
  font-size: 36px;
  line-height: 45px;
}

/*
  Scoped to the CTA description on purpose. A bare `.scenario-library-bottom-cta p`
  is one class + one type, which outranks every single-class paragraph rule in the
  preview card below and silently repaints them #94a3b8/20px (the question card's
  authored #edf0ff never rendered, and the mobile font shrink pushed it under the
  large-text contrast threshold). Keep the media-query copy of this selector in step.
*/
.scenario-library-bottom-cta > div:first-child > p {
  max-width: 672px;
  color: #94a3b8;
  font-size: 20px;
  line-height: 32px;
}

/* Replaces the empty loading-skeleton that used to sit in this panel. */
.scenario-library-bottom-preview {
  width: 320px;
  padding: 28px;
  display: grid;
  gap: 12px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(2px);
}

.scenario-library-bottom-preview .scenario-library-pill {
  margin: 0;
  background: rgba(133, 248, 196, 0.16);
  color: #85f8c4;
}

.scenario-library-bottom-preview-question {
  margin: 0;
  color: #edf0ff;
  font-family: var(--wf-font-heading);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}

.scenario-library-bottom-preview-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.scenario-library-bottom-preview-metrics div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
}

.scenario-library-bottom-preview-metrics span {
  /* 10px labels on the rgba-white chip over #373c4b (~#434856): #94a3b8 is
     only 3.6:1 there; #cbd5e1 clears 6:1. */
  color: #cbd5e1;
  /* D2 type floor. */
  font-size: var(--wm-scenario-text-xs-size, 12px);
  line-height: var(--wm-scenario-text-xs-line, 17px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.scenario-library-bottom-preview-metrics strong {
  color: #edf0ff;
  font-family: var(--wf-font-mono);
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
}

.scenario-library-bottom-preview-note {
  margin: 0;
  /* 13px body on the #373c4b panel: #94a3b8 is 4.3:1, under the 4.5:1 bar;
     #cbd5e1 clears 7:1. */
  color: #cbd5e1;
  font-size: 13px;
  line-height: 20px;
}

.scenario-library-bottom-cta .scenario-library-button.is-secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  color: #edf0ff;
}

.scenario-library-button:focus-visible,
.scenario-library-preview-link:focus-visible,
.scenario-library-chip:focus-visible,
.scenario-library-card-cta:focus-visible {
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 3px;
}

.scenario-library-bottom-cta .scenario-library-button:focus-visible {
  outline-color: var(--wf-color-focus-ring-contrast);
}

@media (max-width: 1100px) {
  .money-page {
    padding-inline: 24px;
  }

  .money-top-nav-inner,
  .money-footer-inner {
    padding-inline: 24px;
  }

  /* Stay on one row: tighten the brand/nav cluster instead of wrapping the
     auth actions onto a second, left-aligned line. */
  .money-top-nav-inner {
    flex-wrap: nowrap;
    gap: 16px;
  }

  .money-top-nav-main {
    min-width: 0;
    gap: 24px;
  }

  .money-nav-links {
    gap: 18px;
    overflow-x: auto;
    padding-block: 4px;
    scrollbar-width: none;
  }

  .money-nav-links::-webkit-scrollbar {
    display: none;
  }

  .money-nav-link {
    white-space: nowrap;
    font-size: 14px;
    /* D1 target floor: see the base rule's comment. */
    line-height: var(--wm-scenario-text-2xl-line, 24px);
  }

  .money-nav-actions {
    gap: 8px;
  }

  .money-nav-primary {
    min-width: auto;
    padding-inline: 18px;
  }

  .money-hero {
    grid-template-columns: 1fr;
    gap: var(--wf-space-32);
  }

  .money-hero-copy {
    max-width: none;
  }

  .money-hero-preview {
    max-width: 680px;
  }

  .money-scenarios {
    padding: var(--wf-space-32);
  }

  .money-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .money-scenario-card.wf-surface {
    flex-basis: calc((100% - var(--wf-space-24)) / 2);
  }

  .money-process-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  .money-process-line {
    left: 20%;
    right: 20%;
  }

  .money-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .money-footer-columns {
    flex: 1;
    margin-left: 0;
    width: 100%;
    /* Matches the two columns the footer actually renders — see the base rule. */
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    justify-content: stretch;
    gap: 32px;
  }

  .scenario-library-page {
    padding-inline: 24px;
  }

  .scenario-library-hero,
  .scenario-library-live-grid {
    grid-template-columns: 1fr;
  }

  .scenario-library-hero {
    padding-top: 72px;
  }

  .scenario-library-preview {
    max-width: 680px;
  }
}

/* Last one-row tier. Below 721px the header switches to the two-row grid
   further down; between 721 and 900 the brand shrinks so brand + nav + both
   auth actions still share a single 69px row. */
/* The last tier where the brand, the nav links and the auth actions still share
   a single row. Below 720px the links get a row of their own precisely because
   sharing one stopped fitting; between 721 and 900 they still share, so this is
   where the row has to be bought enough slack to hold every visitor's font.

   That was not a hypothetical. Before DM Sans was self-hosted, all of this
   rendered in whatever `system-ui` resolved to, and the widths differed by more
   than the row had spare: measured at 768px, the three labels came out 14px
   wider on a Linux fontconfig default than on the macOS SF Pro these numbers
   were originally tuned against, which put "Pricing" inside the scroller and
   clipped it. Every non-Mac visitor at this width saw that; only CI running
   exclusively on macOS kept it invisible.

   The font is loaded now, so the platform spread is gone. The slack is not:
   `font-display: swap` means the first paint still uses a system fallback, and
   a visitor with larger text settings still widens the row.

   So the gaps here are deliberately tighter than the visual rhythm alone would
   ask for, and the wordmark steps down once more. Together they free about 32px
   against a 14px shortfall — margin for a font wider still, rather than a fix
   sized exactly to the one that happened to catch it. Keep that margin if you
   retune these: the assertion in e2e/site-header.spec.ts allows zero overflow,
   and the failure mode is a silently clipped link rather than a wrapped row. */
@media (max-width: 900px) {
  .money-brand-logo {
    font-size: 22px;
  }

  .money-brand-mark {
    width: 24px;
    height: 24px;
  }

  .money-top-nav-main {
    gap: 10px;
  }

  .money-nav-links {
    gap: 8px;
  }
}

@media (max-width: 720px) {
  .money-page {
    padding: 0 20px 72px;
  }

  .money-top-nav {
    backdrop-filter: none;
  }

  .money-top-nav-inner,
  .money-footer-inner {
    padding-inline: 20px;
  }

  /* Phones give the nav links a row of their own. Hanging them off the left of
     a row shared with the auth actions left them a ~150px window for 222px of
     labels, which clipped "Scenarios" mid-word and cut "Pricing" off the end.

     Which row the actions land on is left to flex wrapping rather than a pixel
     breakpoint. The wordmark renders in whatever `system-ui` resolves to — the
     named DM Sans is declared but never loaded — so the width at which it stops
     sharing a row with the actions moves with the visitor's font. Nothing here
     may shrink: the brand and the actions both refuse to compress, so when they
     stop fitting together the actions wrap to a row of their own instead of
     squeezing their labels to two lines. */
  .money-top-nav-inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-block: 12px;
    column-gap: 12px;
    row-gap: 6px;
  }

  .money-top-nav-main {
    display: contents;
  }

  .money-brand-link {
    flex: 0 0 auto;
  }

  /* `flex: 0 0 auto` is what turns "too narrow" into a wrapped row instead of a
     squeezed one: the cluster keeps its max-content width, so its labels never
     come under the pressure that would break "Create account" across two lines.
     The auto start margin right-aligns it whether it is sharing the brand's row
     or holding one alone. */
  .money-nav-actions {
    flex: 0 0 auto;
    margin-inline-start: auto;
    gap: 8px;
  }

  /* Ordered after the actions despite coming before them in the DOM, and given
     a full-width basis so the links always break onto their own row. */
  .money-nav-links {
    order: 1;
    flex: 1 0 100%;
    display: flex;
    gap: 18px;
    min-width: 0;
    /* The links fit their row outright at every supported width, so the
       scroller and its trailing fade are a safety net for outsized text
       settings rather than the everyday experience. The inline padding keeps
       focus rings clear of the scroller's edges and the matching negative
       margin keeps the first link flush with the wordmark above it. */
    overflow-x: auto;
    padding: 4px 6px;
    margin-inline: -6px;
    scrollbar-width: none;
    scroll-padding-inline-end: 24px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  }

  .money-nav-links::-webkit-scrollbar {
    display: none;
  }

  .money-nav-link {
    white-space: nowrap;
    font-size: 14px;
    /* D1 target floor: see the base rule's comment. */
    line-height: var(--wm-scenario-text-2xl-line, 24px);
  }

  .money-nav-secondary.wf-button {
    /* D1 target floor: was `auto`, which discarded .wf-size-md's built-in
       36px floor along with the padding this rule also strips. */
    min-height: var(--wm-scenario-control-min, 24px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wf-color-text-secondary);
    font-family: var(--wf-font-heading);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .money-nav-primary {
    min-width: auto;
    min-height: 38px;
    padding-inline: 18px;
    font-size: 14px;
    line-height: 20px;
  }

  .money-brand-logo {
    font-size: 24px;
  }

  .money-brand-mark {
    width: 26px;
    height: 26px;
  }

  .money-hero {
    padding: 32px 0 48px;
    gap: 28px;
  }

  .money-hero-brand {
    padding: 12px 16px;
  }

  .money-hero-logo {
    font-size: 38px;
  }

  .money-hero-heading {
    font-size: 44px;
    line-height: 0.98;
  }

  .money-hero-kicker {
    font-size: 1rem;
  }

  .money-hero-body {
    font-size: 18px;
    line-height: 28px;
  }

  .money-hero-actions {
    width: 100%;
    display: grid;
  }

  .money-hero-primary,
  .money-hero-secondary,
  .money-waitlist-cta {
    width: 100%;
    justify-content: center;
  }

  .money-hero-preview-card {
    padding: var(--wf-space-24);
  }

  .money-hero-preview-metrics {
    grid-template-columns: 1fr;
  }

  .money-hero-preview-bar-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .money-hero-preview-bar-label {
    min-width: 0;
  }

  .money-section,
  .money-alpha-teaser,
  .money-waitlist-section {
    padding-top: 48px;
  }

  .money-scenarios {
    padding: var(--wf-space-24);
    border-radius: var(--wm-card-radius);
  }

  .money-section-head {
    margin-bottom: 24px;
  }

  .money-scenarios .money-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .money-section-title {
    font-size: 28px;
    line-height: 32px;
  }

  .money-benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--wf-space-16);
  }

  .money-scenario-carousel-controls {
    width: 100%;
    justify-content: space-between;
  }

  .money-scenario-grid {
    gap: var(--wf-space-16);
  }

  .money-scenario-card.wf-surface {
    flex-basis: 100%;
    padding: var(--wf-space-24);
  }

  .money-scenario-question,
  .money-scenario-summary {
    min-height: 0;
  }

  .money-process-head {
    margin-bottom: 28px;
  }

  .money-process-track {
    grid-template-columns: 1fr;
    gap: var(--wf-space-16);
  }

  .money-process-line {
    display: none;
  }

  .money-process-step {
    grid-template-columns: 56px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    text-align: left;
    gap: var(--wf-space-16);
  }

  .money-process-step-index {
    width: 56px;
    height: 56px;
    font-size: 20px;
    line-height: 28px;
  }

  .money-benefit-visual {
    min-height: 192px;
    padding: 20px;
  }

  .money-alpha-teaser-card {
    padding: var(--wf-space-24);
  }

  .money-alpha-teaser-title {
    font-size: 24px;
    line-height: 30px;
  }

  .money-waitlist {
    padding: 32px 24px;
  }

  .money-waitlist-title {
    font-size: 30px;
  }

  .money-waitlist-form {
    display: grid;
  }

  .money-footer {
    margin-top: 40px;
  }

  .money-footer-inner {
    gap: 28px;
  }

  .money-footer-columns {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .scenario-library-page {
    gap: 64px;
    padding: 0 24px 80px;
  }

  .scenario-library-hero {
    padding-top: 40px;
    gap: 32px;
  }

  .scenario-library-hero h1 {
    font-size: 36px;
    line-height: 45px;
    letter-spacing: -0.025em;
  }

  .scenario-library-hero-body {
    font-size: 16px;
    line-height: 26px;
  }

  .scenario-library-hero-subtitle {
    font-size: 18px;
    line-height: 25px;
  }

  .scenario-library-hero-emphasis {
    font-size: 18px;
    line-height: 25px;
  }

  .scenario-library-available {
    display: grid;
    gap: 8px;
    /* D2 type floor. */
    font-size: var(--wm-scenario-text-xs-size, 12px);
    line-height: var(--wm-scenario-text-xs-line, 17px);
  }

  .scenario-library-available strong {
    /* D2 type floor. */
    font-size: var(--wm-scenario-text-xs-size, 12px);
    line-height: var(--wm-scenario-text-xs-line, 17px);
  }

  .scenario-library-hero-actions {
    display: grid;
  }

  .scenario-library-button {
    width: 100%;
    min-height: 56px;
    padding-inline: 20px;
    font-size: 16px;
    line-height: 24px;
  }

  .scenario-library-preview::before {
    inset: -15px;
  }

  .scenario-library-preview-card {
    padding: 25px;
    border-radius: 48px;
  }

  .scenario-library-pill {
    padding: 2px 8px;
    /* D2 type floor. */
    font-size: var(--wm-scenario-text-xs-size, 12px);
    line-height: var(--wm-scenario-text-xs-line, 17px);
  }

  .scenario-library-preview h2 {
    font-size: 20px;
    line-height: 25px;
  }

  .scenario-library-preview-icon {
    width: 28px;
    height: 20px;
  }

  .scenario-library-preview-metrics {
    gap: 12px;
  }

  .scenario-library-preview-metrics div {
    padding: 12px;
  }

  .scenario-library-preview-metrics span {
    /* D2 type floor. */
    font-size: var(--wm-scenario-text-xs-size, 12px);
    line-height: var(--wm-scenario-text-xs-line, 17px);
  }

  .scenario-library-preview-metrics strong {
    font-size: 14px;
    line-height: 20px;
  }

  .scenario-library-preview-note {
    padding: 16px 20px;
    font-size: 12px;
    line-height: 20px;
  }

  .scenario-library-preview-link {
    font-size: 12px;
    line-height: 16px;
  }

  .scenario-library-chooser h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .scenario-library-chooser p {
    font-size: 14px;
    line-height: 20px;
  }

  .scenario-library-chip-row {
    margin-inline: -24px;
    padding: 0 24px 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .scenario-library-chip-row::-webkit-scrollbar {
    display: none;
  }

  .scenario-library-chip {
    min-height: 40px;
    padding-inline: 20px;
    font-size: 14px;
    line-height: 20px;
  }

  .scenario-library-section-head {
    gap: 11px;
    margin-bottom: 40px;
  }

  .scenario-library-section-head h2,
  .scenario-library-process h2 {
    font-size: 30px;
    line-height: 36px;
  }

  .scenario-library-section-head p {
    font-size: 14px;
    line-height: 23px;
  }

  .scenario-library-live-grid,
  .scenario-library-soon-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .scenario-library-card {
    min-height: 0;
    padding: 25px;
    gap: 20px;
  }

  .scenario-library-card h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .scenario-library-card-question {
    font-size: 18px;
    line-height: 24px;
  }

  .scenario-library-card-summary {
    font-size: 14px;
    line-height: 23px;
  }

  .scenario-library-answer-block {
    gap: 16px;
  }

  .scenario-library-answer-block li {
    font-size: 12px;
    line-height: 16px;
  }

  .money-scenario-example-quote,
  .scenario-library-example strong {
    font-size: 14px;
    line-height: 20px;
  }

  .scenario-library-card-cta {
    min-height: 60px;
  }

  .scenario-library-soon-card {
    padding: 25px;
  }

  .scenario-library-process {
    margin-inline: -24px;
    padding: 64px 24px;
    gap: 48px;
  }

  .scenario-library-process-head p {
    font-size: 14px;
    line-height: 20px;
  }

  .scenario-library-step-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .scenario-library-step-grid::before {
    display: none;
  }

  .scenario-library-step {
    gap: 16px;
  }

  .scenario-library-step span {
    width: 48px;
    height: 48px;
    font-size: 20px;
    line-height: 28px;
  }

  .scenario-library-step h3 {
    margin: 0;
    font-size: 18px;
    line-height: 28px;
  }

  .scenario-library-step p {
    font-size: 14px;
    line-height: 20px;
  }

  .scenario-library-bottom-cta {
    padding: 32px;
    display: grid;
    gap: 24px;
    border-radius: 48px;
    text-align: center;
  }

  .scenario-library-bottom-cta h2 {
    font-size: 24px;
    line-height: 30px;
  }

  /* Same scoping as the base rule: only the CTA description shrinks, not the
     preview card's own paragraphs. */
  .scenario-library-bottom-cta > div:first-child > p {
    font-size: 14px;
    line-height: 23px;
  }

  .scenario-library-bottom-actions {
    display: grid;
    gap: 16px;
  }

  .scenario-library-bottom-preview {
    width: 100%;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .money-footer-columns {
    grid-template-columns: 1fr;
  }
}

/* Smallest phones: shrink the wordmark and the auth actions rather than
   dropping one of them, so "Create account" survives all the way down to
   320px. Between them they leave header row 1 enough slack that the brand and
   both actions still share it at 360px and up. */
@media (max-width: 480px) {
  .money-brand-logo {
    font-size: 20px;
  }

  .money-nav-actions {
    gap: 6px;
  }

  .money-nav-secondary.wf-button {
    font-size: 13px;
  }

  .money-nav-primary {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 13px;
  }
}

@media (max-width: 1100px) {
  .money-app-topbar-desktop {
    padding-inline: 24px;
    gap: 20px;
  }

  .money-app-nav-links {
    gap: 18px;
  }

  .money-app-dashboard {
    padding-inline: 24px;
  }

  .money-app-hero {
    padding: 48px;
  }

  .money-app-hero h1 {
    font-size: 48px;
    line-height: 52px;
  }

  .money-app-coming-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .money-app-scenario-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 820px) {
  .money-route-app {
    padding-bottom: calc(94px + env(safe-area-inset-bottom));
  }

  .money-route-scenario:has([data-auth-app-chrome]:not([hidden])),
  .money-route-scenario-library:has([data-auth-app-chrome]:not([hidden])) {
    padding-bottom: calc(94px + env(safe-area-inset-bottom));
  }

  .money-app-topbar {
    backdrop-filter: none;
  }

  .money-app-topbar-desktop {
    display: none;
  }

  .money-app-topbar-mobile {
    min-height: 72px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #f9f9ff;
  }

  .money-app-mobile-brand {
    display: inline-flex;
    align-items: center;
    color: var(--wm-money-accent);
    font-family: var(--wf-font-heading);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.05em;
    text-decoration: none;
  }

  .money-app-avatar {
    width: 40px;
    height: 40px;
    border-width: 2px;
    border-color: #68dba9;
    background: #dce2f6;
  }

  .money-app-avatar svg {
    width: 36px;
    height: 36px;
  }

  /*
   * The bottom tab bar (.money-app-bottom-nav) handles all navigation on mobile.
   * The in-topbar horizontal tab row is redundant here and overflowed/clipped at
   * narrow widths (e.g. 375px), so it stays hidden on small breakpoints.
   */
  .money-app-mobile-tabs {
    display: none;
  }

  .money-app-dashboard {
    padding: 32px 16px 48px;
    gap: 32px;
  }

  .money-app-hero {
    min-height: auto;
    padding: 32px 24px;
    display: grid;
    gap: 28px;
    border-radius: 24px;
  }

  .money-app-hero-copy {
    max-width: none;
  }

  .money-app-hero h1 {
    font-size: 38px;
    line-height: 42px;
  }

  .money-app-hero p {
    max-width: none;
    font-size: 16px;
    line-height: 26px;
  }

  .money-app-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .money-app-primary-link,
  .money-app-secondary-link {
    width: 100%;
    justify-content: center;
  }

  .money-app-hero-preview {
    width: 100%;
    max-width: 416px;
    height: 216px;
    margin: 0 auto;
  }

  .money-app-preview-card {
    min-height: 56px;
    padding: 16px;
    border-radius: 18px;
  }

  .money-app-preview-card.is-top {
    top: 0;
    right: 0;
    transform: none;
  }

  .money-app-preview-card.is-main {
    top: 76px;
    left: 0;
  }

  .money-app-preview-card.is-bottom {
    right: 0;
    bottom: 0;
    transform: none;
  }

  .money-app-preview-card h2,
  .money-app-preview-card.is-main h2 {
    font-size: 16px;
    line-height: 22px;
  }

  .money-app-preview-card p,
  .money-app-preview-card.is-main p {
    /* D2 type floor. Covers .is-top/.is-bottom too: they only override
       colour, not size. */
    font-size: var(--wm-scenario-text-xs-size, 12px);
    line-height: var(--wm-scenario-text-xs-line, 17px);
  }

  .money-app-alpha-card {
    padding: 25px;
    display: grid;
    gap: 16px;
    border-radius: 24px;
  }

  .money-app-alpha-copy {
    display: grid;
    gap: 16px;
  }

  .money-app-alpha-icon {
    display: none;
  }

  .money-app-section {
    gap: 24px;
  }

  .money-app-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .money-app-section h2,
  .money-app-compare-card h2,
  .money-app-coming-soon-panel h1 {
    font-size: 28px;
    line-height: 32px;
  }

  .money-app-coming-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .money-app-scenario-section-actions {
    width: 100%;
    justify-items: start;
  }

  .money-app-scenario-carousel-controls {
    width: 100%;
    justify-content: space-between;
  }

  .money-app-scenario-grid {
    gap: 16px;
  }

  .money-app-scenario-card {
    grid-template-rows: none;
    flex-basis: 100%;
    min-height: 234px;
    padding: 25px;
    border-radius: 24px;
  }

  .money-app-scenario-icon {
    display: none;
  }

  .money-app-coming-card {
    grid-template-rows: none;
    min-height: 0;
    border-radius: 24px;
  }

  .money-app-compare-card {
    min-height: 244px;
    padding: 32px;
    display: grid;
    border-radius: 24px;
  }

  .money-app-compare-button {
    width: 100%;
    min-width: 0;
  }

  .money-app-coming-soon-panel {
    padding: 32px 24px;
    border-radius: 24px;
  }

  .money-app-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    /* One column per rendered tab: five today, six with the flag-on Packs
     * entry (WMA-122). Sized by count rather than a fixed repeat so neither
     * state leaves an empty track or overflows. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(188, 202, 192, 0.15);
    border-radius: 32px 32px 0 0;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 -4px 20px rgba(21, 27, 42, 0.04);
    backdrop-filter: blur(12px);
  }

  .money-app-bottom-nav .money-app-account-menu,
  .money-app-bottom-nav .money-app-account-trigger {
    min-width: 0;
    width: 100%;
  }

  .money-app-bottom-nav .money-app-account-popover {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    z-index: 80;
  }

  .money-app-bottom-link {
    min-width: 0;
    min-height: 48px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    border-radius: var(--wf-radius-pill);
    /* Labels on the 88%-white bar over #f9f9ff (~#fefeff): #94a3b8 was
       2.54:1; slate-500 is 4.72:1. 12px is the platform's minimum text size —
       the 11px labels were the only text in the chrome under it. */
    color: #64748b;
    font-family: var(--wf-font-heading);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    text-decoration: none;
  }

  .money-app-bottom-link.is-active {
    color: #064e3b;
    background: #d1fae5;
  }

  .money-app-bottom-icon,
  .money-app-bottom-icon svg {
    width: 20px;
    height: 20px;
  }

  .money-app-bottom-icon {
    display: inline-flex;
  }
}

@media (max-width: 480px) {
  .money-app-topbar-mobile {
    padding-inline: 20px;
  }

  .money-app-dashboard {
    padding-inline: 16px;
  }

  .money-app-hero {
    padding-inline: 20px;
  }

  .money-app-hero h1 {
    font-size: 34px;
    line-height: 38px;
  }

  .money-app-bottom-nav {
    /* Six tabs (the flag-on Packs entry) at 390px: 8px insets and 4px gaps
       left 59px columns, and "Scenarios" at the 12px floor is 60px on macOS
       and 66px on the Linux fallback face (the webfonts never load, so the
       label renders in whatever the platform has). No gap (only the active
       tab paints a pill, so nothing touches) and 4px insets make each column
       63.7px; five tabs get 76px. */
    gap: 0;
    padding-inline: 4px;
  }

  .money-app-bottom-link > span:last-child {
    /* The other half of fitting six labels: -0.04em at 12px is half a pixel
       per glyph — invisible — and brings a 66px "Scenarios" under 62px, so the
       bar holds on the widest fallback font CI or a phone can hand it. */
    letter-spacing: -0.04em;
  }
}

.debt-scenario-route .debt-scenario-top-nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1440px;
  min-height: 84px;
  padding: 24px 56px;
}

.debt-scenario-route .debt-scenario-top-nav .money-brand,
.debt-scenario-route .debt-scenario-top-nav .money-brand-link {
  grid-column: 1;
  grid-row: 1;
}

.debt-scenario-route .debt-scenario-primary-nav {
  grid-column: 2;
  grid-row: 1;
}

.debt-scenario-route .debt-scenario-nav-icons {
  grid-column: 3;
  grid-row: 1;
}

.debt-scenario-route .debt-scenario-glance-input.wf-input-shell {
  display: inline-flex;
  width: fit-content;
}

.debt-scenario-route .debt-scenario-glance-input .wf-input {
  width: 7ch;
}

.debt-scenario-route .debt-scenario-glance-input.is-percent .wf-input {
  width: 4ch;
}

.debt-scenario-route .debt-scenario-main,
.debt-scenario-route .debt-scenario-hero,
.debt-scenario-route .debt-scenario-at-glance,
.debt-scenario-route .debt-scenario-section,
.debt-scenario-route .debt-scenario-section-heading,
.debt-scenario-route .debt-scenario-section-grid,
.debt-scenario-route .debt-scenario-option-card,
.debt-scenario-route .debt-scenario-progress,
.debt-scenario-route .debt-scenario-chart-card {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1120px) {
  .debt-scenario-route .debt-scenario-top-nav-inner {
    grid-template-columns: 1fr auto;
    min-height: 72px;
    padding: 20px 24px;
  }

  .debt-scenario-route .debt-scenario-primary-nav {
    display: none;
  }

  .debt-scenario-route .debt-scenario-nav-icons {
    grid-column: 2;
  }

  .debt-scenario-route .debt-scenario-main {
    width: 100%;
    overflow-x: hidden;
  }

  .debt-scenario-route .debt-scenario-glance-shell,
  .debt-scenario-route .debt-scenario-section-grid,
  .debt-scenario-route .debt-scenario-option-card.wf-surface {
    width: 100%;
    min-width: 0;
  }
}

/* Debt vs Savings guided scenario refresh */
.debt-scenario-route {
  --debt-bg: #f9f9ff;
  --debt-surface: #f1f3ff;
  --debt-surface-strong: #dce2f6;
  --debt-card: #fff;
  --debt-ink: #151b2a;
  --debt-copy: #3d4a42;
  --debt-muted: #6f7b74;
  --debt-green: #006948;
  --debt-green-strong: #005137;
  --debt-green-bright: #68dba9;
  --debt-green-tint: rgba(0, 105, 72, 0.1);
  --debt-line: rgba(188, 202, 192, 0.3);
  --debt-line-soft: rgba(188, 202, 192, 0.14);
  --debt-rose: #b42318;
  --debt-amber: #b45309;
  --debt-amber-strong: #92400e;
  background: var(--debt-bg);
  color: var(--debt-ink);
}

.debt-scenario-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.debt-scenario-route .debt-scenario-page {
  max-width: none;
  min-height: auto;
  margin: 0;
  padding: 0;
  background: var(--debt-bg);
}

.debt-scenario-route .debt-scenario-main {
  display: grid;
  gap: 48px;
  width: min(1280px, 100%);
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 56px 96px;
  overflow-x: clip;
}

.debt-scenario-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 32px;
}

.debt-scenario-header > div {
  display: grid;
  gap: 16px;
  max-width: 672px;
}

.debt-scenario-eyebrow {
  margin: 0;
  color: var(--debt-green);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-route .debt-scenario-title {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 48px;
  font-weight: 800;
  line-height: 60px;
  letter-spacing: 0;
}

.debt-scenario-subtitle {
  margin: 0;
  color: var(--debt-copy);
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.debt-scenario-education-note {
  flex: 0 0 auto;
  margin: 0;
  padding: 13px 25px;
  border: 1px solid var(--debt-line);
  border-radius: var(--wf-radius-pill);
  background: var(--debt-surface);
  color: var(--debt-copy);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.debt-scenario-setup-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: center;
  padding: 32px;
  border: 1px solid rgba(188, 202, 192, 0.1);
  border-radius: 32px;
  background: var(--debt-surface);
}

.debt-scenario-setup-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  min-width: 0;
}

.debt-scenario-setup-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.debt-scenario-setup-item span,
.debt-scenario-editor-field span,
.debt-scenario-path-metrics dt,
.debt-scenario-split-results dt,
.debt-scenario-allocation-card span {
  color: var(--debt-copy);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-setup-item strong {
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
}

.debt-scenario-editor {
  justify-self: end;
}

.debt-scenario-editor[open] {
  display: grid;
  grid-column: 1 / -1;
  justify-self: stretch;
  gap: 20px;
}

.debt-scenario-editor summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 32px;
  border-radius: var(--wf-radius-pill);
  background: var(--debt-surface-strong);
  color: var(--debt-green);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  list-style: none;
}

.debt-scenario-editor summary::-webkit-details-marker {
  display: none;
}

.debt-scenario-editor summary:focus-visible,
.debt-scenario-path-action:focus-visible,
.debt-scenario-mobile-tab:focus-visible,
.debt-scenario-tune-button:focus-visible,
.debt-scenario-split-slider input:focus-visible,
.debt-scenario-final-action a:focus-visible,
.debt-scenario-final-action button:focus-visible {
  outline: 3px solid var(--wf-color-focus-ring);
  outline-offset: 3px;
}

.debt-scenario-editor[open] summary {
  justify-self: end;
}

.debt-scenario-editor-panel {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  padding-top: 8px;
}

.debt-scenario-editor-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.debt-scenario-route .debt-scenario-editor-input.wf-input-shell {
  min-height: 44px;
  padding: 0 12px;
  border-color: var(--debt-line);
  background: #fff;
}

.debt-scenario-route .debt-scenario-editor-input .wf-input {
  width: 100%;
  min-width: 0;
  padding: 9px 0;
  font-family: var(--wf-font-mono);
  font-size: 16px;
  font-weight: 700;
}

.debt-scenario-route .debt-scenario-editor-input.is-percent .wf-input {
  width: 100%;
}

.debt-scenario-editor-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.debt-scenario-run-row {
  display: grid;
  align-self: end;
  min-width: 184px;
}

.debt-scenario-run-button.wf-button {
  width: 100%;
  min-height: 52px;
  padding: 12px 24px;
  border-color: var(--wm-money-accent);
  background: var(--wm-money-accent);
  color: var(--wf-color-text-inverse);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  box-shadow: var(--wm-money-accent-shadow-soft);
}

.debt-scenario-run-button.wf-button[disabled] {
  cursor: not-allowed;
  opacity: 0.56;
  box-shadow: none;
}

.debt-scenario-tradeoff-hero {
  position: relative;
  overflow: hidden;
  padding: 48px;
  border-radius: 32px;
  background: radial-gradient(circle at right top, rgba(104, 219, 169, 0.2), transparent 34%), var(--debt-green);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.debt-scenario-tradeoff-copy {
  display: grid;
  gap: 16px;
  max-width: 768px;
}

.debt-scenario-tradeoff-title {
  margin: 0;
  color: #fff;
  font-family: var(--wf-font-heading);
  font-size: 36px;
  font-weight: 800;
  line-height: 45px;
}

.debt-scenario-tradeoff-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 28px;
}

.debt-scenario-tradeoff-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
}

.debt-scenario-tradeoff-chips span {
  padding: 9px 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--wf-radius-pill);
  background: #00855d;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.debt-scenario-tradeoff-chips span.is-active {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.16);
}

.debt-scenario-strategy-selector,
.debt-scenario-key-tradeoffs,
.debt-scenario-timeline {
  display: grid;
  gap: 40px;
}

.debt-scenario-section-heading {
  display: grid;
  gap: 8px;
}

.debt-scenario-section-heading h2,
.debt-scenario-key-tradeoffs h2,
.debt-scenario-timeline h2 {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 30px;
  font-weight: 800;
  line-height: 36px;
  letter-spacing: 0;
}

.debt-scenario-section-heading p {
  margin: 0;
  color: var(--debt-copy);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

.debt-scenario-mobile-tabs {
  display: none;
}

.debt-scenario-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.debt-scenario-path-card.wf-surface {
  position: relative;
  display: grid;
  gap: 24px;
  align-content: start;
  min-height: 440px;
  padding: 32px;
  border: 1px solid var(--debt-line);
  border-radius: 32px;
  background: #fff;
  box-shadow: none;
}

.debt-scenario-path-card.is-selected.wf-surface {
  border: 2px solid var(--debt-green);
  box-shadow: 0 12px 30px rgba(0, 105, 72, 0.12);
}

.debt-scenario-path-card.is-balance-path.wf-surface {
  gap: 20px;
}

.debt-scenario-path-head,
.debt-scenario-mobile-path-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.debt-scenario-path-head h3,
.debt-scenario-mobile-path-head h3 {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 32px;
}

.debt-scenario-path-kicker {
  margin: 0 0 4px;
  color: var(--debt-green);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-path-badge,
.debt-scenario-viewing-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 25px;
  padding: 4px 12px;
  border-radius: var(--wf-radius-pill);
  background: #e9edff;
  color: var(--debt-copy);
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.debt-scenario-viewing-pill {
  background: var(--debt-green);
  color: #fff;
}

.debt-scenario-path-description,
.debt-scenario-mobile-path-card > p {
  margin: 0;
  color: var(--debt-copy);
  font-size: 18px;
  font-weight: 500;
  line-height: 29px;
}

.debt-scenario-path-metrics {
  display: grid;
  gap: 16px;
  margin: 0;
}

.debt-scenario-path-metrics div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--debt-line-soft);
}

.debt-scenario-path-metrics dd {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  text-align: right;
}

.debt-scenario-path-metrics div.is-warning dd {
  color: var(--debt-amber);
}

.debt-scenario-path-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: auto;
  padding: 14px 24px;
  border: 1px solid var(--debt-line);
  border-radius: var(--wf-radius-pill);
  color: var(--debt-green);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  text-decoration: none;
}

span.debt-scenario-path-action {
  cursor: default;
}

.debt-scenario-path-card.is-selected .debt-scenario-path-action {
  border-color: var(--debt-green);
  background: var(--debt-green);
  color: #fff;
}

.debt-scenario-card-split-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(0, 105, 72, 0.14);
  border-radius: 24px;
  background: var(--debt-green-tint);
}

.debt-scenario-card-split-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.debt-scenario-card-split-grid div,
.debt-scenario-card-split-results div {
  display: grid;
  gap: 4px;
}

/*
 * KNOWN CROWDING, NOT YET FIXED — needs a design call (WMA-117 Lane K, 8 Sep 2026).
 *
 * These labels came up from 10px to D2's floor, which is not optional. The
 * container was sized for 10px and cannot hold them: measured on the path
 * card's Breakdown panel, the grid is 250px wide and lays out three 75px
 * columns with a 12px gap, while "TOWARD EMERGENCY SAVINGS" and "EMERGENCY
 * SAVINGS GOAL REACHED" both render 86px wide. The 11px of overflow eats the
 * gap, so "EMERGENCY" and the next column's "DEBT-FREE" now touch.
 *
 * It is NOT fixable by shrinking the type — that is the violation this rule
 * just stopped committing. Every remaining option changes the card's design:
 * fewer columns (`repeat(auto-fit, minmax(78px, 1fr))` falls to two here),
 * a wider card, or shorter label text. Letter-spacing alone does not close
 * it — "EMERGENCY" is ~77px at 12px bold with no tracking at all, against a
 * 75px column, and a fit that tight would not survive the fallback font
 * (see docs: the webfonts named in tokens.css are never actually delivered,
 * so these layouts render in SF Pro locally and something wider on Linux).
 *
 * Left crowded and reported rather than redesigned here, which is the same
 * call Lane C made on the line-heights it refused to re-point.
 */
.debt-scenario-card-split-grid span,
.debt-scenario-card-split-results dt {
  color: var(--debt-copy);
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 800;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-card-split-grid strong,
.debt-scenario-card-split-results dd {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
}

.debt-scenario-card-split-panel .debt-scenario-split-slider {
  margin: 2px 6px 0;
}

.debt-scenario-split-value {
  margin: -4px 0 0;
  color: var(--debt-green);
  font-family: var(--wf-font-mono);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

.debt-scenario-card-split-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding-top: 4px;
}

.debt-scenario-insight-card {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: center;
  padding: 32px;
  border: 1px solid rgba(0, 105, 72, 0.16);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 105, 72, 0.08);
}

.debt-scenario-insight-card h2 {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 32px;
}

.debt-scenario-insight-card p {
  margin: 0;
  color: var(--debt-copy);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

.debt-scenario-insight-eyebrow {
  margin: 0 0 6px;
  color: var(--debt-green);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-tradeoff-list {
  display: grid;
  gap: 16px;
}

.debt-scenario-tradeoff-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) repeat(3, minmax(92px, 0.45fr)) minmax(220px, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 118px;
  padding: 32px;
  border: 1px solid var(--debt-line-soft);
  border-radius: 28px;
  background: #fff;
}

.debt-scenario-tradeoff-row.is-selected {
  border-color: rgba(0, 105, 72, 0.36);
  background: var(--debt-green-tint);
  box-shadow: 0 8px 18px rgba(0, 105, 72, 0.08);
}

.debt-scenario-tradeoff-row h3,
.debt-scenario-split-results h3,
.debt-scenario-plan-summary h2 {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 32px;
}

.debt-scenario-tradeoff-eyebrow {
  margin: 0 0 4px;
  color: var(--debt-green);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-tradeoff-row p,
.debt-scenario-tradeoff-stat span {
  margin: 0;
  color: var(--debt-copy);
  font-size: 16px;
  line-height: 24px;
}

.debt-scenario-tradeoff-stat {
  display: grid;
  gap: 4px;
}

.debt-scenario-tradeoff-stat span {
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-tradeoff-stat strong {
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}

.debt-scenario-tradeoff-stat.is-warning strong {
  color: var(--debt-amber-strong);
}

.debt-scenario-tradeoff-quote {
  font-style: italic;
}

.debt-scenario-split-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 64px;
  align-items: stretch;
}

.debt-scenario-split-panel {
  display: grid;
  gap: 28px;
  align-content: start;
}

.debt-scenario-tune-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.debt-scenario-tune-button {
  display: grid;
  gap: 2px;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: var(--wf-radius-pill);
  background: var(--debt-surface);
  color: var(--debt-copy);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  text-decoration: none;
}


.debt-scenario-tune-button.is-active {
  background: var(--debt-green);
  color: #fff;
}

.debt-scenario-allocation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.debt-scenario-allocation-card {
  display: grid;
  gap: 8px;
  padding: 28px 32px;
  border: 1px solid var(--debt-line-soft);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.debt-scenario-allocation-card p {
  margin: 0;
  color: var(--debt-copy);
  font-size: 14px;
  line-height: 20px;
}

.debt-scenario-allocation-card strong {
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 30px;
  line-height: 40px;
}

.debt-scenario-split-slider {
  position: relative;
  display: block;
  height: 32px;
  margin: 4px 8px 0;
}

.debt-scenario-split-slider input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 32px;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.debt-scenario-split-track,
.debt-scenario-split-fill {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 8px;
  border-radius: var(--wf-radius-pill);
  transform: translateY(-50%);
}

.debt-scenario-split-track {
  background: var(--debt-surface-strong);
}

.debt-scenario-split-fill {
  left: 0;
  width: var(--split-position);
  background: var(--debt-green-bright);
}

.debt-scenario-split-thumb {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--split-position);
  width: 28px;
  height: 28px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--debt-green);
  box-shadow: 0 4px 12px rgba(0, 105, 72, 0.2);
  transform: translate(-50%, -50%);
}


.debt-scenario-split-note {
  display: block;
  margin: 0;
  padding: 18px 22px;
  border: 1px solid rgba(0, 105, 72, 0.16);
  border-radius: 18px;
  background: var(--debt-green-tint);
  color: var(--debt-copy);
  font-size: 14px;
  line-height: 22px;
}

.debt-scenario-split-results {
  display: grid;
  gap: 28px;
  align-content: start;
  padding: 48px;
  border: 1px solid var(--debt-line-soft);
  border-radius: 32px;
  background: rgba(220, 226, 246, 0.5);
}

.debt-scenario-split-results dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}

.debt-scenario-split-results dl div {
  display: grid;
  gap: 8px;
  align-content: start;
}

.debt-scenario-split-results dt {
  color: var(--debt-copy);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-split-results dd {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 24px;
  font-weight: 800;
  line-height: 32px;
}

.debt-scenario-split-results p {
  margin: 12px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--debt-line-soft);
  color: var(--debt-copy);
  font-size: 14px;
  font-style: italic;
  line-height: 23px;
  text-align: left;
}

.debt-scenario-timeline {
  padding: 48px 0 80px;
}

.debt-scenario-timeline-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--timeline-count, 4), minmax(0, 1fr));
  gap: 48px;
  margin: 0;
  padding: 0 16px;
  list-style: none;
}

.debt-scenario-timeline-list::before {
  content: "";
  position: absolute;
  top: 53px;
  right: 32px;
  left: 32px;
  height: 6px;
  border-radius: var(--wf-radius-pill);
  background: var(--debt-surface-strong);
}

.debt-scenario-timeline-list li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 32px;
  text-align: center;
}

.debt-scenario-timeline-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--debt-green);
  color: #fff;
  font-family: var(--wf-font-mono);
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.debt-scenario-timeline-list li:first-child .debt-scenario-timeline-dot {
  border: 4px solid var(--debt-green-bright);
  background: #fff;
  color: var(--debt-green);
}

.debt-scenario-timeline-list li:nth-child(2) .debt-scenario-timeline-dot {
  background: var(--debt-green-bright);
  color: var(--debt-green-strong);
}

.debt-scenario-timeline-list li:last-child .debt-scenario-timeline-dot {
  background: var(--debt-green-strong);
}

.debt-scenario-timeline-list div {
  display: grid;
  gap: 12px;
}

.debt-scenario-timeline-marker {
  margin: 0;
  color: var(--debt-green);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.debt-scenario-timeline-list h3 {
  margin: 0;
  color: var(--debt-ink);
  font-size: 24px;
  font-weight: 800;
  line-height: 32px;
}

.debt-scenario-timeline-list p:not(.debt-scenario-timeline-marker) {
  margin: 0;
  color: var(--debt-copy);
  font-family: var(--wf-font-mono);
  font-size: 16px;
  line-height: 26px;
}

.debt-scenario-plan-summary {
  display: grid;
  gap: 24px;
  padding: 40px;
  border: 2px solid rgba(0, 105, 72, 0.2);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.debt-scenario-plan-summary p {
  margin: 0;
  color: var(--debt-ink);
  font-size: 20px;
  line-height: 32px;
}

.debt-scenario-plan-summary .debt-scenario-plan-comparison {
  padding-top: 24px;
  border-top: 1px solid var(--debt-line-soft);
  color: var(--debt-copy);
  font-size: 18px;
  font-style: italic;
  line-height: 29px;
}

.debt-scenario-final-action {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}

.debt-scenario-final-action a,
.debt-scenario-final-action button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 28px;
  border: 1.5px solid var(--debt-green);
  border-radius: var(--wf-radius-pill);
  color: var(--debt-green);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.debt-scenario-final-action button {
  border-color: var(--debt-green);
  background: var(--debt-green);
  color: #fff;
  cursor: pointer;
}

.debt-scenario-final-action a:hover {
  background: var(--debt-green);
  color: #fff;
}

.debt-scenario-copy-status {
  flex-basis: 100%;
  min-height: 20px;
  margin: 0;
  color: var(--debt-copy);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

@media (max-width: 1120px) {
  .debt-scenario-route .debt-scenario-main {
    width: min(760px, 100%);
    padding: 40px 24px 72px;
    gap: 40px;
    overflow-x: clip;
  }

  .debt-scenario-header {
    display: grid;
    gap: 16px;
  }

  .debt-scenario-education-note {
    width: fit-content;
  }

  .debt-scenario-setup-card,
  .debt-scenario-split-section {
    grid-template-columns: 1fr;
  }

  .debt-scenario-setup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debt-scenario-editor,
  .debt-scenario-editor[open] summary {
    justify-self: stretch;
  }

  .debt-scenario-editor summary {
    width: 100%;
  }

  .debt-scenario-editor-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debt-scenario-run-row {
    justify-content: stretch;
  }

  .debt-scenario-run-row .wf-button {
    width: 100%;
  }

  .debt-scenario-path-grid {
    gap: 20px;
  }

  .debt-scenario-path-card.wf-surface {
    padding: 24px;
  }

  .debt-scenario-tradeoff-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 720px) {
  .debt-scenario-route .debt-scenario-main {
    padding: 32px 24px 56px;
  }

  .debt-scenario-route .debt-scenario-title {
    font-size: 36px;
    line-height: 40px;
  }

  .debt-scenario-subtitle {
    font-size: 18px;
    line-height: 29px;
  }

  .debt-scenario-education-note {
    width: 100%;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .debt-scenario-setup-card {
    padding: 24px;
  }

  .debt-scenario-setup-grid {
    gap: 24px 16px;
  }

  .debt-scenario-setup-item span {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
  }

  .debt-scenario-setup-item strong {
    font-size: 18px;
    line-height: 28px;
  }

  .debt-scenario-editor-panel {
    grid-template-columns: 1fr;
  }

  .debt-scenario-tradeoff-hero {
    min-height: 0;
    padding: 32px;
  }

  .debt-scenario-tradeoff-title {
    font-family: var(--wf-font-body);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
  }

  .debt-scenario-tradeoff-subtitle {
    color: rgba(133, 248, 196, 0.85);
    font-size: 14px;
    line-height: 20px;
  }

  .debt-scenario-tradeoff-chips span {
    padding: 6px 16px;
    font-size: 12px;
    line-height: 16px;
  }

  .debt-scenario-section-heading h2,
  .debt-scenario-key-tradeoffs h2,
  .debt-scenario-timeline h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .debt-scenario-section-heading p {
    font-size: 14px;
    line-height: 22px;
  }

  .debt-scenario-path-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .debt-scenario-path-card.wf-surface {
    order: var(--mobile-order);
    min-height: 0;
    padding: 24px;
    border-radius: 28px;
  }

  .debt-scenario-path-head {
    align-items: start;
    gap: 12px;
  }

  .debt-scenario-path-head h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .debt-scenario-path-description {
    font-size: 14px;
    line-height: 22px;
  }

  .debt-scenario-card-split-panel {
    padding: 18px;
    border-radius: 22px;
  }

  .debt-scenario-card-split-grid,
  .debt-scenario-card-split-results {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .debt-scenario-card-split-grid div,
  .debt-scenario-card-split-results div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .debt-scenario-split-value {
    text-align: left;
  }

  .debt-scenario-insight-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px;
    border-radius: 24px;
  }

  .debt-scenario-insight-card h2 {
    font-size: 20px;
    line-height: 28px;
  }

  .debt-scenario-insight-card p {
    font-size: 14px;
    line-height: 22px;
  }

  .debt-scenario-path-metrics div {
    align-items: center;
  }

  .debt-scenario-path-metrics dt {
    font-size: var(--wm-scenario-text-min-size);
  }

  .debt-scenario-path-metrics dd {
    font-size: 16px;
    line-height: 24px;
  }

  .debt-scenario-tradeoff-row {
    min-height: 0;
    padding: 16px 20px;
    border-radius: 18px;
  }

  .debt-scenario-tradeoff-row h3,
  .debt-scenario-split-results h3,
  .debt-scenario-plan-summary h2 {
    font-size: 20px;
    line-height: 28px;
  }

  .debt-scenario-tradeoff-row p,
  .debt-scenario-tradeoff-stat span,
  .debt-scenario-tradeoff-stat strong {
    font-size: 14px;
    line-height: 22px;
  }

  .debt-scenario-split-section {
    gap: 40px;
  }

  .debt-scenario-tune-control {
    flex-wrap: nowrap;
    margin-inline: -24px;
    padding-inline: 24px;
    overflow-x: auto;
  }

  .debt-scenario-tune-button {
    flex: 0 0 auto;
  }

  .debt-scenario-allocation-grid {
    gap: 16px;
  }

  .debt-scenario-allocation-card {
    padding: 16px;
    border-radius: 24px;
  }

  .debt-scenario-allocation-card strong {
    font-size: 24px;
    line-height: 32px;
  }

  .debt-scenario-split-results {
    padding: 24px;
  }

  .debt-scenario-split-results dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .debt-scenario-split-results dl div {
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
  }

  .debt-scenario-split-results dd {
    font-size: 16px;
    line-height: 24px;
  }

  .debt-scenario-split-results p {
    font-size: 14px;
    line-height: 22px;
  }

  .debt-scenario-timeline {
    padding: 0;
    gap: 48px;
  }

  .debt-scenario-timeline-list {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 0 0 32px;
  }

  .debt-scenario-timeline-list::before {
    top: 8px;
    bottom: 8px;
    left: 12px;
    width: 2px;
    height: auto;
  }

  .debt-scenario-timeline-list li {
    justify-items: start;
    min-height: 64px;
    text-align: left;
  }

  .debt-scenario-timeline-dot {
    position: absolute;
    top: 0;
    left: -32px;
    width: 24px;
    height: 24px;
    border-width: 0;
    font-size: 12px;
    box-shadow: 0 0 0 4px #fff, 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .debt-scenario-timeline-list h3 {
    font-size: 16px;
    line-height: 24px;
  }

  .debt-scenario-timeline-list p:not(.debt-scenario-timeline-marker) {
    font-size: 12px;
    line-height: 16px;
  }

  .debt-scenario-plan-summary {
    padding: 24px;
    border-radius: 32px;
  }

  .debt-scenario-plan-summary p,
  .debt-scenario-plan-summary .debt-scenario-plan-comparison {
    font-size: 14px;
    line-height: 23px;
  }

  .debt-scenario-final-action {
    display: grid;
    justify-items: stretch;
  }

  .debt-scenario-final-action a,
  .debt-scenario-final-action button {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 24px;
  }
}


.wm-saved-plan-lock {
  overflow: hidden;
}

.wm-saved-plan-modal {
  --wm-plan-ink: #151b2a;
  --wm-plan-copy: #3d4a42;
  --wm-plan-muted: #6d7a72;
  --wm-plan-green: #006948;
  --wm-plan-green-strong: #005137;
  --wm-plan-aqua: #89f5e7;
  --wm-plan-mint: #68dba9;
  --wm-plan-surface: #f1f3ff;
  --wm-plan-border: rgba(188, 202, 192, 0.3);
  --wm-plan-danger: #ba1a1a;
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
}

.wm-saved-plan-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 27, 42, 0.2);
  backdrop-filter: blur(2px);
}

.wm-saved-plan-modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  overflow: auto;
  border: 0;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 0;
}

.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-backdrop {
  background: rgba(21, 27, 42, 0.1);
  backdrop-filter: blur(6px);
}

.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-modal-panel {
  display: grid;
  justify-items: center;
  width: min(672px, calc(100vw - 48px));
  max-height: min(900px, calc(100vh - 48px));
  border: 0;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 40px 80px -15px rgba(21, 27, 42, 0.18);
  padding: 56px;
}

.wm-saved-plan-close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6d7a72;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.wm-saved-plan-close svg,
.wm-saved-plan-primary svg,
.wm-saved-plan-auth-icon svg,
.wm-saved-plan-title-icon svg,
.wm-saved-plan-limit-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.wm-saved-plan-close:hover,
.wm-saved-plan-close:focus-visible {
  background: rgba(109, 122, 114, 0.1);
}

.wm-saved-plan-auth-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #85f8c4;
  color: #006948;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.wm-saved-plan-auth-icon svg {
  width: 28px;
  height: 28px;
}

.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-modal-head {
  justify-items: center;
  max-width: 448px;
  margin-bottom: 32px;
  text-align: center;
}

.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-modal-head h2 {
  font-size: 1.875rem;
  line-height: 1.2;
}

.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-modal-head p {
  max-width: 390px;
  color: #3d4a42;
  font-size: 1.125rem;
  line-height: 1.625;
}

.wm-saved-plan-unauth-preview {
  position: relative;
  width: 100%;
  border-radius: 32px;
  background: #f1f3ff;
  overflow: hidden;
  padding: 24px;
}

.wm-saved-plan-unauth-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 105, 72, 0.09) 0 2px, transparent 2px 32px);
  pointer-events: none;
}

.wm-saved-plan-unauth-preview-head,
.wm-saved-plan-unauth-preview-grid {
  position: relative;
}

.wm-saved-plan-unauth-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.wm-saved-plan-unauth-preview-head h3 {
  margin: 0;
  color: #006948;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  line-height: 1.35;
  text-transform: uppercase;
}

.wm-saved-plan-unauth-preview-head span {
  display: inline-flex;
  gap: 8px;
}

.wm-saved-plan-unauth-preview-head i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #68dba9;
}

.wm-saved-plan-unauth-preview-head i + i {
  opacity: 0.4;
}

.wm-saved-plan-unauth-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 24px;
}

.wm-saved-plan-unauth-preview-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wm-saved-plan-unauth-preview-item span {
  color: #6d7a72;
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
}

.wm-saved-plan-unauth-preview-item strong {
  color: #151b2a;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-modal-note {
  margin-top: 32px;
  color: #6d7a72;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-modal-actions {
  display: grid;
  gap: 16px;
  width: 100%;
  margin-top: 32px;
}

.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-primary,
.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-secondary,
.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-tertiary {
  width: 100%;
  min-height: 56px;
}

.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-primary {
  gap: 8px;
  background: #006948;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  color: #ffffff;
  font-size: 1.125rem;
}

.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-secondary {
  border: 2px solid #bccac0;
  background: transparent;
  color: #151b2a;
  font-size: 1rem;
}

.wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-tertiary {
  min-height: 36px;
  background: transparent;
  color: #6d7a72;
  font-size: 0.875rem;
}

.wm-saved-plan-modal-head {
  display: grid;
  gap: 8px;
  margin: 0;
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-modal-head {
  padding: 40px 40px 24px;
}

.wm-saved-plan-modal-kicker,
.money-plans-kicker {
  margin: 0;
  color: #3d7c63;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.wm-saved-plan-modal-head h2,
.money-plans-hero h1 {
  margin: 0;
  color: #151b2a;
  letter-spacing: 0;
}

.wm-saved-plan-modal-head p,
.wm-saved-plan-modal-note {
  margin: 0;
  color: #3d4a42;
  line-height: 1.55;
}

.wm-saved-plan-form {
  display: grid;
  gap: 0;
}

.wm-saved-plan-modal-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wm-saved-plan-title-icon,
.wm-saved-plan-limit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 133, 93, 0.1);
  color: var(--wm-plan-green);
  flex: 0 0 auto;
}

.wm-saved-plan-title-icon {
  width: 40px;
  height: 40px;
}

.wm-saved-plan-title-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-modal-head h2 {
  font-size: 1.5rem;
  font-weight: 850;
  line-height: 1.333;
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-modal-head p {
  max-width: 400px;
  font-size: 1rem;
  line-height: 1.625;
}

.wm-saved-plan-name-field,
.money-plans-search,
.money-plans-filter,
.money-plans-dialog-panel label,
.money-plans-inline-rename label {
  display: grid;
  gap: 8px;
  color: #33404a;
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-name-field {
  gap: 8px;
  margin: 0 40px;
  color: var(--wm-plan-copy);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

.wm-saved-plan-name-field input,
.money-plans-search input,
.money-plans-filter select,
.money-plans-dialog-panel input,
.money-plans-inline-rename input {
  width: 100%;
  border: 1px solid rgba(26, 40, 51, 0.16);
  border-radius: 12px;
  background: #ffffff;
  color: #172129;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 14px;
  text-transform: none;
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-name-field input {
  border: 0;
  border-bottom: 3px solid #6b7280;
  border-radius: 0;
  background: transparent;
  color: var(--wm-plan-ink);
  font-size: 1.125rem;
  font-weight: 750;
  line-height: 1.55;
  padding: 12px 0 15px;
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-name-field.has-error input {
  border-bottom-color: rgba(186, 26, 26, 0.72);
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-name-field input:focus {
  outline: none;
  border-bottom-color: var(--wm-plan-green);
  box-shadow: 0 1px 0 var(--wm-plan-green);
}

.wm-saved-plan-error,
.money-plans-dialog-error,
.money-plans-inline-rename-error {
  margin: 0;
  border-radius: 12px;
  background: #fff0ed;
  color: #9e2f1f;
  font-weight: 700;
  padding: 10px 12px;
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-error {
  align-items: center;
  gap: 8px;
  border-radius: 0;
  background: transparent;
  color: var(--wm-plan-danger);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.5;
  margin: 8px 40px 0;
  padding: 0;
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-error:not([hidden]) {
  display: flex;
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-error[hidden] {
  display: none;
}

/*
 * The "!" badge on the save-dialog error. Glyph raised from 10px to D2's floor
 * (WMA-117 Lane K); the circle went 13px -> 17px to hold it, since 1.5px of
 * border on each side leaves a 13px box only 10px of content for a 12px line.
 */
.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 850;
  line-height: 1;
}

.wm-saved-plan-preview {
  display: grid;
  gap: 24px;
  border: 1px solid rgba(104, 219, 169, 0.2);
  border-radius: 6px;
  background: var(--wm-plan-surface);
  margin: 28px 40px 32px;
  padding: 25px;
}

.wm-saved-plan-preview h3 {
  margin: 0;
  color: var(--wm-plan-green);
  font-size: 0.875rem;
  font-weight: 850;
  letter-spacing: 0.025em;
  line-height: 1.45;
}

.wm-saved-plan-preview-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

.wm-saved-plan-preview-row {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: rgba(61, 74, 66, 0.68);
}

.wm-saved-plan-preview-row span {
  color: rgba(61, 74, 66, 0.64);
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 850;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.wm-saved-plan-preview-row strong {
  color: var(--wm-plan-ink);
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-align: left;
}

.wm-saved-plan-preview-row:nth-child(n + 4) strong {
  color: var(--wm-plan-green);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.wm-saved-plan-quota {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 999px;
  background: rgba(104, 219, 169, 0.2);
  color: var(--wm-plan-green-strong);
  font-weight: 800;
  padding: 13px 20px;
  margin: 0 40px 8px;
}

.wm-saved-plan-modal-actions,
.money-plans-card-actions,
.money-plans-dialog-actions,
.money-plans-inline-rename-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.wm-saved-plan-primary,
.wm-saved-plan-secondary,
.wm-saved-plan-tertiary,
.money-plans-new-link,
.money-plans-open,
.money-plans-secondary,
.money-plans-danger,
.money-plans-inline-save,
.money-plans-inline-cancel {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  font-weight: 850;
  text-decoration: none;
}

.wm-saved-plan-primary,
.money-plans-new-link,
.money-plans-open,
.money-plans-inline-save {
  background: #006948;
  color: #ffffff;
}

.wm-saved-plan-secondary,
.money-plans-secondary,
.money-plans-inline-cancel {
  background: transparent;
  color: #3d4a42;
}

.wm-saved-plan-tertiary {
  background: transparent;
  color: #4b5963;
}

.money-plans-danger {
  background: #fff0ed;
  color: #9e2f1f;
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-modal-actions {
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(188, 202, 192, 0.1);
  background: rgba(255, 255, 255, 0.5);
  padding: 32px 40px;
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-primary {
  min-height: 56px;
  box-shadow: 0 10px 15px -3px rgba(0, 105, 72, 0.2), 0 4px 6px -4px rgba(0, 105, 72, 0.2);
  font-size: 1rem;
  padding: 0 40px;
}

.wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-secondary {
  min-height: 48px;
  font-size: 1rem;
  padding: 0 32px;
}

.wm-saved-plan-limit-content {
  display: grid;
  gap: 24px;
  padding-top: 56px;
}

.wm-saved-plan-limit-icon {
  width: 64px;
  height: 64px;
  justify-self: center;
}

.wm-saved-plan-limit-icon svg {
  width: 28px;
  height: 28px;
}

.wm-saved-plan-modal.is-limit-modal .wm-saved-plan-modal-panel {
  width: min(672px, calc(100vw - 48px));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
}

.wm-saved-plan-modal.is-limit-modal .wm-saved-plan-modal-head {
  justify-items: center;
  padding: 0 56px;
  text-align: center;
}

.wm-saved-plan-modal.is-limit-modal .wm-saved-plan-modal-head h2 {
  font-size: 1.875rem;
}

.wm-saved-plan-modal.is-limit-modal .wm-saved-plan-preview {
  margin: 0 56px 0;
}

.wm-saved-plan-modal.is-limit-modal .wm-saved-plan-modal-actions {
  border-top: 0;
  background: transparent;
  display: grid;
  padding: 0 56px 56px;
}

.wm-saved-plan-danger {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 32px;
  font-weight: 850;
  font-size: 1rem;
  background: #9e2f1f;
  color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(158, 47, 31, 0.25), 0 4px 6px -4px rgba(158, 47, 31, 0.25);
}

.wm-saved-plan-danger:hover,
.wm-saved-plan-danger:focus-visible {
  background: #872718;
}

.wm-saved-plan-modal.is-confirm-modal .wm-saved-plan-modal-panel {
  width: min(480px, calc(100vw - 48px));
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
}

.wm-saved-plan-confirm-content {
  display: grid;
  gap: 24px;
  padding: 40px;
  justify-items: center;
  text-align: center;
}

.wm-saved-plan-confirm-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff0ed;
  color: #9e2f1f;
}

.wm-saved-plan-confirm-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wm-saved-plan-modal.is-confirm-modal .wm-saved-plan-modal-head {
  display: grid;
  gap: 8px;
}

.wm-saved-plan-modal.is-confirm-modal .wm-saved-plan-modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  border-top: 0;
  background: transparent;
  padding: 0;
}

.money-plans-page {
  --money-plans-bg: #f9f9ff;
  --money-plans-ink: #151b2a;
  --money-plans-copy: #3d4a42;
  --money-plans-muted: #6d7a72;
  --money-plans-green: #006948;
  --money-plans-green-strong: #005137;
  --money-plans-green-soft: #68dba9;
  --money-plans-aqua: #89f5e7;
  --money-plans-amber: #ffd699;
  --money-plans-amber-strong: #7a4a00;
  /* When You Stop carries the platform's muted retirement heather
   * (--wm-money accent "is-muted": #716984 on #f4f2fa), darkened here so the
   * pill's 12px/850 label keeps the same contrast as its five siblings. */
  --money-plans-heather: #e7e2f4;
  --money-plans-heather-strong: #463f63;
  --money-plans-surface: #f1f3ff;
  --money-plans-chip: #e9edff;
  --money-plans-action-soft: #dce2f6;
  --money-plans-border: rgba(188, 202, 192, 0.3);
  --money-plans-border-soft: rgba(188, 202, 192, 0.14);
  --money-plans-danger: #ba1a1a;
  background: var(--money-plans-bg);
  box-shadow: 0 0 0 100vmax var(--money-plans-bg);
  clip-path: inset(0 -100vmax);
  display: grid;
  gap: 48px;
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 72px 40px 96px;
}

.money-plans-hero,
.money-plans-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.money-plans-hero > div {
  display: grid;
  gap: 8px;
  max-width: 680px;
}

.money-plans-hero h1 {
  color: var(--money-plans-ink);
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.08;
}

.money-plans-hero p,
.money-plans-section-head p,
.money-plans-card p,
.money-plans-empty p,
.money-plans-no-results p,
.money-plans-error p {
  color: var(--money-plans-copy);
  line-height: 1.55;
  margin: 0;
}

.money-plans-page .money-plans-new-link {
  background: var(--money-plans-green);
  box-shadow: 0 18px 30px rgba(0, 105, 72, 0.16);
  color: #ffffff;
  min-height: 48px;
  padding: 0 32px;
}

.money-plans-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 340px);
  gap: 16px;
  align-items: end;
}

.money-plans-toolbar > .money-plans-search {
  min-width: 0;
}

.money-plans-search {
  position: relative;
}

.money-plans-search > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.money-plans-search::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  z-index: 1;
  width: 13px;
  height: 13px;
  border: 2px solid var(--money-plans-muted);
  border-radius: 50%;
  transform: translateY(-55%);
}

.money-plans-search::after {
  content: "";
  position: absolute;
  left: 33px;
  top: 50%;
  z-index: 1;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: var(--money-plans-muted);
  transform: translateY(4px) rotate(45deg);
}

.money-plans-page .money-plans-search input {
  min-height: 56px;
  border: 1px solid var(--money-plans-border);
  border-radius: 48px;
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(21, 27, 42, 0.05);
  color: var(--money-plans-ink);
  font-weight: 500;
  padding: 0 20px 0 52px;
}

.money-plans-page .money-plans-search input::placeholder {
  color: #6b7280;
}

.money-plans-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* The select sizes itself to its widest option label. Without min-width: 0 the
     toolbar's grid track inherits that intrinsic width and the page overflows on
     narrow viewports — the select's percentage max-width alone cannot stop
     min-content propagation. */
  min-width: 0;
  min-height: 56px;
  border: 1px solid var(--money-plans-border);
  border-radius: 16px;
  background: var(--money-plans-surface);
  padding: 8px 12px 8px 16px;
  text-transform: none;
}

.money-plans-filter > span {
  color: var(--money-plans-copy);
  font-size: 1rem;
  font-weight: 650;
  text-transform: none;
}

.money-plans-page .money-plans-filter select {
  width: auto;
  min-width: 176px;
  border: 0;
  border-radius: 999px;
  background: var(--money-plans-action-soft);
  color: var(--money-plans-ink);
  font-weight: 850;
  padding: 8px 36px 8px 14px;
}

.money-plans-status,
.money-plans-error,
.money-plans-empty,
.money-plans-no-results {
  border: 1px solid var(--money-plans-border);
  border-radius: 32px;
  background: rgba(249, 249, 255, 0.5);
  color: var(--money-plans-copy);
  padding: 34px;
}

.money-plans-empty,
.money-plans-no-results {
  display: grid;
  gap: 16px;
  border-style: dashed;
  border-width: 2px;
  justify-items: start;
}

.money-plans-summary,
.money-plans-list-section {
  display: grid;
  gap: 24px;
}

.money-plans-status[hidden],
.money-plans-error[hidden],
.money-plans-empty[hidden],
.money-plans-summary[hidden],
.money-plans-list-section[hidden] {
  display: none;
}

.money-plans-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.money-plans-scenario-card {
  display: grid;
  gap: 16px;
  min-height: 168px;
  border: 1px solid rgba(188, 202, 192, 0.2);
  border-radius: 48px;
  background: rgba(241, 243, 255, 0.5);
  color: var(--money-plans-copy);
  cursor: pointer;
  padding: 24px;
  text-align: left;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.money-plans-scenario-card:hover,
.money-plans-scenario-card:focus-visible {
  border-color: rgba(0, 105, 72, 0.35);
  transform: translateY(-1px);
}

/*
 * A scenario we are not offering yet renders as a plain div — nothing to click,
 * nothing to focus. It still needs to stop looking like the cards around it,
 * which carry a pointer cursor and lift on hover.
 */
.money-plans-scenario-card.is-coming-soon {
  cursor: default;
}

.money-plans-scenario-card.is-coming-soon:hover {
  border-color: rgba(188, 202, 192, 0.2);
  transform: none;
}

.money-plans-scenario-card.is-coming-soon .money-plans-scenario-card-link {
  color: var(--money-plans-heather-strong);
}

.money-plans-scenario-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.money-plans-scenario-card-head strong {
  color: var(--money-plans-ink);
  font-size: 1.125rem;
  font-weight: 850;
  line-height: 1.35;
}

.money-plans-scenario-count {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--money-plans-chip);
  color: var(--money-plans-copy);
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 850;
  line-height: 1.35;
  padding: 5px 10px;
  text-transform: uppercase;
}

.money-plans-scenario-card-copy {
  color: var(--money-plans-copy);
  line-height: 1.5;
}

.money-plans-scenario-card-link {
  align-self: end;
  color: var(--money-plans-green);
  font-weight: 850;
}

.money-plans-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.money-plans-card {
  display: grid;
  gap: 18px;
  min-width: 0;
  position: relative;
  border: 1px solid var(--money-plans-border-soft);
  border-radius: 32px;
  background: var(--money-plans-surface);
  padding: 25px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  animation: money-plans-card-enter 320ms ease both;
}

.money-plans-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 105, 72, 0.28);
  box-shadow: 0 14px 36px rgba(21, 27, 42, 0.1);
}

@keyframes money-plans-card-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .money-plans-card {
    transition: none;
    animation: none;
  }

  .money-plans-card:hover {
    transform: none;
  }
}

.money-plans-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-right: 44px;
}

.money-plans-card h3,
.money-plans-empty h2,
.money-plans-no-results h3,
.money-plans-error h2,
.money-plans-section-head h2 {
  margin: 0;
  color: var(--money-plans-ink);
  letter-spacing: 0;
}

.money-plans-section-head h2 {
  font-size: 1.5rem;
  line-height: 1.25;
}

.money-plans-card h3 {
  font-size: 1.25rem;
  font-weight: 850;
  line-height: 1.35;
}

.money-plans-title-block {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.money-plans-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.money-plans-title-row[hidden],
.money-plans-inline-rename[hidden] {
  display: none;
}

.money-plans-title-row h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.money-plans-edit-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--money-plans-green);
  cursor: pointer;
  padding: 0;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.money-plans-edit-name svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.money-plans-edit-name:hover,
.money-plans-edit-name:focus-visible {
  background: var(--money-plans-green);
  color: #ffffff;
  transform: translateY(-1px);
}

.money-plans-inline-rename {
  display: grid;
  gap: 10px;
}

.money-plans-inline-rename label {
  color: var(--money-plans-copy);
  font-size: var(--wm-scenario-text-min-size);
  letter-spacing: 0.04em;
}

.money-plans-inline-rename input {
  border: 0;
  border-bottom: 2px solid rgba(109, 122, 114, 0.42);
  border-radius: 0;
  background: transparent;
  color: var(--money-plans-ink);
  font-size: 1.12rem;
  font-weight: 850;
  line-height: 1.35;
  padding: 6px 0 8px;
}

.money-plans-inline-rename input:focus {
  outline: none;
  border-bottom-color: var(--money-plans-green);
  box-shadow: 0 1px 0 var(--money-plans-green);
}

.money-plans-inline-rename-error {
  background: transparent;
  color: var(--money-plans-danger);
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 0;
}

.money-plans-inline-rename-actions {
  gap: 8px;
}

.money-plans-page .money-plans-inline-save,
.money-plans-page .money-plans-inline-cancel {
  min-height: 36px;
  padding: 0 14px;
}

.money-plans-page .money-plans-inline-save {
  background: var(--money-plans-green);
  color: #ffffff;
}

.money-plans-page .money-plans-inline-cancel {
  border: 1px solid var(--money-plans-border);
  color: var(--money-plans-ink);
}

.money-plans-card-date {
  color: var(--money-plans-copy);
  flex: 0 0 auto;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: var(--wm-scenario-text-min-size);
  line-height: 1.45;
  opacity: 0.68;
  text-transform: uppercase;
}

.money-plans-trash {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--money-plans-muted);
  cursor: pointer;
  padding: 0;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.money-plans-trash svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.money-plans-trash:hover,
.money-plans-trash:focus-visible {
  background: #fff0ed;
  color: var(--money-plans-danger);
  transform: translateY(-1px);
}

.money-plans-count {
  align-self: center;
  border-radius: 999px;
  background: var(--money-plans-green-soft);
  color: var(--money-plans-green-strong);
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.4;
  padding: 6px 12px;
  text-transform: uppercase;
}

.money-plans-pill {
  border-radius: 999px;
  display: inline-flex;
  width: max-content;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.35;
}

.money-plans-card-top-path {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--money-plans-copy);
}

.money-plans-card-top-path span {
  margin-right: 6px;
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--money-plans-muted, #6b7280);
}

.money-plans-pill.is-income-drop {
  background: var(--money-plans-chip);
  color: #4e43a4;
}

.money-plans-pill.is-surprise-bill {
  background: var(--money-plans-aqua);
  color: #005049;
}

.money-plans-pill.is-debt-vs-savings {
  background: var(--money-plans-green-soft);
  color: var(--money-plans-green-strong);
}

.money-plans-pill.is-comfortable-or-stretched {
  background: var(--money-plans-amber);
  color: var(--money-plans-amber-strong);
}

.money-plans-pill.is-where-you-land {
  background: var(--money-plans-aqua);
  color: #005049;
}

.money-plans-pill.is-when-you-stop {
  background: var(--money-plans-heather);
  color: var(--money-plans-heather-strong);
}

.money-plans-card-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

.money-plans-card-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--money-plans-muted);
}

.money-plans-card-metric span {
  color: var(--money-plans-muted);
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 850;
  line-height: 1.35;
  text-transform: uppercase;
}

.money-plans-card-metric strong {
  color: var(--money-plans-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 1.1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: left;
}

.money-plans-card-metric:nth-child(n + 3) strong {
  color: var(--money-plans-green);
}

.money-plans-card-actions,
.money-plans-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.money-plans-page .money-plans-open,
.money-plans-dialog-panel .money-plans-open {
  background: var(--money-plans-action-soft);
  color: var(--money-plans-green);
  min-height: 48px;
}

.money-plans-page .money-plans-card-actions .money-plans-open {
  flex: 1 1 128px;
}

.money-plans-page .money-plans-secondary,
.money-plans-dialog-panel .money-plans-secondary {
  border: 1px solid var(--money-plans-border);
  background: transparent;
  color: var(--money-plans-ink);
}

.money-plans-page .money-plans-danger {
  border: 1px solid rgba(186, 26, 26, 0.18);
  background: transparent;
  color: var(--money-plans-danger);
}

.money-plans-dialog {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 24px;
}

.money-plans-dialog[hidden] {
  display: none;
}

.money-plans-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 27, 42, 0.24);
  backdrop-filter: blur(6px);
}

.money-plans-dialog-panel {
  position: relative;
  display: grid;
  gap: 16px;
  width: min(440px, 100%);
  border-radius: 32px;
  background: #ffffff;
  box-shadow: 0 40px 80px -15px rgba(21, 27, 42, 0.18);
  padding: 24px;
}

.money-plans-dialog-panel h2 {
  margin: 0;
  color: #151b2a;
}

.money-plans-dialog-panel p {
  margin: 0;
  color: var(--money-plans-copy, #3d4a42);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .money-plans-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .wm-saved-plan-modal {
    align-items: center;
    padding: 16px;
  }

  .wm-saved-plan-modal-panel {
    width: min(100%, 448px);
    max-height: calc(100vh - 32px);
    border-radius: 32px;
  }

  .wm-saved-plan-modal.is-unauthenticated {
    align-items: center;
    padding: 16px;
  }

  .wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-modal-panel {
    width: 100%;
    max-height: calc(100vh - 32px);
    border-radius: 28px;
    padding: 48px 20px 28px;
  }

  .wm-saved-plan-close {
    top: 24px;
    right: 24px;
  }

  .wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-modal-head {
    padding: 32px 24px 18px;
  }

  .wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-modal-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-title-icon {
    width: 48px;
    height: 48px;
  }

  .wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-modal-head h2 {
    font-size: 1.5rem;
    line-height: 1.333;
  }

  .wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-modal-head p {
    font-size: 0.875rem;
    line-height: 1.625;
  }

  .wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-name-field {
    margin: 0 24px;
  }

  .wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-name-field input {
    border-bottom-width: 1.5px;
    border-bottom-color: rgba(188, 202, 192, 0.3);
    font-size: 1.125rem;
    padding: 8px 0 8px;
  }

  .wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-name-field.has-error input {
    border-bottom-width: 2px;
    border-bottom-color: var(--wm-plan-danger);
  }

  .wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-error {
    align-items: flex-start;
    font-size: 0.875rem;
    line-height: 1.43;
    margin: 8px 24px 0;
  }

  .wm-saved-plan-preview {
    gap: 18px;
    border-color: rgba(133, 248, 196, 0.3);
    border-radius: 32px;
    background: rgba(0, 105, 72, 0.05);
    margin: 32px 24px 24px;
    padding: 17px;
  }

  .wm-saved-plan-preview h3 {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .wm-saved-plan-preview-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
  }

  .wm-saved-plan-preview-row span {
    color: rgba(0, 81, 55, 0.65);
    font-size: var(--wm-scenario-text-min-size);
    letter-spacing: 0;
  }

  .wm-saved-plan-preview-row strong {
    color: var(--wm-plan-green-strong);
    font-size: 0.75rem;
  }

  .wm-saved-plan-preview-row:nth-child(n + 4) {
    border-top: 1px solid rgba(133, 248, 196, 0.22);
    padding-top: 14px;
  }

  .wm-saved-plan-preview-row:nth-child(n + 4) strong {
    color: #006a61;
    font-size: 0.875rem;
  }

  .wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-modal-actions {
    border-top: 0;
    background: transparent;
    flex-direction: column;
    gap: 12px;
    padding: 8px 24px 32px;
  }

  .wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-primary {
    order: 1;
    width: 100%;
    min-height: 56px;
  }

  .wm-saved-plan-modal:not(.is-unauthenticated) .wm-saved-plan-secondary {
    order: 2;
    width: 100%;
    min-height: 44px;
    color: rgba(109, 122, 114, 0.82);
  }

  .wm-saved-plan-limit-content {
    gap: 22px;
    padding-top: 40px;
  }

  .wm-saved-plan-modal.is-limit-modal .wm-saved-plan-modal-head {
    padding: 0 24px;
  }

  .wm-saved-plan-modal.is-limit-modal .wm-saved-plan-modal-head h2 {
    font-size: 1.5rem;
  }

  .wm-saved-plan-modal.is-limit-modal .wm-saved-plan-preview,
  .wm-saved-plan-modal.is-limit-modal .wm-saved-plan-quota {
    margin-left: 24px;
    margin-right: 24px;
  }

  .wm-saved-plan-modal.is-limit-modal .wm-saved-plan-modal-actions {
    padding: 0 24px 32px;
  }

  .wm-saved-plan-auth-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
  }

  .wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-modal-head {
    margin-bottom: 24px;
  }

  .wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-modal-head h2 {
    font-size: 1.5rem;
  }

  .wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-modal-head p {
    font-size: 0.98rem;
    line-height: 1.55;
  }

  .wm-saved-plan-unauth-preview {
    border-radius: 24px;
    padding: 18px;
  }

  .wm-saved-plan-unauth-preview-grid {
    column-gap: 18px;
    row-gap: 18px;
  }

  .wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-modal-note,
  .wm-saved-plan-modal.is-unauthenticated .wm-saved-plan-modal-actions {
    margin-top: 24px;
  }

  .money-plans-page {
    gap: 40px;
    width: 100%;
    padding: 40px 24px 152px;
  }

  .money-plans-hero,
  .money-plans-section-head {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .money-plans-hero h1 {
    font-size: 2.25rem;
    line-height: 1.12;
  }

  .money-plans-page .money-plans-new-link {
    width: max-content;
    max-width: 100%;
  }

  .money-plans-toolbar {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .money-plans-page .money-plans-search input {
    border-radius: 32px 32px 8px 8px;
  }

  .money-plans-filter {
    width: 100%;
    border-radius: 32px;
  }

  .money-plans-page .money-plans-filter select {
    min-width: 0;
    max-width: 58%;
    background: transparent;
    color: var(--money-plans-green);
    padding-right: 8px;
    text-align: right;
  }

  .money-plans-scenario-grid,
  .money-plans-list {
    grid-template-columns: 1fr;
  }

  .money-plans-scenario-card {
    min-height: 0;
    border-radius: 32px;
    background: var(--money-plans-surface);
    padding: 24px;
  }

  .money-plans-scenario-card-head {
    align-items: center;
  }

  .money-plans-card {
    background: #ffffff;
    box-shadow: 0 -4px 20px rgba(21, 27, 42, 0.04);
    padding: 24px;
  }

  .money-plans-card-head {
    align-items: flex-start;
    padding-right: 40px;
  }

  .money-plans-trash {
    top: 20px;
    right: 20px;
    background: rgba(241, 243, 255, 0.76);
  }

  .money-plans-edit-name {
    background: rgba(241, 243, 255, 0.76);
  }

  .money-plans-card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .money-plans-page .money-plans-card-actions .money-plans-open {
    background: var(--money-plans-action-soft);
    color: var(--money-plans-green);
    flex: 0 0 auto;
    min-height: 56px;
    width: 100%;
  }

  .money-plans-page .money-plans-card-actions .money-plans-secondary,
  .money-plans-page .money-plans-card-actions .money-plans-danger {
    min-height: 44px;
    width: 100%;
  }

  .money-plans-page .money-plans-inline-save,
  .money-plans-page .money-plans-inline-cancel {
    flex: 1 1 120px;
  }

  .wm-saved-plan-modal-actions,
  .money-plans-card-actions,
  .money-plans-dialog-actions,
  .money-plans-inline-rename-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.wm-saved-plan-toast {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 14px 18px;
  border-radius: 16px;
  background: #005137;
  color: #ffffff;
  box-shadow: 0 18px 40px -12px rgba(0, 81, 55, 0.55);
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.wm-saved-plan-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Brief "Saved ✓" confirmation state on an in-page save button. */
[data-save-plan].is-saved {
  background: #005137;
  border-color: #005137;
  color: #ffffff;
  animation: wm-save-button-pop 280ms ease;
}

@keyframes wm-save-button-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-save-plan].is-saved {
    animation: none;
  }
}

.wm-saved-plan-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(137, 245, 231, 0.25);
}

.wm-saved-plan-toast-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #89f5e7;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wm-saved-plan-toast-message {
  flex: 1 1 auto;
  font-weight: 600;
}

.wm-saved-plan-toast-link {
  flex: 0 0 auto;
  color: #89f5e7;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.wm-saved-plan-toast-link:hover {
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .wm-saved-plan-toast {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }
}


/*
 * TOKENS (WMA-117 W9 Lane C, 7 September 2026)
 * ============================================
 * This file consumes the metrics tier — `--wm-scenario-*` on `body` in
 * `browser-preview.css`, plus the `--wf-*` primitives it aliases. See
 * docs/product/pack-visual-system-tokens.md; that page, not the plan, is the
 * contract. It consumes NOTHING from the depth tier (`--wm-pack-*`) and must
 * not: owner decision D3 keeps the gradients, layered shadows and recessed
 * tracks on the paid pack surfaces.
 *
 * R6 asks that no raw px remain for type, control height or spacing. 209 of
 * them were replaced with the exact token for the same value — proven not to
 * move a pixel by a computed-style walk of every element on all six scenarios,
 * pristine and post-run, at both visual viewports, byte-identical across the
 * pass. What follows is what R6 could NOT reach, because the published token
 * set has no step at that value and the two files where a step could legally
 * be added (`browser-preview.css`, `packages/design-tokens`) belong to other
 * lanes:
 *
 *   • 8 font-sizes at 19/22/26/30/32/34px. The scale stops at 18px
 *     (`-text-2xl`) and resumes at the platform's heading steps (20/24/28/36);
 *     these six values fall between them. Display type on the free five needs
 *     an owner decision on new steps (contract §5.4).
 *   • 47 line-heights that are not the canonical pair for their own size —
 *     12/16 where the pair is 12/17, 16/24 where it is 16/22, and so on.
 *     Deliberately NOT aliased to whatever `--wf-*` token happens to equal the
 *     number: `line-height: 16px` on a 15px rule is not the label scale's
 *     line-height, and coupling it to one would move this rule the next time
 *     that scale changed. Same reasoning the contract gives for leaving
 *     `pack-shell.css`'s unpaired line-heights alone (§3.3).
 *   • 37 spacing values off `--wf-space-*` (3, 5, 7, 9, 10, 13, 14, 18, 22,
 *     26, 28, 56, 96px). The scale has no odd steps and nothing between 24
 *     and 32.
 *   • 3 radii at 14/24/28px, and the interactive heights at 32/48/52px.
 *
 * Heights that are geometry rather than a control box — a 28px step marker, a
 * 3px drag dot, a 1px rule — are left as geometry on purpose (contract §5.2).
 *
 * One page background for all five calculators.
 *
 * income-drop shipped #f9f9ff while the other four painted the shared canvas
 * token, so clicking between scenarios flipped the page background. Selectors
 * are qualified with `body` (0,1,1) so they outrank the per-route class rules
 * in browser-preview.css and surprise-bill/styles.css regardless of which file
 * a bundle happens to concatenate last.
 */
body.money-route-scenario,
body.wm-route-income-drop {
  background: var(--wm-money-canvas, #f8fafc);
  color: var(--wm-money-ink);
}

.wm-scenario-attribution {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

/* Keep this compact and root-relative above the later per-scenario prose rules. */
.wm-scenario-attribution[data-scenario-attribution] > p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/*
 * WMA-117 D1: the editorial-policy link is the whole paragraph, not a link
 * inside a sentence, so 2.5.8's inline-link exception does not cover it and
 * it has to carry its own 24px target. Inline-block is what makes the box
 * obey `line-height` at all -- an inline anchor measures its font's content
 * box (19px here) no matter what the line box around it does.
 *
 * Deliberately no visual change: the paragraph's line box is ALREADY 24px
 * (0.9375rem x 1.6), so the anchor grows to exactly the line it was already
 * sitting on. Verify with a rect dump, not by eye, if this rule is touched.
 */
.wm-scenario-attribution[data-scenario-attribution] > p > a {
  display: inline-block;
  min-height: var(--wm-scenario-control-min, 24px);
  line-height: var(--wm-scenario-control-min, 24px);
}

/*
 * Shared scenario page header — see `renderScenarioPageHeader`.
 *
 * Everything visual about the header lives here and nowhere else: one type
 * scale, one accent, one gap rhythm. Per-scenario stylesheets are concatenated
 * after this file, so they must not restate these selectors; they only place
 * the header in their own grid.
 */
.wm-scenario-page-header {
  display: grid;
  gap: var(--wf-space-8);
  min-width: 0;
  max-width: 880px;
}

/*
 * WMA-117 D1: 24px, not 44px. This is a secondary way back out of the page
 * that sits above the title in a text block, not an action in the scenario's
 * own flow; a 44px box here reads as a button and pushes the H1 down on every
 * scenario. The floor is what it needs to clear.
 */
.wm-scenario-page-back {
  display: inline-flex;
  gap: var(--wf-space-8);
  align-items: center;
  min-height: var(--wm-scenario-control-min);
  width: fit-content;
  color: var(--wm-money-accent);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: var(--wm-scenario-text-sm-line);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}

.wm-scenario-page-back:hover,
.wm-scenario-page-back:focus-visible {
  text-decoration: underline;
}

.wm-scenario-page-eyebrow {
  margin: 0;
  color: var(--wm-money-accent);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wm-scenario-page-title {
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-title-xl-size);
  line-height: var(--wf-font-title-xl-line-height);
  font-weight: 800;
  letter-spacing: 0;
}

.wm-scenario-page-subhead {
  margin: 0;
  max-width: 640px;
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-scenario-page-disclaimer {
  margin: 0;
  color: var(--wm-money-muted);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

@media (max-width: 720px) {
  .wm-scenario-page-title {
    font-size: var(--wf-font-heading-lg-size);
    line-height: 36px;
  }
}

.wm-scenario-input-region {
  min-width: 0;
}

.wm-scenario-setup-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-space-24);
  width: 100%;
  padding: var(--wf-space-24);
  border: 1px solid rgba(188, 202, 192, 0.3);
  border-radius: var(--wm-card-radius);
  background: var(--wm-money-surface-soft);
}

.wm-scenario-setup-summary[hidden] {
  display: none;
}

.wm-scenario-setup-summary-copy {
  display: grid;
  gap: var(--wf-space-4);
  min-width: 0;
}

/*
 * WMA-117 D2: the 12px type floor is hard and has no "decorative" exemption,
 * so these four uppercase kickers — the ones WMA-88 argued were decorative —
 * come up to it with the canonical `-xs` pair rather than keeping their old
 * 10/15.
 */
.wm-scenario-setup-eyebrow,
.wm-scenario-option-path,
.wm-scenario-option-takeaway span,
.wm-scenario-ranking-slot-label {
  margin: 0;
  color: var(--wm-money-accent);
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.wm-scenario-setup-eyebrow {
  letter-spacing: 1px;
}

.wm-scenario-setup-title {
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-title-md-size);
  line-height: var(--wf-font-title-md-line-height);
  font-weight: 800;
}

.wm-scenario-setup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-8);
  padding-top: var(--wf-space-12);
}

.wm-scenario-setup-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-space-4);
  min-height: 28px;
  padding: 5px 13px;
  border: 1px solid rgba(188, 202, 192, 0.5);
  border-radius: var(--wf-radius-pill);
  background: var(--wm-money-chip);
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.wm-scenario-setup-edit {
  flex: 0 0 auto;
  min-height: var(--wm-scenario-control-height);
  border: 1px solid rgba(0, 105, 72, 0.1);
  border-radius: var(--wf-radius-pill);
  padding: 0 var(--wf-space-24);
  background: var(--wm-money-chip);
  color: var(--wm-money-accent);
  font: inherit;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 800;
  cursor: pointer;
}

.wm-scenario-progress {
  display: grid;
  gap: 18px;
  padding: 22px 28px 18px;
  border: 1px solid rgba(188, 202, 192, 0.34);
  border-radius: var(--wm-card-radius);
  background: var(--wf-color-background-surface);
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-scenario-progress-head {
  display: grid;
  gap: var(--wf-space-4);
}

.wm-scenario-progress-head h2,
.wm-scenario-progress-head p,
.wm-scenario-progress-status {
  margin: 0;
}

.wm-scenario-progress-head h2 {
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-title-xs-size);
  line-height: var(--wf-font-title-xs-line-height);
  font-weight: 800;
}

.wm-scenario-progress-head p {
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

.wm-scenario-progress-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wf-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-scenario-progress-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 46px;
  padding: var(--wf-space-8) var(--wf-space-12);
  border: 1px solid rgba(188, 202, 192, 0.46);
  border-radius: var(--wf-radius-pill);
  background: var(--wf-color-background-surface);
  color: var(--wm-money-copy);
  transition: color 240ms ease, background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.wm-scenario-progress-step:not(:last-child)::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  width: 12px;
  height: 1px;
  background: rgba(61, 74, 66, 0.28);
  content: "";
  transition: background-color 240ms ease;
}

.wm-scenario-progress-step.is-complete:not(:last-child)::after {
  background: rgba(0, 105, 72, 0.5);
}

.wm-scenario-progress-step.is-active {
  border-color: var(--wm-money-accent);
  color: var(--wm-money-accent);
  box-shadow: 0 0 0 3px rgba(0, 105, 72, 0.06);
}

.wm-scenario-progress-step.is-complete {
  border-color: rgba(0, 105, 72, 0.18);
  background: var(--wm-money-surface-soft);
  color: var(--wm-money-accent);
}

.wm-scenario-progress-step.is-disabled {
  color: #475569;
}

.wm-scenario-progress-marker {
  display: inline-grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--wf-radius-pill);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 1;
  font-weight: 800;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

.wm-scenario-progress-step.is-complete .wm-scenario-progress-marker,
.wm-scenario-progress-step.is-active .wm-scenario-progress-marker {
  background: var(--wm-money-accent);
  color: var(--wf-color-text-inverse);
}

.wm-scenario-progress-step.is-complete .wm-scenario-progress-marker {
  animation: wm-progress-marker-pop 320ms ease;
}

@keyframes wm-progress-marker-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

.wm-scenario-progress-check,
.wm-scenario-progress-lock,
.wm-scenario-progress-step.is-complete .wm-scenario-progress-number,
.wm-scenario-progress-step.is-disabled .wm-scenario-progress-number {
  display: none;
}

.wm-scenario-progress-step.is-complete .wm-scenario-progress-check,
.wm-scenario-progress-step.is-disabled .wm-scenario-progress-lock {
  display: inline;
}

.wm-scenario-progress-label {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: inherit;
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  font-weight: 800;
}

.wm-scenario-progress-label span {
  color: var(--wm-money-muted);
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 700;
}

.wm-scenario-progress-status {
  min-height: 28px;
  padding: var(--wf-space-6) 10px;
  border-radius: var(--wf-radius-sm);
  background: rgba(0, 105, 72, 0.08);
  color: var(--wm-money-accent);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  font-weight: 800;
}

.wm-scenario-prerun {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  max-width: 720px;
  padding: var(--wf-space-24);
  border: 1px solid rgba(188, 202, 192, 0.34);
  border-radius: var(--wm-card-radius);
  background: var(--wm-money-surface-soft);
}

.wm-scenario-prerun-icon {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--wf-radius-pill);
  background: var(--wm-money-accent);
  color: var(--wf-color-text-inverse);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 1;
  font-weight: 800;
}

.wm-scenario-prerun h2,
.wm-scenario-prerun p {
  margin: 0;
}

.wm-scenario-prerun h2 {
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-title-xs-size);
  line-height: var(--wf-font-title-xs-line-height);
  font-weight: 800;
}

.wm-scenario-prerun p {
  margin-top: var(--wf-space-6);
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.wm-scenario-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-space-4);
  width: fit-content;
  padding: var(--wf-space-4);
  border-radius: var(--wf-radius-pill);
  background: var(--wm-money-chip);
}

.wm-scenario-tab {
  min-height: var(--wm-scenario-control-height-compact);
  border: 0;
  border-radius: var(--wf-radius-pill);
  padding: 0 var(--wf-space-32);
  background: transparent;
  color: var(--wm-money-copy);
  font: inherit;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 700;
  cursor: pointer;
}

.wm-scenario-tab.is-active {
  background: var(--wf-color-background-surface);
  color: var(--wm-money-accent);
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-scenario-tab.is-disabled,
.wm-scenario-tab[disabled] {
  color: #475569;
  cursor: not-allowed;
}

.wm-scenario-tab-panel {
  min-width: 0;
}

.wm-scenario-tab-panel[hidden] {
  display: none;
}

.wm-scenario-compare {
  display: grid;
  gap: var(--wf-space-40);
  padding-top: var(--wf-space-16);
}

.wm-scenario-compare-head {
  display: grid;
  gap: var(--wf-space-12);
  max-width: 900px;
}

.wm-scenario-compare-head h2 {
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-xl-size);
  line-height: 40px;
  font-weight: 800;
}

.wm-scenario-compare-head p {
  margin: 0;
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 29px;
}

.wm-scenario-compare-note {
  color: var(--wm-money-muted);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  font-style: italic;
}

.wm-scenario-option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wf-space-24);
}

.wm-scenario-option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-16);
  min-width: 0;
  border: 1px solid rgba(188, 202, 192, 0.3);
  border-radius: var(--wm-card-radius);
  padding: var(--wf-space-24);
  background: var(--wf-color-background-surface);
  box-shadow: var(--wm-money-shadow-hairline);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.wm-scenario-option-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 105, 72, 0.28);
  box-shadow: 0 14px 36px rgba(21, 27, 42, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .wm-scenario-progress-step,
  .wm-scenario-progress-step::after,
  .wm-scenario-progress-marker,
  .wm-scenario-option-card {
    transition: none;
    animation: none;
  }

  .wm-scenario-option-card:hover {
    transform: none;
  }
}

.wm-scenario-option-card.is-ranked {
  border-color: var(--wm-money-accent);
  box-shadow: 0 0 0 4px rgba(0, 105, 72, 0.05), var(--wm-money-shadow-hairline);
}

.wm-scenario-option-card.is-dragging {
  opacity: 0.58;
}

.wm-scenario-option-drag {
  position: absolute;
  top: 20px;
  right: 18px;
  display: grid;
  grid-template-columns: repeat(2, 3px);
  gap: 3px;
  color: var(--wm-money-muted);
}

.wm-scenario-option-drag span {
  width: 3px;
  height: 3px;
  border-radius: var(--wf-radius-pill);
  background: currentColor;
}

.wm-scenario-option-head,
.wm-scenario-option-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wf-space-12);
}

.wm-scenario-option-hero-chip,
.wm-scenario-option-ranked-badge {
  display: inline-flex;
  width: fit-content;
  min-height: var(--wm-scenario-control-min);
  align-items: center;
  border-radius: var(--wf-radius-pill);
  padding: 3px 9px;
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 800;
}

.wm-scenario-option-hero-chip {
  border: 1px solid rgba(0, 105, 72, 0.18);
  background: rgba(0, 133, 93, 0.1);
  color: var(--wm-money-accent);
}

/* Tones for chips whose text is itself a caution or failure verdict — the
   green default under a word like "Stretched" contradicts what it says. */
.wm-scenario-option-hero-chip.is-warn {
  border-color: var(--wf-color-status-warning-border, rgba(122, 74, 0, 0.25));
  background: var(--wf-color-status-warning-bg, #fff4e0);
  color: var(--wf-color-status-warning-text, #7a4a00);
}

.wm-scenario-option-hero-chip.is-problem {
  border-color: rgba(159, 18, 57, 0.2);
  background: var(--wf-color-status-error-bg, #fff1f2);
  color: var(--wm-money-danger, #9f1239);
}

.wm-scenario-option-ranked-badge {
  margin-right: var(--wf-space-20);
  background: var(--wm-money-accent);
  color: var(--wf-color-text-inverse);
}

.wm-scenario-option-title {
  margin: var(--wf-space-8) 0 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-sm-size);
  line-height: var(--wf-font-heading-sm-line-height);
  font-weight: 800;
}

.wm-scenario-option-subtitle {
  margin: 0;
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
}

.wm-scenario-option-takeaway {
  display: grid;
  gap: var(--wf-space-4);
  padding: var(--wf-space-12);
  border-radius: var(--wm-card-radius);
  background: var(--wm-money-surface-soft);
}

.wm-scenario-option-fit-notes {
  display: grid;
  gap: 10px;
}

.wm-scenario-option-fit-note {
  display: grid;
  gap: 3px;
}

.wm-scenario-option-fit-note span {
  color: var(--wm-money-muted);
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 800;
  text-transform: uppercase;
}

.wm-scenario-option-fit-note p {
  margin: 0;
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

.wm-scenario-option-takeaway p {
  margin: 0;
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 20px;
  font-style: italic;
}

.wm-scenario-option-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wf-space-12);
  padding-top: var(--wf-space-16);
  border-top: 1px solid var(--wm-money-border-muted);
}

.wm-scenario-option-metric {
  display: grid;
  gap: var(--wf-space-2);
  min-width: 0;
}

.wm-scenario-option-metric span {
  color: var(--wm-money-muted);
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 800;
  text-transform: uppercase;
}

.wm-scenario-option-metric strong {
  color: var(--wm-money-ink);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 24px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.wm-scenario-option-metric strong.is-positive {
  color: var(--wm-money-accent);
}

.wm-scenario-option-metric strong.is-problem {
  color: var(--wm-money-danger);
}

.wm-scenario-option-note {
  margin: 0;
  padding: var(--wf-space-12);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-color-status-error-bg);
  color: var(--wm-money-danger);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

/* For notes that define a metric rather than warn about it. */
.wm-scenario-option-note.is-neutral {
  background: var(--wm-money-surface-soft, #f1f3ff);
  color: var(--wm-money-muted, #5c6b60);
}

.wm-scenario-option-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: var(--wf-space-8);
}

.wm-scenario-option-rank,
.wm-scenario-option-breakdown {
  min-height: var(--wm-scenario-control-height-compact);
  border-radius: var(--wf-radius-pill);
  padding: 0 var(--wf-space-16);
  font: inherit;
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  font-weight: 800;
  cursor: pointer;
}

.wm-scenario-option-rank {
  border: 1px solid var(--wm-money-accent);
  background: transparent;
  color: var(--wm-money-accent);
}

.wm-scenario-option-card.is-ranked .wm-scenario-option-rank {
  background: var(--wm-money-accent);
  color: var(--wf-color-text-inverse);
}

.wm-scenario-option-breakdown {
  border: 0;
  background: transparent;
  color: var(--wm-money-accent);
}

.wm-scenario-ranking-board {
  display: grid;
  gap: var(--wf-space-24);
  padding: var(--wf-space-32);
  border: 1px solid rgba(188, 202, 192, 0.3);
  border-radius: var(--wm-card-radius);
  background: var(--wm-money-surface-soft);
}

.wm-scenario-ranking-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wm-scenario-ranking-marker {
  width: 14px;
  height: 4px;
  border-radius: var(--wf-radius-pill);
  background: var(--wm-money-accent-chart);
}

.wm-scenario-ranking-head h3 {
  margin: 0;
  color: var(--wm-money-ink);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 24px;
  font-weight: 800;
}

.wm-scenario-ranking-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wf-space-24);
}

.wm-scenario-ranking-slot {
  display: grid;
  gap: var(--wf-space-12);
  min-width: 0;
}

.wm-scenario-ranking-slot.is-drag-over .wm-scenario-ranking-empty,
.wm-scenario-ranking-slot.is-drag-over .wm-scenario-ranking-pill {
  border-color: var(--wm-money-accent);
  box-shadow: 0 0 0 4px rgba(0, 105, 72, 0.07);
}

.wm-scenario-ranking-empty,
.wm-scenario-ranking-pill {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 108px;
  border: 2px dashed rgba(188, 202, 192, 0.7);
  border-radius: var(--wm-card-radius);
  padding: 18px;
  background: rgba(241, 243, 255, 0.4);
}

.wm-scenario-ranking-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--wm-money-muted);
  font: inherit;
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  font-weight: 700;
  cursor: pointer;
}

.wm-scenario-ranking-pill {
  display: flex;
  align-items: center;
  gap: var(--wf-space-16);
  border-style: solid;
  border-color: var(--wm-money-accent);
  background: var(--wf-color-background-surface);
}

.wm-scenario-ranking-pill-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--wf-radius-pill);
  background: var(--wm-money-accent-wash);
  color: var(--wm-money-accent-deep);
  font-family: var(--wf-font-mono);
  font-weight: 800;
}

.wm-scenario-ranking-pill-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.wm-scenario-ranking-pill-copy strong,
.wm-scenario-ranking-pill-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wm-scenario-ranking-pill-copy strong {
  color: var(--wm-money-ink);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
}

.wm-scenario-ranking-pill-copy span {
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
}

.wm-scenario-ranking-remove {
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--wf-radius-pill);
  /* Was a raw 32px square — the last raw control height in this file, and the
     only interactive one Lane C left below D1's 44px. Raised rather than given
     a 32px token, because a blessed step between the 24px floor and 44px is a
     step every later lane would reach for instead of raising its own chips.
     The pill it sits in is 108px tall, so it holds 44 comfortably. */
  width: var(--wm-scenario-control-height);
  height: var(--wm-scenario-control-height);
  background: transparent;
  color: var(--wm-money-muted);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 1;
  cursor: pointer;
}

.wm-scenario-reflection {
  display: grid;
  gap: var(--wf-space-16);
  padding-top: var(--wf-space-32);
  border-top: 1px solid rgba(188, 202, 192, 0.3);
}

.wm-scenario-reflection h3 {
  margin: 0;
  color: var(--wm-money-ink);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
}

.wm-scenario-reflection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-12);
}

/* WMA-117 D1: 36px -> 44px. A reflection chip is a finger control in the main
   compare flow, so it takes the default control height, not the floor. */
.wm-scenario-reflection-chip {
  min-height: var(--wm-scenario-control-height);
  border: 1px solid rgba(188, 202, 192, 0.5);
  border-radius: var(--wf-radius-pill);
  padding: 0 var(--wf-space-20);
  background: var(--wf-color-background-surface);
  color: var(--wm-money-ink);
  font: inherit;
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  font-weight: 700;
  cursor: pointer;
}

.wm-scenario-reflection-chip.is-selected {
  border-color: var(--wm-money-accent);
  background: var(--wm-money-accent);
  color: var(--wf-color-text-inverse);
}

.wm-scenario-compare-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-space-24);
  padding: var(--wf-space-32);
  border-radius: var(--wm-card-radius);
  background: var(--wm-money-chip);
}

.wm-scenario-compare-cta-copy {
  display: grid;
  gap: var(--wf-space-4);
}

.wm-scenario-compare-cta-copy p {
  margin: 0;
  color: var(--wm-money-ink);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 24px;
  font-weight: 800;
}

.wm-scenario-compare-cta-copy span {
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
}

.wm-scenario-compare-cta-actions {
  display: flex;
  align-items: center;
  gap: var(--wf-space-16);
}

.wm-scenario-save-ranking,
.wm-scenario-plan-cta {
  min-height: var(--wf-control-height-2xl);
  border: 0;
  border-radius: var(--wf-radius-pill);
  padding: 0 28px;
  font: inherit;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 800;
  cursor: pointer;
}

.wm-scenario-save-ranking {
  background: var(--wm-money-surface-soft);
  color: var(--wm-money-accent);
}

.wm-scenario-plan-cta {
  background: var(--wm-money-accent);
  color: var(--wf-color-text-inverse);
  box-shadow: var(--wm-money-accent-shadow-soft);
}

.wm-scenario-plan-cta[disabled] {
  cursor: not-allowed;
  opacity: 0.56;
  box-shadow: none;
}

.wm-scenario-plan-prompt {
  margin: var(--wf-space-8) 0 0;
  color: var(--wm-money-muted);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
}

.wm-scenario-plan-empty {
  display: grid;
  gap: var(--wf-space-12);
  max-width: 560px;
  padding: var(--wf-space-48);
  border-radius: var(--wm-card-radius);
  background: var(--wm-money-surface-soft);
}

.wm-scenario-plan-empty h2,
.wm-scenario-plan-empty p {
  margin: 0;
}

.wm-scenario-plan-empty h2 {
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-title-lg-size);
  line-height: var(--wf-font-title-lg-line-height);
}

.wm-scenario-plan-empty p {
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-scenario-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--wf-space-24);
}

.wm-scenario-modal-overlay[hidden] {
  display: none;
}

.wm-scenario-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 27, 42, 0.48);
}

.wm-scenario-modal {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--wf-space-16);
  width: min(480px, 100%);
  border-radius: var(--wm-card-radius);
  padding: 28px;
  background: var(--wf-color-background-surface);
  box-shadow: var(--wf-shadow-overlay);
}

.wm-scenario-modal h2,
.wm-scenario-modal p {
  margin: 0;
}

.wm-scenario-modal h2 {
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-md-size);
  line-height: 32px;
}

.wm-scenario-modal p {
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-lg-size);
  line-height: 24px;
}

.wm-scenario-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wf-space-12);
  padding-top: var(--wf-space-8);
}

.wm-scenario-modal-button {
  min-height: var(--wm-scenario-control-height);
  border-radius: var(--wf-radius-pill);
  padding: 0 var(--wf-space-20);
  font: inherit;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 800;
  cursor: pointer;
}

.wm-scenario-modal-button.is-secondary {
  border: 1px solid var(--wm-money-border-medium);
  background: var(--wf-color-background-surface);
  color: var(--wm-money-copy);
}

.wm-scenario-modal-button.is-primary {
  border: 1px solid var(--wm-money-accent);
  background: var(--wm-money-accent);
  color: var(--wf-color-text-inverse);
}

.wm-scenario-rank-option-list {
  display: grid;
  gap: 10px;
}

/*
 * The rank-selector modal stacks its slot choices vertically, so its actions
 * must stack too (full-width Cancel below the list) instead of using the
 * default flex row, which rendered Cancel as a tall pill beside the choices.
 */
.wm-scenario-modal-overlay.is-rank-selector .wm-scenario-modal-actions {
  display: grid;
  gap: var(--wf-space-12);
  /* The base actions row justifies flex-end for OK/Cancel pairs; on a grid that
     packs the auto-width column right. Full-width slots read as a list instead. */
  grid-template-columns: 1fr;
}

.wm-scenario-rank-choice {
  min-height: var(--wf-control-height-xl);
  border: 1px solid var(--wm-money-border-medium);
  border-radius: var(--wf-radius-md);
  padding: 0 var(--wf-space-16);
  background: var(--wf-color-background-surface);
  color: var(--wm-money-ink);
  font: inherit;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.wm-scenario-rank-choice:hover,
.wm-scenario-rank-choice:focus-visible {
  border-color: var(--wm-money-accent);
}

/*
 * The shell's focus ring — WMA-88's shell half.
 *
 * One treatment for every control this file owns. The five selectors at the
 * end of the list had no `:focus-visible` rule at all and were falling back to
 * Chrome's UA default (`1px auto rgb(0, 95, 204)`) — thinner and off-brand
 * against the 2px brand ring the marketing nav and the scenario tabs directly
 * above them draw. Visible either way, so not a 2.4.7 failure; just the page's
 * own controls indicated worse than its chrome.
 *
 * Ring and offset both come from the contract's focus set (§3.5). Lane C had
 * to spell this rule out by hand because the colour token then aliased the
 * action-fill green and the offset token was 2px where the chrome draws 3px;
 * W9 Lane G corrected both, so the tokens now say what this rule draws.
 */
.wm-scenario-setup-edit:focus-visible,
.wm-scenario-tab:focus-visible,
.wm-scenario-option-rank:focus-visible,
.wm-scenario-option-breakdown:focus-visible,
.wm-scenario-ranking-empty:focus-visible,
.wm-scenario-ranking-remove:focus-visible,
.wm-scenario-reflection-chip:focus-visible,
.wm-scenario-save-ranking:focus-visible,
.wm-scenario-plan-cta:focus-visible,
.wm-scenario-modal-button:focus-visible,
.wm-scenario-page-back:focus-visible,
.wm-scenario-breadcrumb-link:focus-visible,
.wm-scenario-rank-choice:focus-visible,
.wm-scenario-cancel-edit:focus-visible,
.wm-related-scenario-card:focus-visible {
  outline: var(--wm-scenario-focus-ring);
  outline-offset: var(--wm-scenario-focus-ring-offset);
}

@media (max-width: 1040px) {
  .wm-scenario-option-grid {
    grid-template-columns: 1fr;
  }

  .wm-scenario-ranking-slots {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .wm-scenario-setup-summary {
    display: grid;
    gap: var(--wf-space-16);
    padding: var(--wf-space-24);
  }

  .wm-scenario-setup-title {
    font-size: var(--wf-font-heading-md-size);
    line-height: 32px;
  }

  .wm-scenario-setup-edit {
    width: 100%;
  }

  .wm-scenario-progress {
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .wm-scenario-progress-head h2 {
    font-size: var(--wm-scenario-text-sm-size);
    line-height: var(--wm-scenario-text-sm-line);
  }

  .wm-scenario-progress-head p,
  .wm-scenario-progress-status {
    display: none;
  }

  .wm-scenario-progress-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wf-space-8);
  }

  .wm-scenario-progress-step {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-height: 74px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
  }

  .wm-scenario-progress-step::before {
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: rgba(61, 74, 66, 0.18);
    content: "";
    transform: translateX(14px);
  }

  .wm-scenario-progress-step:last-child::before,
  .wm-scenario-progress-step:not(:last-child)::after {
    display: none;
  }

  .wm-scenario-progress-marker {
    width: 28px;
    height: 28px;
    background: var(--wf-color-background-surface);
  }

  .wm-scenario-progress-label,
  .wm-scenario-progress-label span {
    font-size: var(--wm-scenario-text-min-size);
    line-height: var(--wm-scenario-text-xs-line);
  }

  .wm-scenario-prerun {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: var(--wf-space-20);
  }

  .wm-scenario-prerun h2 {
    font-size: var(--wf-font-heading-sm-size);
    line-height: 26px;
  }

  .wm-scenario-tabs {
    width: 100%;
  }

  .wm-scenario-tab {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--wf-space-8);
  }

  .wm-scenario-compare {
    gap: var(--wf-space-24);
    /* Sticky travel for the pinned action bar: it stays available for the whole
       comparison and comes to rest clear of the reflection block. Sized for the
       ~74px bar below, not the 178px slab it replaced. */
    padding-bottom: 96px;
  }

  .wm-scenario-compare-head h2 {
    font-size: var(--wf-font-heading-xl-size);
    line-height: 40px;
  }

  .wm-scenario-compare-head p {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 23px;
  }

  .wm-scenario-option-card {
    padding: var(--wf-space-24);
  }

  .wm-scenario-option-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .wm-scenario-ranking-board {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .wm-scenario-ranking-slots {
    gap: 10px;
  }

  .wm-scenario-ranking-empty,
  .wm-scenario-ranking-pill {
    min-height: 64px;
    border-radius: 24px;
  }

  .wm-scenario-reflection {
    padding-top: var(--wf-space-8);
    border-top: 0;
  }

  .wm-scenario-reflection h3 {
    font-size: var(--wf-font-heading-sm-size);
    line-height: var(--wf-font-heading-sm-line-height);
  }

  /*
   * Mobile ranked-action bar.
   *
   * It used to float 92px off the bottom edge as a 178px slab with two stacked
   * full-width buttons, which parked it across the middle of whichever option
   * card was on screen and hid that card's metrics. It now sits on the bottom
   * edge as a single-row action bar roughly half as tall, and `.wm-scenario-compare`
   * reserves that height so the last card clears it.
   */
  .wm-scenario-compare-cta {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: grid;
    padding: var(--wf-space-12) 14px calc(var(--wf-space-12) + env(safe-area-inset-bottom));
    border: 1px solid rgba(188, 202, 192, 0.35);
    border-radius: 24px 24px 0 0;
    /* Near-opaque so option cards scrolling underneath don't bleed through and
       read as an overlap. */
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -10px 40px rgba(21, 27, 42, 0.14);
    backdrop-filter: blur(8px);
  }

  /*
   * Before anything is ranked the bar can do nothing — its primary action is
   * disabled — so pinning it only costs the reader a covered result card. In
   * that state it stays in flow at the end of the comparison instead.
   */
  .wm-scenario-compare-cta:has(.wm-scenario-plan-cta[disabled]) {
    position: static;
    border-radius: 24px;
    box-shadow: none;
  }

  .wm-scenario-compare-cta-copy {
    display: none;
  }

  .wm-scenario-compare-cta-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--wf-space-8);
  }

  .wm-scenario-plan-cta {
    order: -1;
  }

  .wm-scenario-save-ranking,
  .wm-scenario-plan-cta {
    width: 100%;
    min-height: var(--wf-control-height-xl);
    padding-inline: var(--wf-space-12);
    font-size: var(--wm-scenario-text-sm-size);
    line-height: 17px;
  }

  .wm-scenario-plan-prompt {
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
  }

  /* Empty once a rank exists — do not leave a blank line in the bar. */
  .wm-scenario-plan-prompt:empty {
    display: none;
  }

  .wm-scenario-modal-overlay.is-rank-selector {
    align-items: end;
    padding: var(--wf-space-16);
  }

  .wm-scenario-modal-overlay.is-rank-selector .wm-scenario-modal {
    width: 100%;
    border-radius: 28px;
  }

  /*
   * WMA-90. This switched to `display: grid` to stack the buttons on a phone
   * but named no columns, so the single auto-width column inherited the base
   * rule's `justify-content: flex-end` and packed the full-width-looking
   * buttons right — a ~27px dead gutter down the left of the rerun
   * confirmation, under a left-aligned title. Same cause and same fix as the
   * rank-selector variant above.
   */
  .wm-scenario-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Cross-links between the live scenario pages. Rendered above the footer so a
   visitor who landed on one calculator from search has a next step. */
.wm-related-scenarios {
  padding: 56px var(--wf-space-24) var(--wf-space-8);
  background: var(--wm-money-canvas);
}

.wm-related-scenarios-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.wm-related-scenarios-heading {
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-lg-size);
  line-height: var(--wf-font-heading-lg-line-height);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.wm-related-scenarios-body {
  margin: var(--wf-space-8) 0 0;
  max-width: 62ch;
  color: var(--wm-money-muted);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 24px;
}

.wm-related-scenarios-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--wf-space-16);
  margin: var(--wf-space-24) 0 0;
  padding: 0;
  list-style: none;
}

.wm-related-scenario-card {
  display: grid;
  gap: var(--wf-space-6);
  height: 100%;
  padding: var(--wf-space-24);
  border: 1px solid rgba(188, 202, 192, 0.3);
  border-radius: var(--wm-card-radius);
  background: var(--wm-money-surface-soft);
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.wm-related-scenario-card:hover,
.wm-related-scenario-card:focus-visible {
  border-color: var(--wm-money-accent);
  transform: translateY(-2px);
}

.wm-related-scenario-name {
  color: var(--wm-money-accent);
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-related-scenario-question {
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  /* Was 19px, the only 19px rule in apps/ or packages/. Moved to the step
     below rather than growing the scale by 1px for one card title. */
  font-size: var(--wf-font-body-lg-size);
  line-height: 26px;
  font-weight: 700;
}

.wm-related-scenario-summary {
  color: var(--wm-money-muted);
  font-size: var(--wm-scenario-text-lg-size);
  line-height: var(--wm-scenario-text-lg-line);
}

@media (prefers-reduced-motion: reduce) {
  .wm-related-scenario-card {
    transition: none;
  }

  .wm-related-scenario-card:hover,
  .wm-related-scenario-card:focus-visible {
    transform: none;
  }
}

.wm-scenario-breadcrumbs {
  margin-bottom: var(--wf-space-4);
}

.wm-scenario-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wf-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--wf-font-body);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: var(--wm-scenario-text-sm-line);
}

.wm-scenario-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--wf-space-6);
}

.wm-scenario-breadcrumb-item + .wm-scenario-breadcrumb-item::before {
  content: '\203A';
  color: var(--wm-money-muted);
}

/* WMA-117 D1: breadcrumbs are secondary navigation in a text row — the 24px
   floor, for the same reason as `.wm-scenario-page-back` above. */
.wm-scenario-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--wm-scenario-control-min);
  color: var(--wm-money-muted);
  font-weight: 600;
  text-decoration: none;
}

.wm-scenario-breadcrumb-link:hover,
.wm-scenario-breadcrumb-link:focus-visible {
  color: var(--wm-money-accent);
  text-decoration: underline;
}

.wm-scenario-breadcrumb-current {
  color: var(--wm-money-ink);
  font-weight: 700;
}

/*
 * Shared "Share this result" control — see `renderScenarioShareControls`.
 *
 * The section is rendered with the `hidden` attribute until a run produced a
 * result, so the `display` below must carry its own `[hidden]` override or the
 * author rule would outrank the UA default and the buttons would show on a
 * pristine page (the defect scripts/guardrails/scenario-hidden-css-guard.mjs
 * exists to catch).
 */
.wm-scenario-share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wf-space-12) var(--wf-space-20);
  margin-top: var(--wf-space-20);
  padding: var(--wf-space-16) var(--wf-space-20);
  border: 1px solid var(--wm-money-border-medium);
  border-radius: var(--wf-radius-lg);
  background: var(--wf-color-background-surface, #ffffff);
}

.wm-scenario-share[hidden] {
  display: none;
}

.wm-scenario-share-copy {
  min-width: 0;
}

.wm-scenario-share-heading {
  margin: 0;
  color: var(--wm-money-ink);
  font-size: var(--wm-scenario-text-lg-size);
  line-height: 20px;
  font-weight: 700;
}

.wm-scenario-share-description {
  margin: var(--wf-space-4) 0 0;
  color: var(--wm-money-muted);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: var(--wm-scenario-text-sm-line);
}

.wm-scenario-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-8);
}

.wm-scenario-share-button[aria-busy='true'] {
  cursor: progress;
}

/* Grid row of its own so a status line never reflows the buttons beside it. */
.wm-scenario-share-status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 18px;
  color: var(--wm-money-accent);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: var(--wm-scenario-text-sm-line);
  font-weight: 600;
}

.wm-scenario-share-status.is-error {
  color: var(--wm-money-danger);
}

@media (max-width: 640px) {
  .wm-scenario-share {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Copy confirmation, same shape and timing as the saved-plan toast in
 * lib/plans/styles.css. It is `aria-hidden` in the DOM: the control's own
 * status line is the live region, so this is purely the visible half.
 */
.wm-scenario-share-toast {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  display: inline-flex;
  align-items: center;
  gap: var(--wf-space-12);
  max-width: min(440px, calc(100vw - 32px));
  padding: 14px 18px;
  border-radius: var(--wf-radius-lg);
  background: #005137;
  color: #ffffff;
  box-shadow: 0 18px 40px -12px rgba(0, 81, 55, 0.55);
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.wm-scenario-share-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.wm-scenario-share-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: var(--wf-radius-pill);
  background: rgba(137, 245, 231, 0.25);
}

.wm-scenario-share-toast-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #89f5e7;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wm-scenario-share-toast-message {
  flex: 1 1 auto;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .wm-scenario-share-toast {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }
}

/* =====================================================================
 * Decision deck — see `renderScenarioDecisionDeck`.
 *
 * The block that states the decision after a run and lays the comparable
 * paths side by side. It never marks a winner, so there is deliberately no
 * "best value" treatment here: every figure is drawn in the same mint and
 * the only colour that departs from it is the amber caution, which reports
 * a path's own verdict rather than its rank.
 *
 * NAMING: the inner class names are the design mockup's own (`deck-answer`,
 * `choice`, `choice-figure`, `ctable`, `radio`…) so the built design and the
 * shipped DOM read the same. They are bare enough to collide in a global
 * stylesheet, so every rule below is scoped under `.wm-scenario-deck` and
 * nothing here matches outside the component. Only the root carries the
 * shell's `wm-scenario-` prefix. Per-scenario stylesheets are concatenated
 * after this file and must not restate these selectors.
 *
 * CONTRAST — checked when the design was made, preserve these pairings:
 *   • mint #85f8c4 and #ffffff on the #0d5548 path card (figures, names)
 *   • amber #fcd34d for a caution path on that same card (~6:1)
 *   • #b8d8ce for supporting copy on the #04322b deck ground
 * The mint is a NEW LITERAL, not `--wm-money-accent-soft`: that token
 * resolves to #a7f3d0, a different green, so reaching for it would silently
 * change the colour the ratios above were measured against. Same for the
 * deck grounds (#04322b, #0d5548), the amber, and the muted greens
 * (#9ec9bd, #c4ded6, #e6f5f0) — no existing token resolves to any of them.
 * The white side panel, by contrast, uses the shell's own tokens throughout.
 * ===================================================================== */
.wm-scenario-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  border: 1px solid #0d5548;
  border-radius: 24px;
  background: #04322b;
  overflow: hidden;
}

/* A page may render the deck hidden until a run has produced a result, and an
   author `display` outranks the UA `[hidden] { display: none }` default — the
   same hazard scripts/guardrails/scenario-hidden-css-guard.test.mjs exists to
   catch on the per-scenario stylesheets. */
.wm-scenario-deck[hidden] {
  display: none;
}

.wm-scenario-deck .deck-answer {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 26px 28px;
  background: #04322b;
}

.wm-scenario-deck .decide-head {
  display: grid;
  gap: var(--wf-space-6);
}

.wm-scenario-deck .decide-q {
  margin: 0;
  color: #ffffff;
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-title-xs-size);
  /* Not the step's canonical 28px line: the deck sets its questions looser. */
  line-height: 30px;
  font-weight: 800;
}

.wm-scenario-deck .decide-sub {
  margin: 0;
  color: #b8d8ce;
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

/* The one field that accepts caller markup: `<b>` around the figures it names. */
.wm-scenario-deck .decide-sub b {
  color: #85f8c4;
  font-family: var(--wf-font-mono);
  font-weight: 700;
}

/* --- the choice columns (desktop) ---------------------------------- */
.wm-scenario-deck .choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wf-space-16);
}

.wm-scenario-deck .choice-grid.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Four paths will not fit in a row at this width, so they wrap to 2x2. */
.wm-scenario-deck .choice-grid.is-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--wf-space-12);
}

/*
 * Four paths cost a second row, and that row pushed the tab strip below the
 * fold on a 1440x900 desktop — the deck became the only thing on the first
 * screen. These rules claw back about 90px, and only in the four-path case:
 * two and three paths sit in one row and are left exactly as they are.
 *
 * Nothing is removed or truncated. The saving comes from the two-up columns
 * being wide enough (~390px) to set the detail rows side by side instead of
 * stacked, plus a slightly tighter box around the same content.
 */
.wm-scenario-deck .choice-grid.is-four .choice {
  gap: var(--wf-space-6);
  padding: var(--wf-space-12);
}

.wm-scenario-deck .choice-grid.is-four .choice-mini {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
}

/* The last of the ~90px: a shallower answer block and a slightly smaller
   figure, both only where four paths forced the second row. */
.wm-scenario-deck.is-four-up .deck-answer {
  padding-block: var(--wf-space-20);
}

.wm-scenario-deck.is-four-up .choice-figure {
  font-size: var(--wf-font-heading-md-size);
  line-height: var(--wf-font-heading-md-line-height);
}

/*
 * Column cards are flex, not grid-with-align-content-start, and the pick
 * control carries `margin-top: auto`. The criterion, name, figure and detail
 * rows are all fixed height, but the meaning sentence is not — one path saying
 * "Clears it today" beside one saying "Works on paper, but one surprise breaks
 * the month" put the two buttons on different lines. Packing to the top left
 * the slack under the button; pushing the button down puts the slack above it,
 * so every column's control lands on the same line however long the sentences
 * above it run. The cards are already equal height: they are grid items in
 * .choice-grid, which stretches them.
 */
.wm-scenario-deck .choice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--wf-space-8);
  min-width: 0;
  padding: var(--wf-space-16);
  border: 1px solid rgba(133, 248, 196, 0.22);
  border-radius: var(--wf-radius-lg);
  background: #0d5548;
}

/* Three and four narrow columns need a tighter interior than the 2-up default. */
.wm-scenario-deck .choice.is-tight {
  gap: var(--wf-space-6);
  padding: 14px;
}

.wm-scenario-deck .choice-crit {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid rgba(133, 248, 196, 0.34);
  border-radius: var(--wf-radius-pill);
  background: rgba(133, 248, 196, 0.16);
  color: #85f8c4;
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 800;
}

/* Holds the row open when a sibling path has a criterion and this one does not. */
.wm-scenario-deck .choice-crit.is-empty {
  visibility: hidden;
}

.wm-scenario-deck .choice-name {
  margin: 0;
  color: #ffffff;
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: var(--wm-scenario-text-2xl-line);
  font-weight: 800;
}

.wm-scenario-deck .choice-figrow {
  display: flex;
  align-items: baseline;
  gap: var(--wf-space-8);
  flex-wrap: wrap;
}

.wm-scenario-deck .choice-figure {
  margin: 0;
  color: #85f8c4;
  font-family: var(--wf-font-mono);
  font-size: var(--wf-font-title-sm-size);
  line-height: var(--wf-font-title-sm-line-height);
  font-weight: 700;
}

.wm-scenario-deck .choice-figrow span {
  color: #9ec9bd;
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wm-scenario-deck .choice-mini {
  display: grid;
  gap: 3px;
  padding-top: var(--wf-space-2);
}

.wm-scenario-deck .choice-mini div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wf-space-8);
  color: #9ec9bd;
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

.wm-scenario-deck .choice-mini b {
  color: #e6f5f0;
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xs-size);
  font-weight: 700;
}

.wm-scenario-deck .choice-mean {
  margin: 0;
  color: #c4ded6;
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

.wm-scenario-deck .choice-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: var(--wm-scenario-control-height-compact);
  /* auto, not a fixed gap: this is what lines the buttons up across columns. */
  margin-top: auto;
  padding-top: var(--wf-space-2);
  padding: 0 14px;
  border: 1px solid #ffffff;
  border-radius: var(--wf-radius-pill);
  background: #ffffff;
  color: #04322b;
  font: inherit;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 800;
  cursor: pointer;
}

/* A path whose OWN verdict is a caution must not wear the same mint as a
   healthy one; #fcd34d on the #0d5548 card is ~6:1, so it stays readable. */
.wm-scenario-deck .choice.is-warn .choice-figure {
  color: #fcd34d;
}

/*
 * #fde68a, not the #fcd34d used for the figure.
 *
 * Same trap as the compare table's head row: this chip lays its own 16% amber
 * over the #0d5548 card, so its text is read against the composited #336949,
 * not against the card. #fcd34d measured 4.47:1 there (axe, WCAG AA) — three
 * hundredths under the 4.5 this 10px bold text needs. #fde68a is 5.16:1 on the
 * same ground. The figure keeps #fcd34d because it sits on the bare card.
 */
.wm-scenario-deck .choice.is-warn .choice-crit {
  border-color: rgba(252, 211, 77, 0.36);
  background: rgba(252, 211, 77, 0.16);
  color: #fde68a;
}

/* --- the compare table (phone) ------------------------------------- */
.wm-scenario-deck .ctable {
  border: 1px solid rgba(133, 248, 196, 0.22);
  border-radius: 14px;
  background: #0d5548;
  overflow: hidden;
}

/*
 * The two value columns size to their content rather than to a fixed 70px.
 * When You Stop's "Money left at the end" can reach seven figures — $3,739,553
 * measures 84px at this mono size — which overflowed a fixed cell and collided
 * with the pick control at phone widths. Content sizing costs the path name
 * some room in that worst case (it wraps, which it is allowed to do) and gives
 * it back on every scenario whose values are short.
 */
.wm-scenario-deck .ctable-head,
.wm-scenario-deck .ctable-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 24px;
  align-items: center;
  gap: var(--wf-space-6);
  padding: 10px var(--wf-space-12);
}

.wm-scenario-deck .ctable-head {
  background: rgba(255, 255, 255, 0.07);
}

/*
 * #c4ded6, not the #9ec9bd used elsewhere on the card.
 *
 * The head row lays rgba(255,255,255,0.07) over the #0d5548 card, which lifts
 * its effective background to #1e6155 — so a colour checked against the card
 * is being read against something lighter here. #9ec9bd measured 3.98:1 on it
 * (axe, WCAG AA), under the 4.5 this text needs. #c4ded6 is 5.09:1 on the same
 * ground. The sibling uses of #9ec9bd sit directly on the card at 4.78:1 and
 * are left alone.
 *
 * WMA-117 D2: this was 9px/13px, the smaller of the two rules that decision
 * names. 12px bold is still under the 18.66px large-text threshold, so the
 * 4.5:1 bar the colours above were picked against is unchanged and both keep
 * their measured ratios.
 */
.wm-scenario-deck .ctable-head span {
  color: #c4ded6;
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wm-scenario-deck .ctable-head span.is-num {
  text-align: right;
}

.wm-scenario-deck .ctable-head + .ctable-row,
.wm-scenario-deck .ctable-row + .ctable-row {
  border-top: 1px solid rgba(133, 248, 196, 0.18);
}

.wm-scenario-deck .ctable-name {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.wm-scenario-deck .ctable-name b {
  color: #ffffff;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 700;
}

/* WMA-117 D2: the second of the two 9px rules. */
.wm-scenario-deck .ctable-name em {
  color: #85f8c4;
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wm-scenario-deck .ctable-num {
  color: #e6f5f0;
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 700;
  text-align: right;
  /* A figure must never break mid-number; the path name is what wraps. */
  white-space: nowrap;
}

/* The mockup tinted the *best* number mint. Marking a winner is exactly what
   this block must not do, so the mint goes on the figure column for every
   path — one legible series — and `is-good` is deliberately not ported. */
.wm-scenario-deck .ctable-num.is-figure {
  color: #85f8c4;
}

.wm-scenario-deck .ctable-num.is-warn {
  color: #fcd34d;
}

.wm-scenario-deck .ctable-pick {
  display: flex;
  justify-content: flex-end;
}

/*
 * WMA-117 D1: 20px -> 24px, the floor.
 *
 * Not 44px: the pick column in `.ctable-head`/`.ctable-row` above is a fixed
 * 24px track, sized for this control, and the two value columns beside it are
 * content-sized to hold a seven-figure sum at phone width. Widening this to 44
 * takes 20px from the path name on a 390px row rather than from slack, so the
 * finger-sized version of this control is a change to the compare table's
 * column geometry, not to the control. Filed rather than forced — see the
 * Lane C report.
 */
.wm-scenario-deck .radio {
  display: inline-grid;
  width: var(--wm-scenario-control-min);
  height: var(--wm-scenario-control-min);
  place-items: center;
  padding: 0;
  border: 2px solid rgba(230, 245, 240, 0.55);
  border-radius: var(--wf-radius-pill);
  background: transparent;
  cursor: pointer;
}

.wm-scenario-deck .radio.is-on {
  border-color: #85f8c4;
}

.wm-scenario-deck .radio.is-on::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: var(--wf-radius-pill);
  background: #85f8c4;
}

/* --- the inputs / share panel -------------------------------------- */
.wm-scenario-deck .deck-side {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 26px 28px;
  background: var(--wf-color-background-surface, #ffffff);
}

.wm-scenario-deck .side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wf-space-12);
}

.wm-scenario-deck .side-eyebrow {
  margin: 0;
  color: var(--wm-money-accent);
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/*
 * WMA-117 D1: 24px. `.side-head` is a baseline-aligned row pairing this with
 * the eyebrow, so a 44px box would open the inputs panel's header by ~26px on
 * every scenario to make a text link finger-sized. The floor plus the wider
 * hit area inline-flex gives it is what this row can hold.
 */
.wm-scenario-deck .side-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--wm-scenario-control-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wm-money-accent);
  font: inherit;
  font-size: var(--wm-scenario-text-sm-size);
  line-height: var(--wm-scenario-text-sm-line);
  font-weight: 800;
  cursor: pointer;
}

.wm-scenario-deck .side-link:hover,
.wm-scenario-deck .side-link:focus-visible {
  text-decoration: underline;
}

.wm-scenario-deck .side-list {
  display: grid;
  gap: var(--wf-space-6);
  margin: 0;
}

.wm-scenario-deck .side-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wf-space-12);
}

.wm-scenario-deck .side-list dt {
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

.wm-scenario-deck .side-list dd {
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
  font-weight: 700;
}

.wm-scenario-deck .side-rule {
  height: 1px;
  margin: var(--wf-space-6) 0;
  background: rgba(188, 202, 192, 0.3);
}

/* The share control arrives pre-rendered and keeps its own heading, hidden
   state and `[hidden]` guard — this only flattens the card-in-a-card, so it
   must never declare `display` or it would outrank `.wm-scenario-share[hidden]`. */
.wm-scenario-deck .wm-scenario-share {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Same width and offset as the shell ring above; the mint is the deck's own
   literal because #065F46 on the #04322b ground would not be seen. */
.wm-scenario-deck .choice-pick:focus-visible,
.wm-scenario-deck .radio:focus-visible,
.wm-scenario-deck .side-link:focus-visible {
  outline: var(--wm-scenario-focus-ring-width) solid #85f8c4;
  outline-offset: 3px;
}

/* The Edit control sits on the white panel, where the mint ring would vanish. */
.wm-scenario-deck .side-link:focus-visible {
  outline-color: var(--wf-color-focus-ring);
}

/* The 380px inputs panel leaves too little for three or four columns before
   the shell's existing 1040px breakpoint, so the deck stacks there. */
@media (max-width: 1040px) {
  .wm-scenario-deck {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * One data set, two layouts. The mockups show the columns and the compare
 * table as separate device frames only because they are separate previews —
 * both are rendered here and the shell's existing 720px breakpoint decides
 * which one is displayed. That is why every `data-deck-pick` control exists
 * twice in the DOM; page clients must wire all of them.
 */
.wm-scenario-deck .ctable {
  display: none;
}

@media (max-width: 720px) {
  .wm-scenario-deck .choice-grid {
    display: none;
  }

  .wm-scenario-deck .ctable {
    display: block;
  }

  .wm-scenario-deck .deck-answer,
  .wm-scenario-deck .deck-side {
    padding: 18px;
  }

  .wm-scenario-deck .decide-q {
    font-size: var(--wf-font-heading-sm-size);
    line-height: var(--wf-font-heading-sm-line-height);
  }
}

/* ---- Run control + cancel ----------------------------------------
 * The three scenarios that pinned their Run button at all pinned it three
 * different ways — one to the top of the rail, one fixed to the bottom on
 * phones only, one not at all. This is the single behaviour: the input rail is
 * a long scroller, so the primary action pins to the BOTTOM of it and the form
 * scrolls underneath. Pages keep their own look and add this class for the
 * pinning and the backdrop only.
 */
.wm-scenario-run-control {
  position: sticky;
  bottom: 0;
  z-index: 3;
  /*
   * No inline bleed. An earlier version pulled -4px each side to cover a rail's
   * scrollbar gutter, but that assumed every rail has one: on a rail with
   * padding on one side only it forced a horizontal scrollbar, and on a page
   * whose phone bar is `position: fixed; left: 0; right: 0` it hung the bar off
   * both screen edges. The gutter is scrollbar territory and reads as empty
   * anyway, so covering the content box is enough and assumes nothing.
   */
  padding: var(--wf-space-8) 0 var(--wf-space-4);
  /*
   * Page-settable surface. The backdrop has to match whatever the control is
   * sitting ON, and that is not the same thing on every page: three of the six
   * put their rail inside a tinted card, where a canvas-coloured strip reads as
   * a grey band inside a blue one. Pages set --wm-scenario-run-control-surface
   * to their card's colour; the canvas default is right for a rail sitting
   * directly on the page.
   */
  background: var(--wm-scenario-run-control-surface, var(--wm-money-canvas, #f8fafc));
}

/* Softens the cut where the form disappears under the control. */
.wm-scenario-run-control::before {
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
  background: linear-gradient(
    to top,
    var(--wm-scenario-run-control-surface, var(--wm-money-canvas, #f8fafc)),
    transparent
  );
  pointer-events: none;
  content: "";
}

/*
 * Reserve the control's height instead of floating it over the fields
 * (WMA-117 Lane G, owner decision 8 September 2026).
 *
 * The pin above assumes a rail to pin inside. Below 1041px there isn't one:
 * `.wm-scenario-input-region` is only ever given `overflow-y: auto` and a
 * `max-height` by a scenario sheet's `min-width: 1041px` block, so on a phone
 * the DOCUMENT scrolls and `position: sticky; bottom: 0` glues the control to
 * the bottom of the whole page — 13,002px of it on comfortable-or-stretched at
 * 390x844. It then rests over whichever input the fold lands on, for the
 * entire length of the form.
 *
 * Measured before this change, comfortable-or-stretched at 390x844: a field
 * left with ZERO unobscured height at scroll 0, 600, 1000, 1500 and 2200 —
 * not one unlucky position. Which field is hit is incidental (any change to
 * the content above moves it), which is why the two axe target-size findings
 * this closes name two different inputs.
 *
 * So the control takes its own space in the scrolling flow here: the fields
 * end, the control follows, and nothing is ever underneath it. Scenarios that
 * want a pinned phone bar (income-drop, where-you-land) re-pin it in their own
 * sheets, which load after this one, together with the page padding that
 * reserve requires.
 *
 * THIS MOVES NO LAYOUT. `position: sticky` keeps an element in normal flow and
 * only offsets it visually, so `static` changes where the control is PAINTED
 * and nothing else: debt-vs-savings at 390x844 measures an identical 9,653px
 * document and an identical 427..1479 input region either way. Only the
 * control's own box moves, from 780..844 (glued to the viewport) to 1390..1454
 * (where it actually sits).
 *
 * That distinction matters for one existing test. `debt-vs-savings.spec.ts`'s
 * "ranked-action bar never covers a result card" asserted that a DIFFERENT
 * sticky bar reaches the bottom edge, measured from wherever the preceding
 * rank interaction happened to leave the page — and that scroll offset was
 * itself a product of this defect, because Playwright had to scroll around a
 * Run bar pinned over the affordance it was reaching for. The assertion is
 * unchanged; it now scrolls to a position it controls first.
 *
 * No `margin-top` to hold the control clear of the last field: the form's own
 * grid gap already separates them, and a margin here would apply on surfaces
 * where the control renders empty.
 */
@media (max-width: 1040px) {
  .wm-scenario-input-region .wm-scenario-run-control {
    position: static;
  }

  /* Nothing scrolls under it now, so there is no cut to soften. */
  .wm-scenario-input-region .wm-scenario-run-control::before {
    content: none;
  }
}

.wm-scenario-cancel-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--wm-scenario-control-height);
  padding: 0 var(--wf-space-20);
  border: 1px solid var(--wm-money-border-strong-alpha, rgba(188, 202, 192, 0.65));
  border-radius: var(--wf-radius-pill);
  background: transparent;
  color: var(--wm-money-copy);
  font: inherit;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 700;
  cursor: pointer;
}

.wm-scenario-cancel-edit[hidden] {
  display: none;
}

.wm-scenario-cancel-edit:hover,
.wm-scenario-cancel-edit:focus-visible {
  border-color: var(--wm-money-accent);
  color: var(--wm-money-accent);
}

/*
 * The chosen path's control, on desktop.
 *
 * Before this the button looked identical whether or not the path was the
 * pick — the only confirmation was the phone radio filling in, or the card
 * below flipping. Mint fill against the white unpicked button is the same
 * signal the radio gives, and the label swaps to "Your pick" so the state is
 * not carried by colour alone.
 */
.wm-scenario-deck .choice-pick.is-picked {
  border-color: #85f8c4;
  background: #85f8c4;
  color: #04322b;
}

.wm-scenario-deck .choice-pick.is-picked::before {
  margin-right: var(--wf-space-8);
  font-weight: 800;
  content: "\2713";
}


.money-route-scenario {
  --wm-bill-ink: var(--wm-money-ink);
  --wm-bill-copy: var(--wm-money-copy);
  --wm-bill-muted: var(--wm-money-muted);
  --wm-bill-green: var(--wm-money-accent);
  --wm-bill-green-2: var(--wm-money-accent-chart);
  --wm-bill-soft: var(--wm-money-surface-soft);
  --wm-bill-chip: var(--wm-money-chip);
  --wm-bill-line: var(--wm-money-line);
  --wm-bill-danger: var(--wm-money-danger);
  --wm-bill-warning: var(--wf-color-status-warning-text);
  --wm-bill-warning-bg: var(--wf-color-status-warning-bg);
  --wm-bill-danger-bg: var(--wf-color-status-error-bg);
  background:
    linear-gradient(90deg, var(--wm-money-canvas) 0%, var(--wm-money-canvas) 100%),
    var(--wf-color-background-surface);
  color: var(--wm-bill-ink);
}

.wm-surprise-bill-back-inputs {
  font-family: var(--wf-font-heading);
  text-decoration: none;
}

.wm-surprise-bill-page.money-page {
  width: min(1280px, 100%);
  /* Same page gutter as the other four calculators, so the content column starts
     at the same x on every scenario page. */
  padding: 24px 40px 80px;
}

/*
 * DOM order inside .wm-surprise-bill-shell is header -> input region -> main, so the
 * H1, the purpose line, and the disclaimer are read (and, on a stacked viewport, seen)
 * before the form. Named grid areas put the header back at the top of the right-hand
 * column on desktop: the input region spans both rows of the left column, and the
 * flexible second row absorbs its spare height so the main column is not pushed down.
 */
.wm-surprise-bill-shell {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  grid-template-areas:
    "input header"
    "input main";
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: 32px;
  row-gap: 24px;
  min-height: calc(100vh - 80px);
}

.wm-surprise-bill-page[data-input-state="collapsed"] .wm-surprise-bill-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "header"
    "main";
}

.wm-surprise-bill-page[data-input-state="collapsed"] .wm-scenario-input-region {
  display: none;
}

/*
 * The decision deck stands in for the setup summary after a run: the form is
 * open until Run Scenario collapses it, and the deck takes its place. page-client.js
 * also sets the `hidden` property on the deck, which the shell's own
 * `.wm-scenario-deck[hidden]` rule respects; this rule keeps the pre-run page
 * correct in the frames before that script runs, and never puts a `display`
 * back on a hidden deck.
 */
.wm-surprise-bill-page[data-input-state="expanded"] .wm-scenario-deck {
  display: none;
}

/*
 * The progress rail is the deck's pre-run opposite number: it belongs with the
 * open form, and page-client.js hides it on the same toggle that reveals the
 * deck. `.wm-scenario-progress` sets `display: grid`, and an author `display`
 * outranks the UA `[hidden] { display: none }` rule, so the hidden state needs
 * saying here or the rail would sit under the deck post-run.
 */
.wm-surprise-bill-page .wm-scenario-progress[hidden] {
  display: none;
}

.wm-surprise-bill-page .wm-scenario-page-header {
  grid-area: header;
}

/*
 * Post-run the page header steps back so the deck is the first thing read: the
 * H1 drops to a running-title size and the purpose line leaves the top block.
 * Every element stays in the DOM — the H1, the breadcrumb above it and the
 * educational disclaimer below it are all load-bearing, and the pre-run page
 * a crawler is served is untouched.
 */
.wm-surprise-bill-page.is-post-run .wm-scenario-page-title {
  font-size: var(--wf-font-title-xs-size);
  line-height: 30px;
}

.wm-surprise-bill-page.is-post-run .wm-scenario-page-subhead {
  display: none;
}

/*
 * The deck states the decision, so the Compare heading below it is a section
 * label rather than a second headline. Scoped to this page's own modifier
 * class: `.wm-scenario-compare-head` keeps its shell sizing everywhere else.
 */
.wm-surprise-bill-page .wm-scenario-compare-head.wm-surprise-bill-compare-head-label {
  gap: 6px;
}

.wm-surprise-bill-page .wm-scenario-compare-head.wm-surprise-bill-compare-head-label h2 {
  font-size: var(--wf-font-heading-sm-size);
  line-height: var(--wf-font-heading-sm-line-height);
}

.wm-surprise-bill-page .wm-scenario-compare-head.wm-surprise-bill-compare-head-label p {
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.wm-surprise-bill-page .wm-scenario-input-region {
  grid-area: input;
}

.wm-surprise-bill-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  width: 100%;
  min-width: 0;
}

.wm-surprise-bill-main > * {
  min-width: 0;
  max-width: 100%;
}

/* Header: see .wm-scenario-page-header in scenario-shell.css. */

.wm-surprise-bill-mobile-intro {
  display: none;
}

.wm-surprise-bill-main .wm-surprise-bill-back-inputs {
  display: none;
}

.wm-surprise-bill-sort {
  display: flex;
  align-items: center;
  gap: var(--wf-space-16);
  overflow: auto;
}

.wm-surprise-bill-sort-label {
  flex: 0 0 auto;
  color: var(--wm-bill-muted);
  font-size: var(--wf-font-body-sm-size);
  line-height: var(--wf-font-body-sm-line-height);
  font-weight: 600;
}

.wm-surprise-bill-sort-chips {
  display: flex;
  align-items: center;
  gap: var(--wf-space-16);
  min-width: 0;
}

.wm-surprise-bill-sort-chip {
  flex: 0 0 auto;
  /* WMA-117 D1/D2: sort chips are a real finger control in the main flow (the
   * only way to reorder results), so they take the 44px default rather than
   * the 24px hard floor they already cleared. Plan's Wave 3 table calls this
   * out explicitly as D2's control-height carry. */
  min-height: var(--wm-scenario-control-height);
  padding: 0 var(--wf-space-24);
  border: 0;
  border-radius: var(--wf-radius-pill);
  background: var(--wm-bill-chip);
  color: var(--wm-bill-green);
  font-family: var(--wf-font-body);
  font-size: var(--wf-font-body-sm-size);
  line-height: var(--wf-font-body-sm-line-height);
  font-weight: 500;
  cursor: pointer;
}

.wm-surprise-bill-sort-chip.is-active {
  background: var(--wm-bill-green);
  color: var(--wf-color-text-inverse);
}

.wm-surprise-bill-sort-chip:focus-visible,
.wm-surprise-bill-submit:focus-visible,
.wm-surprise-bill-back-link:focus-visible,
.wm-surprise-bill-back-inputs:focus-visible,
.wm-surprise-bill-next-primary:focus-visible,
.wm-surprise-bill-next-secondary:focus-visible,
.wm-surprise-bill-save-primary:focus-visible,
.wm-surprise-bill-save-secondary:focus-visible,
.wm-surprise-bill-plan-empty button:focus-visible,
.wm-surprise-bill-seo-faq button:focus-visible {
  outline: 2px solid var(--wm-bill-green);
  outline-offset: 3px;
  border-radius: var(--wf-radius-pill);
}

.wm-surprise-bill-live-status,
.wm-surprise-bill-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wm-surprise-bill-results,
.wm-surprise-bill-comparison,
.wm-surprise-bill-breakdown {
  display: grid;
  gap: var(--wf-space-24);
}

.wm-surprise-bill-card {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  min-height: 120px;
  border-left: 8px solid var(--wm-bill-line);
  border-radius: var(--wm-card-radius);
  background: var(--wf-color-background-surface);
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-surprise-bill-card.is-cash {
  border-left-color: var(--wf-color-action-primary-bg);
}

.wm-surprise-bill-card.is-split {
  min-height: 152px;
  border-left-color: var(--wm-bill-green-2);
}

.wm-surprise-bill-card.is-card {
  border-left-color: var(--wm-bill-line);
}

.wm-surprise-bill-card-heading {
  display: grid;
  align-content: center;
  gap: var(--wf-space-4);
  padding: var(--wf-space-32);
  background: var(--wf-color-background-canvas);
}

.wm-surprise-bill-card.is-cash .wm-surprise-bill-card-heading {
  background: var(--wm-money-success-wash-soft);
}

.wm-surprise-bill-card.is-split .wm-surprise-bill-card-heading {
  background: var(--wm-bill-soft);
}

.wm-surprise-bill-card-title {
  margin: 0;
  color: var(--wm-bill-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-md-size);
  line-height: var(--wf-font-heading-md-line-height);
  font-weight: 700;
  letter-spacing: 0;
}

.wm-surprise-bill-card-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-bottom: var(--wf-space-4);
  border-radius: var(--wf-radius-pill);
  background: var(--wf-color-background-surface);
  color: var(--wm-bill-muted);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xs-size);
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 1px var(--wm-money-border-muted);
}

.wm-surprise-bill-card-subtitle {
  margin: 0;
  color: var(--wm-bill-muted);
  font-size: var(--wf-font-body-sm-size);
  line-height: var(--wf-font-body-sm-line-height);
  font-weight: 600;
}

.wm-surprise-bill-card-subtitle-mobile {
  display: none;
}

.wm-surprise-bill-card.is-cash .wm-surprise-bill-card-subtitle {
  color: var(--wm-money-accent-active);
}

.wm-surprise-bill-card.is-split .wm-surprise-bill-card-subtitle {
  color: var(--wm-money-accent-deep);
}

.wm-surprise-bill-card-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--wf-space-24);
  align-content: center;
  padding: var(--wf-space-32);
}

.wm-surprise-bill-card-metric {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.wm-surprise-bill-card-metric.is-skeleton {
  min-height: 50px;
  border-radius: var(--wf-radius-md);
  background: var(--wm-money-shimmer);
  background-size: 220% 100%;
  animation: wm-surprise-bill-pulse 1.6s ease infinite;
}

.wm-surprise-bill-card-metric-label {
  color: var(--wm-bill-muted);
  font-size: var(--wm-scenario-text-min-size);
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.wm-surprise-bill-card-metric-value {
  margin: 0;
  color: var(--wm-bill-ink);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 28px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.wm-surprise-bill-card-metric-value.is-positive,
.wm-surprise-bill-card-metric-value.is-success {
  color: var(--wm-bill-green);
}

.wm-surprise-bill-card-metric-value.is-warning,
.wm-surprise-bill-card-metric-value.is-tradeoff {
  color: var(--wm-bill-warning);
}

.wm-surprise-bill-card-metric-value.is-problem {
  color: var(--wm-bill-danger);
}

.wm-surprise-bill-card-note {
  margin: 0 var(--wf-space-32) var(--wf-space-32);
  padding: var(--wf-space-12) var(--wf-space-16);
  border-radius: var(--wf-radius-sm);
  font-size: var(--wf-font-body-sm-size);
  line-height: var(--wf-font-body-sm-line-height);
}

.wm-surprise-bill-card-note.is-tradeoff {
  background: var(--wm-bill-warning-bg);
  color: var(--wm-bill-warning);
}

.wm-surprise-bill-card-note.is-problem {
  background: var(--wm-bill-danger-bg);
  color: var(--wm-bill-danger);
}

.wm-surprise-bill-card-clear-time {
  display: none;
}

.wm-surprise-bill-setup-panel {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: transparent;
  box-shadow: none;
}

.wm-surprise-bill-form {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-32);
  padding: var(--wf-space-32) var(--wf-space-24);
  background: var(--wm-bill-soft);
  box-shadow: var(--wm-money-shadow-side);
  border-radius: var(--wm-card-radius);
}

.wm-surprise-bill-setup-head {
  display: flex;
  align-items: flex-start;
  gap: var(--wf-space-12);
}

.wm-surprise-bill-setup-icon,
.wm-surprise-bill-insight-icon,
.wm-surprise-bill-group-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-bill-green);
}

.wm-surprise-bill-setup-icon {
  width: 18px;
  height: 18px;
  margin-top: 5px;
}

.wm-surprise-bill-setup-icon svg,
.wm-surprise-bill-insight-icon svg,
.wm-surprise-bill-group-head svg {
  width: 100%;
  height: 100%;
}

.wm-surprise-bill-setup-title {
  margin: 0;
  color: var(--wm-bill-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 28px;
  font-weight: 700;
}

.wm-surprise-bill-setup-copy {
  margin: var(--wf-space-4) 0 0;
  color: var(--wm-bill-copy);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  font-weight: 500;
}

.wm-surprise-bill-field-groups {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: var(--wf-space-24);
}

.wm-surprise-bill-field-group {
  display: grid;
  gap: var(--wf-space-24);
}

.wm-surprise-bill-group-head {
  display: none;
}

.wm-surprise-bill-field,
.wm-surprise-bill-field-control,
.wm-surprise-bill-split-fields {
  display: grid;
  gap: var(--wf-space-4);
}

/* Only one of the side-by-side fields carries helper text, and a stretched grid
   would hand that extra height to its helper-less neighbour, pushing that input
   (and its underline) below the other. Packing both grids to the top keeps the
   two fields aligned whatever the helper adds. */
.wm-surprise-bill-field,
.wm-surprise-bill-field-control {
  align-content: start;
}

.wm-surprise-bill-split-fields {
  gap: var(--wf-space-24);
}

.wm-surprise-bill-field-label {
  color: var(--wm-bill-muted);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.wm-surprise-bill-field-helper {
  color: var(--wm-bill-muted);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  font-weight: 500;
}

.wm-surprise-bill-input-shell {
  display: flex;
  align-items: center;
  /* Allow the shell (and its flexible input) to shrink within a narrow grid
     column. Without this the APR field kept its intrinsic width and overflowed
     into the adjacent Monthly card payment field on mobile. */
  min-width: 0;
  /* WMA-117 D2/R6: no --wm-scenario-control-height* or --wf-control-height-*
   * rung lands on 42px (the ladder has 40/compact and 44/default, nothing
   * between). This field-row height is a deliberate design choice, not
   * content-derived geometry, but rounding it onto either neighbour is a real
   * pixel move nothing in the a11y suite requires (this box already clears the
   * 24px floor) -- left raw and reported to Lane G rather than guessed at.
   * Same gap at 46px and 50px in the mobile override below. */
  min-height: 42px;
  gap: var(--wf-space-4);
  border: 0;
  border-bottom: 2px solid var(--wm-bill-line);
  background: var(--wf-color-background-surface);
}

.wm-surprise-bill-prefix,
.wm-surprise-bill-suffix,
.wm-surprise-bill-input {
  color: var(--wm-bill-ink);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 24px;
  font-weight: 500;
}

.wm-surprise-bill-input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.wm-surprise-bill-input:focus {
  outline: none;
}

.wm-surprise-bill-input-shell:focus-within {
  border-color: var(--wm-bill-green);
  /* Local override of the shared focus shadow so the ring matches the
     surprise-bill page's green palette instead of the default indigo. */
  box-shadow: 0 0 0 2px rgba(4, 120, 87, 0.18);
  outline: none;
}

.wm-surprise-bill-input-shell.is-invalid {
  border-color: var(--wm-bill-danger);
}

.wm-surprise-bill-input-shell.is-invalid:focus-within {
  border-color: var(--wm-bill-danger);
}

/* Right-align the value inside fields that carry a suffix so the suffix
   sits visually next to the value instead of floating at the far right. */
.wm-surprise-bill-input-shell.has-suffix .wm-surprise-bill-input {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

.wm-surprise-bill-input-shell.has-suffix .wm-surprise-bill-suffix {
  flex: none;
}

.wm-surprise-bill-input::-webkit-outer-spin-button,
.wm-surprise-bill-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.wm-surprise-bill-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.wm-surprise-bill-education-note {
  display: none;
}

/*
 * Pinning and the backdrop belong to `.wm-scenario-run-control` in the shell —
 * sticky to the BOTTOM of the input rail, one behaviour across all five
 * calculators. This page used to pin the same block to the TOP of the rail
 * (`position: sticky; top: 0`) with the button sitting above the fields; that
 * rule is gone, and only the page's own look is left here.
 */
.wm-surprise-bill-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wf-space-12);
}

/*
 * Cancel and Run share one row rather than stacking: a stacked pair doubled the
 * height of the pinned phone bar. Flex rather than the grid column-flow used
 * elsewhere because of the third child below - wrapping lets the error take a
 * full row on its own, and lets Run reclaim the whole row for itself whenever
 * Cancel is hidden, which is every moment before the first run.
 */
.wm-surprise-bill-form-footer > .wm-scenario-cancel-edit,
.wm-surprise-bill-form-footer > .wm-surprise-bill-submit {
  flex: 1 1 0;
  min-width: 0;
}

/* Its own full-width row under the pair, never a third column beside them. */
.wm-surprise-bill-form-footer > .wm-surprise-bill-form-error {
  flex: 0 0 100%;
}

/*
 * This rail sits inside a tinted form card rather than on the page canvas, so a
 * canvas-coloured backdrop read as a grey band inside a blue one. The page names
 * the surface it is covering and the shell paints both the backdrop and the fade
 * from it — one declaration instead of restating the shell's two colour rules,
 * so the blend and the fade geometry stay in a single place.
 */
.wm-surprise-bill-form-footer.wm-scenario-run-control {
  --wm-scenario-run-control-surface: var(--wm-bill-soft);
}

.wm-surprise-bill-submit {
  width: 100%;
  min-height: var(--wf-control-height-2xl);
  border-color: var(--wm-bill-green);
  background: var(--wm-bill-green);
  color: var(--wf-color-text-inverse);
  font-weight: 700;
  box-shadow: var(--wm-money-accent-shadow-soft);
}

.wm-surprise-bill-submit[disabled] {
  cursor: not-allowed;
  opacity: 0.56;
  box-shadow: none;
}

.wm-surprise-bill-form-error {
  min-height: 20px;
  margin: 0;
  color: var(--wm-bill-danger);
  font-size: var(--wf-font-body-sm-size);
  line-height: var(--wf-font-body-sm-line-height);
}

.wm-surprise-bill-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wf-space-32);
}

.wm-surprise-bill-insight-card {
  display: grid;
  align-content: start;
  gap: 11px;
  min-height: 312px;
  padding: var(--wf-space-32);
  border-radius: var(--wm-card-radius);
  background: var(--wm-bill-soft);
}

.wm-surprise-bill-insight-icon {
  width: 48px;
  height: 48px;
  padding: 14px;
  border-radius: var(--wf-radius-pill);
  background: var(--wf-color-background-surface);
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-surprise-bill-insight-title {
  margin: 13px 0 0;
  color: var(--wm-bill-ink);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 28px;
  font-weight: 700;
}

.wm-surprise-bill-insight-body {
  margin: 0;
  color: var(--wm-bill-copy);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 23px;
}

.wm-surprise-bill-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-12);
  justify-content: flex-end;
}

.wm-surprise-bill-next-primary,
.wm-surprise-bill-next-secondary {
  align-items: center;
  border-radius: var(--wf-radius-pill);
  display: inline-flex;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 700;
  justify-content: center;
  line-height: var(--wm-scenario-text-md-line);
  min-height: var(--wm-scenario-control-height);
  padding: 12px 24px;
  text-decoration: none;
}

.wm-surprise-bill-next-primary {
  background: var(--wm-bill-green);
  box-shadow: var(--wm-money-accent-shadow-muted);
  color: var(--wf-color-action-primary-text);
}

.wm-surprise-bill-next-secondary {
  background: var(--wm-bill-chip);
  color: var(--wm-bill-green);
}

.wm-surprise-bill-plan,
.wm-surprise-bill-plan-empty {
  padding-top: 16px;
}

.wm-surprise-bill-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  grid-template-areas:
    "hero save"
    "details save"
    "steps save"
    "watch save"
    "other disclaimer";
  gap: 32px;
  align-items: start;
}

.wm-surprise-bill-plan-hero {
  grid-area: hero;
}

.wm-surprise-bill-save-card {
  grid-area: save;
}

.wm-surprise-bill-plan-details-grid {
  grid-area: details;
}

.wm-surprise-bill-plan-next {
  grid-area: steps;
}

.wm-surprise-bill-plan-watch {
  grid-area: watch;
}

.wm-surprise-bill-plan-other {
  grid-area: other;
}

.wm-surprise-bill-plan-disclaimer {
  grid-area: disclaimer;
}

.wm-surprise-bill-plan-hero,
.wm-surprise-bill-plan-card,
.wm-surprise-bill-plan-next,
.wm-surprise-bill-plan-watch,
.wm-surprise-bill-save-card,
.wm-surprise-bill-plan-empty {
  border: 1px solid rgba(188, 202, 192, 0.28);
  border-radius: var(--wm-card-radius);
  background: var(--wf-color-background-surface);
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-surprise-bill-plan-hero {
  display: grid;
  gap: 24px;
  padding: 32px;
}

.wm-surprise-bill-plan-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.wm-surprise-bill-plan-hero h2,
.wm-surprise-bill-save-card h2,
.wm-surprise-bill-plan-card h3,
.wm-surprise-bill-plan-next h3,
.wm-surprise-bill-plan-watch h3,
.wm-surprise-bill-plan-other h3,
.wm-surprise-bill-plan-empty h2 {
  margin: 0;
  color: var(--wm-bill-ink);
  font-family: var(--wf-font-heading);
  letter-spacing: 0;
}

.wm-surprise-bill-plan-hero h2 {
  font-size: var(--wf-font-heading-xl-size);
  line-height: 40px;
  font-weight: 800;
}

.wm-surprise-bill-plan-hero p,
.wm-surprise-bill-save-card p,
.wm-surprise-bill-plan-empty p {
  margin: 0;
  color: var(--wm-bill-copy);
}

.wm-surprise-bill-plan-hero-head p {
  max-width: 720px;
  margin-top: 8px;
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

/* Not a control: a status span with no interaction, so its 32px min-height is
 * spacing/geometry, not a target-size concern R6 reaches. */
.wm-surprise-bill-plan-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: var(--wf-radius-pill);
  padding: 6px 14px;
  background: var(--wm-money-accent-soft);
  color: var(--wm-money-accent-deep);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  font-weight: 800;
}

.wm-surprise-bill-plan-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--wm-money-border-muted);
}

.wm-surprise-bill-plan-best-fit {
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
}

.wm-surprise-bill-plan-note {
  flex: 0 1 auto;
  border-radius: var(--wf-radius-pill);
  padding: 8px 12px;
  background: rgba(137, 245, 231, 0.24);
  color: #005049;
  font-size: var(--wm-scenario-text-sm-size);
  line-height: var(--wm-scenario-text-sm-line);
  font-weight: 700;
}

.wm-surprise-bill-save-card {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
  padding: 28px;
  box-shadow: var(--wm-money-shadow-side);
}

.wm-surprise-bill-save-card h2 {
  font-size: var(--wf-font-heading-md-size);
  line-height: 32px;
  font-weight: 800;
}

.wm-surprise-bill-save-card > p {
  font-size: var(--wm-scenario-text-md-size);
  line-height: 23px;
}

.wm-surprise-bill-save-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.wm-surprise-bill-save-field span,
.wm-surprise-bill-plan-group-label {
  margin: 0;
  color: var(--wm-bill-green);
  font-size: var(--wm-scenario-text-min-size);
  line-height: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-surprise-bill-save-field input {
  width: 100%;
  min-width: 0;
  /* Same 42px control-height gap as .wm-surprise-bill-input-shell above --
   * see the comment there. */
  min-height: 42px;
  border: 0;
  border-bottom: 2px solid var(--wm-money-border-medium);
  border-radius: 0;
  background: transparent;
  color: var(--wm-bill-ink);
  font: inherit;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 700;
}

.wm-surprise-bill-save-field input:focus {
  outline: none;
  border-color: var(--wm-bill-green);
  box-shadow: 0 2px 0 rgba(4, 120, 87, 0.16);
}

.wm-surprise-bill-save-details,
.wm-surprise-bill-plan-metric-group {
  display: grid;
  gap: 12px;
}

.wm-surprise-bill-save-details {
  padding-top: 4px;
}

.wm-surprise-bill-save-row,
.wm-surprise-bill-plan-row,
.wm-surprise-bill-plan-other-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.wm-surprise-bill-save-row span,
.wm-surprise-bill-plan-row span,
.wm-surprise-bill-plan-other-row span {
  min-width: 0;
  color: var(--wm-bill-copy);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
}

.wm-surprise-bill-save-row strong,
.wm-surprise-bill-plan-row strong,
.wm-surprise-bill-plan-other-row strong {
  min-width: 0;
  color: var(--wm-bill-ink);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}

.wm-surprise-bill-save-row strong.is-mono,
.wm-surprise-bill-plan-row strong.is-mono {
  font-family: var(--wf-font-mono);
}

.wm-surprise-bill-plan-row strong.is-accent {
  color: var(--wm-bill-green);
}

.wm-surprise-bill-plan-row strong.is-positive {
  color: var(--wm-money-accent-chart);
}

.wm-surprise-bill-plan-row strong.is-problem,
.wm-surprise-bill-plan-other-row strong.is-problem {
  color: var(--wm-bill-danger);
}

.wm-surprise-bill-save-helper {
  padding: 16px;
  border: 1px solid rgba(0, 105, 72, 0.12);
  border-radius: var(--wm-card-radius);
  background: rgba(0, 105, 72, 0.05);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 19px;
}

.wm-surprise-bill-save-actions {
  display: grid;
  gap: 12px;
}

.wm-surprise-bill-save-primary,
.wm-surprise-bill-save-secondary,
.wm-surprise-bill-plan-empty button {
  min-height: var(--wf-control-height-xl);
  border: 0;
  border-radius: var(--wf-radius-pill);
  padding: 0 24px;
  font: inherit;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 800;
  cursor: pointer;
}

.wm-surprise-bill-save-primary {
  background: var(--wm-bill-green);
  color: var(--wf-color-text-inverse);
  box-shadow: var(--wm-money-accent-shadow-soft);
}

.wm-surprise-bill-save-secondary,
.wm-surprise-bill-plan-empty button {
  background: var(--wm-bill-chip);
  color: var(--wm-bill-green);
}

.wm-surprise-bill-save-status {
  min-height: 18px;
  color: var(--wm-bill-muted);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

.wm-surprise-bill-plan-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.wm-surprise-bill-plan-card,
.wm-surprise-bill-plan-next,
.wm-surprise-bill-plan-watch {
  display: grid;
  gap: 24px;
  padding: 28px;
}

.wm-surprise-bill-plan-glance {
  background: var(--wm-bill-soft);
}

.wm-surprise-bill-plan-card h3,
.wm-surprise-bill-plan-next h3,
.wm-surprise-bill-plan-watch h3,
.wm-surprise-bill-plan-other h3 {
  font-size: var(--wf-font-title-xs-size);
  line-height: 30px;
  font-weight: 800;
}

.wm-surprise-bill-plan-metric-group + .wm-surprise-bill-plan-metric-group {
  padding-top: 8px;
  border-top: 1px solid rgba(188, 202, 192, 0.3);
}

.wm-surprise-bill-plan-row {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(188, 202, 192, 0.24);
}

.wm-surprise-bill-plan-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.wm-surprise-bill-plan-fit-list {
  display: grid;
  gap: 18px;
}

.wm-surprise-bill-plan-fit-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.wm-surprise-bill-plan-fit-icon {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border-radius: var(--wf-radius-pill);
  background: var(--wm-bill-green);
  box-shadow: 0 0 0 4px rgba(0, 105, 72, 0.1);
}

.wm-surprise-bill-plan-fit-item h4,
.wm-surprise-bill-plan-fit-item p,
.wm-surprise-bill-plan-tradeoff,
.wm-surprise-bill-plan-watch p,
.wm-surprise-bill-plan-watch-item h4,
.wm-surprise-bill-plan-watch-item p,
.wm-surprise-bill-plan-disclaimer {
  margin: 0;
}

.wm-surprise-bill-plan-fit-item h4 {
  color: var(--wm-bill-ink);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 800;
}

.wm-surprise-bill-plan-fit-item p,
.wm-surprise-bill-plan-tradeoff,
.wm-surprise-bill-plan-watch p,
.wm-surprise-bill-plan-watch-item p {
  color: var(--wm-bill-copy);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

.wm-surprise-bill-plan-tradeoff {
  padding-left: 14px;
  border-left: 3px solid var(--wm-bill-green);
}

.wm-surprise-bill-plan-tradeoff strong {
  color: var(--wm-bill-green);
  text-transform: uppercase;
}

.wm-surprise-bill-plan-step-groups {
  display: grid;
  gap: 24px;
}

.wm-surprise-bill-plan-step-group {
  display: grid;
  gap: 12px;
}

.wm-surprise-bill-plan-checklist {
  display: grid;
  gap: 10px;
}

.wm-surprise-bill-plan-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(188, 202, 192, 0.28);
  border-radius: var(--wm-card-radius);
  background: var(--wf-color-background-surface);
  box-shadow: var(--wm-money-shadow-hairline);
  color: var(--wm-bill-ink);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 600;
}

.wm-surprise-bill-plan-check input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--wm-bill-green);
}

.wm-surprise-bill-plan-watch {
  background: var(--wm-bill-warning-bg);
  border-color: rgba(152, 86, 0, 0.14);
}

.wm-surprise-bill-plan-watch h3 {
  color: var(--wm-bill-warning);
}

.wm-surprise-bill-plan-watch-list {
  display: grid;
  gap: 12px;
}

.wm-surprise-bill-plan-watch-item {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: var(--wf-radius-md);
  background: rgba(255, 255, 255, 0.58);
}

.wm-surprise-bill-plan-watch-item h4 {
  color: var(--wm-bill-ink);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 800;
}

.wm-surprise-bill-plan-other {
  display: grid;
  gap: 16px;
}

.wm-surprise-bill-plan-other-list {
  display: grid;
  gap: 8px;
}

.wm-surprise-bill-plan-other-row {
  padding: 16px 18px;
  border: 1px solid rgba(188, 202, 192, 0.22);
  border-radius: var(--wf-radius-pill);
  background: var(--wf-color-background-surface);
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-surprise-bill-plan-disclaimer {
  padding: 0 12px;
  color: var(--wm-bill-muted);
  font-size: var(--wm-scenario-text-min-size);
  line-height: 18px;
  font-style: italic;
  text-align: center;
}

.wm-surprise-bill-plan-empty {
  display: grid;
  gap: 14px;
  max-width: 640px;
  padding: 40px;
  background: var(--wm-bill-soft);
}

.wm-surprise-bill-plan-empty h2 {
  font-size: var(--wf-font-heading-lg-size);
  line-height: 36px;
}

.wm-surprise-bill-plan-empty p {
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-surprise-bill-plan-empty button {
  width: fit-content;
  margin-top: 8px;
}

.wm-surprise-bill-seo {
  width: 100%;
  padding: 72px 56px 104px;
  border-top: 1px solid var(--wm-money-border-muted);
  background: var(--wm-money-canvas);
}

.wm-surprise-bill-seo-inner {
  display: grid;
  gap: 72px;
  width: min(1024px, 100%);
  margin: 0 auto;
}

.wm-surprise-bill-seo section {
  min-width: 0;
}

.wm-surprise-bill-seo h2,
.wm-surprise-bill-seo h3,
.wm-surprise-bill-seo p {
  margin: 0;
}

.wm-surprise-bill-seo h2,
.wm-surprise-bill-seo h3 {
  color: var(--wm-bill-ink);
  font-family: var(--wf-font-heading);
  letter-spacing: 0;
}

.wm-surprise-bill-seo h2 {
  font-size: var(--wf-font-heading-xl-size);
  line-height: 40px;
  font-weight: 800;
}

.wm-surprise-bill-seo h3 {
  font-size: var(--wf-font-heading-sm-size);
  line-height: var(--wf-font-heading-sm-line-height);
  font-weight: 700;
}

.wm-surprise-bill-seo p,
.wm-surprise-bill-seo li {
  color: var(--wm-bill-copy);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-surprise-bill-seo strong {
  color: var(--wm-bill-ink);
  font-weight: 700;
}

.wm-surprise-bill-seo-guide,
.wm-surprise-bill-seo-why,
.wm-surprise-bill-seo-insights,
.wm-surprise-bill-seo-read,
.wm-surprise-bill-seo-next,
.wm-surprise-bill-seo-faq,
.wm-surprise-bill-seo-final {
  display: grid;
  gap: 32px;
}

.wm-surprise-bill-seo-guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 48px;
  align-items: start;
}

.wm-surprise-bill-seo-heading-block {
  display: grid;
  gap: 16px;
}

.wm-surprise-bill-seo-heading-block h2 {
  font-size: var(--wf-font-display-lg-size);
  line-height: 52px;
}

/*
 * WMA-117 D2: this is the one skip-list entry owned by this lane
 * (a11y-skip-list.ts, "article.wm-surprise-bill-seo-next-card p", 10px ->
 * 12px). Raised to the D2 floor along with the other 7 sub-12px rules this
 * stylesheet drew (the plan's original inventory counted 8 in this file).
 */
.wm-surprise-bill-seo-eyebrow,
.wm-surprise-bill-seo-question-eyebrow,
.wm-surprise-bill-seo-metric-label,
.wm-surprise-bill-seo-next-card p,
.wm-surprise-bill-seo-disclaimer {
  color: var(--wm-bill-green);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-min-size);
  line-height: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.wm-surprise-bill-seo-lede {
  max-width: 672px;
  font-size: var(--wf-font-heading-sm-size);
  line-height: 32px;
}

.wm-surprise-bill-seo-learn-card,
.wm-surprise-bill-seo-card,
.wm-surprise-bill-seo-stat-card,
.wm-surprise-bill-seo-adjust-card,
.wm-surprise-bill-seo-next-card,
.wm-surprise-bill-seo-summary,
.wm-surprise-bill-seo-faq-item {
  border-radius: var(--wm-card-radius);
}

.wm-surprise-bill-seo-learn-card {
  display: grid;
  gap: 24px;
  padding: 32px;
  background: var(--wm-bill-soft);
}

.wm-surprise-bill-seo-learn-card h3,
.wm-surprise-bill-seo-tip-card h3,
.wm-surprise-bill-seo-adjust-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wm-surprise-bill-seo-learn-icon,
.wm-surprise-bill-seo-tip-icon,
.wm-surprise-bill-seo-adjust-icon,
.wm-surprise-bill-seo-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-bill-green);
}

.wm-surprise-bill-seo-learn-icon {
  width: 22px;
  height: 22px;
}

.wm-surprise-bill-seo-learn-icon svg,
.wm-surprise-bill-seo-tip-icon svg,
.wm-surprise-bill-seo-adjust-icon svg,
.wm-surprise-bill-seo-list-icon svg,
.wm-surprise-bill-seo-card-icon svg,
.wm-surprise-bill-seo-question-mark svg {
  width: 100%;
  height: 100%;
}

.wm-surprise-bill-seo-learn-card h3 {
  color: var(--wm-bill-green);
  font-family: var(--wf-font-body);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 24px;
}

.wm-surprise-bill-seo-learn-list,
.wm-surprise-bill-seo-adjust-list {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.wm-surprise-bill-seo-learn-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 600;
}

.wm-surprise-bill-seo-list-icon {
  width: 14px;
  height: 14px;
  margin-top: 3px;
}

.wm-surprise-bill-seo-question-card {
  position: relative;
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: 48px;
  border-radius: var(--wm-card-radius);
  background: rgba(104, 219, 169, 0.3);
}

.wm-surprise-bill-seo-question-card blockquote {
  max-width: 680px;
  margin: 0;
}

.wm-surprise-bill-seo-question-card blockquote p {
  color: #002114;
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-xl-size);
  line-height: 42px;
  font-weight: 800;
}

.wm-surprise-bill-seo-question-card > p:not(.wm-surprise-bill-seo-question-eyebrow) {
  max-width: 800px;
  color: var(--wm-money-accent-deep);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 29px;
  font-weight: 600;
}

.wm-surprise-bill-seo-question-mark {
  position: absolute;
  top: 18px;
  right: -18px;
  width: 116px;
  height: 116px;
  color: rgba(0, 105, 72, 0.16);
}

.wm-surprise-bill-seo-why-grid,
.wm-surprise-bill-seo-read-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.76fr);
  gap: 40px;
  align-items: start;
}

.wm-surprise-bill-seo-copy {
  display: grid;
  gap: 24px;
}

.wm-surprise-bill-seo-stat-card {
  display: grid;
  gap: 16px;
  padding: 40px;
  border: 1px solid var(--wm-money-border-medium);
  background: var(--wf-color-background-surface);
  box-shadow: var(--wm-money-shadow-hairline);
}

/*
 * WMA-117 D2/R6: 52px is above --wf-font-display-lg-size (48), the top rung
 * today, with nothing between it and here. Unlike the confirmed 17/42/44/60px
 * gaps D3 and D5 reported (6-8 rules each, 4-6 stylesheets), this value draws
 * only twice codebase-wide -- here and packs/styles.css's own hero stat
 * (out of this lane's scope) -- well under the "count the rules before
 * proposing a step" bar the plan sets. Left raw rather than either inventing
 * a step for two rules or shrinking a headline stat 4px onto -display-lg with
 * no design review; reported to Lane G to confirm whether the pack's sibling
 * value means this is an emerging pattern worth a real rung.
 */
.wm-surprise-bill-seo-stat-value {
  color: var(--wm-bill-green);
  font-family: var(--wf-font-body);
  font-size: 52px;
  line-height: 52px;
  font-weight: 800;
}

.wm-surprise-bill-seo-stat-copy {
  color: var(--wm-bill-ink);
  font-weight: 700;
}

.wm-surprise-bill-seo-stat-source {
  color: var(--wm-bill-muted);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-min-size);
  line-height: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.wm-surprise-bill-seo-card-grid,
.wm-surprise-bill-seo-next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.wm-surprise-bill-seo-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 292px;
  padding: 32px;
  border: 1px solid var(--wm-money-border-muted);
  background: var(--wf-color-background-surface);
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-surprise-bill-seo-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 13px;
  border-radius: var(--wf-radius-pill);
  background: var(--wm-money-accent-soft);
  color: var(--wm-bill-green);
}

.wm-surprise-bill-seo-insight-card:nth-child(2) .wm-surprise-bill-seo-card-icon {
  background: var(--wm-money-accent-wash);
  color: var(--wm-money-accent-chart);
}

.wm-surprise-bill-seo-insight-card:nth-child(3) .wm-surprise-bill-seo-card-icon {
  background: var(--wm-bill-chip);
  color: #4b41e1;
}

.wm-surprise-bill-seo-card h3 {
  margin-top: 12px;
}

.wm-surprise-bill-seo-metric-label {
  color: var(--wm-bill-green);
}

.wm-surprise-bill-seo-card p:not(.wm-surprise-bill-seo-metric-label) {
  font-size: var(--wm-scenario-text-md-size);
  line-height: 23px;
}

.wm-surprise-bill-seo-tip-card {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 22px 24px;
  border-left: 4px solid var(--wm-bill-green);
  border-radius: var(--wm-card-radius);
  background: rgba(220, 226, 246, 0.48);
}

.wm-surprise-bill-seo-tip-card h3 {
  color: var(--wm-bill-ink);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
  text-transform: uppercase;
}

.wm-surprise-bill-seo-tip-icon,
.wm-surprise-bill-seo-adjust-icon {
  width: 16px;
  height: 16px;
}

.wm-surprise-bill-seo-tip-card p {
  font-size: var(--wm-scenario-text-md-size);
  line-height: 23px;
}

.wm-surprise-bill-seo-adjust-card {
  display: grid;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--wm-money-border-medium);
  background: var(--wf-color-background-surface);
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-surprise-bill-seo-adjust-list {
  gap: 0;
}

.wm-surprise-bill-seo-adjust-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--wm-money-border-muted);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
}

.wm-surprise-bill-seo-adjust-list li:first-child {
  padding-top: 0;
}

.wm-surprise-bill-seo-adjust-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.wm-surprise-bill-seo-adjust-list li > span:last-child {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: var(--wf-radius-pill);
  background: var(--wm-bill-chip);
}

.wm-surprise-bill-seo-next {
  text-align: center;
}

.wm-surprise-bill-seo-next-intro {
  max-width: 680px;
  margin: -16px auto 0;
}

.wm-surprise-bill-seo-next-card {
  display: grid;
  gap: 12px;
  min-height: 164px;
  padding: 32px;
  border: 1px solid var(--wm-money-border-medium);
  background: var(--wf-color-background-surface);
  text-align: left;
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-surprise-bill-seo-next-card p {
  color: var(--wm-bill-green);
}

.wm-surprise-bill-seo-next-card h3 {
  font-family: var(--wf-font-body);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 28px;
  font-weight: 700;
}

.wm-surprise-bill-seo-faq-list {
  display: grid;
  gap: 16px;
}

.wm-surprise-bill-seo-faq-item {
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--wm-bill-soft);
}

.wm-surprise-bill-seo-faq-item.is-open {
  border-color: rgba(0, 105, 72, 0.2);
  background: var(--wf-color-background-surface);
}

.wm-surprise-bill-seo-faq h3 {
  font-family: var(--wf-font-body);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 24px;
}

/* R6: 72px (64px on the mobile override below) is 24+24 padding plus the h3's
 * own line-height, with a few px of slack for a two-line question -- geometry
 * derived from other (permitted-raw) values, not a control-size choice, so
 * left raw rather than forced onto a token that would move it. Matches the
 * where-you-land FAQ button's own R6 note (same shared content pattern). */
.wm-surprise-bill-seo-faq button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 72px;
  padding: 24px;
  border: 0;
  background: transparent;
  color: var(--wm-bill-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wm-surprise-bill-seo-faq-item.is-open button {
  background: rgba(0, 133, 93, 0.1);
  color: var(--wm-bill-green);
}

.wm-surprise-bill-seo-faq-chevron {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: currentColor;
}

.wm-surprise-bill-seo-faq-chevron::before {
  position: absolute;
  inset: 1px;
  content: "";
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.wm-surprise-bill-seo-faq-item.is-open .wm-surprise-bill-seo-faq-chevron::before {
  transform: translateY(4px) rotate(225deg);
}

.wm-surprise-bill-seo-faq-panel {
  display: grid;
  gap: 14px;
  padding: 24px;
  background: var(--wf-color-background-surface);
}

.wm-surprise-bill-seo-faq-panel[hidden] {
  display: none;
}

.wm-surprise-bill-seo-faq-panel p {
  font-size: var(--wm-scenario-text-md-size);
  line-height: 23px;
}

.wm-surprise-bill-seo-summary {
  padding: 40px 72px;
  background: rgba(220, 226, 246, 0.28);
  text-align: center;
}

.wm-surprise-bill-seo-summary p {
  max-width: 780px;
  margin: 0 auto;
  font-size: var(--wm-scenario-text-md-size);
  line-height: 23px;
}

.wm-surprise-bill-seo-disclaimer {
  max-width: 900px;
  margin: 0 auto;
  color: var(--wm-bill-copy);
  text-align: center;
}

@keyframes wm-surprise-bill-pulse {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@media (max-width: 1040px) {
  /*
   * Stack at the same breakpoint as the other four calculators: header, then the
   * form, then the results — DOM order. Below 1041px a 360px input rail leaves the
   * results column too narrow to read.
   */
  .wm-surprise-bill-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "input"
      "main";
    row-gap: 24px;
    min-height: auto;
  }

  .wm-surprise-bill-setup-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .wm-surprise-bill-card {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .wm-surprise-bill-card-metrics {
    gap: var(--wf-space-16);
  }

  .wm-surprise-bill-seo {
    padding-inline: 40px;
  }

  .wm-surprise-bill-seo-guide-grid,
  .wm-surprise-bill-seo-why-grid,
  .wm-surprise-bill-seo-read-grid {
    grid-template-columns: 1fr;
  }

  .wm-surprise-bill-seo-card-grid,
  .wm-surprise-bill-seo-next-grid {
    gap: 20px;
  }

  .wm-surprise-bill-seo-summary {
    padding-inline: 48px;
  }

}

@media (max-width: 720px) {
  .money-route-scenario {
    padding-bottom: 0;
  }

  .wm-surprise-bill-back-inputs {
    display: none;
  }

  .money-route-scenario:has(.wm-surprise-bill-page[data-run-state="ready"]) .wm-surprise-bill-back-inputs {
    display: inline-flex;
  }

  .wm-surprise-bill-back-inputs {
    align-items: center;
    gap: 8px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--wm-bill-green);
    font-size: var(--wm-scenario-text-md-size);
    line-height: var(--wm-scenario-text-md-line);
    font-weight: 500;
  }

  .wm-surprise-bill-page.money-page {
    width: 100%;
    /* The page gutter moves to the page element on mobile so the header — now a
       sibling of the main column — is inset by the same 24px. */
    padding: 24px 24px 0;
  }

  /* Single column: header, then the form, then the results. */
  .wm-surprise-bill-shell {
    display: block;
    min-height: auto;
  }

  .wm-surprise-bill-shell > .wm-scenario-page-header {
    margin-bottom: var(--wf-space-24);
  }

  .wm-surprise-bill-main {
    gap: var(--wf-space-32);
    padding: 0 0 128px;
  }

  .wm-surprise-bill-page[data-run-state="pristine"] .wm-surprise-bill-main {
    padding-bottom: 40px;
  }

  .wm-surprise-bill-mobile-intro {
    display: none;
    padding: var(--wf-space-24);
    border-radius: var(--wm-card-radius);
    background: var(--wm-bill-soft);
  }

  .wm-surprise-bill-mobile-intro h2 {
    margin: 0 0 7px;
    color: var(--wm-bill-ink);
    font-family: var(--wf-font-heading);
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 28px;
  }

  .wm-surprise-bill-mobile-intro p {
    margin: 0;
    color: var(--wm-bill-copy);
    font-size: var(--wm-scenario-text-md-size);
    line-height: 23px;
  }

  .wm-surprise-bill-page[data-run-state="ready"] .wm-surprise-bill-mobile-intro {
    display: block;
  }

  .wm-surprise-bill-page[data-run-state="pristine"] .wm-surprise-bill-sort,
  .wm-surprise-bill-page[data-run-state="pristine"] .wm-surprise-bill-results,
  .wm-surprise-bill-page[data-run-state="pristine"] .wm-surprise-bill-insights,
  .wm-surprise-bill-page[data-run-state="pristine"] .wm-surprise-bill-next-actions {
    display: none;
  }

  .wm-surprise-bill-sort {
    width: calc(100% + 48px);
    margin-inline: -24px;
    padding-inline: 24px;
  }

  .wm-surprise-bill-sort-label {
    display: none;
  }

  .wm-surprise-bill-sort-chips {
    overflow-x: auto;
    gap: var(--wf-space-12);
    padding: 8px 0;
  }

  .wm-surprise-bill-sort-chip {
    min-height: var(--wm-scenario-control-height);
    padding: 0 20px;
    background: var(--wf-color-background-surface);
    color: var(--wf-color-text-muted);
    font-family: var(--wf-font-heading);
    font-size: var(--wm-scenario-text-xs-size);
    line-height: 16px;
    font-weight: 700;
    box-shadow: none;
  }

  .wm-surprise-bill-sort-chip.is-active {
    background: var(--wm-money-chip-strong);
    color: var(--wm-bill-green);
  }

  .wm-surprise-bill-setup-panel {
    position: static;
    min-height: auto;
    max-height: none;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }

  .wm-surprise-bill-page[data-input-state="collapsed"] .wm-surprise-bill-setup-panel {
    display: none;
  }

  .wm-surprise-bill-form {
    min-height: auto;
    gap: var(--wf-space-16);
    padding: 0 0 40px;
  }

  .wm-surprise-bill-setup-head {
    display: none;
  }

  .wm-surprise-bill-field-groups {
    gap: var(--wf-space-16);
  }

  .wm-surprise-bill-field-group {
    display: grid;
    gap: var(--wf-space-12);
    padding: var(--wf-space-24);
    border-radius: var(--wm-card-radius);
  }

  .wm-surprise-bill-field-group.is-bill {
    background: var(--wf-color-background-surface);
    box-shadow: var(--wm-money-shadow-side-strong);
  }

  .wm-surprise-bill-field-group.is-liquidity {
    gap: var(--wf-space-24);
    background: var(--wm-bill-chip);
  }

  .wm-surprise-bill-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .wm-surprise-bill-group-head h3 {
    margin: 0;
    color: var(--wm-bill-green);
    font-family: var(--wf-font-heading);
    font-size: var(--wm-scenario-text-md-size);
    line-height: var(--wm-scenario-text-md-line);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .wm-surprise-bill-group-head span {
    width: 22px;
    height: 20px;
    color: var(--wm-money-muted-disabled);
  }

  .wm-surprise-bill-field-label {
    color: var(--wm-bill-copy);
    font-size: var(--wm-scenario-text-md-size);
    line-height: var(--wm-scenario-text-md-line);
    font-weight: 400;
    text-transform: none;
  }

  /* Same 42px-family control-height gap as the desktop rule -- see the
   * comment on .wm-surprise-bill-input-shell above. 46px here and 50px below
   * fall between --wm-scenario-control-height (44) and --wf-control-height-xl
   * (48) with no rung of their own. */
  .wm-surprise-bill-input-shell {
    min-height: 46px;
    background: transparent;
    border-color: var(--wm-money-border-strong-alpha);
  }

  .wm-surprise-bill-field-group.is-bill .wm-surprise-bill-input-shell {
    min-height: 50px;
  }

  .wm-surprise-bill-field-group.is-bill .wm-surprise-bill-prefix,
  .wm-surprise-bill-field-group.is-bill .wm-surprise-bill-input {
    font-size: var(--wf-font-heading-md-size);
    line-height: 32px;
    font-weight: 700;
  }

  .wm-surprise-bill-prefix,
  .wm-surprise-bill-suffix,
  .wm-surprise-bill-input {
    font-size: var(--wf-font-heading-sm-size);
    line-height: var(--wf-font-heading-sm-line-height);
    font-weight: 700;
  }

  .wm-surprise-bill-split-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wf-space-16);
  }

  .wm-surprise-bill-split-fields .wm-surprise-bill-field-label {
    font-size: var(--wm-scenario-text-xs-size);
    line-height: 16px;
  }

  .wm-surprise-bill-split-fields .wm-surprise-bill-prefix,
  .wm-surprise-bill-split-fields .wm-surprise-bill-suffix,
  .wm-surprise-bill-split-fields .wm-surprise-bill-input {
    font-size: var(--wf-font-heading-sm-size);
    line-height: var(--wf-font-heading-sm-line-height);
  }

  .wm-surprise-bill-education-note {
    display: flex;
    align-items: flex-start;
    gap: var(--wf-space-16);
    margin-top: var(--wf-space-16);
    padding: 21px;
    border: 1px solid var(--wm-money-border-soft);
    border-radius: var(--wm-card-radius);
    background: var(--wf-color-background-surface);
  }

  .wm-surprise-bill-education-note-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--wm-bill-green);
  }

  .wm-surprise-bill-education-note-icon svg {
    width: 100%;
    height: 100%;
  }

  .wm-surprise-bill-education-note p {
    margin: 0;
    color: var(--wm-bill-copy);
    font-size: var(--wm-scenario-text-xs-size);
    line-height: 20px;
    font-style: italic;
  }

  /*
   * The phone override that un-pinned this block (`position: static`) is gone
   * too: one pinning behaviour means the shell's bottom-sticky control holds at
   * every width. The backdrop stays the form's tint from the base rule, so the
   * fields still disappear cleanly under it here.
   */
  .wm-surprise-bill-page[data-input-state="collapsed"] .wm-surprise-bill-form-footer {
    display: none;
  }

  /* R6: 56px is a deliberate mobile bump over the desktop 52px
   * (--wf-control-height-2xl) CTA, not a rung the control scale has (48/xl,
   * 52/2xl, nothing above). Left raw rather than shrinking the primary CTA
   * back to 52px on the width it matters most; same gap on
   * .wm-surprise-bill-save-primary/-secondary below. */
  .wm-surprise-bill-submit {
    min-height: 56px;
  }

  .wm-surprise-bill-form-error {
    padding-inline: var(--wf-space-12);
    background: var(--wm-money-canvas-translucent);
    border-radius: var(--wf-radius-sm);
  }

  .wm-surprise-bill-card {
    grid-template-columns: 1fr;
    min-height: 305px;
    padding: 25px;
    border: 1px solid var(--wm-money-border-soft);
    border-radius: var(--wm-card-radius);
  }

  .wm-surprise-bill-card-heading {
    display: grid;
    gap: var(--wf-space-4);
    padding: 0;
    background: transparent;
  }

  .wm-surprise-bill-card.is-cash .wm-surprise-bill-card-heading,
  .wm-surprise-bill-card.is-split .wm-surprise-bill-card-heading {
    background: transparent;
  }

  .wm-surprise-bill-card-title {
    color: var(--wm-bill-green);
    font-size: var(--wf-font-heading-sm-size);
    line-height: var(--wf-font-heading-sm-line-height);
  }

  .wm-surprise-bill-card-subtitle {
    color: var(--wm-bill-copy);
    font-size: var(--wm-scenario-text-xs-size);
    line-height: 16px;
    font-weight: 500;
  }

  .wm-surprise-bill-card-subtitle-desktop {
    display: none;
  }

  .wm-surprise-bill-card-subtitle-mobile {
    display: inline;
  }

  .wm-surprise-bill-card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
    padding: 0;
  }

  .wm-surprise-bill-card-note {
    margin: 0;
  }

  .wm-surprise-bill-card-metric-label {
    color: var(--wf-color-text-muted);
    font-size: var(--wm-scenario-text-min-size);
    line-height: 15px;
  }

  .wm-surprise-bill-card-metric-value {
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 28px;
  }

  .wm-surprise-bill-card-clear-time {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 25px;
    border-top: 1px solid var(--wm-money-border-muted);
    color: var(--wm-bill-copy);
    font-size: var(--wm-scenario-text-xs-size);
    line-height: 16px;
  }

  .wm-surprise-bill-card-clear-time strong {
    color: var(--wm-bill-ink);
    font-family: var(--wf-font-mono);
  }

  .wm-surprise-bill-card-clear-time-icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--wm-bill-green);
  }

  .wm-surprise-bill-insights {
    display: none;
  }

  .wm-surprise-bill-plan {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "save"
      "details"
      "steps"
      "watch"
      "other"
      "disclaimer";
    gap: 32px;
    padding-top: 0;
  }

  .wm-surprise-bill-plan-hero {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .wm-surprise-bill-plan-hero-head,
  .wm-surprise-bill-plan-hero-foot {
    display: grid;
    gap: 16px;
  }

  .wm-surprise-bill-plan-hero h2 {
    font-size: var(--wf-font-heading-xl-size);
    line-height: 45px;
  }

  .wm-surprise-bill-plan-hero-head p {
    max-width: none;
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 26px;
  }

  .wm-surprise-bill-plan-status,
  .wm-surprise-bill-plan-note {
    width: fit-content;
  }

  .wm-surprise-bill-plan-hero-foot {
    padding-top: 0;
    border-top: 0;
  }

  .wm-surprise-bill-plan-best-fit {
    padding: 10px 13px;
    border: 1px solid rgba(0, 105, 72, 0.2);
    border-radius: var(--wf-radius-pill);
    background: var(--wm-bill-soft);
    font-size: var(--wm-scenario-text-xs-size);
    line-height: 16px;
  }

  .wm-surprise-bill-plan-note {
    padding: 0;
    background: transparent;
    color: var(--wm-bill-green);
    font-family: var(--wf-font-mono);
    font-size: var(--wm-scenario-text-xs-size);
    line-height: 18px;
    font-style: italic;
  }

  .wm-surprise-bill-save-card {
    position: static;
    padding: 24px;
    background: var(--wm-bill-chip);
    box-shadow: none;
  }

  .wm-surprise-bill-save-card h2 {
    font-size: var(--wf-font-heading-sm-size);
    line-height: var(--wf-font-heading-sm-line-height);
  }

  .wm-surprise-bill-save-details {
    padding: 20px;
    border-radius: var(--wf-radius-md);
    background: var(--wf-color-background-surface);
  }

  .wm-surprise-bill-save-row,
  .wm-surprise-bill-plan-row,
  .wm-surprise-bill-plan-other-row {
    align-items: start;
  }

  .wm-surprise-bill-save-row span,
  .wm-surprise-bill-save-row strong,
  .wm-surprise-bill-plan-row span,
  .wm-surprise-bill-plan-row strong,
  .wm-surprise-bill-plan-other-row span,
  .wm-surprise-bill-plan-other-row strong {
    font-size: var(--wm-scenario-text-md-size);
    line-height: var(--wm-scenario-text-md-line);
  }

  /* Same 56px control-height gap as .wm-surprise-bill-submit above -- a
   * deliberate mobile bump over the desktop 48px (--wf-control-height-xl)
   * button with no rung above it in the scale. Left raw and reported. */
  .wm-surprise-bill-save-primary,
  .wm-surprise-bill-save-secondary {
    min-height: 56px;
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 24px;
  }

  .wm-surprise-bill-plan-details-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wm-surprise-bill-plan-card,
  .wm-surprise-bill-plan-next,
  .wm-surprise-bill-plan-watch {
    padding: 24px;
  }

  .wm-surprise-bill-plan-card h3,
  .wm-surprise-bill-plan-next h3,
  .wm-surprise-bill-plan-watch h3 {
    font-size: var(--wf-font-heading-md-size);
    line-height: 32px;
  }

  .wm-surprise-bill-plan-check {
    border-radius: 28px;
  }

  .wm-surprise-bill-plan-watch {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .wm-surprise-bill-plan-watch h3 {
    color: var(--wm-bill-ink);
  }

  .wm-surprise-bill-plan-watch-item {
    padding: 20px;
    border-radius: var(--wm-card-radius);
    background: rgba(255, 247, 237, 0.64);
  }

  .wm-surprise-bill-plan-other h3 {
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 28px;
  }

  .wm-surprise-bill-plan-other-row {
    border-radius: var(--wm-card-radius);
  }

  .wm-surprise-bill-plan-disclaimer {
    padding-top: 16px;
    border-top: 1px solid rgba(188, 202, 192, 0.2);
    font-size: var(--wm-scenario-text-xs-size);
    line-height: 19px;
  }

  .wm-surprise-bill-plan-empty {
    max-width: none;
    padding: 28px;
  }

  .wm-surprise-bill-plan-empty h2 {
    font-size: var(--wf-font-heading-md-size);
    line-height: 32px;
  }

  .wm-surprise-bill-seo {
    padding: 56px 24px 72px;
  }

  .wm-surprise-bill-seo-inner {
    gap: 56px;
  }

  .wm-surprise-bill-seo-guide,
  .wm-surprise-bill-seo-why,
  .wm-surprise-bill-seo-insights,
  .wm-surprise-bill-seo-read,
  .wm-surprise-bill-seo-next,
  .wm-surprise-bill-seo-faq,
  .wm-surprise-bill-seo-final {
    gap: 24px;
  }

  .wm-surprise-bill-seo h2 {
    font-size: var(--wf-font-heading-md-size);
    line-height: 32px;
  }

  .wm-surprise-bill-seo h3 {
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 28px;
  }

  .wm-surprise-bill-seo p,
  .wm-surprise-bill-seo li {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 23px;
  }

  .wm-surprise-bill-seo-guide-grid {
    gap: 24px;
  }

  .wm-surprise-bill-seo-heading-block h2 {
    font-size: var(--wf-font-title-md-size);
    line-height: 38px;
  }

  .wm-surprise-bill-seo-lede {
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 29px;
  }

  .wm-surprise-bill-seo-learn-card,
  .wm-surprise-bill-seo-question-card,
  .wm-surprise-bill-seo-card,
  .wm-surprise-bill-seo-stat-card,
  .wm-surprise-bill-seo-adjust-card,
  .wm-surprise-bill-seo-next-card,
  .wm-surprise-bill-seo-summary {
    padding: 24px;
  }

  .wm-surprise-bill-seo-question-card {
    padding: 32px;
  }

  .wm-surprise-bill-seo-question-card blockquote p {
    font-size: var(--wf-font-heading-sm-size);
    line-height: var(--wf-font-heading-sm-line-height);
  }

  .wm-surprise-bill-seo-question-card > p:not(.wm-surprise-bill-seo-question-eyebrow) {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 23px;
  }

  .wm-surprise-bill-seo-question-mark {
    top: -10px;
    right: -18px;
    width: 76px;
    height: 76px;
  }

  .wm-surprise-bill-seo-why-grid,
  .wm-surprise-bill-seo-read-grid,
  .wm-surprise-bill-seo-card-grid,
  .wm-surprise-bill-seo-next-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wm-surprise-bill-seo-stat-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 16px;
  }

  .wm-surprise-bill-seo-stat-value {
    grid-row: span 2;
    font-size: var(--wf-font-title-xl-size);
    line-height: 40px;
  }

  .wm-surprise-bill-seo-stat-copy {
    font-size: var(--wm-scenario-text-xs-size);
    line-height: 18px;
  }

  .wm-surprise-bill-seo-stat-source {
    grid-column: 1 / -1;
    padding-top: 8px;
    font-size: var(--wm-scenario-text-min-size);
    line-height: 15px;
  }

  .wm-surprise-bill-seo-card {
    min-height: auto;
  }

  .wm-surprise-bill-seo-card-icon {
    width: 40px;
    height: 40px;
    padding: 11px;
  }

  .wm-surprise-bill-seo-next {
    text-align: left;
  }

  .wm-surprise-bill-seo-next-intro {
    margin: 0;
  }

  .wm-surprise-bill-seo-next-card {
    min-height: auto;
    gap: 4px;
  }

  .wm-surprise-bill-seo-next-card h3 {
    font-size: var(--wm-scenario-text-md-size);
    line-height: var(--wm-scenario-text-md-line);
  }

  .wm-surprise-bill-seo-faq-list {
    gap: 12px;
  }

  /* R6: same geometry-guard reasoning as the desktop rule above (24+24
   * padding, less here) -- not a control-size choice, so left raw rather
   * than forced onto a token that would move it. */
  .wm-surprise-bill-seo-faq button {
    min-height: 64px;
    padding: 20px;
    gap: 16px;
  }

  .wm-surprise-bill-seo-faq h3 {
    font-size: var(--wm-scenario-text-md-size);
    line-height: var(--wm-scenario-text-md-line);
  }

  .wm-surprise-bill-seo-faq-panel {
    padding: 0 20px 20px;
  }

  .wm-surprise-bill-seo-summary {
    text-align: left;
  }

  .wm-surprise-bill-seo-summary p {
    max-width: none;
  }

  .wm-surprise-bill-seo-disclaimer {
    font-size: var(--wm-scenario-text-min-size);
    line-height: var(--wm-scenario-text-xs-line);
    text-align: center;
  }
}

@media (max-width: 390px) {
  .wm-surprise-bill-page.money-page {
    padding-inline: 20px;
  }

  .wm-surprise-bill-sort {
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding-inline: 20px;
  }

  .wm-surprise-bill-seo {
    padding-inline: 20px;
  }
}


/*
 * Same page gutter and column split as the other four calculators, so the content
 * column starts at the same x on every scenario page. The old min(1168px) inner
 * wrapper inside a 56px-padded main pushed this page's column 16px right of the
 * others and squeezed the H1 onto two lines at 1280px.
 */
.debt-scenario-route .debt-scenario-main {
  width: min(1280px, 100%);
  max-width: 1280px;
  gap: 32px;
  padding: 24px 40px 80px;
}

.debt-scenario-shell {
  width: 100%;
  margin: 0;
}

.debt-scenario-shell-layout {
  display: grid;
  gap: 32px;
  align-items: start;
}

/*
 * DOM order inside .debt-scenario-shell-layout is header -> input region -> main, so
 * the H1, the purpose line, and the disclaimer are read (and, on a stacked viewport,
 * seen) before the form. Named grid areas put the header back at the top of the
 * right-hand column on desktop: the input region spans both rows of the left column,
 * and the flexible second row absorbs its spare height so the main column is not
 * pushed down.
 */
@media (min-width: 1041px) {
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-shell-layout {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    grid-template-areas:
      "input header"
      "input main";
    /*
     * The header row must stay exactly as tall as the header. Left as two auto rows,
     * the taller input region spanning both of them would have its extra height shared
     * out between the rows and push the main column down; the flexible second row
     * absorbs that spare height instead.
     */
    grid-template-rows: auto 1fr;
    column-gap: 32px;
    row-gap: 24px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .wm-scenario-page-header {
    grid-area: header;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-shell-main {
    grid-area: main;
  }

  .debt-scenario-shell[data-input-state="expanded"] .wm-scenario-input-region {
    grid-area: input;
  }
}

.debt-scenario-shell[data-input-state="collapsed"] .debt-scenario-shell-layout {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
}

.debt-scenario-shell-main {
  display: grid;
  gap: 24px;
  min-width: 0;
}

/*
 * POST-RUN HEADER COMPRESSION
 *
 * Before a run the H1 and the purpose line are the page: they say what this
 * calculator answers and why to fill the form in. After a run the decision deck
 * says it in the reader's own numbers, and a 34px headline plus a 26px purpose
 * line above it just push the answer down the page.
 *
 * So this compresses rather than removes. The H1 element, the breadcrumb and the
 * educational disclaimer all still render — they are SEO- and compliance-load-
 * bearing — and the purpose line stays in the DOM (the source-order test in
 * page.test.ts reads it there) with the deck's question carrying its job on
 * screen. `.is-post-run` is server-rendered on the fragment root alongside
 * `data-run-state="ready"`, so it survives every fragment swap.
 */
.debt-scenario-shell.is-post-run .wm-scenario-page-title {
  font-size: var(--wf-font-title-sm-size);
  line-height: 34px;
}

.debt-scenario-shell.is-post-run .wm-scenario-page-subhead {
  display: none;
}

/*
 * The Compare heading is a section label now, not the page's answer — the deck
 * above it states the decision. Scoped to this page's own modifier class so
 * `.wm-scenario-compare-head` keeps its full size on the pages that still lead
 * with it, and doubled up on the shared class so the size holds no matter which
 * order the two stylesheets land in.
 */
.wm-scenario-compare-head.debt-scenario-compare-head-label h2 {
  font-size: var(--wf-font-title-xs-size);
  line-height: var(--wf-font-title-xs-line-height);
}

.wm-scenario-compare-head.debt-scenario-compare-head-label p {
  font-size: var(--wm-scenario-text-lg-size);
  line-height: 24px;
}

/* The progress rail's status line, reduced to a clause on that paragraph. */
.wm-scenario-compare-head.debt-scenario-compare-head-label [data-compare-step] {
  color: var(--wm-money-muted);
}

.debt-scenario-shell .wm-scenario-tab-panels,
.debt-scenario-breakdown {
  min-width: 0;
}

.debt-scenario-breakdown {
  display: grid;
  gap: 40px;
}

.debt-scenario-shell .wm-scenario-input-region {
  grid-area: auto;
  min-width: 0;
}

.debt-scenario-shell .debt-scenario-setup-card {
  grid-template-columns: 1fr;
  align-items: stretch;
  padding: 24px;
}

.debt-scenario-shell .debt-scenario-editor-panel {
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Pinning and the backdrop belong to the shell's .wm-scenario-run-control
   (scenario-shell.css): sticky to the BOTTOM of the rail, one behaviour for
   every scenario. This page used to pin the same block to the TOP of the rail
   and unpin it below 1040px, with a second Run repeated after the split options
   to cover the gap — three behaviours for one control. All of that is gone; the
   page class now carries nothing but the look.

   The backdrop is the shell's, but the colour it paints is ours: this control
   sits inside the setup card, not on the page canvas, so a canvas-coloured
   strip read as a grey band inside a blue one. The fade blends toward the same
   value. Fallback kept because an undefined var here would make the whole
   background declaration invalid and leave the bar transparent, which is the
   one thing a scroll-under backdrop must never be.

   One row, not two: Cancel sits beside Run rather than above it, secondary
   first so the visual order matches the tab order. While Cancel is hidden its
   column collapses and Run fills the row, so the pre-run control is unchanged. */
.debt-scenario-shell .debt-scenario-run-row {
  --wm-scenario-run-control-surface: var(--debt-surface, #fff);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.debt-scenario-shell[data-input-state="expanded"] .wm-scenario-input-region {
  position: sticky;
  top: 24px;
  /* 96px, not 48px: the rail is sticky at top:24px, but at scroll 0 it has
     not stuck yet — it starts below the 69px nav plus 24px of page padding,
     so a 100vh-48px box overhangs the fold by 45px and takes the pinned Run
     control with it. Surprise Bill already used this value; the other rails
     did not, which is why Run landed under the fold on arrival there. The
     cost is ~72px of unused rail once stuck, against a primary action that
     was invisible on page load. */
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  /* Symmetric on purpose. The 4px is the rail scrollbar's gutter, and when only
     the right side carried it the card sat 4px off-centre in its column — which
     also left the pinned run control's backdrop ending short of one edge and
     flush with the other. */
  padding-inline: 4px;
}

.debt-scenario-setup-head {
  display: grid;
  gap: 6px;
}

.debt-scenario-setup-head h2,
.debt-scenario-setup-head p,
.debt-scenario-split-editor h3,
.debt-scenario-split-editor p {
  margin: 0;
}

.debt-scenario-setup-head h2 {
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-md-size);
  line-height: 32px;
  font-weight: 800;
}

.debt-scenario-setup-head p,
.debt-scenario-split-editor p {
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

.debt-scenario-split-editor {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.debt-scenario-split-editor h3 {
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 800;
}

.debt-scenario-split-mode-grid {
  display: grid;
  gap: 8px;
}

.debt-scenario-split-mode {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: var(--wm-scenario-control-height);
  border: 1px solid rgba(188, 202, 192, 0.5);
  border-radius: var(--wf-radius-md);
  padding: 10px 14px;
  background: var(--wf-color-background-surface);
  color: var(--wm-money-copy, #3d4a42);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.debt-scenario-split-mode span {
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: var(--wm-scenario-text-sm-line);
  font-weight: 800;
}

.debt-scenario-split-mode small {
  color: var(--wm-money-muted, #6d7a72);
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
}

.debt-scenario-split-mode.is-active {
  border-color: var(--wm-money-accent, #006948);
  background: var(--wm-money-accent-wash, #e0f2f1);
}

.debt-scenario-split-mode:focus-visible {
  outline: 2px solid var(--wm-money-accent, #006948);
  outline-offset: 3px;
}

.debt-scenario-compare .wm-scenario-option-grid {
  align-items: stretch;
}

.debt-scenario-compare .wm-scenario-option-card {
  min-height: 100%;
}

.debt-scenario-path-carousel {
  display: grid;
  gap: 12px;
  max-width: 100%;
  min-width: 0;
}

.debt-scenario-path-carousel-controls {
  display: none;
}

@media (min-width: 721px) {
  .debt-scenario-path-carousel-controls {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .debt-scenario-path-carousel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-scenario-control-height-compact);
    height: var(--wm-scenario-control-height-compact);
    border: 1px solid rgba(188, 202, 192, 0.55);
    border-radius: var(--wf-radius-pill);
    background: var(--wf-color-background-surface);
    color: var(--wm-money-accent, #006948);
    font: inherit;
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--wm-money-shadow-hairline);
  }

  .debt-scenario-path-carousel-button[disabled] {
    cursor: default;
    opacity: 0.42;
    box-shadow: none;
  }

  .debt-scenario-path-carousel-button:focus-visible {
    outline: 2px solid var(--wm-money-accent, #006948);
    outline-offset: 3px;
  }

  .debt-scenario-path-grid[data-breakdown-carousel-track] {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, 360px);
    gap: 24px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 2px 2px 14px;
    scroll-padding-inline: 2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .debt-scenario-path-grid[data-breakdown-carousel-track] > .debt-scenario-path-card {
    scroll-snap-align: start;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-breakdown,
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-breakdown > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-breakdown {
    gap: 32px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-strategy-selector,
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-key-tradeoffs,
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-timeline {
    gap: 24px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-section-heading {
    gap: 8px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-section-heading h2,
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-key-tradeoffs h2,
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-timeline h2 {
    font-size: var(--wf-font-title-sm-size);
    line-height: var(--wf-font-title-sm-line-height);
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-section-heading p {
    max-width: 62ch;
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 24px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-path-grid[data-breakdown-carousel-track] {
    grid-auto-columns: minmax(320px, 360px);
    gap: 18px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-path-card.wf-surface {
    gap: 18px;
    min-height: 0;
    padding: 24px;
    border-radius: 24px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-path-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-path-head h3 {
    font-size: var(--wf-font-title-xs-size);
    line-height: var(--wf-font-title-xs-line-height);
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-path-badge {
    padding-inline: 10px;
    font-size: var(--wm-scenario-text-min-size);
    line-height: var(--wm-scenario-text-xs-line);
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-path-description {
    font-size: var(--wm-scenario-text-lg-size);
    line-height: 24px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-path-metrics {
    gap: 12px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-path-metrics div {
    gap: 8px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-path-metrics dd {
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 24px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-path-action {
    min-height: var(--wm-scenario-control-height);
    padding: 11px 20px;
    font-size: var(--wm-scenario-text-md-size);
    line-height: var(--wm-scenario-text-md-line);
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-card-split-panel {
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-card-split-grid,
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-card-split-results {
    gap: 8px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-card-split-grid span,
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-card-split-results dt {
    font-size: var(--wm-scenario-text-min-size);
    line-height: var(--wm-scenario-text-xs-line);
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-card-split-grid strong,
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-card-split-results dd {
    font-size: var(--wm-scenario-text-md-size);
    line-height: var(--wm-scenario-text-md-line);
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-insight-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px;
    border-radius: 24px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-insight-card h2 {
    font-size: var(--wf-font-title-xs-size);
    line-height: var(--wf-font-title-xs-line-height);
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-insight-card p {
    font-size: var(--wm-scenario-text-lg-size);
    line-height: 24px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-tradeoff-row {
    grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(92px, 0.45fr));
    gap: 12px 16px;
    min-height: 0;
    padding: 20px 24px;
    border-radius: 22px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-tradeoff-quote {
    grid-column: 1 / -1;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-tradeoff-row h3,
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-plan-summary h2 {
    font-size: var(--wf-font-heading-sm-size);
    line-height: var(--wf-font-heading-sm-line-height);
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-tradeoff-row p,
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-tradeoff-stat span {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 22px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-tradeoff-stat strong {
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 24px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-timeline {
    padding: 16px 0 32px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-timeline-list {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 0 0 42px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-timeline-list::before {
    top: 18px;
    bottom: 18px;
    left: 17px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-timeline-list li {
    justify-items: start;
    gap: 12px;
    min-height: 0;
    text-align: left;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-timeline-dot {
    position: absolute;
    top: 0;
    left: -42px;
    width: 36px;
    height: 36px;
    border-width: 0;
    font-size: var(--wm-scenario-text-md-size);
    box-shadow: 0 0 0 4px #fff, 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-timeline-list h3 {
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 26px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-timeline-list p:not(.debt-scenario-timeline-marker) {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 22px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-plan-summary {
    gap: 16px;
    padding: 28px;
    border-radius: 20px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-plan-summary p,
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-plan-summary .debt-scenario-plan-comparison {
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 26px;
  }
}

.debt-scenario-plan,
.debt-scenario-plan-empty {
  min-width: 0;
}

.debt-scenario-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-template-areas:
    "hero rail"
    "glance rail"
    "fit rail"
    "next rail"
    "watch rail"
    "other rail";
  gap: 32px;
  align-items: start;
}

.debt-scenario-plan-hero {
  grid-area: hero;
}

.debt-scenario-plan-rail {
  grid-area: rail;
  position: sticky;
  top: 24px;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.debt-scenario-plan-glance {
  grid-area: glance;
}

.debt-scenario-plan-fit {
  grid-area: fit;
}

.debt-scenario-plan-next {
  grid-area: next;
}

.debt-scenario-plan-watch {
  grid-area: watch;
}

.debt-scenario-plan-other {
  grid-area: other;
}

.debt-scenario-plan-hero,
.debt-scenario-save-card,
.debt-scenario-plan-card,
.debt-scenario-plan-fit,
.debt-scenario-plan-next,
.debt-scenario-plan-watch,
.debt-scenario-plan-empty {
  border-radius: var(--wm-card-radius);
  background: var(--wf-color-background-surface);
  box-shadow: var(--wm-money-shadow-hairline);
}

.debt-scenario-plan-hero,
.debt-scenario-plan-fit,
.debt-scenario-plan-next,
.debt-scenario-plan-watch,
.debt-scenario-plan-empty {
  padding: 32px;
}

.debt-scenario-plan-hero {
  display: grid;
  gap: 24px;
  border: 1px solid rgba(104, 219, 169, 0.28);
}

.debt-scenario-plan-hero-head {
  display: grid;
  gap: 16px;
}

.debt-scenario-plan-status,
.debt-scenario-plan-card-head span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  border-radius: var(--wf-radius-pill);
  padding: 0 14px;
  background: var(--wm-money-accent-wash, #e0f2f1);
  color: var(--wm-money-accent, #006948);
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.debt-scenario-plan h2,
.debt-scenario-plan h3,
.debt-scenario-plan h4,
.debt-scenario-plan p,
.debt-scenario-plan-empty h2,
.debt-scenario-plan-empty p {
  margin: 0;
}

.debt-scenario-plan-hero h2,
.debt-scenario-save-card h2,
.debt-scenario-plan-empty h2 {
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-weight: 800;
}

/*
 * WMA-117 D3: no --wf-font-* rung lands on 44px (the ladder has 42/title-xl and
 * 48/display-lg, nothing between). Left raw rather than rounding this hero
 * figure onto either neighbour and moving a pixel no violation requires moving.
 * 8 rules draw 44px across apps/ + packages/ (grep font-size: 44px) -- a real
 * gap, reported to Lane G rather than a token invented here.
 */
.debt-scenario-plan-hero h2 {
  font-size: 44px;
  line-height: 52px;
}

.debt-scenario-save-card h2,
.debt-scenario-plan-empty h2 {
  font-size: var(--wf-font-heading-md-size);
  line-height: 32px;
}

.debt-scenario-plan-hero-head p,
.debt-scenario-plan-hero-grid p,
.debt-scenario-save-card > p,
.debt-scenario-plan-empty p {
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

/*
 * WMA-117 D3: 17px sits between -xl (16) and -2xl (18) with no rung of its own.
 * 7 rules across apps/ draw exactly 17px (grep font-size: 17px), so this is not
 * a one-off like the retired 19px case, but adding a step is Lane G's call, not
 * this lane's -- left raw and reported.
 */
.debt-scenario-plan-hero-head p {
  max-width: 68ch;
  font-size: 17px;
  line-height: 28px;
}

.debt-scenario-plan-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.debt-scenario-plan-hero-grid > div {
  display: grid;
  gap: 8px;
  padding: 20px;
  border-radius: 8px;
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.debt-scenario-plan-hero-grid h3 {
  color: var(--wm-money-accent, #006948);
  font-size: var(--wm-scenario-text-min-size);
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.debt-scenario-plan-tiny-win {
  padding-top: 18px;
  border-top: 1px solid rgba(188, 202, 192, 0.28);
  color: var(--wm-money-accent, #006948);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
  font-style: italic;
  font-weight: 700;
}

.debt-scenario-save-card {
  display: grid;
  gap: 18px;
  padding: 28px;
}

.debt-scenario-save-card > p {
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.debt-scenario-save-field {
  display: grid;
  gap: 8px;
}

.debt-scenario-save-field span,
.debt-scenario-plan-group-label {
  color: var(--wm-money-muted, #6d7a72);
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.debt-scenario-save-field input {
  width: 100%;
  min-height: var(--wf-control-height-xl);
  border: 1px solid var(--wm-money-border-medium);
  border-bottom-width: 2px;
  border-radius: 8px 8px 0 0;
  padding: 0 14px;
  background: var(--wm-money-surface-soft, #f1f3ff);
  color: var(--wm-money-ink, #151b2a);
  font: inherit;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 700;
}

.debt-scenario-save-field input:focus {
  outline: 2px solid var(--wm-money-accent, #006948);
  outline-offset: 2px;
}

.debt-scenario-save-details {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 8px;
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.debt-scenario-save-row,
.debt-scenario-plan-row,
.debt-scenario-plan-other-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.debt-scenario-save-row span,
.debt-scenario-plan-row span,
.debt-scenario-plan-other-row span {
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

.debt-scenario-save-row strong,
.debt-scenario-plan-row strong,
.debt-scenario-plan-other-row strong {
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
  font-weight: 800;
  text-align: right;
}

.debt-scenario-plan-row-value {
  display: grid;
  gap: 2px;
  justify-items: end;
  min-width: 0;
}

.debt-scenario-save-row strong.is-mono,
.debt-scenario-plan-row strong.is-mono {
  font-family: var(--wf-font-mono);
}

.debt-scenario-save-row strong.is-accent,
.debt-scenario-plan-row strong.is-accent {
  color: var(--wm-money-accent, #006948);
  font-family: var(--wf-font-mono);
}

/*
 * Values like "$300/mo" and "28 mo" must stay one intact run of text — never
 * split at the "/" or the space — so nowrap keeps them together. There is no
 * fallback break to pair with it: nowrap suppresses every soft-wrap
 * opportunity, so an `overflow-wrap` here would be a dead declaration. What
 * keeps a long value from overflowing is the label-over-value stacking these
 * rows switch to whenever the column is halved — below 1041px, and above it
 * once the input rail is open (see both blocks below).
 */
.debt-scenario-plan-row strong {
  white-space: nowrap;
}

.debt-scenario-plan-row-value em {
  color: var(--wm-money-accent, #006948);
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.debt-scenario-save-summary {
  padding: 14px;
  border: 1px solid rgba(0, 105, 72, 0.12);
  border-radius: 8px;
  background: rgba(0, 105, 72, 0.05);
  color: var(--wm-money-accent, #006948);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 20px;
  font-weight: 700;
}

.debt-scenario-save-helper,
.debt-scenario-save-status {
  color: var(--wm-money-muted, #6d7a72);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

.debt-scenario-save-actions {
  display: grid;
  gap: 10px;
}

.debt-scenario-save-primary,
.debt-scenario-save-secondary,
.debt-scenario-plan-empty button {
  min-height: var(--wf-control-height-xl);
  border: 0;
  border-radius: var(--wf-radius-pill);
  padding: 0 22px;
  font: inherit;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 800;
  cursor: pointer;
}

.debt-scenario-save-primary,
.debt-scenario-plan-empty button {
  background: var(--wm-money-accent, #006948);
  color: var(--wf-color-text-inverse);
  box-shadow: var(--wm-money-accent-shadow-soft);
}

.debt-scenario-save-secondary {
  background: var(--wm-money-chip, #dce2f6);
  color: var(--wm-money-accent, #006948);
}

/*
 * Neither button routes through the shared @whatify/ui `wf-button` component
 * (unlike Run Scenario, which gets `.wf-button:disabled`'s gray-out for free),
 * so disabled needs its own rule here. Mirrors that shared treatment: dim via
 * opacity rather than swap the fill, drop the pointer cursor and the resting
 * shadow that reads as a raised, clickable surface.
 */
.debt-scenario-save-primary[disabled],
.debt-scenario-save-secondary[disabled] {
  cursor: not-allowed;
  opacity: 0.52;
  box-shadow: none;
}

.debt-scenario-plan-glance,
.debt-scenario-plan-other {
  display: grid;
  gap: 20px;
}

.debt-scenario-plan-glance h3,
.debt-scenario-plan-fit h3,
.debt-scenario-plan-next h3,
.debt-scenario-plan-watch h3,
.debt-scenario-plan-other h3 {
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-md-size);
  line-height: 32px;
  font-weight: 800;
}

.debt-scenario-plan-glance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/*
 * With the input rail reopened ("Edit scenario"), the shell's own expanded
 * two-column layout (line 34) halves the main column before this Plan's
 * hero/rail split (line 497) halves it again, leaving the glance grid's two
 * cards too narrow for a label and its value side by side — values clipped
 * mid-character against the page's no-horizontal-scroll boundary. The main
 * column stays this narrow at every desktop width once the rail is open
 * (`.debt-scenario-main` caps at 1280px), so this stacks unconditionally
 * whenever the rail is expanded rather than at a specific viewport width —
 * the same label-over-value treatment the mobile layout already uses below,
 * just keyed off the rail state instead of viewport width.
 */
@media (min-width: 1041px) {
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-plan-glance-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-plan-row {
    display: grid;
    justify-content: stretch;
    gap: 4px;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-plan-row strong {
    text-align: left;
  }

  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-plan-row .debt-scenario-plan-row-value {
    justify-items: start;
  }
}

.debt-scenario-plan-card {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 28px;
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.debt-scenario-plan-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.debt-scenario-plan-card-head span {
  min-height: 24px;
  padding-inline: 10px;
  font-size: var(--wm-scenario-text-min-size);
  white-space: nowrap;
}

.debt-scenario-plan-fit,
.debt-scenario-plan-next,
.debt-scenario-plan-watch {
  display: grid;
  gap: 24px;
}

.debt-scenario-plan-fit-list,
.debt-scenario-plan-step-groups,
.debt-scenario-plan-watch-list,
.debt-scenario-plan-other-list {
  display: grid;
  gap: 14px;
}

.debt-scenario-plan-fit-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.debt-scenario-plan-fit-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--wf-radius-pill);
  background: var(--wm-money-accent-wash, #e0f2f1);
}

.debt-scenario-plan-fit-item h4,
.debt-scenario-plan-watch-item h4 {
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 800;
}

.debt-scenario-plan-fit-item p,
.debt-scenario-plan-tradeoff,
.debt-scenario-plan-watch-item p {
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.debt-scenario-plan-tradeoff {
  padding: 18px;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  background: var(--wf-color-status-warning-bg);
}

.debt-scenario-plan-tradeoff strong {
  color: var(--wf-color-status-warning-text);
}

.debt-scenario-plan-step-group {
  display: grid;
  gap: 10px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--wm-money-chip, #dce2f6);
}

.debt-scenario-plan-step-group .debt-scenario-plan-group-label {
  padding: 12px 18px 0;
}

.debt-scenario-plan-checklist {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.debt-scenario-plan-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: var(--wm-scenario-control-height);
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 700;
}

.debt-scenario-plan-check input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}

.debt-scenario-plan-watch-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.debt-scenario-plan-watch-item {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-left: 4px solid var(--wf-color-status-error-border);
  border-radius: 8px;
  background: var(--wf-color-status-error-bg);
}

.debt-scenario-plan-watch-item h4 {
  color: var(--wf-color-status-error-text);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.debt-scenario-plan-other-list {
  overflow: hidden;
  border-radius: 8px;
  background: var(--wm-money-chip, #dce2f6);
}

.debt-scenario-plan-other-row {
  min-height: 56px;
  padding: 16px 18px;
}

.debt-scenario-plan-other-row + .debt-scenario-plan-other-row {
  border-top: 1px solid rgba(188, 202, 192, 0.3);
}

.debt-scenario-plan-disclaimer {
  color: var(--wm-money-muted, #6d7a72);
  font-size: var(--wm-scenario-text-min-size);
  line-height: 18px;
}

.debt-scenario-plan-disclaimer.is-mobile {
  display: none;
}

.debt-scenario-plan-empty {
  display: grid;
  gap: 16px;
  max-width: 680px;
}

.debt-scenario-plan-empty button {
  width: fit-content;
}

.debt-scenario-save-primary:focus-visible,
.debt-scenario-save-secondary:focus-visible,
.debt-scenario-plan-empty button:focus-visible,
.debt-scenario-plan-check input:focus-visible {
  outline: 2px solid var(--wm-money-accent, #006948);
  outline-offset: 3px;
}

@media (max-width: 1040px) {
  /* Single column: header, then the form, then the results — DOM order. */
  .debt-scenario-shell[data-input-state="expanded"] .debt-scenario-shell-layout {
    grid-template-columns: 1fr;
  }

  .debt-scenario-shell[data-input-state="expanded"] .wm-scenario-input-region {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .debt-scenario-plan {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "hero"
      "rail"
      "glance"
      "fit"
      "next"
      "watch"
      "other"
      "mobile-disclaimer";
  }

  .debt-scenario-plan-rail {
    position: static;
  }

  .debt-scenario-plan-disclaimer.is-desktop {
    display: none;
  }

  .debt-scenario-plan-disclaimer.is-mobile {
    display: block;
    grid-area: mobile-disclaimer;
    text-align: center;
  }
}

@media (max-width: 720px) {
  .debt-scenario-route .debt-scenario-main {
    padding: 24px 24px 80px;
  }

  .debt-scenario-shell {
    width: 100%;
  }

  .debt-scenario-shell-layout,
  .debt-scenario-shell-main,
  .debt-scenario-breakdown {
    gap: 24px;
  }

  /* The shared header drops to 28px here, so the post-run step down has to be
     restated against that baseline rather than inherited from the desktop rule. */
  .debt-scenario-shell.is-post-run .wm-scenario-page-title {
    font-size: var(--wf-font-title-xs-size);
    line-height: 30px;
  }

  .wm-scenario-compare-head.debt-scenario-compare-head-label h2 {
    font-size: var(--wf-font-heading-sm-size);
    line-height: 26px;
  }

  .wm-scenario-compare-head.debt-scenario-compare-head-label p {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 23px;
  }

  .debt-scenario-split-mode-grid {
    grid-template-columns: 1fr;
  }

  .debt-scenario-plan {
    gap: 24px;
  }

  .debt-scenario-plan-hero,
  .debt-scenario-save-card,
  .debt-scenario-plan-card,
  .debt-scenario-plan-fit,
  .debt-scenario-plan-next,
  .debt-scenario-plan-watch,
  .debt-scenario-plan-empty {
    padding: 24px;
    border-radius: 24px;
  }

  .debt-scenario-plan-hero h2 {
    font-size: var(--wf-font-title-md-size);
    line-height: 38px;
  }

  .debt-scenario-plan-hero-head p,
  .debt-scenario-plan-hero-grid p,
  .debt-scenario-save-card > p,
  .debt-scenario-plan-empty p {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 23px;
  }

  .debt-scenario-plan-hero-grid,
  .debt-scenario-plan-glance-grid,
  .debt-scenario-plan-watch-list {
    grid-template-columns: 1fr;
  }

  .debt-scenario-plan-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .debt-scenario-save-row,
  .debt-scenario-plan-row,
  .debt-scenario-plan-other-row {
    display: grid;
    justify-content: stretch;
    gap: 4px;
  }

  .debt-scenario-save-row strong,
  .debt-scenario-plan-row strong,
  .debt-scenario-plan-other-row strong {
    text-align: left;
  }

  .debt-scenario-plan-row-value {
    justify-items: start;
  }

  .debt-scenario-save-primary,
  .debt-scenario-save-secondary {
    width: 100%;
  }

  .debt-scenario-plan-disclaimer.is-mobile {
    text-align: left;
  }
}

.wm-debt-seo {
  width: 100%;
  padding: 48px 56px 96px;
  border-top: 1px solid var(--wm-money-border-muted);
  background: var(--wm-money-canvas, #f9f9ff);
  color: var(--wm-money-ink, #151b2a);
}

.wm-debt-seo-inner {
  display: grid;
  gap: 96px;
  width: min(1168px, 100%);
  margin: 0 auto;
}

.wm-debt-seo section {
  min-width: 0;
}

.wm-debt-seo h2,
.wm-debt-seo h3,
.wm-debt-seo p,
.wm-debt-seo blockquote,
.wm-debt-seo ul {
  margin: 0;
}

.wm-debt-seo h2,
.wm-debt-seo h3 {
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  letter-spacing: 0;
}

.wm-debt-seo h2 {
  font-size: var(--wf-font-heading-xl-size);
  line-height: 40px;
  font-weight: 800;
}

.wm-debt-seo h3 {
  font-size: var(--wf-font-heading-sm-size);
  line-height: var(--wf-font-heading-sm-line-height);
  font-weight: 700;
}

.wm-debt-seo p,
.wm-debt-seo li {
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-debt-seo-guide,
.wm-debt-seo-why,
.wm-debt-seo-comparison,
.wm-debt-seo-read,
.wm-debt-seo-next,
.wm-debt-seo-faq,
.wm-debt-seo-final {
  display: grid;
  gap: 48px;
}

.wm-debt-seo-guide-grid,
.wm-debt-seo-why-grid,
.wm-debt-seo-read-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  gap: 48px;
  align-items: start;
}

.wm-debt-seo-heading-block,
.wm-debt-seo-copy {
  display: grid;
  gap: 24px;
}

/*
 * WMA-117 D3: 60px is above --wf-font-display-lg-size (48), the top rung
 * defined today, with nothing between it and the SEO H1 here. 6 rules across
 * apps/ draw exactly 60px (grep font-size: 60px), spread over 4 stylesheets --
 * a genuine gap at the top of the scale, not a one-off. Left raw and reported
 * rather than rounding a display headline down to 48px.
 */
.wm-debt-seo-heading-block h2 {
  max-width: 700px;
  font-size: 60px;
  line-height: 60px;
}

.wm-debt-seo-eyebrow,
.wm-debt-seo-question-eyebrow,
.wm-debt-seo-card-eyebrow,
.wm-debt-seo-next-card p,
.wm-debt-seo-disclaimer {
  color: var(--wm-money-accent, #006948);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.wm-debt-seo-eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 4px 16px;
  border-radius: var(--wf-radius-pill);
  background: #86f2e4;
  color: #005049;
}

.wm-debt-seo-lede {
  max-width: 672px;
  font-size: var(--wf-font-heading-sm-size);
  line-height: 32px;
}

.wm-debt-seo-learn-card,
.wm-debt-seo-question-card,
.wm-debt-seo-card,
.wm-debt-seo-stat-card,
.wm-debt-seo-tip-card,
.wm-debt-seo-adjust-card,
.wm-debt-seo-next-card,
.wm-debt-seo-summary,
.wm-debt-seo-faq-item {
  border-radius: var(--wm-card-radius, 32px);
}

.wm-debt-seo-learn-card {
  display: grid;
  gap: 24px;
  padding: 32px;
  border: 1px solid rgba(188, 202, 192, 0.1);
  background: #e2e8fc;
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-debt-seo-learn-card h3,
.wm-debt-seo-tip-card h3,
.wm-debt-seo-adjust-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wm-money-accent, #006948);
}

.wm-debt-seo-learn-icon,
.wm-debt-seo-tip-icon,
.wm-debt-seo-adjust-icon,
.wm-debt-seo-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-money-accent, #006948);
}

.wm-debt-seo-learn-icon {
  width: 20px;
  height: 20px;
}

.wm-debt-seo-learn-icon svg,
.wm-debt-seo-tip-icon svg,
.wm-debt-seo-adjust-icon svg,
.wm-debt-seo-list-icon svg,
.wm-debt-seo-card-icon svg,
.wm-debt-seo-question-mark svg {
  width: 100%;
  height: 100%;
}

.wm-debt-seo-learn-list,
.wm-debt-seo-adjust-list {
  display: grid;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.wm-debt-seo-learn-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 24px;
  font-weight: 600;
}

.wm-debt-seo-list-icon {
  width: 14px;
  height: 14px;
  margin-top: 4px;
}

.wm-debt-seo-question-card {
  position: relative;
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: 64px;
  background: #00855d;
}

.wm-debt-seo-question-card blockquote {
  max-width: 896px;
}

.wm-debt-seo-question-card blockquote p {
  color: #f5fff7;
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-xl-size);
  line-height: 40px;
  font-weight: 800;
}

.wm-debt-seo .wm-debt-seo-question-card > p:not(.wm-debt-seo-question-eyebrow) {
  max-width: 920px;
  color: #f5fff7;
  font-size: var(--wf-font-heading-sm-size);
  line-height: var(--wf-font-heading-sm-line-height);
}

.wm-debt-seo .wm-debt-seo-question-eyebrow {
  color: #f5fff7;
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  letter-spacing: 1px;
}

.wm-debt-seo-question-mark {
  position: absolute;
  right: 64px;
  bottom: 54px;
  width: 120px;
  height: 120px;
  color: rgba(245, 255, 247, 0.08);
}

.wm-debt-seo-stat-card {
  display: grid;
  gap: 8px;
  padding: 32px 32px 32px 36px;
  border-left: 4px solid var(--wm-money-accent, #006948);
  background: #f1f3ff;
}

.wm-debt-seo-stat-value {
  color: var(--wm-money-accent, #006948);
  font-family: var(--wf-font-mono);
  font-size: var(--wf-font-display-lg-size);
  line-height: 48px;
  font-weight: 700;
}

.wm-debt-seo-stat-copy {
  padding-bottom: 16px;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 19px;
  font-weight: 600;
}

.wm-debt-seo-stat-source {
  padding-top: 16px;
  border-top: 1px solid rgba(188, 202, 192, 0.35);
  color: var(--wm-money-copy, #3d4a42);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-min-size);
  line-height: var(--wm-scenario-text-xs-line);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-debt-seo-comparison {
  text-align: center;
}

.wm-debt-seo-card-grid,
.wm-debt-seo-next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.wm-debt-seo-card {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 280px;
  padding: 32px;
  background: var(--wf-color-background-surface);
  text-align: left;
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-debt-seo-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: var(--wf-radius-pill);
  background: #e0f2f1;
  color: var(--wm-money-accent, #006948);
}

.wm-debt-seo-comparison-card:nth-child(2) .wm-debt-seo-card-icon {
  background: #f1f3ff;
  color: #4b41e1;
}

.wm-debt-seo-comparison-card:nth-child(3) .wm-debt-seo-card-icon {
  background: #e9edff;
  color: #2a3040;
}

.wm-debt-seo-card-eyebrow {
  color: var(--wm-money-accent, #006948);
}

.wm-debt-seo-card p:not(.wm-debt-seo-card-eyebrow) {
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-debt-seo-read-grid {
  grid-template-columns: minmax(0, 2fr) minmax(320px, 0.9fr);
}

.wm-debt-seo-tip-card {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 32px;
  border-left: 4px solid var(--wm-money-accent, #006948);
  background: rgba(134, 242, 228, 0.42);
}

.wm-debt-seo-tip-card h3 {
  color: #005049;
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-min-size);
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-debt-seo-tip-card p {
  color: #005049;
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 29px;
  font-style: italic;
  font-weight: 600;
}

.wm-debt-seo-tip-icon,
.wm-debt-seo-adjust-icon {
  width: 16px;
  height: 16px;
}

.wm-debt-seo-adjust-card {
  display: grid;
  gap: 24px;
  padding: 32px;
  background: #dce2f6;
}

.wm-debt-seo-adjust-card h3 {
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-debt-seo-adjust-list {
  gap: 16px;
}

.wm-debt-seo-adjust-list li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 16px;
  border-radius: 6px;
  background: var(--wf-color-background-surface);
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 24px;
  font-weight: 600;
}

/*
  The chip and question-card triggers inherit every visual from the pill or card
  around them, so the button carries semantics only and the styling stays where
  it already was. Their stretched ::after is what makes the whole pill/card the
  hit target and the focus ring, without a wrapper that would change the layout.
*/
.wm-debt-seo-adjust-chip,
.wm-debt-seo-next-trigger {
  padding: 0;
  border: 0;
  /* Inherited by the ::after below, so the focus ring follows the pill shape. */
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.wm-debt-seo-adjust-chip::after,
.wm-debt-seo-next-trigger::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
}

/*
  The ring belongs on the ::after, which covers the whole pill or card; the
  button's own box is just the text it wraps. Both declarations have to move
  together — dropping the default ring is only safe because the next rule
  replaces it.
*/
.wm-debt-seo-adjust-chip:focus-visible,
.wm-debt-seo-next-trigger:focus-visible {
  outline: none;
}

/*
  Solid accent, not a translucent tint: a 0.35-alpha green composites to roughly
  1.6:1 against these light surfaces, under the 3:1 WCAG 2.2 asks of a focus
  indicator. Same treatment the scenario's other focus rings use.
*/
.wm-debt-seo-adjust-chip:focus-visible::after,
.wm-debt-seo-next-trigger:focus-visible::after {
  outline: 2px solid var(--wm-money-accent, #006948);
  outline-offset: 3px;
}

.wm-debt-seo-adjust-list li:has(.wm-debt-seo-adjust-chip:hover) {
  background: #e0f2f1;
}

.wm-debt-seo-next-card {
  display: grid;
  gap: 12px;
  text-align: left;
}

.wm-debt-seo-next-card.is-actionable {
  position: relative;
  border-radius: 6px;
}

.wm-debt-seo-next-card.is-actionable:has(.wm-debt-seo-next-trigger:hover) h3 {
  color: var(--wm-money-accent, #006948);
}

.wm-debt-seo-next-card p {
  color: var(--wm-money-muted, #6d7a72);
  letter-spacing: 1.2px;
}

.wm-debt-seo-next-card h3 {
  font-size: var(--wf-font-heading-sm-size);
  line-height: var(--wf-font-heading-sm-line-height);
}

.wm-debt-seo-faq-list {
  display: grid;
  gap: 16px;
}

.wm-debt-seo-faq-item {
  overflow: hidden;
  background: #f1f3ff;
}

.wm-debt-seo-faq-item.is-open {
  border: 1px solid rgba(0, 105, 72, 0.2);
  background: #f1f3ff;
}

.wm-debt-seo-faq h3 {
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 28px;
}

/*
 * WMA-117 D3: min-height here is 24px padding top+bottom plus the h3's own
 * line-height (28px, 20px on the mobile step below) -- it documents the
 * content-driven height rather than setting one, and no --wf-control-height-*
 * rung is 76px (or 64px on mobile). Rounding it onto 52 (the nearest rung)
 * would only change rendering for a one-line question shorter than its own
 * padding allows, which this lane cannot verify against every FAQ entry
 * without risking a real accordion-row regression it did not intend. Left
 * raw and reported rather than guessed at.
 */
.wm-debt-seo-faq button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 76px;
  padding: 24px;
  border: 0;
  background: transparent;
  color: var(--wm-money-ink, #151b2a);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wm-debt-seo-faq-item.is-open button {
  color: var(--wm-money-accent, #006948);
}

.wm-debt-seo-faq button:focus-visible {
  outline: 2px solid var(--wm-money-accent, #006948);
  outline-offset: 3px;
}

.wm-debt-seo-faq-chevron {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: currentColor;
}

.wm-debt-seo-faq-chevron::before {
  position: absolute;
  inset: 1px;
  content: "";
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.wm-debt-seo-faq-item.is-open .wm-debt-seo-faq-chevron::before {
  transform: translateY(4px) rotate(225deg);
}

.wm-debt-seo-faq-panel {
  display: grid;
  gap: 14px;
  padding: 0 24px 24px;
}

.wm-debt-seo-faq-panel[hidden] {
  display: none;
}

.wm-debt-seo-faq-panel p {
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-debt-seo-summary {
  padding: 40px 136px;
  background: var(--wf-color-background-surface);
  text-align: center;
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-debt-seo-summary p {
  max-width: 896px;
  margin: 0 auto;
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-debt-seo-disclaimer {
  max-width: 768px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid rgba(188, 202, 192, 0.2);
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 28px;
  letter-spacing: 1px;
  text-align: center;
}

@media (max-width: 1040px) {
  .wm-debt-seo {
    padding-inline: 40px;
  }

  .wm-debt-seo-guide-grid,
  .wm-debt-seo-why-grid,
  .wm-debt-seo-read-grid {
    grid-template-columns: 1fr;
  }

  .wm-debt-seo-card-grid,
  .wm-debt-seo-next-grid {
    gap: 20px;
  }

  .wm-debt-seo-summary {
    padding-inline: 56px;
  }
}

@media (max-width: 760px) {
  .wm-debt-seo {
    padding: 48px 24px 72px;
  }

  .wm-debt-seo-inner {
    gap: 56px;
  }

  .wm-debt-seo-guide,
  .wm-debt-seo-why,
  .wm-debt-seo-comparison,
  .wm-debt-seo-read,
  .wm-debt-seo-next,
  .wm-debt-seo-faq,
  .wm-debt-seo-final {
    gap: 24px;
  }

  .wm-debt-seo h2 {
    font-size: var(--wf-font-heading-md-size);
    line-height: 32px;
  }

  .wm-debt-seo h3 {
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 28px;
  }

  .wm-debt-seo p,
  .wm-debt-seo li {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 23px;
  }

  .wm-debt-seo-heading-block h2 {
    font-size: var(--wf-font-display-md-size);
    line-height: 44px;
  }

  .wm-debt-seo-lede {
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 29px;
  }

  .wm-debt-seo-card-grid,
  .wm-debt-seo-next-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wm-debt-seo-learn-card,
  .wm-debt-seo-question-card,
  .wm-debt-seo-card,
  .wm-debt-seo-stat-card,
  .wm-debt-seo-tip-card,
  .wm-debt-seo-adjust-card,
  .wm-debt-seo-next-card,
  .wm-debt-seo-summary {
    padding: 24px;
  }

  .wm-debt-seo-question-card {
    padding: 72px 32px 32px;
    background: #e0f2f1;
  }

  .wm-debt-seo-question-card blockquote p {
    color: var(--wm-money-ink, #151b2a);
    font-size: var(--wf-font-heading-md-size);
    line-height: var(--wf-font-heading-md-line-height);
  }

  /*
    The `.wm-debt-seo ` prefix is load-bearing, not decoration: the desktop rules
    these two override carry it, so without it the desktop white (#f5fff7) outranks
    the mobile dark copy and the card renders white-on-mint. Keep the prefixes in
    step whenever either side moves.
  */
  .wm-debt-seo .wm-debt-seo-question-card > p:not(.wm-debt-seo-question-eyebrow) {
    color: var(--wm-money-copy, #3d4a42);
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 26px;
  }

  .wm-debt-seo .wm-debt-seo-question-eyebrow {
    color: var(--wm-money-accent, #006948);
    font-size: var(--wm-scenario-text-min-size);
    line-height: var(--wm-scenario-text-xs-line);
  }

  .wm-debt-seo-question-mark {
    top: -12px;
    right: -18px;
    bottom: auto;
    width: 92px;
    height: 92px;
    color: rgba(0, 105, 72, 0.08);
  }

  .wm-debt-seo-stat-card {
    text-align: center;
  }

  /*
   * WMA-117 D3: no --wf-font-* size rung is 42px (34/title-xl and 40/
   * display-md bracket it; 42 is title-xl's *line-height*, not a size). 8
   * rules across apps/ draw exactly 42px (grep font-size: 42px) in 6
   * stylesheets, so this is a real gap, not a one-off -- left raw and
   * reported rather than rounding this mobile stat figure onto a neighbour.
   */
  .wm-debt-seo-stat-value {
    font-size: 42px;
    line-height: 48px;
  }

  .wm-debt-seo-stat-copy {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 21px;
  }

  .wm-debt-seo-card {
    min-height: auto;
    background: #f1f3ff;
  }

  .wm-debt-seo-card-icon {
    display: none;
  }

  .wm-debt-seo-comparison {
    text-align: left;
  }

  .wm-debt-seo-tip-card p {
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 26px;
  }

  .wm-debt-seo-adjust-card {
    background: #2a3040;
  }

  .wm-debt-seo-adjust-card h3,
  .wm-debt-seo-adjust-icon {
    color: #edf0ff;
  }

  .wm-debt-seo-adjust-list li {
    min-height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #edf0ff;
    font-family: var(--wf-font-mono);
    font-size: var(--wm-scenario-text-md-size);
    line-height: var(--wm-scenario-text-md-line);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    justify-content: flex-start;
  }

  /*
   * D1's 24px floor: the row's own min-height resets to auto for this compact
   * mobile design (the row above), so the chip -- which fills the row and has
   * no padding of its own -- was left exactly one line tall (20px). The chip
   * carries the floor directly here rather than the row, since restoring the
   * row's min-height would undo the compact row this block exists to draw.
   */
  .wm-debt-seo-adjust-chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--wm-scenario-control-min);
  }

  .wm-debt-seo-adjust-list li::before {
    width: 8px;
    height: 8px;
    border-radius: var(--wf-radius-pill);
    background: #85f8c4;
    content: "";
  }

  .wm-debt-seo-next-card {
    gap: 8px;
  }

  .wm-debt-seo-next-card h3 {
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 24px;
  }

  .wm-debt-seo-faq-list {
    gap: 12px;
  }

  .wm-debt-seo-faq button {
    min-height: 64px;
    padding: 20px;
    gap: 16px;
  }

  .wm-debt-seo-faq h3 {
    font-size: var(--wm-scenario-text-md-size);
    line-height: var(--wm-scenario-text-md-line);
  }

  .wm-debt-seo-faq-panel {
    padding: 0 20px 20px;
  }

  .wm-debt-seo-faq-panel p {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 23px;
  }

  .wm-debt-seo-summary {
    text-align: left;
  }

  .wm-debt-seo-summary p {
    max-width: none;
    color: var(--wm-money-copy, #3d4a42);
    font-size: var(--wm-scenario-text-lg-size);
    line-height: 24px;
  }

  .wm-debt-seo-disclaimer {
    padding-top: 0;
    border-top: 0;
    font-size: var(--wm-scenario-text-min-size);
    line-height: 18px;
    letter-spacing: 0;
  }
}

/* Inline input validation ------------------------------------------------ */

.debt-scenario-editor-error {
  color: var(--debt-rose, #b42318);
  font-size: var(--wm-scenario-text-xs-size);
  font-weight: 600;
  line-height: var(--wm-scenario-text-xs-line);
  letter-spacing: 0;
  text-transform: none;
}

.debt-scenario-route .debt-scenario-editor-field.has-error .debt-scenario-editor-input.wf-input-shell {
  border-color: var(--debt-rose, #b42318);
}

.debt-scenario-input-alert {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--debt-rose, #b42318);
  border-radius: 12px;
  background: rgba(180, 35, 24, 0.06);
  color: var(--debt-ink);
}

.debt-scenario-input-alert p {
  margin: 0;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 700;
  line-height: var(--wm-scenario-text-md-line);
}

.debt-scenario-input-alert ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--debt-copy);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

.debt-scenario-input-error-gate {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 32px;
  border-radius: var(--wm-card-radius);
  border: 1px solid var(--debt-rose, #b42318);
  background: var(--debt-card, #fff);
  min-width: 0;
}

.debt-scenario-input-error-gate h2 {
  margin: 0;
  color: var(--debt-ink);
  font-size: var(--wf-font-heading-sm-size);
  font-weight: 700;
  line-height: var(--wf-font-heading-sm-line-height);
}

.debt-scenario-input-error-gate p {
  margin: 0;
  color: var(--debt-copy);
  font-size: var(--wm-scenario-text-lg-size);
  line-height: 24px;
}

.debt-scenario-input-error-gate ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--debt-ink);
  font-size: var(--wm-scenario-text-lg-size);
  line-height: 24px;
}

.debt-scenario-input-error-gate button {
  min-height: var(--wm-scenario-control-height);
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--debt-green, #006948);
  color: #fff;
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 700;
  cursor: pointer;
}

/* Disclosed model assumptions -------------------------------------------- */

.debt-scenario-assumptions {
  display: grid;
  gap: 8px;
  padding: 20px 24px;
  border-radius: var(--wm-card-radius);
  border: 1px solid var(--debt-line);
  background: var(--debt-surface, #f1f3ff);
  min-width: 0;
}

.debt-scenario-assumptions h3 {
  margin: 0;
  color: var(--debt-ink);
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 700;
  line-height: var(--wm-scenario-text-sm-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.debt-scenario-assumptions ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--debt-copy);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 21px;
}

/* A bound the page applied to a hidden URL param. Sits above the assumption it
   changes, so the rate stated below it is never read as the one requested. */
.debt-scenario-assumptions-notice {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid var(--debt-line);
  color: var(--debt-ink);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 21px;
}