/* 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;
  }
}


/*
 * Comfortable or Stretched.
 *
 * Accent: --wm-money-accent-strong (#064e3b), the deepest green already published in
 * the money token set (design-token status-success-text) and the only scenario accent
 * in the rotation not yet claimed by a live scenario page — income-drop and
 * debt-vs-savings use --wm-money-accent, surprise-bill uses --wm-money-accent-chart
 * and --wm-money-accent-deep. It is a text-grade token, so it clears the contrast bar
 * that docs/whatify-money-contrast-violations.md now hard-fails on.
 */
.wm-cos-page {
  --wm-cos-accent: var(--wm-money-accent-strong, #064e3b);
  --wm-cos-accent-soft: var(--wm-money-accent-soft, #85f8c4);
  --wm-cos-accent-wash: rgba(6, 78, 59, 0.08);
  --wm-cos-surface: rgba(var(--wm-money-surface-rgb, 255, 255, 255), 1);
  --wm-cos-line: var(--wm-money-border-medium, rgba(188, 202, 192, 0.2));
  /* .wm-scenario-run-control's own rendered height (scenario-shell.css):
     8px+4px padding (--wf-space-8/-4) around the 44px Run button
     (--wm-scenario-control-height). Named here so the desktop rail below can
     reserve exactly this much of its own max-height for it — see D4.2,
     WMA-117. */
  --wm-cos-run-control-height: calc(
    var(--wf-space-8) + var(--wf-space-4) + var(--wm-scenario-control-height)
  );
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 24px 40px 80px;
  color: var(--wm-money-ink, #151b2a);
}

.wm-cos-shell {
  display: grid;
  gap: 32px;
  width: 100%;
}

.wm-cos-shell-layout {
  display: grid;
  gap: 32px;
  align-items: start;
  min-width: 0;
}

.wm-cos-shell-main {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.wm-cos-shell .wm-scenario-tab-panels,
.wm-cos-breakdown {
  min-width: 0;
}

/*
 * DOM order inside .wm-cos-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
 * 24px row gap reproduces the spacing the header had while it was nested inside
 * .wm-cos-shell-main. Visual placement therefore no longer depends on DOM order.
 */
@media (min-width: 1041px) {
  .wm-cos-shell[data-input-state='expanded'] .wm-cos-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;
  }

  .wm-cos-shell[data-input-state='expanded'] .wm-scenario-page-header {
    grid-area: header;
  }

  .wm-cos-shell[data-input-state='expanded'] .wm-cos-shell-main {
    grid-area: main;
  }

  .wm-cos-shell[data-input-state='expanded'] .wm-scenario-input-region {
    grid-area: input;
    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.

       A second subtraction on top of that (WMA-117 Lane G/D4): the Run
       control is `position: sticky; bottom: 0` INSIDE this same scroller
       (scenario-shell.css), so its own box is painted over whatever field the
       fold lands on — a computed-style scan caught it on #cash_reserves, but
       the field is incidental, not the cause (any content change above it
       moves the fold to a different field). Carving the control's own height
       out of the rail's max-height means the rail never offers a field a
       resting place the control would paint over: the visible field area ends
       exactly where the control's reserved band begins, on every load, before
       any scroll interaction. It does not fix a field passing behind the
       control mid-scroll (unavoidable for a sticky footer sharing one
       scroller with its content, short of splitting the rail into two boxes,
       which needs a DOM change this stylesheet cannot make) — only the
       at-rest state a11y.spec.ts and a person arriving on the page see. */
    max-height: calc(100vh - 96px - var(--wm-cos-run-control-height));
    overflow-y: auto;
    /* Symmetric on purpose: a one-sided gutter is what let a sticky child sized
       to the padding box hang off the un-padded edge on a sibling page. */
    padding-inline: 4px;
    /* Keyboard focus must land above whatever covers the bottom of the rail,
       not under it — same fix as Where You Land's rail (1cb69d0). That used to
       be the 40px end fade (::after below); it is now the pinned run control,
       which is taller still once Cancel joins Run inside it. */
    scroll-padding-bottom: 120px;
  }

  /*
   * The viewport-capped rail hides most of the form, and macOS overlay
   * scrollbars stay invisible until a scroll happens — so the scrollbar is
   * forced visible and the bottom fades out until the user reaches the end
   * (the client toggles data-rail-end), or the cut looks like the whole form.
   * Chromium ignores ::-webkit-scrollbar styling once scrollbar-width is set,
   * so the standard properties are scoped to engines without the pseudo.
   */
  .wm-cos-shell[data-input-state='expanded'] .wm-scenario-input-region::-webkit-scrollbar {
    width: 8px;
  }

  .wm-cos-shell[data-input-state='expanded'] .wm-scenario-input-region::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--wm-money-line, #bccac0);
  }

  .wm-cos-shell[data-input-state='expanded'] .wm-scenario-input-region::-webkit-scrollbar-track {
    background: transparent;
  }

  @supports not selector(::-webkit-scrollbar) {
    .wm-cos-shell[data-input-state='expanded'] .wm-scenario-input-region {
      scrollbar-width: thin;
      scrollbar-color: var(--wm-money-line, #bccac0) transparent;
    }
  }

  .wm-cos-shell[data-input-state='expanded'] .wm-scenario-input-region::after {
    content: '';
    position: sticky;
    bottom: 0;
    display: block;
    height: 40px;
    margin-top: -40px;
    background: linear-gradient(to bottom, transparent, var(--wm-money-canvas, #f9f9ff));
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  /*
   * At the scroller's true end, the sticky Run control's un-stuck (static)
   * position and its stuck position are the same box — scrolling as far as
   * the DOM allows always lands the control flush with the last field, gap
   * or no gap. Without this, the very last field (currently
   * candidate_a.other_monthly_costs; incidental, see the max-height comment
   * above) has nowhere further to scroll to and stays under the control
   * permanently. This reserves one more control-height of empty scroll room
   * after it so the true end reveals blank space under the control instead
   * of a field.
   */
  .wm-cos-shell[data-input-state='expanded'] .wm-cos-input-column {
    padding-bottom: var(--wm-cos-run-control-height);
  }

  .wm-cos-shell[data-input-state='expanded'] .wm-scenario-input-region[data-rail-end='true']::after {
    opacity: 0;
  }
}

/* Collapsed hides the input region, so the header sits directly above the main column. */
.wm-cos-shell[data-input-state='collapsed'] .wm-cos-shell-layout {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
}

/* Header: see .wm-scenario-page-header in scenario-shell.css. */

/*
 * Post-run the decision deck states the scenario in its own words directly under
 * the tabs, so the top block shrinks to identity only. The H1 keeps its element
 * (and its text) because it is the page's crawlable heading, the breadcrumb and
 * the educational disclaimer stay for the same SEO and compliance reasons — only
 * the H1's size drops and the purpose line, whose job the deck now does, is taken
 * out of the block. Nothing is removed from the DOM, so a pre-run render and a
 * post-run render are the same markup with one class between them.
 */
.wm-cos-shell.is-post-run .wm-scenario-page-title {
  font-size: var(--wf-font-heading-md-size);
  line-height: 32px;
}

.wm-cos-shell.is-post-run .wm-scenario-page-subhead {
  display: none;
}

/* Deck: see .wm-scenario-deck in scenario-shell.css. Only the callout that sits
   directly beneath it is styled here. */

.wm-cos-deck-warning {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--wm-cos-line);
  border-left: 4px solid var(--wm-money-danger, #ba1a1a);
  border-radius: 12px;
  background: rgba(186, 26, 26, 0.06);
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  line-height: 22px;
}

/* Input form */

.wm-cos-input-column {
  display: grid;
  gap: 20px;
  min-width: 0;
}

/*
 * Pinning, backdrop, and the fade over the field scrolling underneath all come
 * from `.wm-scenario-run-control` in scenario-shell.css, which pins to the
 * BOTTOM of the rail. What is left here is this page's own look: the two
 * controls stacked with a gap. Nothing may re-declare position/top/z-index or
 * the backdrop — this stylesheet loads after the shell's, so a leftover
 * `top: 0` here would quietly win and restore the old top-pinned behaviour.
 */
.wm-cos-run-control {
  display: grid;
  /* One row, Cancel then Run, sharing the width evenly. `minmax(0, 1fr)` rather
     than `1fr` so a long label cannot push a column past its share. With Cancel
     hidden (`display: none`) only one column is generated and Run fills the row. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}

.wm-cos-run-button {
  width: 100%;
  /* Already ~44px from padding + line-height; min-height sources that from
     the token instead of leaving it an emergent, uncredited number
     (WMA-117 D4.3). This is the scenario's main-flow submit action. */
  min-height: var(--wm-scenario-control-height);
  padding: 12px 20px;
  border: 0;
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-cos-accent);
  color: #fff;
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-lg-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-cos-run-button[disabled] {
  background: var(--wm-money-chip-strong, #dce2f6);
  color: var(--wm-money-muted, #4f5f56);
  cursor: not-allowed;
}

.wm-cos-form-section {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--wm-cos-line);
  border-radius: 16px;
  background: var(--wm-cos-surface);
}

.wm-cos-section-kicker {
  margin: 0;
  color: var(--wm-cos-accent);
  /* Raised from 11px to D2's 12px floor (WMA-117 skip-list, owner: D4). */
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wm-cos-section-title {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  /* 17px has no rung in the type scale (12/13/14/15/16/18, then the
     platform's 20px heading step) -- not one rule to round onto a neighbour,
     kept raw per contract §5's count-the-rules test (WMA-117 D4.3). */
  font-size: 17px;
  line-height: 24px;
}

.wm-cos-input-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.wm-cos-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.wm-cos-field-label {
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 600;
}

.wm-cos-field-helper {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

/*
 * Field-level validation message. Same 12px/18px scale as the helper text it sits
 * under; --wm-money-danger is the token this page already uses for negative numbers
 * and resolves to #9f1239 (8.0:1 on the card surface, #ba1a1a fallback 6.4:1), so it
 * clears the WCAG AA bar that docs/whatify-money-contrast-violations.md hard-fails on.
 * The paragraph is always in the DOM (a stable aria-describedby target and live
 * region) and collapses while empty so it adds no gap to the field stack.
 */
.wm-cos-field-error {
  margin: 0;
  color: var(--wm-money-danger, #ba1a1a);
  font-size: var(--wm-scenario-text-xs-size);
  font-weight: 600;
  line-height: 18px;
}

.wm-cos-field-error:empty {
  display: none;
}

.wm-cos-money-field {
  display: flex;
  gap: 6px;
  align-items: center;
  /* This is the actual control box (bordered, focusable-within) -- the
     unboxed <input> it wraps is not. 42px from padding + line-height
     without this; `align-items: center` places the input in the extra
     2px this adds so it takes D1's default rather than an emergent height
     just under it (WMA-117 D4.3). */
  min-height: var(--wm-scenario-control-height);
  padding: 0 12px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: 10px;
  background: var(--wm-cos-surface);
}

.wm-cos-money-field:focus-within {
  border-color: var(--wm-cos-accent);
  box-shadow: var(--wm-money-focus-shadow, 0 0 0 2px rgba(6, 78, 59, 0.18));
}

/* After the focus rule on purpose: a field being edited still reads as invalid, and
   the focus ring is a box-shadow, so both survive. */
.wm-cos-money-field:has([aria-invalid='true']) {
  border-color: var(--wm-money-danger, #ba1a1a);
}

.wm-cos-money-prefix {
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-md-size);
}

.wm-cos-money-input,
.wm-cos-text-input {
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--wm-money-ink, #151b2a);
  font-family: inherit;
  /* 16px is the floor below which mobile Safari zooms the page on focus. */
  font-size: var(--wm-scenario-text-xl-size);
}

.wm-cos-money-input:focus,
.wm-cos-text-input:focus {
  outline: none;
}

.wm-cos-text-input {
  /*
   * Nothing on this page sets border-box globally, so `width: 100%` above plus
   * the padding and border below resolved to 100% + 26px. That overshot the
   * label by 26px and the form section's 20px padding and border absorbed all
   * but 1px of it — which was enough to force a horizontal scrollbar on the
   * rail, and that scrollbar ate 16px off the rail's bottom, where the pinned
   * run control now lives. `.wm-cos-money-input` never had the bug because it
   * has no horizontal padding and no border.
   */
  box-sizing: border-box;
  /* 42px from padding + line-height without this; native text-input
     rendering centers the text in the extra 2px (WMA-117 D4.3). */
  min-height: var(--wm-scenario-control-height);
  padding: 10px 12px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: 10px;
}

.wm-cos-text-input:focus {
  border-color: var(--wm-cos-accent);
  box-shadow: var(--wm-money-focus-shadow, 0 0 0 2px rgba(6, 78, 59, 0.18));
}

.wm-cos-housing-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.wm-cos-housing-head > div {
  display: grid;
  gap: 4px;
}

.wm-cos-remove-candidate {
  /* WMA-117 D1: ~28px -> 44px. Removing a compared home is a finger control
     in the main comparison flow, so it takes the default control height,
     not the floor -- same reasoning as scenario-shell.css's reflection
     chip. `align-items: center` isn't needed: this is a <button> with only
     text content, and browsers vertically center that natively. */
  min-height: var(--wm-scenario-control-height);
  padding: 6px 12px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: var(--wf-radius-pill, 999px);
  background: transparent;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-xs-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-cos-remove-candidate:hover {
  border-color: var(--wm-cos-accent);
  color: var(--wm-cos-accent);
}

.wm-cos-kind-row {
  display: grid;
  gap: 6px;
}

.wm-cos-kind-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.wm-cos-kind-button {
  /*
   * WMA-96 (WMA-117 D1): ~28px -> 44px. This segmented control swaps a
   * home's entire cost-field set (rent vs. own) -- a finger operates it in
   * the main input flow, so per D1 it takes the default control height,
   * not the 24px floor it already cleared. `display: inline-flex` +
   * `align-items: center` is added (unlike the plain-text buttons above)
   * because this one sits inside `.wm-cos-kind-toggle`'s `inline-flex`
   * row, where the UA's own button centering was already being overridden
   * by the flex layout context.
   */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wm-scenario-control-height);
  padding: 6px 16px;
  border: 0;
  border-radius: var(--wf-radius-pill, 999px);
  background: transparent;
  color: var(--wm-money-copy, #3d4a42);
  font-family: inherit;
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-cos-kind-button.is-active {
  background: var(--wm-cos-accent);
  color: #fff;
}

.wm-cos-more-costs {
  border: 1px solid var(--wm-cos-line);
  border-radius: 12px;
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.wm-cos-more-costs > summary {
  /* WMA-117 D1: 36px -> 44px. Contract §3.4: nothing sits between 24 and
     40, so a control that wants a step in between takes 40 or 44; this
     disclosure toggle is a finger control with a full-width row to grow
     into, so it takes the default. `display: flex` centers the now-taller
     box's text -- a <summary> has no built-in centering the way a
     <button>'s UA styling does. */
  display: flex;
  align-items: center;
  min-height: var(--wm-scenario-control-height);
  padding: 10px 14px;
  color: var(--wm-cos-accent);
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.wm-cos-more-costs > summary::-webkit-details-marker {
  display: none;
}

.wm-cos-more-costs > summary::after {
  content: ' +';
}

.wm-cos-more-costs[open] > summary::after {
  content: ' –';
}

.wm-cos-more-costs > .wm-cos-input-stack {
  padding: 0 14px 14px;
}

.wm-cos-kind-fields {
  display: grid;
  gap: 14px;
  min-width: 0;
}

/* The rent/own toggle, the optional Home B section, and the "compare a second
   place" button are all driven by the `hidden` attribute. An author `display`
   declaration outranks the UA `[hidden] { display: none }` rule, so each layout
   rule above needs its own hidden guard or the toggles render inert. */
.wm-cos-form-section[hidden],
.wm-cos-kind-fields[hidden],
.wm-cos-add-candidate[hidden] {
  display: none;
}

.wm-cos-candidate-control {
  display: grid;
}

.wm-cos-add-candidate {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  /* Already ~44px from padding + line-height; sourced from the token
     instead of left an uncredited number (WMA-117 D4.3). */
  min-height: var(--wm-scenario-control-height);
  padding: 12px 16px;
  border: 1px dashed var(--wm-cos-accent);
  border-radius: 14px;
  background: var(--wm-cos-accent-wash);
  color: var(--wm-cos-accent);
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-cos-add-candidate:hover {
  background: rgba(6, 78, 59, 0.14);
}

/* Stress chips */

.wm-cos-stress-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wm-cos-stress-chip {
  display: grid;
  gap: 2px;
  /* Already ~51px (two lines: the label plus its `small`) -- min-height
     floors this from the token rather than an uncredited emergent number,
     with no effect on the rendered size (WMA-117 D4.3). */
  min-height: var(--wm-scenario-control-height);
  padding: 8px 16px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-cos-surface);
  color: var(--wm-money-copy, #3d4a42);
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.wm-cos-stress-chip small {
  color: var(--wm-money-muted, #4f5f56);
  /* Raised from 11px to D2's 12px floor (WMA-117 skip-list, owner: D4). */
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 500;
}

.wm-cos-stress-chip.is-active {
  border-color: var(--wm-cos-accent);
  background: var(--wm-cos-accent);
  color: #fff;
}

.wm-cos-stress-chip.is-active small {
  color: rgba(255, 255, 255, 0.82);
}

/* Compare */

.wm-cos-compare {
  display: grid;
  gap: 24px;
}

/*
 * The deck above asks the question, so this heading stops competing with it: the
 * shell's 36px display size drops to a section label, and the supporting line
 * carries the step the retired progress rail used to show. Scoped to this page's
 * own modifier — .wm-scenario-compare-head is shared with five other scenarios.
 */
.wm-cos-compare-head {
  gap: 6px;
}

.wm-cos-compare-head h2 {
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
}

.wm-cos-compare-head p {
  font-size: var(--wm-scenario-text-lg-size);
  line-height: 24px;
}

.wm-cos-compare-step {
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 24px;
}

.wm-cos-verdict {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--wm-cos-line);
  border-left: 4px solid var(--wm-cos-accent);
  border-radius: 14px;
  background: var(--wm-cos-accent-wash);
}

.wm-cos-verdict.is-problem {
  border-left-color: var(--wm-money-danger, #ba1a1a);
  background: rgba(186, 26, 26, 0.06);
}

.wm-cos-verdict-headline {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 26px;
}

.wm-cos-verdict-narrative {
  margin: 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.wm-cos-option-grid {
  min-width: 0;
}

/* Breakdown */

.wm-cos-breakdown {
  display: grid;
  gap: 32px;
}

.wm-cos-section-heading {
  display: grid;
  gap: 4px;
}

.wm-cos-section-heading h2 {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
}

.wm-cos-section-heading p {
  margin: 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.wm-cos-composition,
.wm-cos-waterfall-card,
.wm-cos-stress-panel,
.wm-cos-metrics,
.wm-cos-plan-summary {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--wm-cos-line);
  border-radius: 18px;
  background: var(--wm-cos-surface);
}

.wm-cos-composition-list {
  display: grid;
  gap: 20px;
}

.wm-cos-composition-row {
  display: grid;
  gap: 8px;
}

.wm-cos-composition-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.wm-cos-composition-head h3 {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-lg-size);
}

.wm-cos-composition-head strong {
  color: var(--wm-cos-accent);
  font-size: var(--wm-scenario-text-lg-size);
}

.wm-cos-composition-bar {
  display: flex;
  width: var(--wm-cos-bar-width, 100%);
  min-width: 40%;
  height: 18px;
  overflow: hidden;
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.wm-cos-composition-segment,
.wm-cos-legend-dot {
  background: var(--wm-cos-accent);
}

.wm-cos-composition-segment.is-property-tax,
.wm-cos-legend-dot.is-property-tax {
  background: var(--wm-money-accent-chart, #006a61);
}

.wm-cos-composition-segment.is-insurance,
.wm-cos-legend-dot.is-insurance {
  background: var(--wm-money-accent, #006948);
}

.wm-cos-composition-segment.is-hoa,
.wm-cos-legend-dot.is-hoa {
  background: rgba(6, 78, 59, 0.62);
}

.wm-cos-composition-segment.is-maintenance,
.wm-cos-legend-dot.is-maintenance {
  background: rgba(0, 106, 97, 0.62);
}

.wm-cos-composition-segment.is-utilities,
.wm-cos-legend-dot.is-utilities {
  background: rgba(0, 105, 72, 0.42);
}

.wm-cos-composition-segment.is-other,
.wm-cos-legend-dot.is-other {
  background: rgba(79, 95, 86, 0.42);
}

.wm-cos-composition-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
}

.wm-cos-composition-legend > div {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.wm-cos-composition-legend dt {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
}

.wm-cos-composition-legend dd {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-xs-size);
  font-weight: 600;
}

.wm-cos-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.wm-cos-option-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wm-cos-option-switch-button {
  /* WMA-117 D1: ~32px -> 44px. Switches which ranked place the Plan tab
     shows -- a finger control in the plan's main flow, in a wrapping row
     with room to grow, so it takes the default control height. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wm-scenario-control-height);
  padding: 8px 14px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-cos-surface);
  color: var(--wm-money-copy, #3d4a42);
  font-family: inherit;
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-cos-option-switch-button.is-active {
  border-color: var(--wm-cos-accent);
  background: var(--wm-cos-accent);
  color: #fff;
}

.wm-cos-waterfall-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-cos-waterfall-step {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto;
  gap: 12px;
  align-items: center;
}

.wm-cos-waterfall-label {
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-sm-size);
}

.wm-cos-waterfall-track {
  height: 12px;
  overflow: hidden;
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.wm-cos-waterfall-fill {
  display: block;
  height: 100%;
  border-radius: var(--wf-radius-pill, 999px);
  background: rgba(6, 78, 59, 0.35);
}

.wm-cos-waterfall-step.is-base .wm-cos-waterfall-fill {
  background: var(--wm-cos-accent);
}

.wm-cos-waterfall-step.is-result .wm-cos-waterfall-fill {
  background: var(--wm-money-accent-chart, #006a61);
}

.wm-cos-waterfall-step.is-negative .wm-cos-waterfall-fill {
  background: var(--wm-money-danger, #ba1a1a);
}

.wm-cos-waterfall-amount {
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wm-cos-waterfall-step.is-result .wm-cos-waterfall-amount {
  color: var(--wm-cos-accent);
}

.wm-cos-waterfall-step.is-negative .wm-cos-waterfall-amount {
  color: var(--wm-money-danger, #ba1a1a);
}

.wm-cos-waterfall-note {
  margin: 12px 0 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

.wm-cos-stress-rows {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wm-cos-stress-row {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--wm-cos-line);
  border-radius: 14px;
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.wm-cos-stress-row h3 {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-md-size);
}

.wm-cos-stress-row dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.wm-cos-stress-row dl > div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.wm-cos-stress-row dt {
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
}

.wm-cos-stress-row dd {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wm-cos-stress-row dd.is-positive,
.wm-cos-metric-row dd.is-positive {
  color: var(--wm-cos-accent);
}

.wm-cos-stress-row dd.is-problem,
.wm-cos-metric-row dd.is-negative {
  color: var(--wm-money-danger, #ba1a1a);
}

.wm-cos-metric-rows {
  display: grid;
  gap: 12px;
  margin: 0;
}

.wm-cos-metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wm-cos-line);
}

.wm-cos-metric-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.wm-cos-metric-row dt {
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
}

.wm-cos-metric-row dd {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-lg-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The note is a second <dd> rather than a <p>: a <div> group inside a <dl> may
   only hold <dt>/<dd>, and anything else fails the definition-list a11y rule. */
.wm-cos-metric-row .wm-cos-metric-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
  font-weight: 400;
  font-variant-numeric: normal;
  line-height: 18px;
  text-align: left;
}

.wm-cos-plan-summary p {
  margin: 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.wm-cos-plan-summary > div {
  display: grid;
  gap: 8px;
}

/* Same hazard as the input-panel toggles above: this author `display` declaration
   outranks the UA `[hidden] { display: none }` rule, so without its own guard every
   option's summary stays on screen and the option switcher looks inert. */
.wm-cos-plan-summary > div[hidden] {
  display: none;
}

.wm-cos-plan-comparison {
  color: var(--wm-money-muted, #4f5f56) !important;
}

.wm-cos-final-action {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.wm-cos-copy-action {
  /* WMA-117 D1: ~39px -> 44px. "Copy plan link" is a finger control in a
     wrapping row (.wm-cos-final-action) with room to grow. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wm-scenario-control-height);
  padding: 10px 18px;
  border: 1px solid var(--wm-cos-accent);
  border-radius: var(--wf-radius-pill, 999px);
  background: transparent;
  color: var(--wm-cos-accent);
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-cos-copy-action:hover {
  background: var(--wm-cos-accent-wash);
}

.wm-cos-final-action a {
  color: var(--wm-cos-accent);
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  text-decoration: none;
}

.wm-cos-final-action a:hover {
  text-decoration: underline;
}

.wm-cos-copy-status {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
}

/* Plan tab (client-rendered) */

.wm-cos-plan {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}

.wm-cos-plan-empty {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 28px;
  border: 1px dashed var(--wm-money-line, #bccac0);
  border-radius: 18px;
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.wm-cos-plan-empty h2 {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-2xl-size);
}

.wm-cos-plan-empty p {
  margin: 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.wm-cos-plan-empty button {
  /* WMA-117 D1: ~39px -> 44px. The empty state's only action, a <button>
     centered natively by the browser at any height. */
  min-height: var(--wm-scenario-control-height);
  padding: 10px 18px;
  border: 0;
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-cos-accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-cos-plan-hero,
.wm-cos-save-card,
.wm-cos-plan-glance,
.wm-cos-plan-fit,
.wm-cos-plan-next,
.wm-cos-plan-watch,
.wm-cos-plan-other {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--wm-cos-line);
  border-radius: 18px;
  background: var(--wm-cos-surface);
}

.wm-cos-plan-hero {
  border-left: 4px solid var(--wm-cos-accent);
}

.wm-cos-plan-hero-head {
  display: grid;
  gap: 8px;
}

.wm-cos-plan-status {
  width: fit-content;
  padding: 4px 12px;
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-cos-accent-wash);
  color: var(--wm-cos-accent);
  /* Raised from 11px to D2's 12px floor (WMA-117 D4.3). */
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wm-cos-plan h2,
.wm-cos-plan h3,
.wm-cos-plan h4 {
  margin: 0;
  font-family: var(--wf-font-heading);
}

.wm-cos-plan h2 {
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
}

.wm-cos-plan h3 {
  font-size: var(--wm-scenario-text-lg-size);
}

.wm-cos-plan h4 {
  font-size: var(--wm-scenario-text-md-size);
}

.wm-cos-plan p {
  margin: 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.wm-cos-plan-hero-grid,
.wm-cos-plan-glance-grid,
.wm-cos-plan-fit-list,
.wm-cos-plan-step-groups,
.wm-cos-plan-watch-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.wm-cos-plan-tiny-win {
  color: var(--wm-cos-accent) !important;
  font-weight: 600;
}

.wm-cos-plan-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--wm-cos-line);
  border-radius: 14px;
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.wm-cos-plan-card-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.wm-cos-plan-card-head span {
  color: var(--wm-cos-accent);
  /* Raised from 11px to D2's 12px floor (WMA-117 D4.3). */
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
 * `p.wm-cos-plan-group-label`, not `.wm-cos-plan-group-label`: this is always
 * a <p> (page-client.js), and `.wm-cos-plan p` above (a class + a type
 * selector, specificity 0-1-1) otherwise outranks a single class selector
 * (0-1-0) regardless of source order, which is what the font-size !important
 * was fighting -- 14px kept winning over this rule's 12px. Adding the type
 * selector ties the specificity, and this rule wins on order (it comes
 * later), so the !important is no longer load-bearing for font-size. The
 * color !important is untouched: it is not this bug and this fix is scoped
 * to the font-size R6 flags (WMA-117 D4.3).
 */
p.wm-cos-plan-group-label {
  color: var(--wm-money-muted, #4f5f56) !important;
  /* Raised from 11px to D2's 12px floor (WMA-117 skip-list, owner: D4). */
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wm-cos-plan-row,
.wm-cos-save-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-sm-size);
}

.wm-cos-plan-row-value {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}

.wm-cos-plan-row-value strong {
  color: var(--wm-money-ink, #151b2a);
  font-variant-numeric: tabular-nums;
}

.wm-cos-plan-row-value strong.is-accent {
  color: var(--wm-cos-accent);
}

.wm-cos-plan-row-value strong.is-problem {
  color: var(--wm-money-danger, #ba1a1a);
}

.wm-cos-plan-row-value em {
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
  font-style: normal;
}

.wm-cos-plan-fit-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}

.wm-cos-plan-fit-icon {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--wm-cos-accent);
}

.wm-cos-plan-tradeoff {
  padding-top: 12px;
  border-top: 1px solid var(--wm-cos-line);
}

.wm-cos-plan-checklist {
  display: grid;
  gap: 8px;
}

.wm-cos-plan-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

/* A next step that hands off to another scenario is a link rather than a checkbox,
   matching the pattern the where-you-land plan already uses. */
.wm-cos-plan-step-link-row {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--wm-cos-accent-wash);
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

.wm-cos-plan-step-link {
  justify-self: start;
  color: var(--wm-cos-accent);
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 700;
  text-decoration: none;
}

.wm-cos-plan-step-link:hover {
  text-decoration: underline;
}

.wm-cos-plan-watch-item {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--wm-cos-line);
  border-radius: 12px;
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.wm-cos-plan-other-list {
  display: grid;
  gap: 8px;
}

.wm-cos-plan-other-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wm-cos-line);
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-sm-size);
}

.wm-cos-plan-other-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.wm-cos-plan-other-row strong {
  color: var(--wm-money-ink, #151b2a);
  font-variant-numeric: tabular-nums;
}

.wm-cos-plan-rail {
  display: grid;
  gap: 12px;
}

.wm-cos-save-field {
  display: grid;
  gap: 6px;
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 600;
}

.wm-cos-save-field input {
  /* Native text-input vertical centering handles the extra space, same as
     .wm-cos-text-input above (WMA-117 D4.3). */
  min-height: var(--wm-scenario-control-height);
  padding: 10px 12px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: 10px;
  font-family: inherit;
  /* 16px is the floor below which mobile Safari zooms the page on focus. */
  font-size: var(--wm-scenario-text-xl-size);
}

.wm-cos-save-details {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.wm-cos-save-summary,
.wm-cos-save-helper,
.wm-cos-save-status {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

/* Shown while edited inputs leave the rendered comparison one run behind.
   Amber pair mirrors the saved-plan pill (#7a4a00 on light amber, >5:1). */
.wm-cos-stale-notice {
  display: block;
  margin: 12px 0 0;
  border: 1px solid rgba(122, 74, 0, 0.25);
  border-radius: 12px;
  background: #fff4e0;
  color: #7a4a00;
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 650;
  line-height: 18px;
  padding: 10px 14px;
}

.wm-cos-stale-notice[hidden] {
  display: none;
}

.wm-cos-save-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wm-cos-save-primary {
  /* WMA-117 D1: ~39px -> 44px. Saves the plan -- a main-flow <button>,
     centered natively by the browser at any height. */
  min-height: var(--wm-scenario-control-height);
  padding: 10px 18px;
  border: 0;
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-cos-accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-cos-save-secondary {
  /* WMA-117 D1: ~39px -> 44px, same as .wm-cos-save-primary. */
  min-height: var(--wm-scenario-control-height);
  padding: 10px 18px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: var(--wf-radius-pill, 999px);
  background: transparent;
  color: var(--wm-money-copy, #3d4a42);
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-cos-plan-disclaimer {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

.wm-cos-plan-disclaimer.is-desktop {
  display: none;
}

@media (min-width: 1041px) {
  .wm-cos-plan {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
  }

  .wm-cos-plan-hero {
    grid-column: 1;
  }

  .wm-cos-plan-rail {
    grid-column: 2;
    grid-row: 1 / span 6;
    position: sticky;
    top: 24px;
  }

  .wm-cos-plan-disclaimer.is-desktop {
    display: block;
  }

  .wm-cos-plan-disclaimer.is-mobile {
    display: none;
  }
}

@media (max-width: 720px) {
  .wm-cos-page {
    padding: 16px 16px 64px;
  }

  .wm-cos-waterfall-step {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .wm-cos-waterfall-track {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* Scenario accent registration.
 * The landing and dashboard cards get the housing accent through the shared
 * accent-class maps in routes/public.ts and routes/app.ts. */

.money-scenario-icon.is-housing {
  background: rgba(6, 78, 59, 0.1);
  color: var(--wm-money-accent-strong, #064e3b);
}

.money-scenario-example.is-housing {
  border-left-color: var(--wm-money-accent-strong, #064e3b);
}

.money-scenario-link.is-housing {
  color: var(--wm-money-accent-strong, #064e3b);
}

.scenario-library-card.is-housing .scenario-library-card-icon,
.scenario-library-card.is-housing .scenario-library-card-cta {
  color: var(--wm-money-accent-strong, #064e3b);
}

.money-app-scenario-card.is-comfortable-or-stretched .money-app-scenario-icon {
  color: var(--wm-money-accent-strong, #064e3b);
  background: rgba(133, 248, 196, 0.24);
}
.wm-cos-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-cos-seo-inner {
  display: grid;
  gap: 96px;
  width: min(1168px, 100%);
  margin: 0 auto;
}

.wm-cos-seo section {
  min-width: 0;
}

.wm-cos-seo h2,
.wm-cos-seo h3,
.wm-cos-seo p,
.wm-cos-seo blockquote,
.wm-cos-seo ul {
  margin: 0;
}

.wm-cos-seo h2,
.wm-cos-seo h3 {
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  letter-spacing: 0;
}

.wm-cos-seo h2 {
  font-size: var(--wf-font-heading-xl-size);
  line-height: 40px;
  font-weight: 800;
}

.wm-cos-seo h3 {
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
  font-weight: 700;
}

.wm-cos-seo p,
.wm-cos-seo li {
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-cos-seo-guide,
.wm-cos-seo-why,
.wm-cos-seo-comparison,
.wm-cos-seo-read,
.wm-cos-seo-next,
.wm-cos-seo-faq,
.wm-cos-seo-final {
  display: grid;
  gap: 48px;
}

.wm-cos-seo-guide-grid,
.wm-cos-seo-why-grid,
.wm-cos-seo-read-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  gap: 48px;
  align-items: start;
}

.wm-cos-seo-heading-block,
.wm-cos-seo-copy {
  display: grid;
  gap: 24px;
}

.wm-cos-seo-heading-block h2 {
  max-width: 700px;
  /* 60px has no rung -- the type scale tops out at the platform's 36px
     heading step (contract §3.3, "Above 18px, go to the platform
     directly"). One rule in this file; kept raw per §5's count-the-rules
     test (WMA-117 D4.3). */
  font-size: 60px;
  line-height: 60px;
}

.wm-cos-seo-eyebrow,
.wm-cos-seo-question-eyebrow,
.wm-cos-seo-card-eyebrow,
.wm-cos-seo-next-card p,
.wm-cos-seo-disclaimer {
  color: var(--wm-money-accent, #006948);
  font-family: var(--wf-font-mono);
  /* Raised from 10px to D2's 12px floor (WMA-117 skip-list, owner: D4 --
     closes article.wm-cos-seo-next-card p and the desktop half of
     p.wm-cos-seo-question-eyebrow). .wm-cos-seo-disclaimer's own font-size
     is always overridden below (both at desktop and at 760px), so this
     value never actually reaches it, but it must still clear the floor: R6
     reaches every declared type size in the sheet, reached or not. */
  font-size: var(--wm-scenario-text-min-size);
  line-height: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.wm-cos-seo-eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 4px 16px;
  border-radius: var(--wf-radius-pill);
  background: #86f2e4;
  color: #005049;
}

.wm-cos-seo-lede {
  max-width: 672px;
  font-size: var(--wf-font-heading-sm-size);
  line-height: 32px;
}

.wm-cos-seo-learn-card,
.wm-cos-seo-question-card,
.wm-cos-seo-card,
.wm-cos-seo-stat-card,
.wm-cos-seo-tip-card,
.wm-cos-seo-adjust-card,
.wm-cos-seo-next-card,
.wm-cos-seo-summary,
.wm-cos-seo-faq-item {
  border-radius: var(--wm-card-radius, 32px);
}

.wm-cos-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-cos-seo-learn-card h3,
.wm-cos-seo-tip-card h3,
.wm-cos-seo-adjust-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wm-money-accent, #006948);
}

.wm-cos-seo-learn-icon,
.wm-cos-seo-tip-icon,
.wm-cos-seo-adjust-icon,
.wm-cos-seo-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-money-accent, #006948);
}

.wm-cos-seo-learn-icon {
  width: 20px;
  height: 20px;
}

.wm-cos-seo-learn-icon svg,
.wm-cos-seo-tip-icon svg,
.wm-cos-seo-adjust-icon svg,
.wm-cos-seo-list-icon svg,
.wm-cos-seo-card-icon svg,
.wm-cos-seo-question-mark svg {
  width: 100%;
  height: 100%;
}

.wm-cos-seo-learn-list,
.wm-cos-seo-adjust-list {
  display: grid;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.wm-cos-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-cos-seo-list-icon {
  width: 14px;
  height: 14px;
  margin-top: 4px;
}

.wm-cos-seo-question-card {
  position: relative;
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: 64px;
  background: #00855d;
}

.wm-cos-seo-question-card blockquote {
  max-width: 896px;
}

.wm-cos-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-cos-seo .wm-cos-seo-question-card > p:not(.wm-cos-seo-question-eyebrow) {
  max-width: 920px;
  color: #f5fff7;
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
}

.wm-cos-seo .wm-cos-seo-question-eyebrow {
  color: #f5fff7;
  font-size: var(--wm-scenario-text-md-size);
  line-height: 20px;
  letter-spacing: 1px;
}

.wm-cos-seo-question-mark {
  position: absolute;
  right: 64px;
  bottom: 54px;
  width: 120px;
  height: 120px;
  color: rgba(245, 255, 247, 0.08);
}

.wm-cos-seo-stat-card {
  display: grid;
  gap: 8px;
  padding: 32px 32px 32px 36px;
  border-left: 4px solid var(--wm-money-accent, #006948);
  background: #f1f3ff;
}

.wm-cos-seo-stat-value {
  color: var(--wm-money-accent, #006948);
  font-family: var(--wf-font-mono);
  /* 48px has no rung -- the type scale tops out at 36px (contract §3.3);
     48px is a control-height step (--wf-control-height-xl), not a type
     step, and reusing it here for text would conflate the two scales. One
     rule; kept raw per §5's count-the-rules test (WMA-117 D4.3). */
  font-size: 48px;
  line-height: 48px;
  font-weight: 700;
}

.wm-cos-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-cos-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);
  /* Raised from 10px to D2's 12px floor (WMA-117 D4.3). */
  font-size: var(--wm-scenario-text-min-size);
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-cos-seo-comparison {
  text-align: center;
}

.wm-cos-seo-card-grid,
.wm-cos-seo-next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.wm-cos-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-cos-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-cos-seo-comparison-card:nth-child(2) .wm-cos-seo-card-icon {
  background: #f1f3ff;
  color: #4b41e1;
}

.wm-cos-seo-comparison-card:nth-child(3) .wm-cos-seo-card-icon {
  background: #e9edff;
  color: #2a3040;
}

.wm-cos-seo-card-eyebrow {
  color: var(--wm-money-accent, #006948);
}

.wm-cos-seo-card p:not(.wm-cos-seo-card-eyebrow) {
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-cos-seo-read-grid {
  grid-template-columns: minmax(0, 2fr) minmax(320px, 0.9fr);
}

.wm-cos-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-cos-seo-tip-card h3 {
  color: #005049;
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-cos-seo-tip-card p {
  color: #005049;
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 29px;
  font-style: italic;
  font-weight: 600;
}

.wm-cos-seo-tip-icon,
.wm-cos-seo-adjust-icon {
  width: 16px;
  height: 16px;
}

.wm-cos-seo-adjust-card {
  display: grid;
  gap: 24px;
  padding: 32px;
  background: #dce2f6;
}

.wm-cos-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: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-cos-seo-adjust-list {
  gap: 16px;
}

.wm-cos-seo-adjust-list li {
  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;
}

.wm-cos-seo-next-card {
  display: grid;
  gap: 12px;
  text-align: left;
}

.wm-cos-seo-next-card p {
  color: var(--wm-money-muted, #6d7a72);
  letter-spacing: 1.2px;
}

.wm-cos-seo-next-card h3 {
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
}

.wm-cos-seo-faq-list {
  display: grid;
  gap: 16px;
}

.wm-cos-seo-faq-item {
  overflow: hidden;
  background: #f1f3ff;
}

.wm-cos-seo-faq-item.is-open {
  border: 1px solid rgba(0, 105, 72, 0.2);
  background: #f1f3ff;
}

.wm-cos-seo-faq h3 {
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 28px;
}

.wm-cos-seo-faq button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  /* 76px is content reservation, not a touch-target claim -- these FAQ
     questions run to two lines (confirmed: "How much house can I afford
     based on my monthly budget?" renders as two), and 76px is the room a
     two-line 18px/28px title plus this padding needs, well clear of D1's
     44px floor already. No control-height token names this because it
     isn't sizing a control to a target; it's sizing a control to its own
     text. Left raw per the same reasoning contract §5 applies to type
     sizes with no rung (WMA-117 D4.3). */
  min-height: 76px;
  padding: 24px;
  border: 0;
  background: transparent;
  color: var(--wm-money-ink, #151b2a);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wm-cos-seo-faq-item.is-open button {
  color: var(--wm-money-accent, #006948);
}

.wm-cos-seo-faq button:focus-visible {
  outline: 3px solid rgba(0, 133, 93, 0.35);
  outline-offset: 3px;
}

.wm-cos-seo-faq-chevron {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: currentColor;
}

.wm-cos-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-cos-seo-faq-item.is-open .wm-cos-seo-faq-chevron::before {
  transform: translateY(4px) rotate(225deg);
}

.wm-cos-seo-faq-panel {
  display: grid;
  gap: 14px;
  padding: 0 24px 24px;
}

.wm-cos-seo-faq-panel[hidden] {
  display: none;
}

.wm-cos-seo-faq-panel p {
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-cos-seo-summary {
  padding: 40px 136px;
  background: var(--wf-color-background-surface);
  text-align: center;
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-cos-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-cos-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-cos-seo {
    padding-inline: 40px;
  }

  .wm-cos-seo-guide-grid,
  .wm-cos-seo-why-grid,
  .wm-cos-seo-read-grid {
    grid-template-columns: 1fr;
  }

  .wm-cos-seo-card-grid,
  .wm-cos-seo-next-grid {
    gap: 20px;
  }

  .wm-cos-seo-summary {
    padding-inline: 56px;
  }
}

@media (max-width: 760px) {
  .wm-cos-seo {
    padding: 48px 24px 72px;
  }

  .wm-cos-seo-inner {
    gap: 56px;
  }

  .wm-cos-seo-guide,
  .wm-cos-seo-why,
  .wm-cos-seo-comparison,
  .wm-cos-seo-read,
  .wm-cos-seo-next,
  .wm-cos-seo-faq,
  .wm-cos-seo-final {
    gap: 24px;
  }

  .wm-cos-seo h2 {
    font-size: var(--wf-font-heading-md-size);
    line-height: 32px;
  }

  .wm-cos-seo h3 {
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 28px;
  }

  .wm-cos-seo p,
  .wm-cos-seo li {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 23px;
  }

  .wm-cos-seo-heading-block h2 {
    /* No rung at 40px either -- see the desktop declaration's comment. */
    font-size: 40px;
    line-height: 44px;
  }

  .wm-cos-seo-lede {
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 29px;
  }

  .wm-cos-seo-card-grid,
  .wm-cos-seo-next-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wm-cos-seo-learn-card,
  .wm-cos-seo-question-card,
  .wm-cos-seo-card,
  .wm-cos-seo-stat-card,
  .wm-cos-seo-tip-card,
  .wm-cos-seo-adjust-card,
  .wm-cos-seo-next-card,
  .wm-cos-seo-summary {
    padding: 24px;
  }

  .wm-cos-seo-question-card {
    padding: 72px 32px 32px;
    background: #e0f2f1;
  }

  .wm-cos-seo-question-card blockquote p {
    color: var(--wm-money-ink, #151b2a);
    font-size: var(--wf-font-heading-md-size);
    line-height: 30px;
  }

  /*
    The `.wm-cos-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-cos-seo .wm-cos-seo-question-card > p:not(.wm-cos-seo-question-eyebrow) {
    color: var(--wm-money-copy, #3d4a42);
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 26px;
  }

  .wm-cos-seo .wm-cos-seo-question-eyebrow {
    color: var(--wm-money-accent, #006948);
    /* Raised from 10px to D2's 12px floor (WMA-117 skip-list, owner: D4 --
       closes the mobile half of p.wm-cos-seo-question-eyebrow). */
    font-size: var(--wm-scenario-text-min-size);
    line-height: 15px;
  }

  .wm-cos-seo-question-mark {
    top: -12px;
    right: -18px;
    bottom: auto;
    width: 92px;
    height: 92px;
    color: rgba(0, 105, 72, 0.08);
  }

  .wm-cos-seo-stat-card {
    text-align: center;
  }

  .wm-cos-seo-stat-value {
    /* No rung at 42px either -- see the desktop declaration's comment. */
    font-size: 42px;
    line-height: 48px;
  }

  .wm-cos-seo-stat-copy {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 21px;
  }

  .wm-cos-seo-card {
    min-height: auto;
    background: #f1f3ff;
  }

  .wm-cos-seo-card-icon {
    display: none;
  }

  .wm-cos-seo-comparison {
    text-align: left;
  }

  .wm-cos-seo-tip-card p {
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 26px;
  }

  .wm-cos-seo-adjust-card {
    background: #2a3040;
  }

  .wm-cos-seo-adjust-card h3,
  .wm-cos-seo-adjust-icon {
    color: #edf0ff;
  }

  .wm-cos-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: 20px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    justify-content: flex-start;
  }

  .wm-cos-seo-adjust-list li::before {
    width: 8px;
    height: 8px;
    border-radius: var(--wf-radius-pill);
    background: #85f8c4;
    content: "";
  }

  .wm-cos-seo-next-card {
    gap: 8px;
  }

  .wm-cos-seo-next-card h3 {
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 24px;
  }

  .wm-cos-seo-faq-list {
    gap: 12px;
  }

  .wm-cos-seo-faq button {
    /* Same content-reservation reasoning as the desktop 76px -- see there. */
    min-height: 64px;
    padding: 20px;
    gap: 16px;
  }

  .wm-cos-seo-faq h3 {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 20px;
  }

  .wm-cos-seo-faq-panel {
    padding: 0 20px 20px;
  }

  .wm-cos-seo-faq-panel p {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 23px;
  }

  .wm-cos-seo-summary {
    text-align: left;
  }

  .wm-cos-seo-summary p {
    max-width: none;
    color: var(--wm-money-copy, #3d4a42);
    font-size: var(--wm-scenario-text-lg-size);
    line-height: 24px;
  }

  .wm-cos-seo-disclaimer {
    padding-top: 0;
    border-top: 0;
    /* Raised from 11px to D2's 12px floor (WMA-117 D4.3; not in the
       skip-list -- this mobile override was not one of the scanned
       states -- but still a raw sub-floor size R6 reaches). */
    font-size: var(--wm-scenario-text-min-size);
    line-height: 18px;
    letter-spacing: 0;
  }
}


/*
 * Where You Land.
 *
 * Accent: --wm-money-accent-chart (#006a61), the published teal the surprise-bill
 * page already treats as a text-grade token (its icons, links, and figures use it on
 * the light canvas at ~6.5:1). Cash flow is the fifth accent in the rotation and the
 * only teal not already carrying the green family's meaning, so it reads as its own
 * scenario without inventing a colour the token set has never shipped.
 */

.wm-wyl-ranking-status {
  margin: -12px 0 0;
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.wm-wyl-ranking-status:empty {
  margin: 0;
}
.wm-wyl-page {
  --wm-wyl-accent: var(--wm-money-accent-chart, #006a61);
  --wm-wyl-accent-soft: #86f2e4;
  --wm-wyl-accent-wash: rgba(0, 106, 97, 0.08);
  --wm-wyl-surface: rgba(var(--wm-money-surface-rgb, 255, 255, 255), 1);
  --wm-wyl-line: var(--wm-money-border-medium, rgba(188, 202, 192, 0.2));
  --wm-wyl-problem: var(--wm-money-danger, #b3261e);
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 24px 40px 80px;
  color: var(--wm-money-ink, #151b2a);
}

.wm-wyl-shell {
  display: grid;
  gap: 32px;
  width: 100%;
}

.wm-wyl-shell-layout {
  display: grid;
  gap: 32px;
  align-items: start;
  min-width: 0;
}

.wm-wyl-shell-main {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.wm-wyl-shell .wm-scenario-tab-panels,
.wm-wyl-breakdown {
  min-width: 0;
}

/*
 * DOM order inside .wm-wyl-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
 * 24px row gap reproduces the spacing the header had while it was nested inside
 * .wm-wyl-shell-main. Visual placement therefore no longer depends on DOM order.
 */
@media (min-width: 1041px) {
  .wm-wyl-shell[data-input-state='expanded'] .wm-wyl-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;
  }

  .wm-wyl-shell[data-input-state='expanded'] .wm-scenario-page-header {
    grid-area: header;
  }

  .wm-wyl-shell[data-input-state='expanded'] .wm-wyl-shell-main {
    grid-area: main;
  }

  /*
   * This rail is a scroller: at 1280x800 it is a ~752px window onto ~2,010px of
   * form, so Spending, Saving, and the trim chooser sit below its inner fold with
   * nothing to say so — macOS overlay scrollbars are invisible at rest. It used to
   * carry a 48px `mask-image` fade over its own bottom edge to mark that cut as
   * "more below", plus 48px of bottom padding so the gradient had only empty space
   * left to dim at max scroll.
   *
   * BOTH are gone, and deliberately. A mask applies to the whole subtree, and the
   * run control now pins to the bottom of this scrollport (.wm-scenario-run-control,
   * `position: sticky; bottom: 0`), so the only thing left inside that 48px band was
   * the primary action — the fade had stopped marking "more below" and started
   * drawing Run part-way to transparent. Deleting it loses nothing: the pinned
   * control has an opaque canvas backdrop and the shell gives it a 14px gradient on
   * its top edge, so the form still visibly disappears under a soft edge rather than
   * stopping at a hard line. The 48px padding went with it because it is the sticky
   * box's own floor — kept, it would strand the control 48px above the rail's bottom
   * edge at max scroll.
   */
  .wm-wyl-shell[data-input-state='expanded'] .wm-scenario-input-region {
    grid-area: input;
    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;
    scrollbar-gutter: stable;
    padding-right: 4px;
    padding-bottom: 0;
    /* Still needed, and for a sharper reason than the fade it used to clear: the
       pinned control is opaque, so a focus scroll that aligns a field with the
       scrollport bottom would park it completely behind Run. 120px clears the
       control's ~92px (16px padding, a 44px button, the shell's 12px of backdrop
       padding) with room for the focus ring. */
    scroll-padding-bottom: 120px;
  }
}

/* Collapsed hides the input region, so the header sits directly above the main column. */
.wm-wyl-shell[data-input-state='collapsed'] .wm-wyl-shell-layout {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
}

/* Header: see .wm-scenario-page-header in scenario-shell.css.
 *
 * Post-run the header stops being the page's opening statement — the deck below it is —
 * so it compresses to an identity strip: breadcrumb, eyebrow, a smaller H1, and the
 * disclaimer. Done in CSS off `.is-post-run`, a class the server puts on the fragment
 * root (and therefore re-renders on every run swap), rather than by rendering fewer
 * elements: the H1, the breadcrumb and the educational disclaimer are SEO- and
 * compliance-load-bearing and must stay in the markup on every state of the page.
 * The purpose line is the one block that goes, and only visually — a crawler still
 * reads it, and it is the whole header before a run. */
.wm-wyl-shell.is-post-run .wm-scenario-page-header {
  gap: 6px;
}

.wm-wyl-shell.is-post-run .wm-scenario-page-title {
  font-size: var(--wf-font-heading-md-size);
  line-height: 32px;
}

.wm-wyl-shell.is-post-run .wm-scenario-page-subhead {
  display: none;
}

/* Form */

.wm-wyl-input-column {
  display: grid;
  gap: 20px;
}

/*
 * Pinning and the backdrop come from `.wm-scenario-run-control` in scenario-shell.css
 * (`position: sticky; bottom: 0`, so the form scrolls under the primary action).
 * Everything here is this page's own look, plus one reconciliation with that rule:
 * the wash is translucent (rgba(0, 106, 97, 0.08)), and this stylesheet loads after
 * the shell's, so a plain `background:` here would beat the shell's opaque canvas and
 * let the form read straight through the pinned bar. It is painted as an image layer
 * over an opaque canvas base instead — the card keeps its tint and still covers what
 * scrolls beneath it. The shell claims no inline bleed, so the control is exactly as
 * wide as the form sections it covers and nothing peeks past it either side; the
 * rail's `padding-right: 4px` is scrollbar gutter and reads as empty.
 *
 * One row, not two: Cancel sits beside Run rather than above it, because the phone
 * bar's height reserves further down assume an 80px bar and a stacked pair would have
 * doubled it. With Cancel hidden, Run is the only column and fills the width.
 */
.wm-wyl-run-control {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--wm-wyl-line);
  border-radius: 16px;
  background-color: var(--wm-money-canvas, #f9f9ff);
  background-image: linear-gradient(var(--wm-wyl-accent-wash), var(--wm-wyl-accent-wash));
}

.wm-wyl-run-button {
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-wyl-accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--wm-scenario-text-lg-size);
  font-weight: 700;
  cursor: pointer;
}

.wm-wyl-run-button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* WMA-88 (scenario-local half): the primary action was falling back to
 * Chrome's UA default ring (1px auto rgb(0, 95, 204)) — thinner and off-brand
 * next to the shell's own controls. Not a 2.4.7 failure (focus was visible),
 * just a weaker indicator than the nav above it. */
.wm-wyl-run-button:focus-visible {
  outline: var(--wm-scenario-focus-ring);
  outline-offset: var(--wm-scenario-focus-ring-offset);
}

.wm-wyl-form-section {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--wm-wyl-line);
  border-radius: 16px;
  background: var(--wm-wyl-surface);
}

.wm-wyl-section-kicker {
  margin: 0;
  color: var(--wm-wyl-accent);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-min-size);
  line-height: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* R6: this was 17px, a size the scale has no rung for (16 or 18, nothing between).
 * 7 rules across 5 stylesheets draw it — not enough to argue a new step over
 * 19px's precedent (one rule, and it moved). Took --wm-scenario-text-2xl-size
 * (18px, +1px) over -xl (16px, -1px) because the line-height here was already
 * 24px, the 2xl pair's own canonical value — the size moves, the line stays. */
.wm-wyl-section-title {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 24px;
  font-weight: 700;
}

.wm-wyl-input-stack {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}

.wm-wyl-field {
  display: grid;
  gap: 6px;
}

.wm-wyl-field-label {
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 650;
}

.wm-wyl-field-helper {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

.wm-wyl-field-error {
  margin: 0;
  color: var(--wm-wyl-problem);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
  font-weight: 600;
}

.wm-wyl-field-error:empty {
  display: none;
}

.wm-wyl-money-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: 12px;
  background: var(--wf-color-background-surface, #fff);
}

/* WMA-88 (scenario-local half): the seven money fields signalled focus only
 * through the 1px border-colour change above — the outline was
 * rgba(0, 106, 97, 0.08), not perceivable. Swapped for the shell ring. */
.wm-wyl-money-field:focus-within {
  border-color: var(--wm-wyl-accent);
  outline: var(--wm-scenario-focus-ring);
  outline-offset: var(--wm-scenario-focus-ring-offset);
}

.wm-wyl-money-field:has([aria-invalid='true']) {
  border-color: var(--wm-wyl-problem);
}

.wm-wyl-money-prefix {
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-md-size);
}

/*
 * 16px is a hard floor, not a taste call: mobile Safari auto-zooms any text input it
 * focuses below 16px and never zooms back out, so a 15px field magnified the page on
 * each of the seven money fields in turn. The explicit 18px line-height keeps the
 * field box at its established 38px (10 + 18 + 10) now that the font no longer sets
 * the box height through `normal`.
 */
.wm-wyl-money-input,
.wm-wyl-text-input {
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 18px;
  font-weight: 600;
}

.wm-wyl-money-input:focus,
.wm-wyl-text-input:focus {
  outline: none;
}

/* Chip enums (pay cadence, bill timing) */

.wm-wyl-chip-row {
  display: grid;
  gap: 8px;
}

.wm-wyl-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wm-wyl-chip {
  padding: 8px 14px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: var(--wf-radius-pill, 999px);
  background: transparent;
  color: var(--wm-money-copy, #3d4a42);
  font-family: inherit;
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-wyl-chip.is-active {
  border-color: var(--wm-wyl-accent);
  background: var(--wm-wyl-accent);
  color: #fff;
}

/* WMA-88 (scenario-local half): the pay-cadence and bill-timing chips (both
 * render this class) fell back to the UA default ring. */
.wm-wyl-chip:focus-visible {
  outline: var(--wm-scenario-focus-ring);
  outline-offset: var(--wm-scenario-focus-ring-offset);
}

/* The honest-month group: collapsed by default, opened when a total is already set. */

.wm-wyl-irregulars {
  border: 1px dashed var(--wm-money-line, #bccac0);
  border-radius: 12px;
  padding: 12px 14px;
}

/* D1 (WMA-117 skip-list, ex-D5): the disclosure summary rendered at ~16px
 * tall (13px text, default line-height) — under the 24px floor. display:flex
 * plus an explicit min-height gives it an independent, token-sourced box
 * instead of leaving its height to emerge from the text alone. */
.wm-wyl-irregulars > summary {
  display: flex;
  align-items: center;
  min-height: var(--wm-scenario-control-min);
  cursor: pointer;
  color: var(--wm-wyl-accent);
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 650;
  list-style: none;
}

.wm-wyl-irregulars > summary::-webkit-details-marker {
  display: none;
}

.wm-wyl-irregulars > summary::after {
  content: ' +';
}

.wm-wyl-irregulars[open] > summary::after {
  content: ' −';
}

.wm-wyl-irregulars > .wm-wyl-input-stack {
  margin-top: 12px;
}

.wm-wyl-form-section[hidden] {
  display: none;
}

/* Trim chips (draft in the form, committed in the breakdown explorer) */

.wm-wyl-trim-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wm-wyl-trim-chip {
  display: grid;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: 12px;
  background: transparent;
  color: var(--wm-money-copy, #3d4a42);
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 700;
  cursor: pointer;
}

.wm-wyl-trim-chip small {
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.wm-wyl-trim-chip.is-active {
  border-color: var(--wm-wyl-accent);
  background: var(--wm-wyl-accent);
  color: #fff;
}

.wm-wyl-trim-chip.is-active small {
  color: rgba(255, 255, 255, 0.82);
}

/* WMA-88 (scenario-local half): the trim chips fell back to the UA default ring. */
.wm-wyl-trim-chip:focus-visible {
  outline: var(--wm-scenario-focus-ring);
  outline-offset: var(--wm-scenario-focus-ring-offset);
}

/* Compare */

.wm-wyl-compare {
  display: grid;
  gap: 24px;
}

/*
 * The deck above already asks the question and prints both landings, so this heading
 * is a section label for the ranking block underneath it, not a second headline: at the
 * shell's 36px display size it competed with the deck's own question for the same job.
 * Scoped to this page's modifier class — `.wm-scenario-compare-head` is shared with
 * five other scenarios and is deliberately not restyled globally. Equal specificity to
 * the shell's own rules, and this stylesheet is concatenated after it (route-bundles.ts
 * lists `scenario-shell` first), so source order carries the override, including over
 * the shell's narrow-viewport block.
 */
.wm-wyl-compare-head h2 {
  font-size: var(--wf-font-title-xs-size);
  line-height: 30px;
}

.wm-wyl-compare-head p {
  font-size: var(--wm-scenario-text-lg-size);
  line-height: 24px;
}

/* All that is left of the four-step progress stepper: the one sentence that said what
 * to do next. The client keeps it current from the same ranking state the stepper read. */
.wm-wyl-compare-step {
  color: var(--wm-money-muted);
}

/* Run Scenario swaps the results in place, and a shared question card can link straight
 * at one — either way the reader is sent to a fragment, so both targets keep the top nav
 * clear rather than landing flush against the top. `.wm-wyl-results` is the deck wrapper
 * that took the retired verdict callout's anchor: the deck is what leads the results now. */
.wm-wyl-results,
.wm-wyl-trajectory h2 {
  scroll-margin-top: 88px;
}

/* Both halves of the deck's supporting line are laid out as blocks inside its one <p>:
 * the trade first, then the timing. Everything else about them is the deck's own
 * `.decide-sub` typography, which is why nothing here restates a colour or a size. */
.wm-wyl-deck-trade,
.wm-wyl-timing-line {
  display: block;
}

/* The timing line answers "when inside the month" for a landing that only answers "where
 * the month ends" — the one reading that can contradict the figures beside it. A month
 * can land with room and still go below zero on the 4th, so it rides inside the deck's
 * supporting block rather than under the deck, where it would read as a footnote to a
 * headline it contradicts. The full read lives in the Breakdown timing panel. The
 * hairline separates the two sentences without making it a second headline; the rule
 * colour is the deck's own muted green at 30%, not a token — no token resolves to the
 * deck's palette. */
.wm-wyl-timing-line {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(184, 216, 206, 0.3);
}

.wm-wyl-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Breakdown */

.wm-wyl-breakdown {
  display: grid;
  gap: 24px;
}

.wm-wyl-section-heading {
  display: grid;
  gap: 4px;
}

.wm-wyl-section-heading h2 {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
  font-weight: 700;
}

.wm-wyl-section-heading p {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

.wm-wyl-composition,
.wm-wyl-trajectory,
.wm-wyl-timing,
.wm-wyl-trim-panel,
.wm-wyl-metrics,
.wm-wyl-plan-summary {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--wm-wyl-line);
  border-radius: 18px;
  background: var(--wm-wyl-surface);
}

/* Where the money goes */

.wm-wyl-composition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.wm-wyl-composition-column {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--wm-wyl-line);
  border-radius: 14px;
  background: var(--wf-color-background-surface, #fff);
}

.wm-wyl-composition-column.is-selected {
  border-color: var(--wm-wyl-accent);
  box-shadow: 0 0 0 1px var(--wm-wyl-accent) inset;
}

.wm-wyl-composition-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wm-wyl-composition-head h3 {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-lg-size);
  line-height: 22px;
  font-weight: 700;
}

.wm-wyl-composition-head strong {
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xl-size);
  font-weight: 700;
}

.wm-wyl-composition-head strong.is-positive {
  color: var(--wm-wyl-accent);
}

.wm-wyl-composition-head strong.is-neutral {
  color: var(--wm-money-copy, #3d4a42);
}

.wm-wyl-composition-head strong.is-problem {
  color: var(--wm-wyl-problem);
}

.wm-wyl-composition-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 220px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--wm-money-chip, rgba(0, 106, 97, 0.06));
}

.wm-wyl-composition-segment {
  display: block;
  width: 100%;
  min-height: 4px;
}

/*
 * The six bands are separated by LIGHTNESS, not hue, and the ramp is ordered: each
 * band is at least 1.6:1 against the one it touches in the stack, so a legend swatch
 * maps to a band without relying on colour discrimination and the ordering survives
 * red-green colour vision deficiency. Flexible spending and What is left — the two
 * quantities the whole comparison moves between — sit at 2.97:1 (they were 1.02:1,
 * i.e. the same lightness in different hues). What is left is deliberately the only
 * saturated green: it is the answer the scenario exists to produce, so it is the
 * emphatic band rather than the palest tint. Irregular set-aside stays the one
 * neutral, because it is money that is not spent this month. Measured ratios live in
 * qa/polish/2026-08-30-where-you-land-usability-report.md (finding 6); re-measure
 * before moving any of these.
 */
.wm-wyl-composition-segment,
.wm-wyl-legend-dot {
  background: var(--wm-wyl-accent);
}

.wm-wyl-composition-segment.is-fixed-bills,
.wm-wyl-legend-dot.is-fixed-bills {
  background: #00413b;
}

.wm-wyl-composition-segment.is-debt-minimums,
.wm-wyl-legend-dot.is-debt-minimums {
  background: #00786c;
}

.wm-wyl-composition-segment.is-planned-savings,
.wm-wyl-legend-dot.is-planned-savings {
  background: #35a294;
}

.wm-wyl-composition-segment.is-flexible-spending,
.wm-wyl-legend-dot.is-flexible-spending {
  background: #a6e9dd;
}

.wm-wyl-composition-segment.is-irregular-set-aside,
.wm-wyl-legend-dot.is-irregular-set-aside {
  background: #9fadb6;
}

.wm-wyl-composition-segment.is-landing,
.wm-wyl-legend-dot.is-landing {
  background: #00914f;
}

.wm-wyl-composition-segment.is-gap,
.wm-wyl-legend-dot.is-gap {
  background: var(--wm-wyl-problem);
}

.wm-wyl-composition-legend {
  display: grid;
  gap: 6px;
  margin: 0;
}

.wm-wyl-composition-legend > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wm-wyl-composition-legend dt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

.wm-wyl-composition-legend dd {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xs-size);
  font-weight: 600;
}

/*
 * The inset ring is what makes the two pale bands' swatches perceivable. The segments
 * carry no in-place labels, so this legend is the only route from a colour to a
 * category, and at 10px an unbordered #a6e9dd square is 1.37:1 against the white card
 * — WCAG 1.4.11 wants 3:1 for non-text content you need in order to read the chart.
 * A tint of the fill cannot fix that (a tint of a pale fill is still pale, and even
 * black at 30% only reaches 2.82:1), so the ring is a fixed ink: --wm-money-muted
 * puts every dot's boundary at 6.77:1 against the card whatever its fill. It stays
 * subordinate by the same token — against the four dark fills the ring is 1.26:1 to
 * 1.71:1, a faint inner edge rather than an outline, and it only asserts itself where
 * it is needed (4.94:1 on flexible spending, 2.94:1 on irregular set-aside). Inset,
 * so the 10px box is unchanged.
 */
.wm-wyl-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--wm-money-muted, #4f5f56);
}

/*
 * The shortfall is not drawn as a segment in the stack, so its legend row carries no
 * colour swatch. It reads as an annotation under the bar instead of a key to a colour
 * that is nowhere in it.
 */
.wm-wyl-composition-legend-note {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--wm-wyl-line);
}

.wm-wyl-composition-legend-note dt,
.wm-wyl-composition-legend-note dd {
  color: var(--wm-wyl-problem);
}

/* Reserves trajectory */

.wm-wyl-trajectory-lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.wm-wyl-trajectory-line {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--wm-wyl-line);
  border-radius: 14px;
  background: var(--wf-color-background-surface, #fff);
}

.wm-wyl-trajectory-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wm-wyl-trajectory-head h3 {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-lg-size);
  line-height: 22px;
  font-weight: 700;
}

.wm-wyl-trajectory-head strong {
  color: var(--wm-wyl-accent);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xl-size);
  font-weight: 700;
}

/* Reserves that were spent down are never drawn in the growth colour. */
.wm-wyl-trajectory-head strong.is-problem {
  color: var(--wm-wyl-problem);
}

.wm-wyl-trajectory-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-wyl-trajectory-bar {
  display: flex;
  align-items: flex-end;
  flex: 1 1 0;
  height: 100%;
}

.wm-wyl-trajectory-bar > span {
  display: block;
  width: 100%;
  min-height: 2px;
  height: var(--wm-wyl-bar-height, 0%);
  border-radius: 3px 3px 0 0;
  background: var(--wm-wyl-accent);
}

.wm-wyl-trajectory-bar.is-empty > span {
  background: var(--wm-wyl-problem);
}

.wm-wyl-trajectory-note {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

/* Timing panel */

.wm-wyl-timing-read {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-left: 4px solid var(--wm-wyl-accent);
  border-radius: 12px;
  background: var(--wm-wyl-accent-wash);
}

.wm-wyl-timing-cadence {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.wm-wyl-timing-cadence span {
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-2xl-size);
  font-weight: 800;
}

.wm-wyl-timing-cadence small {
  color: var(--wm-money-copy, #3d4a42);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-min-size);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.wm-wyl-timing-headline {
  margin: 0;
}

.wm-wyl-timing-headline strong {
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-lg-size);
  line-height: 23px;
  font-weight: 700;
}

.wm-wyl-timing-statement {
  margin: 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.wm-wyl-timing-callout,
.wm-wyl-timing-note,
.wm-wyl-timing-caution {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--wm-wyl-line);
  border-radius: 12px;
  background: var(--wf-color-background-surface, #fff);
}

.wm-wyl-timing-callout h3,
.wm-wyl-timing-note h3,
.wm-wyl-timing-caution h3 {
  margin: 0;
  color: var(--wm-wyl-accent);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-min-size);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-wyl-timing-callout p,
.wm-wyl-timing-note p,
.wm-wyl-timing-caution p {
  margin: 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

/* The buffer is a caution, not a failure: same tint the trim-to-zero note uses when
 * trimming cannot close a gap, so "watch this" reads consistently across the page. */
.wm-wyl-timing-caution {
  border-color: rgba(179, 38, 30, 0.24);
  background: rgba(179, 38, 30, 0.06);
}

.wm-wyl-timing-caution h3,
.wm-wyl-timing-caution p {
  color: var(--wm-wyl-problem);
}

.wm-wyl-timing-callout-value {
  color: var(--wm-money-ink, #151b2a) !important;
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 700;
}

/* Intra-month pinch chart */

.wm-wyl-pinch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.wm-wyl-pinch-line {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--wm-wyl-line);
  border-radius: 14px;
  background: var(--wf-color-background-surface, #fff);
}

.wm-wyl-pinch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wm-wyl-pinch-head h3 {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-lg-size);
  line-height: 22px;
  font-weight: 700;
}

.wm-wyl-pinch-head strong {
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xl-size);
  font-weight: 700;
}

.wm-wyl-pinch-head strong.is-positive {
  color: var(--wm-wyl-accent);
}

.wm-wyl-pinch-head strong.is-problem {
  color: var(--wm-wyl-problem);
}

/*
 * --wm-wyl-pinch-axis is the height of the zero rule measured up from the floor, and
 * the page model computes it once across BOTH paths: negative headroom over the whole
 * positive-plus-negative range. Every bar is then positioned on that same scale, so
 * the two small multiples are directly comparable and the axis lines up between them.
 */
/* No padding on the chart, and each bar column stretches to its full height: the axis
 * rule and every bar then resolve their percentages against boxes of the same height,
 * which is what keeps the rule and the bars that meet it on the same line. */
.wm-wyl-pinch-chart {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 132px;
  margin-bottom: 8px;
}

/*
 * Zero has to be visible. The chart's whole question is whether the balance dips
 * below the line, and the bars already answer it positionally — but at the previous
 * 20%-opacity hairline (1.08:1 on the white card) there was no line to be below, which
 * left crimson-vs-teal as the only cue and made this a colour-only encoding (WCAG
 * 1.4.1). --wm-money-muted is the same ink the caption text under the chart uses, so
 * the rule reads as a reference line rather than as a heavier mark than the bars.
 */
.wm-wyl-pinch-axis-rule {
  position: absolute;
  right: 0;
  bottom: var(--wm-wyl-pinch-axis, 0%);
  left: 0;
  height: 1px;
  background: var(--wm-money-muted, #4f5f56);
}

.wm-wyl-pinch-bar {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.wm-wyl-pinch-bar-fill {
  position: absolute;
  right: 0;
  bottom: var(--wm-wyl-pinch-bar-bottom, 0%);
  left: 0;
  min-height: 2px;
  height: var(--wm-wyl-pinch-bar-height, 0%);
  border-radius: 2px;
  background: var(--wm-wyl-accent-soft);
}

.wm-wyl-pinch-bar.is-up .wm-wyl-pinch-bar-fill {
  background: var(--wm-wyl-accent);
}

.wm-wyl-pinch-bar.is-down .wm-wyl-pinch-bar-fill {
  background: var(--wm-wyl-problem);
}

.wm-wyl-pinch-bar.is-min .wm-wyl-pinch-bar-fill {
  outline: 1px solid var(--wm-money-ink, #151b2a);
  outline-offset: 1px;
}

/* Deposit days get a tick under the column rather than a mark on the bar: the bar
 * already carries the balance, and a deposit is a thing that happened on that date.
 * The chart's 8px bottom margin is the lane it sits in. */
.wm-wyl-pinch-bar.has-deposit::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--wm-money-ink, #151b2a);
}

.wm-wyl-pinch-caption {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

.wm-wyl-pinch-disclaimer {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
  font-style: italic;
}

/* Trim explorer */

.wm-wyl-trim-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.wm-wyl-trim-row {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--wm-wyl-line);
  border-radius: 14px;
  background: var(--wf-color-background-surface, #fff);
}

.wm-wyl-trim-row h3 {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-lg-size);
  line-height: 22px;
  font-weight: 700;
}

.wm-wyl-trim-row dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.wm-wyl-trim-row dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wm-wyl-trim-row dt {
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
}

.wm-wyl-trim-row dd {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 700;
}

.wm-wyl-trim-row dd.is-positive,
.wm-wyl-metric-row dd.is-positive {
  color: var(--wm-wyl-accent);
}

.wm-wyl-trim-row dd.is-problem,
.wm-wyl-metric-row dd.is-negative {
  color: var(--wm-wyl-problem);
}

/* Shown while the chips preview a level the committed results were not computed with. */
.wm-wyl-trim-draft-note {
  margin: 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
  font-weight: 600;
  font-style: italic;
}

.wm-wyl-trim-draft-note[hidden] {
  display: none;
}

.wm-wyl-trim-zero-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--wm-wyl-accent-wash);
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
  font-weight: 600;
}

.wm-wyl-trim-zero-note.is-problem {
  background: rgba(179, 38, 30, 0.06);
  color: var(--wm-wyl-problem);
}

/* Key numbers */

.wm-wyl-metric-rows {
  display: grid;
  gap: 4px;
  margin: 0;
}

.wm-wyl-metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wm-wyl-line);
}

.wm-wyl-metric-row:last-child {
  border-bottom: 0;
}

.wm-wyl-metric-row dt {
  color: var(--wm-money-ink, #151b2a);
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 650;
}

.wm-wyl-metric-row dd {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-lg-size);
  font-weight: 700;
  text-align: right;
}

.wm-wyl-metric-row .wm-wyl-metric-note {
  grid-column: 1 / -1;
  color: var(--wm-money-muted, #4f5f56);
  font-family: inherit;
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
  font-weight: 400;
  text-align: left;
}

/* Plan summary + option switch */

.wm-wyl-option-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wm-wyl-option-switch-button {
  padding: 8px 14px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: var(--wf-radius-pill, 999px);
  background: transparent;
  color: var(--wm-money-copy, #3d4a42);
  font-family: inherit;
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-wyl-option-switch-button.is-active {
  border-color: var(--wm-wyl-accent);
  background: var(--wm-wyl-accent);
  color: #fff;
}

.wm-wyl-plan-summary h2 {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
  font-weight: 700;
}

.wm-wyl-plan-summary p {
  margin: 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

/* :not([hidden]) keeps the display override from resurrecting the unselected
   option's panel — display:grid on a [hidden] element wins over the UA rule. */
.wm-wyl-plan-summary > div:not([hidden]) {
  display: grid;
  gap: 8px;
}

.wm-wyl-plan-comparison {
  color: var(--wm-money-muted, #4f5f56) !important;
}

.wm-wyl-final-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.wm-wyl-copy-action {
  padding: 10px 18px;
  border: 1px solid var(--wm-wyl-accent);
  border-radius: var(--wf-radius-pill, 999px);
  background: transparent;
  color: var(--wm-wyl-accent);
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-wyl-copy-action:hover {
  background: var(--wm-wyl-accent-wash);
}

.wm-wyl-final-action a {
  color: var(--wm-wyl-accent);
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  text-decoration: none;
}

.wm-wyl-final-action a:hover {
  text-decoration: underline;
}

.wm-wyl-copy-status {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
}

.wm-wyl-copy-status:empty {
  display: none;
}

/* Plan tab */

.wm-wyl-plan {
  display: grid;
  gap: 24px;
}

.wm-wyl-plan-empty {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 32px;
  border: 1px dashed var(--wm-money-line, #bccac0);
  border-radius: 18px;
  background: var(--wm-wyl-surface);
}

.wm-wyl-plan-empty h2 {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-sm-size);
  font-weight: 700;
}

.wm-wyl-plan-empty p {
  margin: 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.wm-wyl-plan-empty button {
  padding: 10px 18px;
  border: 0;
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-wyl-accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-wyl-plan-hero,
.wm-wyl-save-card,
.wm-wyl-plan-glance,
.wm-wyl-plan-fit,
.wm-wyl-plan-next,
.wm-wyl-plan-watch,
.wm-wyl-plan-other {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--wm-wyl-line);
  border-radius: 18px;
  background: var(--wm-wyl-surface);
}

.wm-wyl-plan-hero {
  border-left: 4px solid var(--wm-wyl-accent);
}

.wm-wyl-plan-hero-head {
  display: grid;
  gap: 8px;
}

.wm-wyl-plan-status {
  justify-self: start;
  padding: 4px 12px;
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-wyl-accent-wash);
  color: var(--wm-wyl-accent);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.wm-wyl-plan h2,
.wm-wyl-plan h3,
.wm-wyl-plan h4 {
  margin: 0;
  font-family: var(--wf-font-heading);
}

.wm-wyl-plan h2 {
  font-size: var(--wf-font-title-xs-size);
  line-height: 30px;
  font-weight: 800;
}

.wm-wyl-plan h3 {
  font-size: var(--wm-scenario-text-xl-size);
  font-weight: 700;
}

.wm-wyl-plan h4 {
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 700;
}

.wm-wyl-plan p {
  margin: 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 22px;
}

.wm-wyl-plan-hero-grid,
.wm-wyl-plan-glance-grid,
.wm-wyl-plan-fit-list,
.wm-wyl-plan-step-groups,
.wm-wyl-plan-watch-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.wm-wyl-plan-tiny-win {
  color: var(--wm-wyl-accent) !important;
  font-weight: 650;
}

.wm-wyl-plan-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--wm-wyl-line);
  border-radius: 14px;
  background: var(--wf-color-background-surface, #fff);
}

.wm-wyl-plan-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wm-wyl-plan-card-head span {
  padding: 2px 10px;
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-wyl-accent-wash);
  color: var(--wm-wyl-accent);
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 700;
}

.wm-wyl-plan-group-label {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56) !important;
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-min-size);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-wyl-plan-row,
.wm-wyl-save-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-sm-size);
}

.wm-wyl-plan-row-value {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.wm-wyl-plan-row-value strong {
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 700;
}

.wm-wyl-plan-row-value strong.is-accent {
  color: var(--wm-wyl-accent);
}

.wm-wyl-plan-row-value strong.is-problem {
  color: var(--wm-wyl-problem);
}

.wm-wyl-plan-row-value em {
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-min-size);
  font-style: normal;
}

.wm-wyl-plan-fit-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
}

.wm-wyl-plan-fit-icon {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--wm-wyl-accent);
}

.wm-wyl-plan-tradeoff {
  color: var(--wm-money-copy, #3d4a42);
}

.wm-wyl-plan-checklist {
  display: grid;
  gap: 10px;
}

.wm-wyl-plan-check {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

/* This box rendered 9x13 -- narrower than it was tall -- and the cause was
   the absence of this rule, not anything in it. Every other scenario's plan
   checklist sizes its checkbox explicitly; this one left the input at the UA
   default, which in Chromium is 13x13 with `margin: 3px 3px 3px 4px`. As a
   grid item the input's default `justify-self: stretch` fits its MARGIN box
   to the fixed 16px column, so 4px + 3px of horizontal margin ate the column
   down to a 9px content box, while `align-items: start` on the cross axis
   left the height at its intrinsic 13px. Hence 9x13, from a column that says
   16. Sizing the box and dropping the side margins makes it square and fills
   the column it was always meant to fill. This is a layout fix on its own
   terms -- it is not what clears the 24px floor here (the label does, see
   e2e/a11y-floors.ts), and it must not be skipped because the label does. */
.wm-wyl-plan-check input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}

/* Cross-scenario steps are real anchors, so they sit outside the checkbox label. */
.wm-wyl-plan-step-link-row {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--wm-wyl-accent-wash);
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-sm-size);
  line-height: 20px;
}

.wm-wyl-plan-step-link {
  justify-self: start;
  color: var(--wm-wyl-accent);
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 700;
  text-decoration: none;
}

.wm-wyl-plan-step-link:hover {
  text-decoration: underline;
}

.wm-wyl-plan-watch-item {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--wm-wyl-line);
  border-radius: 14px;
  background: var(--wf-color-background-surface, #fff);
}

.wm-wyl-plan-other-list {
  display: grid;
}

.wm-wyl-plan-other-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wm-wyl-line);
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-sm-size);
}

.wm-wyl-plan-other-row:last-child {
  border-bottom: 0;
}

.wm-wyl-plan-other-row strong {
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 700;
}

.wm-wyl-plan-rail {
  display: grid;
  gap: 12px;
}

.wm-wyl-save-field {
  display: grid;
  gap: 6px;
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 650;
}

.wm-wyl-save-field input {
  padding: 10px 12px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: 12px;
  background: var(--wf-color-background-surface, #fff);
  color: var(--wm-money-ink, #151b2a);
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
}

.wm-wyl-save-details {
  display: grid;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--wm-wyl-accent-wash);
}

.wm-wyl-save-summary,
.wm-wyl-save-helper,
.wm-wyl-save-status {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

/* Shown while edited inputs leave the rendered comparison one run behind.
   Amber pair mirrors the saved-plan pill (#7a4a00 on light amber, >5:1). */
.wm-wyl-stale-notice {
  display: block;
  margin: 12px 0 0;
  border: 1px solid rgba(122, 74, 0, 0.25);
  border-radius: 12px;
  background: #fff4e0;
  color: #7a4a00;
  font-size: var(--wm-scenario-text-sm-size);
  font-weight: 650;
  line-height: 18px;
  padding: 10px 14px;
}

.wm-wyl-stale-notice[hidden] {
  display: none;
}

.wm-wyl-save-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wm-wyl-save-primary {
  padding: 10px 18px;
  border: 0;
  border-radius: var(--wf-radius-pill, 999px);
  background: var(--wm-wyl-accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-wyl-save-secondary {
  padding: 10px 18px;
  border: 1px solid var(--wm-money-line, #bccac0);
  border-radius: var(--wf-radius-pill, 999px);
  background: transparent;
  color: var(--wm-money-copy, #3d4a42);
  font-family: inherit;
  font-size: var(--wm-scenario-text-md-size);
  font-weight: 600;
  cursor: pointer;
}

.wm-wyl-plan-disclaimer {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 18px;
}

.wm-wyl-plan-disclaimer.is-desktop {
  display: none;
}

@media (min-width: 1041px) {
  .wm-wyl-plan {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
  }

  .wm-wyl-plan-hero {
    grid-column: 1;
  }

  .wm-wyl-plan-rail {
    grid-column: 2;
    grid-row: 1 / span 6;
    position: sticky;
    top: 24px;
  }

  .wm-wyl-plan-disclaimer.is-desktop {
    display: block;
  }

  .wm-wyl-plan-disclaimer.is-mobile {
    display: none;
  }
}

@media (max-width: 720px) {
  .wm-wyl-page {
    padding: 16px 16px 64px;
  }

  /*
   * Phones have no rail to pin inside — the scrolling input rail only exists at
   * >=1041px — so the shell's sticky-bottom rule would pin Run to the bottom of the
   * whole 13,000px page instead of anything the reader can see. While the setup is
   * expanded it rides a fixed bottom bar instead, the same pattern income-drop
   * shipped in c908c0d. The bar is 80px tall (14 + 52 + 14) plus the safe area; the
   * three reserve rules below clear exactly that much.
   *
   * This is the ONE place the shared pin is replaced rather than used. `position`
   * takes a single value, and this selector outweighs `.wm-scenario-run-control`, so
   * below 721px the control is fixed and above it, it is sticky — never both. The
   * shell's ::before fade is switched off here for the same reason: it paints an
   * opaque canvas band, which is the right cue above a bar sitting inside the rail
   * and the wrong one above a frosted bar floating over page content.
   */
  .wm-wyl-shell[data-input-state='expanded'] .wm-wyl-run-control {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 16;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--wm-money-border-muted, rgba(188, 202, 192, 0.4));
    border-radius: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
  }

  .wm-wyl-shell[data-input-state='expanded'] .wm-wyl-run-control::before {
    content: none;
  }

  /* Comfortable touch target, and the bar height the reserves below assume
     (the 14+52+14 math in the comment above this block still holds — 52px
     is exactly --wf-control-height-2xl). */
  .wm-wyl-shell[data-input-state='expanded'] .wm-wyl-run-button {
    min-height: var(--wf-control-height-2xl);
  }

  /* The page's own content (form, tabs, SEO block) ends inside this padding: the
     64px above plus the bar. */
  .wm-wyl-page:has(.wm-wyl-shell[data-input-state='expanded']) {
    padding-bottom: calc(144px + env(safe-area-inset-bottom));
  }

  /* The site footer is a sibling after </main>, so the page padding reserves
     nothing for it; without this the bar sits on the last footer links and eats
     their taps. 48px is the footer's base bottom padding, 80px the bar. */
  body:has(.wm-wyl-shell[data-input-state='expanded']) .money-footer-inner {
    padding-bottom: calc(128px + env(safe-area-inset-bottom));
  }

  /* The copy-link toast is appended to <body> at bottom: 24px, inside the bar's
     band; lift it clear so the confirmation reads above the run button. */
  body:has(.wm-wyl-shell[data-input-state='expanded']) .wm-scenario-share-toast {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .wm-wyl-composition-stack {
    min-height: 160px;
  }

  .wm-wyl-trajectory-bars {
    height: 96px;
  }

  /* 30 bars in a narrow column: drop the gap to a hairline so each day still owns a
   * visible sliver, and shorten the chart in step with the trajectory. */
  .wm-wyl-pinch-chart {
    gap: 1px;
    height: 104px;
  }
}

/* Scenario accent registration.
 * The landing and dashboard cards get the cash-flow accent through the shared
 * accent-class maps in routes/public.ts and routes/app.ts. */

.money-scenario-icon.is-cash-flow {
  background: rgba(134, 242, 228, 0.16);
  color: var(--wm-money-accent-chart, #006a61);
}

.money-scenario-example.is-cash-flow {
  border-left-color: var(--wm-money-accent-chart, #006a61);
}

.money-scenario-link.is-cash-flow {
  color: var(--wm-money-accent-chart, #006a61);
}

.scenario-library-card.is-cash-flow .scenario-library-card-icon,
.scenario-library-card.is-cash-flow .scenario-library-card-cta {
  color: var(--wm-money-accent-chart, #006a61);
}

.money-app-scenario-card.is-where-you-land .money-app-scenario-icon {
  color: var(--wm-money-accent-chart, #006a61);
  background: rgba(134, 242, 228, 0.24);
}
.wm-wyl-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-wyl-seo-inner {
  display: grid;
  gap: 96px;
  width: min(1168px, 100%);
  margin: 0 auto;
}

.wm-wyl-seo section {
  min-width: 0;
}

.wm-wyl-seo h2,
.wm-wyl-seo h3,
.wm-wyl-seo p,
.wm-wyl-seo blockquote,
.wm-wyl-seo ul {
  margin: 0;
}

.wm-wyl-seo h2,
.wm-wyl-seo h3 {
  color: var(--wm-money-ink, #151b2a);
  font-family: var(--wf-font-heading);
  letter-spacing: 0;
}

.wm-wyl-seo h2 {
  font-size: var(--wf-font-heading-xl-size);
  line-height: 40px;
  font-weight: 800;
}

.wm-wyl-seo h3 {
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
  font-weight: 700;
}

.wm-wyl-seo p,
.wm-wyl-seo li {
  color: var(--wm-money-copy, #3d4a42);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-wyl-seo-guide,
.wm-wyl-seo-why,
.wm-wyl-seo-comparison,
.wm-wyl-seo-read,
.wm-wyl-seo-next,
.wm-wyl-seo-faq,
.wm-wyl-seo-final {
  display: grid;
  gap: 48px;
}

.wm-wyl-seo-guide-grid,
.wm-wyl-seo-why-grid,
.wm-wyl-seo-read-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  gap: 48px;
  align-items: start;
}

.wm-wyl-seo-heading-block,
.wm-wyl-seo-copy {
  display: grid;
  gap: 24px;
}

/* R6 (WMA-117, pack-visual-system-tokens.md §5): 60px has no platform token —
 * the scale tops out at --wf-font-display-lg-size (48px) — and it is not a
 * one-off: 6 rules across 5 stylesheets (this hero H2, comfortable-or-stretched,
 * debt-vs-savings, about) draw it. Left raw rather than invented; a step here
 * is Lane A/G's call, not this lane's. */
.wm-wyl-seo-heading-block h2 {
  max-width: 700px;
  font-size: 60px;
  line-height: 60px;
}

.wm-wyl-seo-eyebrow,
.wm-wyl-seo-question-eyebrow,
.wm-wyl-seo-card-eyebrow,
.wm-wyl-seo-next-card p,
.wm-wyl-seo-disclaimer {
  color: var(--wm-money-accent, #006948);
  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-wyl-seo-eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 4px 16px;
  border-radius: var(--wf-radius-pill);
  background: #86f2e4;
  color: #005049;
}

.wm-wyl-seo-lede {
  max-width: 672px;
  font-size: var(--wf-font-heading-sm-size);
  line-height: 32px;
}

.wm-wyl-seo-learn-card,
.wm-wyl-seo-question-card,
.wm-wyl-seo-card,
.wm-wyl-seo-stat-card,
.wm-wyl-seo-tip-card,
.wm-wyl-seo-adjust-card,
.wm-wyl-seo-next-card,
.wm-wyl-seo-summary,
.wm-wyl-seo-faq-item {
  border-radius: var(--wm-card-radius, 32px);
}

.wm-wyl-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-wyl-seo-learn-card h3,
.wm-wyl-seo-tip-card h3,
.wm-wyl-seo-adjust-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wm-money-accent, #006948);
}

.wm-wyl-seo-learn-icon,
.wm-wyl-seo-tip-icon,
.wm-wyl-seo-adjust-icon,
.wm-wyl-seo-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-money-accent, #006948);
}

.wm-wyl-seo-learn-icon {
  width: 20px;
  height: 20px;
}

.wm-wyl-seo-learn-icon svg,
.wm-wyl-seo-tip-icon svg,
.wm-wyl-seo-adjust-icon svg,
.wm-wyl-seo-list-icon svg,
.wm-wyl-seo-card-icon svg,
.wm-wyl-seo-question-mark svg {
  width: 100%;
  height: 100%;
}

.wm-wyl-seo-learn-list,
.wm-wyl-seo-adjust-list {
  display: grid;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.wm-wyl-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-wyl-seo-list-icon {
  width: 14px;
  height: 14px;
  margin-top: 4px;
}

.wm-wyl-seo-question-card {
  position: relative;
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: 64px;
  background: #00855d;
}

.wm-wyl-seo-question-card blockquote {
  max-width: 896px;
}

.wm-wyl-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-wyl-seo .wm-wyl-seo-question-card > p:not(.wm-wyl-seo-question-eyebrow) {
  max-width: 920px;
  color: #f5fff7;
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
}

.wm-wyl-seo .wm-wyl-seo-question-eyebrow {
  color: #f5fff7;
  font-size: var(--wm-scenario-text-md-size);
  line-height: 20px;
  letter-spacing: 1px;
}

.wm-wyl-seo-question-mark {
  position: absolute;
  right: 64px;
  bottom: 54px;
  width: 120px;
  height: 120px;
  color: rgba(245, 255, 247, 0.08);
}

.wm-wyl-seo-stat-card {
  display: grid;
  gap: 8px;
  padding: 32px 32px 32px 36px;
  border-left: 4px solid var(--wm-money-accent, #006948);
  background: #f1f3ff;
}

.wm-wyl-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-wyl-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-wyl-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: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-wyl-seo-comparison {
  text-align: center;
}

.wm-wyl-seo-card-grid,
.wm-wyl-seo-next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.wm-wyl-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-wyl-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-wyl-seo-comparison-card:nth-child(2) .wm-wyl-seo-card-icon {
  background: #f1f3ff;
  color: #4b41e1;
}

.wm-wyl-seo-comparison-card:nth-child(3) .wm-wyl-seo-card-icon {
  background: #e9edff;
  color: #2a3040;
}

.wm-wyl-seo-card-eyebrow {
  color: var(--wm-money-accent, #006948);
}

.wm-wyl-seo-card p:not(.wm-wyl-seo-card-eyebrow) {
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-wyl-seo-read-grid {
  grid-template-columns: minmax(0, 2fr) minmax(320px, 0.9fr);
}

.wm-wyl-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-wyl-seo-tip-card h3 {
  color: #005049;
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-xs-size);
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-wyl-seo-tip-card p {
  color: #005049;
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 29px;
  font-style: italic;
  font-weight: 600;
}

.wm-wyl-seo-tip-icon,
.wm-wyl-seo-adjust-icon {
  width: 16px;
  height: 16px;
}

.wm-wyl-seo-adjust-card {
  display: grid;
  gap: 24px;
  padding: 32px;
  background: #dce2f6;
}

.wm-wyl-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: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wm-wyl-seo-adjust-list {
  gap: 16px;
}

.wm-wyl-seo-adjust-list li {
  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;
}

/* Each "try adjusting" entry is a link to the control it names, several thousand pixels
 * back up the page. The anchor's ::after covers the whole row, so the surface the reader
 * sees is the target they hit — at both the light desktop card and the dark mobile one,
 * without either layout giving up the padding that makes the row. */
.wm-wyl-seo-adjust-list li {
  position: relative;
}

/* D1 (WMA-117 skip-list, ex-D5): the mobile card drops the row padding and
 * this link — an inline anchor wrapping only the label text, not the caret —
 * rendered at the mobile row's 20px line-height, under the 24px target floor.
 * The ::after bleed below widens the CLICKABLE area but not the anchor's own
 * measured box, which is what the floor scanner reads (a11y-floors.ts walks
 * getBoundingClientRect on the interactive element itself, not its pseudo);
 * display + min-height give the anchor an independent, token-sourced box. */
.wm-wyl-seo-adjust-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--wm-scenario-control-min);
  color: inherit;
  text-decoration: none;
}

/* Vertical bleed, not a plain `inset: 0`: widens the tappable/clickable area
 * beyond the anchor's own box (see above), and still fits inside the 16px gap
 * between rows at both sizes. */
.wm-wyl-seo-adjust-link::after {
  position: absolute;
  inset: -6px 0;
  content: "";
}

.wm-wyl-seo-adjust-link:hover {
  text-decoration: underline;
}

.wm-wyl-seo-adjust-link:focus-visible {
  outline: 2px solid var(--wm-money-accent);
  outline-offset: 3px;
}

/* Inherits the row's own ink so it stays legible on the light desktop card and the dark
 * mobile one alike; it is decoration beside a link that already reads as a link. */
.wm-wyl-seo-adjust-caret {
  color: inherit;
  opacity: 0.65;
}

.wm-wyl-seo-next-card {
  display: grid;
  gap: 12px;
  text-align: left;
}

.wm-wyl-seo-next-card p {
  color: var(--wm-money-muted, #6d7a72);
  letter-spacing: 1.2px;
}

.wm-wyl-seo-next-card h3 {
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
}

/* A question card that is a link keeps the card it already was — the CTA line, the
 * underline on hover, and the focus ring are what say it can be pressed. */
.wm-wyl-seo-next-card.is-link {
  color: inherit;
  text-decoration: none;
}

.wm-wyl-seo-next-card.is-link:hover h3 {
  text-decoration: underline;
}

.wm-wyl-seo-next-card.is-link:focus-visible {
  outline: 2px solid var(--wm-money-accent);
  outline-offset: 6px;
}

.wm-wyl-seo-next-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wm-money-accent, #006948);
  font-size: var(--wm-scenario-text-md-size);
  line-height: 20px;
  font-weight: 700;
}

.wm-wyl-seo-faq-list {
  display: grid;
  gap: 16px;
}

.wm-wyl-seo-faq-item {
  overflow: hidden;
  background: #f1f3ff;
}

.wm-wyl-seo-faq-item.is-open {
  border: 1px solid rgba(0, 105, 72, 0.2);
  background: #f1f3ff;
}

.wm-wyl-seo-faq h3 {
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 28px;
}

/* R6: min-height is a geometry guard, not a scale step — it is exactly this
 * rule's own 24px padding top+bottom plus the h3's 28px line-height (24+24+28
 * = 76), reasserting what the box already computes to so a short question
 * never collapses shorter. No control-height token is 76px and none should
 * be; this isn't a control-size choice, it's arithmetic on this rule's own
 * other (permitted-raw) values. */
.wm-wyl-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-wyl-seo-faq-item.is-open button {
  color: var(--wm-money-accent, #006948);
}

.wm-wyl-seo-faq button:focus-visible {
  outline: 3px solid rgba(0, 133, 93, 0.35);
  outline-offset: 3px;
}

.wm-wyl-seo-faq-chevron {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: currentColor;
}

.wm-wyl-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-wyl-seo-faq-item.is-open .wm-wyl-seo-faq-chevron::before {
  transform: translateY(4px) rotate(225deg);
}

.wm-wyl-seo-faq-panel {
  display: grid;
  gap: 14px;
  padding: 0 24px 24px;
}

.wm-wyl-seo-faq-panel[hidden] {
  display: none;
}

.wm-wyl-seo-faq-panel p {
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-wyl-seo-summary {
  padding: 40px 136px;
  background: var(--wf-color-background-surface);
  text-align: center;
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-wyl-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-wyl-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-wyl-seo {
    padding-inline: 40px;
  }

  .wm-wyl-seo-guide-grid,
  .wm-wyl-seo-why-grid,
  .wm-wyl-seo-read-grid {
    grid-template-columns: 1fr;
  }

  .wm-wyl-seo-card-grid,
  .wm-wyl-seo-next-grid {
    gap: 20px;
  }

  .wm-wyl-seo-summary {
    padding-inline: 56px;
  }
}

@media (max-width: 760px) {
  .wm-wyl-seo {
    padding: 48px 24px 72px;
  }

  .wm-wyl-seo-inner {
    gap: 56px;
  }

  .wm-wyl-seo-guide,
  .wm-wyl-seo-why,
  .wm-wyl-seo-comparison,
  .wm-wyl-seo-read,
  .wm-wyl-seo-next,
  .wm-wyl-seo-faq,
  .wm-wyl-seo-final {
    gap: 24px;
  }

  .wm-wyl-seo h2 {
    font-size: var(--wf-font-heading-md-size);
    line-height: 32px;
  }

  .wm-wyl-seo h3 {
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 28px;
  }

  .wm-wyl-seo p,
  .wm-wyl-seo li {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 23px;
  }

  .wm-wyl-seo-heading-block h2 {
    font-size: var(--wf-font-display-md-size);
    line-height: 44px;
  }

  .wm-wyl-seo-lede {
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 29px;
  }

  .wm-wyl-seo-card-grid,
  .wm-wyl-seo-next-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wm-wyl-seo-learn-card,
  .wm-wyl-seo-question-card,
  .wm-wyl-seo-card,
  .wm-wyl-seo-stat-card,
  .wm-wyl-seo-tip-card,
  .wm-wyl-seo-adjust-card,
  .wm-wyl-seo-next-card,
  .wm-wyl-seo-summary {
    padding: 24px;
  }

  .wm-wyl-seo-question-card {
    padding: 72px 32px 32px;
    background: #e0f2f1;
  }

  .wm-wyl-seo-question-card blockquote p {
    color: var(--wm-money-ink, #151b2a);
    font-size: var(--wf-font-heading-md-size);
    line-height: 30px;
  }

  /*
    The `.wm-wyl-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-wyl-seo .wm-wyl-seo-question-card > p:not(.wm-wyl-seo-question-eyebrow) {
    color: var(--wm-money-copy, #3d4a42);
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 26px;
  }

  .wm-wyl-seo .wm-wyl-seo-question-eyebrow {
    color: var(--wm-money-accent, #006948);
    font-size: var(--wm-scenario-text-min-size);
    line-height: 15px;
  }

  .wm-wyl-seo-question-mark {
    top: -12px;
    right: -18px;
    bottom: auto;
    width: 92px;
    height: 92px;
    color: rgba(0, 105, 72, 0.08);
  }

  .wm-wyl-seo-stat-card {
    text-align: center;
  }

  /* R6: same gap as the 60px hero above — 42px sits between --wf-font-display-md
   * (40px) and -lg (48px) with no rung of its own, and it is not a one-off
   * either: 8 rules across 6 stylesheets (browser-preview, about, legal, when-
   * you-stop, comfortable-or-stretched, debt-vs-savings) draw exactly this
   * mobile stat-value size. Left raw; flagging for Lane A/G rather than
   * inventing a step here. */
  .wm-wyl-seo-stat-value {
    font-size: 42px;
    line-height: 48px;
  }

  .wm-wyl-seo-stat-copy {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 21px;
  }

  .wm-wyl-seo-card {
    min-height: auto;
    background: #f1f3ff;
  }

  .wm-wyl-seo-card-icon {
    display: none;
  }

  .wm-wyl-seo-comparison {
    text-align: left;
  }

  .wm-wyl-seo-tip-card p {
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 26px;
  }

  .wm-wyl-seo-adjust-card {
    background: #2a3040;
  }

  .wm-wyl-seo-adjust-card h3,
  .wm-wyl-seo-adjust-icon {
    color: #edf0ff;
  }

  .wm-wyl-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: 20px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    justify-content: flex-start;
  }

  .wm-wyl-seo-adjust-list li::before {
    width: 8px;
    height: 8px;
    border-radius: var(--wf-radius-pill);
    background: #85f8c4;
    content: "";
  }

  .wm-wyl-seo-next-card {
    gap: 8px;
  }

  .wm-wyl-seo-next-card h3 {
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 24px;
  }

  .wm-wyl-seo-faq-list {
    gap: 12px;
  }

  /* R6: same geometry-guard reasoning as the desktop rule above (20+20 padding
   * plus the mobile h3's own line-height, with a few px of slack) — not a
   * control-size choice, so left raw rather than forced onto a token that
   * would move it. */
  .wm-wyl-seo-faq button {
    min-height: 64px;
    padding: 20px;
    gap: 16px;
  }

  .wm-wyl-seo-faq h3 {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 20px;
  }

  .wm-wyl-seo-faq-panel {
    padding: 0 20px 20px;
  }

  .wm-wyl-seo-faq-panel p {
    font-size: var(--wm-scenario-text-md-size);
    line-height: 23px;
  }

  .wm-wyl-seo-summary {
    text-align: left;
  }

  .wm-wyl-seo-summary p {
    max-width: none;
    color: var(--wm-money-copy, #3d4a42);
    font-size: var(--wm-scenario-text-lg-size);
    line-height: 24px;
  }

  .wm-wyl-seo-disclaimer {
    padding-top: 0;
    border-top: 0;
    font-size: var(--wm-scenario-text-min-size);
    line-height: 18px;
    letter-spacing: 0;
  }
}


/*
 * Retirement Pack surfaces (WMA-122, W3.4).
 *
 * Served in the `packs` bundle (route-bundles.ts) on /packs/retirement,
 * /scenarios/the-claiming-window, /packs and /account, and appended to the
 * `pricing` bundle for the flag-on band. Every selector is prefixed `wm-pack-`
 * so nothing here reaches into another page.
 *
 * Regions, in cascade order. Each W3.4 work package appends inside its own
 * region only; the tokens block is shared and owned by A.
 */

/* ========================================================================== */
/* tokens — A                                                                 */
/* ========================================================================== */

:root {
  /* Lifted from the Layout 1 depth system (when-you-stop/styles.css) so the
   * pack surfaces do not load that page's stylesheet. Keep the values in step
   * with `--wm-wys-l1-*` when either side changes. */
  --wm-pack-card-head-face: linear-gradient(#fbfcfd, #f4f7f9);
  --wm-pack-card-shadow: 0 1px 2px rgba(21, 27, 42, 0.06), 0 6px 16px -6px rgba(21, 27, 42, 0.14),
    0 0 0 1px rgba(21, 27, 42, 0.05);
  --wm-pack-primary-shadow: 0 1px 2px rgba(6, 95, 70, 0.5), 0 8px 18px -6px rgba(4, 120, 87, 0.55);
  --wm-pack-green-deep: #065f46;
  --wm-pack-green: #047857;
  --wm-pack-green-bright: #0a8a64;
  --wm-pack-mint: #d1fae5;
  --wm-pack-mint-soft: #ecfdf5;
  --wm-pack-amber: #f5c042;
  --wm-pack-amber-ink: #8a5a00;
  --wm-pack-amber-soft: #fff7e0;

  /* Surfaces and edges the depth look is built from. The canvas draws every
   * raised plane as a near-white vertical gradient over a hairline, so these
   * are named by role rather than by the page that first used them. */
  --wm-pack-radius: 20px;
  --wm-pack-radius-sm: 14px;
  --wm-pack-hairline: rgba(188, 202, 192, 0.55);
  --wm-pack-hairline-soft: rgba(188, 202, 192, 0.35);
  --wm-pack-mint-line: rgba(167, 243, 208, 0.9);
  --wm-pack-surface-face: linear-gradient(#ffffff, #fbfcfd);
  --wm-pack-card-head-pack-face: linear-gradient(#f0fbf5, #e6f7ee);
  --wm-pack-step-face: linear-gradient(#f7fcf9, #eef8f2);
  --wm-pack-primary-face: linear-gradient(var(--wm-pack-green-bright), var(--wm-pack-green));
  --wm-pack-closing-face: linear-gradient(135deg, var(--wm-pack-green-deep), var(--wm-pack-green-bright));
  --wm-pack-tile-free-face: linear-gradient(135deg, #e3e9ec, #cbd5e1);
  --wm-pack-tile-pack-face: linear-gradient(135deg, var(--wm-pack-green-bright), var(--wm-pack-green-deep));
  --wm-pack-tile-shadow: 0 2px 6px -1px rgba(6, 95, 70, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --wm-pack-card-shadow-deep: 0 1px 2px rgba(21, 27, 42, 0.06), 0 6px 16px -6px rgba(21, 27, 42, 0.14),
    0 18px 32px -18px rgba(21, 27, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --wm-pack-band-shadow: 0 2px 4px rgba(21, 27, 42, 0.08), 0 28px 64px -12px rgba(21, 27, 42, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --wm-pack-step-shadow: 0 1px 2px rgba(21, 27, 42, 0.05), 0 10px 24px -14px rgba(6, 95, 70, 0.35),
    inset 0 1px 0 #ffffff;
  --wm-pack-closing-shadow: 0 2px 4px rgba(6, 95, 70, 0.25), 0 24px 48px -16px rgba(6, 95, 70, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/*
 * Every state block on every pack surface ships with the `hidden` attribute
 * and is shown by pack-flow.js. The blocks also carry display rules (flex,
 * grid), which would beat the UA's `[hidden] { display: none }` — so this one
 * rule, keyed on the vocabulary attribute, is what makes `hidden` win on the
 * dashboard tile, the cards, the pricing band and the pack page alike.
 *
 * The same gap catches the two elements pack-flow.js hides by property rather
 * than through a state block: the `/account` purchases list, and the "Open"
 * pill on a refunded row — `.wm-pack-open` is `inline-flex`, which would leave
 * a refunded purchase still offering the door into the scenario.
 */
[data-pack-when][hidden],
.wm-account-purchases-list[hidden],
.wm-pack-open[hidden] {
  display: none !important;
}

/* ========================================================================== */
/* pack page — A                                                              */
/* ========================================================================== */

/*
 * Everything below is scoped under `.wm-pack-page` (the `/packs/retirement`
 * <main>). The shared class names — wm-pack-card, wm-pack-pill, wm-pack-icon-tile,
 * wm-pack-unlocked — are also defined globally by C for the cards that appear on
 * landing, the library and the dashboard; scoping here keeps the pack page's
 * larger treatment from leaking and wins on specificity where both apply.
 * `.wm-pack-open` is C's alone and is deliberately not styled here.
 */

.wm-pack-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
  isolation: isolate;
}

.wm-pack-page .wm-pack-glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 14% -4%, rgba(10, 138, 100, 0.16), transparent 62%),
    radial-gradient(760px 460px at 96% 10%, rgba(245, 192, 66, 0.14), transparent 62%);
}

/* --- hero ---------------------------------------------------------------- */

.wm-pack-page .wm-pack-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
  padding-top: 56px;
}

.wm-pack-page .wm-pack-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wm-pack-page .wm-pack-eyebrow {
  margin: 0;
  font-family: var(--wf-font-body);
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wm-money-accent);
}

.wm-pack-page .wm-pack-hero-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 52px;
  line-height: 58px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--wm-money-ink);
  text-wrap: balance;
}

.wm-pack-page .wm-pack-hero-body {
  margin: 0;
  max-width: 52ch;
  font-family: var(--wf-font-body);
  font-size: 18px;
  line-height: 28px;
  color: var(--wm-money-copy);
}

.wm-pack-page .wm-pack-hero-visual {
  justify-self: end;
  width: 100%;
}

.wm-pack-page .wm-pack-fan {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-inline-start: auto;
}

/* --- price band ---------------------------------------------------------- */

.wm-pack-page .wm-pack-price-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  padding: 26px 32px;
  border: 1px solid var(--wm-pack-hairline);
  border-radius: var(--wm-pack-radius);
  background: var(--wm-pack-surface-face);
  box-shadow: var(--wm-pack-band-shadow);
}

.wm-pack-page .wm-pack-price-figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 32px;
  border-right: 1px solid var(--wm-pack-hairline-soft);
}

.wm-pack-page .wm-pack-price-amount {
  font-family: var(--wf-font-heading);
  font-size: 44px;
  line-height: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--wm-money-ink);
}

.wm-pack-page .wm-pack-price-terms {
  font-family: var(--wf-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--wm-pack-green-deep);
}

.wm-pack-page .wm-pack-price-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 20px;
}

.wm-pack-page .wm-pack-price-checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--wf-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--wm-money-copy);
}

.wm-pack-page .wm-pack-check {
  display: inline-flex;
  margin-top: 2px;
  color: var(--wm-pack-green);
}

.wm-pack-page .wm-pack-price-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.wm-pack-page .wm-pack-action {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wm-pack-page .wm-pack-stripe-line {
  margin: 0;
  font-family: var(--wf-font-body);
  font-size: 12px;
  line-height: 18px;
  color: var(--wm-money-muted);
  text-align: right;
}

.wm-pack-page .wm-pack-error {
  margin: 0;
  font-family: var(--wf-font-body);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--wm-money-danger);
  text-align: right;
}

/* --- buttons ------------------------------------------------------------- */

.wm-pack-page .wm-pack-cta,
.wm-pack-page .wm-pack-cta-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-family: var(--wf-font-body);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 120ms ease, background-color 120ms ease;
}

.wm-pack-page .wm-pack-cta {
  background: var(--wm-pack-primary-face);
  color: #ffffff;
  box-shadow: var(--wm-pack-primary-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.wm-pack-page .wm-pack-cta.is-invert {
  background: linear-gradient(#ffffff, #f0fbf5);
  color: var(--wm-pack-green-deep);
  box-shadow: 0 1px 2px rgba(6, 95, 70, 0.35), 0 8px 18px -8px rgba(0, 0, 0, 0.35), inset 0 1px 0 #ffffff;
}

.wm-pack-page .wm-pack-cta-quiet {
  background: transparent;
  border-color: currentcolor;
  color: inherit;
}

.wm-pack-page .wm-pack-cta:hover,
.wm-pack-page .wm-pack-cta-quiet:hover {
  filter: saturate(1.08);
}

.wm-pack-page .wm-pack-cta:focus-visible,
.wm-pack-page .wm-pack-cta-quiet:focus-visible,
.wm-pack-page .wm-pack-open:focus-visible,
.wm-pack-page .wm-pack-card-link:focus-visible,
.wm-pack-page .wm-pack-faq-question:focus-visible {
  outline: 2px solid var(--wm-pack-green-deep);
  outline-offset: 2px;
}

.wm-pack-page .wm-pack-unlocked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--wf-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--wm-pack-green-deep);
}

/* --- scenario cards ------------------------------------------------------ */

.wm-pack-page .wm-pack-cards,
.wm-pack-page .wm-pack-steps,
.wm-pack-page .wm-pack-faq {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wm-pack-page .wm-pack-section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.wm-pack-page .wm-pack-section-body {
  margin: 0;
  max-width: 60ch;
  font-family: var(--wf-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--wm-money-copy);
}

.wm-pack-page .wm-pack-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.wm-pack-page .wm-pack-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--wm-pack-hairline);
  border-radius: var(--wm-pack-radius);
  background: var(--wm-pack-surface-face);
  box-shadow: var(--wm-pack-card-shadow-deep);
}

.wm-pack-page .wm-pack-card.is-wide {
  grid-column: 1 / -1;
}

.wm-pack-page .wm-pack-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: var(--wm-pack-card-head-face);
  border-bottom: 1px solid var(--wm-pack-hairline-soft);
}

.wm-pack-page .wm-pack-card.is-in-pack .wm-pack-card-head {
  background: var(--wm-pack-card-head-pack-face);
  border-bottom-color: var(--wm-pack-mint-line);
}

.wm-pack-page .wm-pack-icon-tile {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wm-pack-tile-shadow);
}

.wm-pack-page .wm-pack-icon-tile.is-free {
  background: var(--wm-pack-tile-free-face);
  color: var(--wm-money-copy);
}

.wm-pack-page .wm-pack-icon-tile.is-in-pack {
  background: var(--wm-pack-tile-pack-face);
  color: #ffffff;
}

.wm-pack-page .wm-pack-card-head-row {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wm-pack-page .wm-pack-card-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wm-money-ink);
}

.wm-pack-page .wm-pack-card-link {
  color: inherit;
  text-decoration: none;
}

.wm-pack-page .wm-pack-card-link:hover {
  text-decoration: underline;
}

.wm-pack-page .wm-pack-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 12px;
  border-radius: 9999px;
  font-family: var(--wf-font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.wm-pack-page .wm-pack-pill svg {
  width: 14px;
  height: 14px;
}

.wm-pack-page .wm-pack-pill.is-free {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: var(--wm-money-copy);
}

.wm-pack-page .wm-pack-pill.is-in-pack {
  background: var(--wm-pack-mint-soft);
  border: 1px solid #a7f3d0;
  color: var(--wm-pack-green-deep);
}

.wm-pack-page .wm-pack-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
}

.wm-pack-page .wm-pack-card.is-wide .wm-pack-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 32px;
  align-items: start;
}

.wm-pack-page .wm-pack-card-question {
  margin: 0;
  font-family: var(--wf-font-body);
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  color: var(--wm-money-ink);
}

.wm-pack-page .wm-pack-card-description {
  margin: 0;
  font-family: var(--wf-font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--wm-money-copy);
}

/* --- how it works -------------------------------------------------------- */

.wm-pack-page .wm-pack-step-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.wm-pack-page .wm-pack-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--wm-pack-mint-line);
  border-radius: var(--wm-pack-radius);
  background: var(--wm-pack-step-face);
  box-shadow: var(--wm-pack-step-shadow);
}

.wm-pack-page .wm-pack-step-number {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wm-pack-tile-pack-face);
  color: #ffffff;
  font-family: var(--wf-font-heading);
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
  box-shadow: 0 2px 6px -1px rgba(6, 95, 70, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.wm-pack-page .wm-pack-step-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--wm-money-ink);
}

.wm-pack-page .wm-pack-step-body {
  margin: 0;
  font-family: var(--wf-font-body);
  font-size: 15px;
  line-height: 23px;
  color: var(--wm-money-copy);
}

/* --- trust strip --------------------------------------------------------- */

.wm-pack-page .wm-pack-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--wm-pack-hairline);
  border-radius: var(--wm-pack-radius);
  background: var(--wm-pack-card-head-face);
}

.wm-pack-page .wm-pack-trust-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.wm-pack-page .wm-pack-trust-icon {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 2px;
  color: var(--wm-money-accent);
}

.wm-pack-page .wm-pack-trust-title {
  margin: 0 0 4px;
  font-family: var(--wf-font-heading);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--wm-money-ink);
}

.wm-pack-page .wm-pack-trust-body {
  margin: 0;
  font-family: var(--wf-font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--wm-money-copy);
}

/* --- FAQ ----------------------------------------------------------------- */

.wm-pack-page .wm-pack-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wm-pack-page .wm-pack-faq-item {
  padding: 16px 20px;
  border: 1px solid var(--wm-pack-hairline);
  border-radius: var(--wm-pack-radius-sm);
  background: var(--wm-pack-surface-face);
  box-shadow: var(--wm-pack-card-shadow);
}

.wm-pack-page .wm-pack-faq-question {
  cursor: pointer;
  font-family: var(--wf-font-heading);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--wm-money-ink);
}

.wm-pack-page .wm-pack-faq-answer {
  margin: 10px 0 0;
  font-family: var(--wf-font-body);
  font-size: 15px;
  line-height: 24px;
  color: var(--wm-money-copy);
}

/* --- closing band -------------------------------------------------------- */

.wm-pack-page .wm-pack-closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 32px;
  border-radius: var(--wm-pack-radius);
  background: var(--wm-pack-closing-face);
  color: #ffffff;
  box-shadow: var(--wm-pack-closing-shadow);
}

.wm-pack-page .wm-pack-closing-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wm-pack-page .wm-pack-closing-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 24px;
  line-height: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.wm-pack-page .wm-pack-closing-note {
  margin: 0;
  font-family: var(--wf-font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--wm-pack-mint);
}

.wm-pack-page .wm-pack-closing-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.wm-pack-page .wm-pack-closing .wm-pack-unlocked {
  color: var(--wm-pack-mint);
}

/* --- tablet: the two side-by-side bands stack ---------------------------- */

@media (max-width: 1024px) {
  .wm-pack-page .wm-pack-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .wm-pack-page .wm-pack-hero-visual {
    justify-self: stretch;
  }

  .wm-pack-page .wm-pack-fan {
    margin-inline: auto;
  }

  .wm-pack-page .wm-pack-price-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .wm-pack-page .wm-pack-price-figure {
    padding-right: 0;
    border-right: 0;
  }

  .wm-pack-page .wm-pack-price-actions,
  .wm-pack-page .wm-pack-closing-actions {
    align-items: stretch;
  }

  .wm-pack-page .wm-pack-action {
    flex-wrap: wrap;
  }

  .wm-pack-page .wm-pack-action .wm-pack-cta {
    flex: 1 1 auto;
  }

  .wm-pack-page .wm-pack-stripe-line,
  .wm-pack-page .wm-pack-error {
    text-align: center;
  }
}

/* --- phone --------------------------------------------------------------- */

@media (max-width: 767px) {
  .wm-pack-page {
    gap: 40px;
  }

  .wm-pack-page .wm-pack-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-top: 28px;
  }

  .wm-pack-page .wm-pack-hero-title {
    font-size: 34px;
    line-height: 40px;
  }

  .wm-pack-page .wm-pack-hero-body {
    font-size: 16px;
    line-height: 25px;
  }

  .wm-pack-page .wm-pack-price-band {
    padding: 24px;
  }

  .wm-pack-page .wm-pack-price-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .wm-pack-page .wm-pack-section-title {
    font-size: 26px;
    line-height: 32px;
  }

  .wm-pack-page .wm-pack-card-grid,
  .wm-pack-page .wm-pack-step-grid,
  .wm-pack-page .wm-pack-trust {
    grid-template-columns: minmax(0, 1fr);
  }

  .wm-pack-page .wm-pack-card.is-wide {
    grid-column: auto;
  }

  .wm-pack-page .wm-pack-card.is-wide .wm-pack-card-body {
    display: flex;
    flex-direction: column;
  }

  .wm-pack-page .wm-pack-closing {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- owner controls on the deep-green closing band ----------------------- */

/* A dark-green pill on a dark-green band disappears; invert it there, and
 * let the Unlocked mark read in white. The pill's own rules live in C's
 * region; this only re-colours them under the closing band. */
.wm-pack-page .wm-pack-closing .wm-pack-open {
  background: #ffffff;
  color: var(--wm-pack-green-deep);
  box-shadow: 0 1px 2px rgba(6, 95, 70, 0.3);
}

.wm-pack-page .wm-pack-closing .wm-pack-open:hover,
.wm-pack-page .wm-pack-closing .wm-pack-open:focus-visible {
  background: var(--wm-pack-mint-soft);
  color: var(--wm-pack-green-deep);
}

.wm-pack-page .wm-pack-closing .wm-pack-unlocked {
  color: #ffffff;
}

/* --- return from Stripe (markup in pack-page.ts; the spinner is F's) ------ */

.wm-pack-page .wm-pack-return {
  padding-top: 24px;
}

.wm-pack-page .wm-pack-return-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 32px;
  border: 1px solid var(--wm-pack-hairline);
  border-radius: var(--wm-pack-radius);
  background: var(--wm-pack-surface-face);
  box-shadow: var(--wm-pack-band-shadow);
}

.wm-pack-page .wm-pack-return-panel.is-confirmed {
  border-color: var(--wm-pack-mint-line);
  background: linear-gradient(#f4fdf8, #ffffff);
}

.wm-pack-page .wm-pack-return-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  color: var(--wm-pack-green-deep);
  background: var(--wm-pack-mint);
}

.wm-pack-page .wm-pack-return-panel.is-cancelled .wm-pack-return-icon {
  color: var(--wm-pack-amber-ink);
  background: var(--wm-pack-amber-soft);
}

.wm-pack-page .wm-pack-return-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 26px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wm-money-ink);
  text-wrap: balance;
}

.wm-pack-page .wm-pack-return-body,
.wm-pack-page .wm-pack-return-note {
  margin: 0;
  max-width: 60ch;
  font-family: var(--wf-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--wm-money-copy);
}

.wm-pack-page .wm-pack-return-note {
  font-size: 13px;
  line-height: 20px;
  color: var(--wm-money-muted);
}

.wm-pack-page .wm-pack-return-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

@media (max-width: 767px) {
  .wm-pack-page .wm-pack-return-panel {
    padding: 22px 20px;
  }

  .wm-pack-page .wm-pack-return-title {
    font-size: 22px;
    line-height: 28px;
  }

  .wm-pack-page .wm-pack-return-actions > * {
    width: 100%;
  }
}

/* ========================================================================== */
/* cards, pills, unlocked mark, open pill, dashboard tile — C                  */
/* ========================================================================== */

/*
 * The pack card's depth treatment, layered onto the landing (`money-scenario-
 * card`), scenario-library (`scenario-library-card`) and dashboard
 * (`money-app-scenario-card`) card shells via the shared `wm-pack-card` class
 * — never a standalone card. `wm-pack-card`, `wm-pack-card-head` and
 * `wm-pack-icon-tile` here are intentionally NOT scoped under `.wm-pack-page`:
 * A's page-scoped rules (`.wm-pack-page .wm-pack-card` etc.) carry higher
 * specificity and win there, per the comment on that block. `wm-pack-open` is
 * this file's only definition of that class — the pack page's owner Open pill
 * reuses it as-is.
 *
 * The three host shells lay their children out with `display: grid` and a
 * fixed row template sized for their own children (icon, title, question,
 * description, tags/answers, CTA). A pack card's children are a different
 * shape — one combined head, then question/summary/tags, then two
 * `data-pack-when` state blocks — so `wm-pack-card` switches the shell to a
 * plain flex column instead of fighting the host's row template. Cascade
 * order (packs loads after chrome and the two accent stylesheets in every
 * bundle that carries it) is what lets an equal-specificity two-class
 * selector like this win without `!important`.
 */
.money-scenario-card.wm-pack-card,
.scenario-library-card.wm-pack-card,
.money-app-scenario-card.wm-pack-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.wm-pack-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--wm-pack-radius-sm, 14px);
  background: var(--wm-pack-card-head-pack-face, linear-gradient(#f0fbf5, #e6f7ee));
  border: 1px solid var(--wm-pack-mint-line, rgba(167, 243, 208, 0.9));
}

.wm-pack-card-head h3 {
  margin: 0;
}

.wm-pack-icon-tile {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wm-pack-tile-pack-face, linear-gradient(135deg, #0a8a64, #065f46));
  color: #ffffff;
  box-shadow: var(--wm-pack-tile-shadow, 0 2px 6px -1px rgba(6, 95, 70, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3));
}

.wm-pack-icon-tile svg {
  width: 22px;
  height: 22px;
}

/* --- pill / unlocked mark -------------------------------------------------- */

.wm-pack-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 12px;
  border-radius: 9999px;
  font-family: var(--wf-font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.wm-pack-pill svg {
  width: 14px;
  height: 14px;
}

.wm-pack-pill.is-free {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: var(--wm-money-copy, #3d4a42);
}

.wm-pack-pill.is-in-pack {
  background: var(--wm-pack-mint-soft, #ecfdf5);
  border: 1px solid #a7f3d0;
  color: var(--wm-pack-green-deep, #065f46);
}

.wm-pack-unlocked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--wf-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--wm-pack-green-deep, #065f46);
}

.wm-pack-unlocked svg {
  width: 16px;
  height: 16px;
}

/* --- the two state blocks a card ships (`data-pack-when`) ------------------ */

.wm-pack-card-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

/* --- open pill (owner) / upgrade link (non-owner) -------------------------- */

.wm-pack-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 9999px;
  background: var(--wm-pack-green-deep, #065f46);
  color: #ffffff;
  font-family: var(--wf-font-body);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--wm-pack-primary-shadow, 0 8px 18px -6px rgba(4, 120, 87, 0.55)), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: filter 120ms ease;
}

.wm-pack-open svg {
  width: 16px;
  height: 16px;
}

.wm-pack-open:hover {
  filter: saturate(1.08);
}

.wm-pack-open:focus-visible {
  outline: 3px solid var(--wm-pack-green-deep, #065f46);
  outline-offset: 2px;
}

.wm-pack-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--wm-pack-green, #006948);
  font-family: var(--wf-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
}

.wm-pack-upgrade svg {
  width: 16px;
  height: 16px;
}

.wm-pack-upgrade:hover {
  text-decoration: underline;
}

.wm-pack-upgrade:focus-visible {
  outline: 2px solid var(--wm-pack-green-deep, #065f46);
  outline-offset: 2px;
}

/* --- dashboard tile ---------------------------------------------------------
 * "Retirement Pack · Five scenarios · pick up where you left off · Open".
 * `renderPackDashboardTile` (card-states.ts) is the one renderer for this
 * markup; both the dashboard (agent app.ts) and `/packs` (agent D2's
 * packs-page.ts) call it, so one set of rules covers both places it lands.
 */

.wm-pack-dashboard-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--wm-pack-radius, 20px);
  background: var(--wm-pack-surface-face, linear-gradient(#ffffff, #fbfcfd));
  border: 1px solid var(--wm-pack-hairline, rgba(188, 202, 192, 0.55));
  box-shadow: var(--wm-pack-card-shadow, 0 6px 16px -6px rgba(21, 27, 42, 0.14));
}

.wm-pack-dashboard-tile-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wm-pack-dashboard-tile-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wm-money-ink);
}

.wm-pack-dashboard-tile-subtitle {
  margin: 0;
  font-family: var(--wf-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--wm-money-copy);
}

.wm-pack-dashboard-tile-state {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .wm-pack-dashboard-tile {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ========================================================================== */
/* pricing band — D1                                                          */
/* ========================================================================== */

/*
 * The flag-on band that replaces `.wm-decision-packs-callout` on /pricing
 * (loaded via the `pricing` bundle, which already appends `packs`). Rules
 * here are scoped under `.wm-pack-pricing-band` so a shared class like
 * `.wm-pack-icon-tile` or `.wm-pack-upgrade` can carry a different, larger
 * treatment elsewhere (the pack page, the cards) without the two disagreeing —
 * the later cascade position here wins where both apply, same pattern as the
 * `.wm-pack-page` scoping above.
 */

.wm-pack-pricing-band {
  width: min(912px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--wm-pack-hairline);
  border-radius: var(--wm-pack-radius);
  background: var(--wm-pack-surface-face);
  box-shadow: var(--wm-pack-card-shadow-deep);
}

.wm-pack-pricing-band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: var(--wm-pack-card-head-pack-face);
  border-bottom: 1px solid var(--wm-pack-mint-line);
}

.wm-pack-pricing-band-head-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.wm-pack-pricing-band-name {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 20px;
  line-height: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wm-money-ink);
}

.wm-pack-pricing-band-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--wm-pack-green-bright), var(--wm-pack-green) 60%, var(--wm-pack-green-deep));
  color: #ffffff;
  box-shadow: 0 2px 6px -1px rgba(6, 95, 70, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.wm-pack-pricing-band-price-amount {
  font-family: var(--wf-font-heading);
  font-size: 26px;
  line-height: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.wm-pack-pricing-band-price-terms {
  font-family: var(--wf-font-body);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--wm-pack-mint);
  white-space: nowrap;
}

.wm-pack-pricing-band-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px 24px;
}

.wm-pack-pricing-band-copy {
  margin: 0;
  max-width: 62ch;
  font-family: var(--wf-font-body);
  font-size: 15px;
  line-height: 23px;
  color: var(--wm-money-copy);
}

.wm-pack-pricing-band-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.wm-pack-pricing-band-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--wm-pack-hairline);
  border-radius: 12px;
  background: var(--wm-pack-surface-face);
  box-shadow: 0 1px 2px rgba(21, 27, 42, 0.06), inset 0 1px 0 #ffffff;
}

.wm-pack-pricing-band-tile-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wm-pack-tile-shadow);
}

.wm-pack-pricing-band-tile.is-free .wm-pack-pricing-band-tile-icon {
  background: var(--wm-pack-tile-free-face);
  color: var(--wm-money-copy);
}

.wm-pack-pricing-band-tile.is-in-pack .wm-pack-pricing-band-tile-icon {
  background: var(--wm-pack-tile-pack-face);
  color: #ffffff;
}

.wm-pack-pricing-band-tile-icon svg {
  width: 22px;
  height: 22px;
}

.wm-pack-pricing-band-tile-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wm-pack-pricing-band-tile-title {
  margin: 0;
  font-family: var(--wf-font-heading);
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: var(--wm-money-ink);
  /* Names wrap rather than truncate: "The Claiming Window" clipped to
   * "The Claimi…" at 1280px was the first thing the walkthrough caught. */
  overflow-wrap: anywhere;
}

.wm-pack-pricing-band-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/*
 * Both the band's primary link and its secondary link are pill buttons here,
 * a larger treatment than the plain "See the pack →" text link the cards use
 * for the same `.wm-pack-upgrade` class; scoping under the band wins on
 * cascade order without touching the cards' definition.
 */
.wm-pack-pricing-band .wm-pack-upgrade,
.wm-pack-pricing-band-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 26px;
  border-radius: 9999px;
  font-family: var(--wf-font-body);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.wm-pack-pricing-band .wm-pack-upgrade {
  background: linear-gradient(var(--wm-pack-green-bright), var(--wm-pack-green));
  color: #ffffff;
  box-shadow: var(--wm-pack-primary-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.wm-pack-pricing-band .wm-pack-upgrade:hover {
  filter: saturate(1.08);
}

.wm-pack-pricing-band-secondary {
  padding: 0 20px;
  background: var(--wm-pack-surface-face);
  border: 1px solid var(--wm-pack-hairline);
  color: var(--wm-pack-green-deep);
  box-shadow: 0 1px 2px rgba(21, 27, 42, 0.08), inset 0 1px 0 #ffffff;
}

.wm-pack-pricing-band-secondary:hover {
  text-decoration: underline;
}

.wm-pack-pricing-band .wm-pack-upgrade:focus-visible,
.wm-pack-pricing-band-secondary:focus-visible {
  outline: 3px solid var(--wm-money-accent-active, var(--wm-pack-green-deep));
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .wm-pack-pricing-band-head {
    padding: 16px 18px;
  }

  .wm-pack-pricing-band-body {
    padding: 18px 18px 20px;
  }

  .wm-pack-pricing-band-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wm-pack-pricing-band-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ========================================================================== */
/* locked page — B                                                            */
/* ========================================================================== */

/*
 * One stylesheet for every paid scenario route. `scenario-shell.css` is in the
 * `packs` bundle, so `.wm-scenario-page-back` keeps its shared look; the page
 * only adds the two layout properties its column needs.
 */

.wm-pack-locked-page {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 40px 20px 72px;
}

.wm-pack-locked-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.wm-pack-locked-description {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.wm-pack-locked-page .wm-scenario-page-back {
  align-self: flex-start;
  min-height: 32px;
}

.wm-pack-locked-page .wm-scenario-page-back:hover,
.wm-pack-locked-page .wm-scenario-page-back:focus-visible {
  text-decoration: underline;
}

.wm-pack-locked-eyebrow {
  margin: 0;
  color: var(--wm-money-accent, #006948);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wm-pack-locked-title {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.wm-pack-locked-lede {
  margin: 0;
  max-width: 58ch;
  color: var(--wm-money-copy, #3d4a42);
  font-size: 17px;
  line-height: 27px;
}

.wm-pack-locked-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.wm-pack-locked-panel {
  padding: 22px;
  border: 1px solid var(--wm-pack-hairline, rgba(188, 202, 192, 0.55));
  border-radius: var(--wm-pack-radius, 20px);
  background: var(--wm-pack-surface-face, linear-gradient(#ffffff, #fbfcfd));
  box-shadow: var(--wm-pack-card-shadow-deep, 0 6px 16px -6px rgba(21, 27, 42, 0.14));
}

.wm-pack-locked-panel-heading {
  margin: 0 0 12px;
  color: var(--wm-money-muted, #4f5f56);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wm-pack-locked-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-pack-locked-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 14px;
  border: 1px solid var(--wm-pack-mint-line, rgba(167, 243, 208, 0.9));
  border-radius: 9999px;
  background: var(--wm-pack-mint-soft, #ecfdf5);
  color: var(--wm-pack-green-deep, #065f46);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.wm-pack-locked-see {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-pack-locked-see-item {
  position: relative;
  padding-left: 18px;
  color: var(--wm-money-copy, #3d4a42);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.wm-pack-locked-see-item::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wm-pack-green, #047857);
}

.wm-pack-locked-honesty {
  margin: 0;
  max-width: 62ch;
  color: var(--wm-money-muted, #4f5f56);
  font-size: 14px;
  line-height: 22px;
}

/* --- the lock card ------------------------------------------------------- */

.wm-pack-locked-aside {
  min-width: 0;
}

.wm-pack-locked-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
  border: 1px solid var(--wm-pack-hairline, rgba(188, 202, 192, 0.55));
  border-radius: var(--wm-pack-radius, 20px);
  background: var(--wm-pack-surface-face, linear-gradient(#ffffff, #fbfcfd));
  box-shadow: var(--wm-pack-card-shadow-deep, 0 6px 16px -6px rgba(21, 27, 42, 0.14));
}

.wm-pack-locked-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: rgba(0, 133, 93, 0.1);
  color: var(--wm-money-accent, #006948);
}

.wm-pack-locked-card-title {
  margin: 0;
  color: var(--wm-money-ink, #151b2a);
  font-size: 21px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: -0.02em;
}

.wm-pack-locked-card-body {
  margin: 0;
  color: var(--wm-money-copy, #3d4a42);
  font-size: 15px;
  line-height: 23px;
}

.wm-pack-locked-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--wm-pack-hairline-soft, rgba(188, 202, 192, 0.35));
  border-radius: var(--wm-pack-radius-sm, 14px);
  background: var(--wm-pack-card-head-face, linear-gradient(#fbfcfd, #f4f7f9));
}

.wm-pack-locked-price-amount {
  color: var(--wm-money-ink, #151b2a);
  font-size: 28px;
  font-weight: 800;
  line-height: 32px;
  letter-spacing: -0.02em;
}

.wm-pack-locked-price-terms {
  color: var(--wm-money-muted, #4f5f56);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.wm-pack-locked-state {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wm-pack-locked-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 9999px;
  background: var(--wm-pack-primary-face, linear-gradient(#0a8a64, #047857));
  box-shadow: var(--wm-pack-primary-shadow, 0 8px 18px -6px rgba(4, 120, 87, 0.55));
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.wm-pack-locked-cta:hover {
  background: var(--wm-pack-green, #047857);
}

.wm-pack-locked-cta:focus-visible {
  outline: 2px solid var(--wm-pack-green-deep, #065f46);
  outline-offset: 3px;
}

.wm-pack-locked-error {
  margin: 0;
  color: var(--wm-money-danger, #ba1a1a);
  font-size: 13px;
  line-height: 19px;
}

.wm-pack-locked-signin,
.wm-pack-locked-more,
.wm-pack-locked-owner-line {
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
  text-align: center;
}

.wm-pack-locked-signin a,
.wm-pack-locked-more a {
  color: var(--wm-money-accent, #006948);
  font-weight: 700;
}

.wm-pack-locked-signin a:focus-visible,
.wm-pack-locked-more a:focus-visible,
.wm-pack-locked-page .wm-scenario-page-back:focus-visible {
  outline: 2px solid var(--wm-pack-green-deep, #065f46);
  outline-offset: 2px;
}

/*
 * The owner mark. Never an "Owned" badge, and never beside a buy control —
 * there is nothing left to sell someone who already owns the pack (plan §2.5).
 */
.wm-pack-locked-state .wm-pack-unlocked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin: 0;
  color: var(--wm-pack-green-deep, #065f46);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

/* --- desktop ------------------------------------------------------------- */

@media (min-width: 900px) {
  .wm-pack-locked-page {
    padding: 56px 40px 80px;
  }

  .wm-pack-locked-inner {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 48px;
  }

  .wm-pack-locked-description {
    gap: 26px;
  }

  .wm-pack-locked-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .wm-pack-locked-aside {
    position: sticky;
    top: 96px;
  }
}

/* ========================================================================== */
/* app tier: /packs, /account purchases — D2                                  */
/* ========================================================================== */

.wm-packs-page-hero {
  padding: 32px 0 8px;
}

.wm-packs-page-hero h1 {
  margin: 0 0 8px;
}

.wm-packs-page-hero p {
  margin: 0;
  color: var(--wm-money-copy);
  max-width: 56ch;
}

.wm-packs-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0 32px;
}

/* .wm-pack-dashboard-tile itself is agent C's (cards region, above): this
 * page only lays out the grid it sits in. */

.wm-account-hero {
  padding: 32px 0 8px;
}

.wm-account-hero h1 {
  margin: 0;
}

.wm-account-purchases {
  padding: 20px 0 32px;
  max-width: 640px;
}

.wm-account-purchases h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.wm-account-purchases > p {
  margin: 0 0 20px;
  color: var(--wm-money-copy);
}

.wm-account-purchases-empty {
  padding: 24px;
  border-radius: var(--wm-pack-radius-sm, 14px);
  background: var(--wm-pack-mint-soft, #ecfdf5);
  border: 1px solid var(--wm-pack-mint-line, rgba(167, 243, 208, 0.9));
}

.wm-account-purchases-empty h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.wm-account-purchases-empty p {
  margin: 0 0 16px;
  color: var(--wm-money-copy);
}

.wm-account-purchases-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wm-pack-purchase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-radius: var(--wm-pack-radius-sm, 14px);
  background: var(--wm-pack-surface-face, linear-gradient(#ffffff, #fbfcfd));
  box-shadow: var(--wm-pack-card-shadow);
}

.wm-pack-purchase-row-name {
  margin: 0;
  font-weight: 700;
}

.wm-pack-purchase-row-date {
  margin: 4px 0 0;
  color: var(--wm-money-copy);
  font-size: 14px;
}

.wm-pack-purchase-row-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wm-pack-purchase-row-status-icon {
  display: inline-flex;
  color: var(--wm-pack-green);
}

/* pack-flow.js adds `is-refunded` to the row; the Unlocked icon only makes
 * sense next to the "Unlocked" status text, not "Refunded". */
.wm-pack-purchase-row.is-refunded .wm-pack-purchase-row-status-icon {
  display: none;
}

.wm-pack-purchase-row-ended {
  flex: 1 0 100%;
  margin: 0;
  color: var(--wm-money-copy);
  font-size: 14px;
}

@media (max-width: 480px) {
  .wm-pack-purchase-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ========================================================================== */
/* modals and return-from-Stripe states — F                                   */
/* ========================================================================== */

/*
 * `pack-flow.js` builds both modals in the saved-plan modal shell
 * (`createModalShell`), so the fixed positioning, backdrop, panel, close button
 * and focus trap all come from `lib/plans/styles.css` — the `packs` bundle
 * loads `plans` for exactly this reason. Everything here styles the body it
 * puts inside that panel, under `.wm-pack-modal`, plus the confirming
 * spinner. The panel is centred by `.wm-saved-plan-modal-panel` already; the
 * one thing that has to reach outside `.wm-pack-modal` is the padding, which
 * that shell leaves at 0 for its own children to set.
 */

.wm-saved-plan-modal.is-pack-modal .wm-saved-plan-modal-panel {
  width: min(560px, 100%);
}

.wm-pack-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 40px;
  text-align: center;
  color: var(--wm-money-ink, #151b2a);
}

.wm-pack-modal-glyph {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(0, 133, 93, 0.1);
  color: var(--wm-pack-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wm-pack-modal-glyph svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wm-pack-modal-glyph.is-confirmed svg {
  stroke-width: 2.5;
}

.wm-pack-modal-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wm-pack-modal-head h2 {
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 30px;
  letter-spacing: -0.02em;
}

.wm-pack-modal-head p {
  margin: 0;
  font-size: 15px;
  line-height: 23px;
  color: var(--wm-money-copy, #3d4a42);
}

/* The one price statement in the modal: name on the left, "$69 · one-time" on
 * the right, so the claim and its terms can never be read apart. */
.wm-pack-modal-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 13px 20px;
  border-radius: 999px;
  background: rgba(104, 219, 169, 0.2);
  color: #005137;
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
}

.wm-pack-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.wm-pack-modal-primary,
.wm-pack-modal-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}

.wm-pack-modal-primary {
  padding: 0 26px;
  border: 0;
  background: linear-gradient(var(--wm-pack-green-bright), var(--wm-pack-green));
  color: #ffffff;
  box-shadow: var(--wm-pack-primary-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.wm-pack-modal-primary[disabled],
.wm-pack-modal-primary[aria-busy='true'] {
  opacity: 0.7;
  cursor: progress;
}

.wm-pack-modal-secondary {
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--wm-money-copy, #3d4a42);
}

.wm-pack-modal-secondary:hover {
  color: var(--wm-pack-green-deep);
}

.wm-pack-modal-primary:focus-visible,
.wm-pack-modal-secondary:focus-visible {
  outline: 3px solid var(--wm-pack-green-bright);
  outline-offset: 2px;
}

/* role="alert", so it is only ever in the tree when a checkout actually failed. */
.wm-pack-modal-error {
  margin: 0;
  width: 100%;
  font-size: 13px;
  line-height: 19px;
  color: #ba1a1a;
}

.wm-pack-modal-footer {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--wm-money-muted, #6d7a72);
}

@media (max-width: 480px) {
  .wm-pack-modal {
    padding: 32px 24px;
    gap: 16px;
  }

  .wm-pack-modal-head h2 {
    font-size: 21px;
    line-height: 27px;
  }
}

/*
 * The confirming panel's spinner. Agent A owns the return-state panels
 * themselves; this is only the mark that says the page is still waiting on the
 * webhook. Reduced motion gets a static ring rather than a frozen arc, so the
 * icon still reads as "in progress".
 */
.wm-pack-confirming-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: wm-pack-spin 900ms linear infinite;
}

.wm-pack-confirming-spinner svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes wm-pack-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-pack-confirming-spinner {
    animation: none;
  }
}

/* account baseline (WMA-110) ================================================
 * The `/account` "Your retirement baseline" section, rendered by
 * `account-purchases.ts` right after Purchases and driven by
 * `account-baseline.js`. Four state blocks share one card treatment; only the
 * layout differs between the sentence-only states (loading/empty/error) and
 * the present state's saved-line-plus-actions row.
 * ========================================================================== */

.wm-account-baseline {
  padding: 20px 0 32px;
  max-width: 640px;
}

.wm-account-baseline h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.wm-account-baseline-block {
  padding: 20px 24px;
  border-radius: var(--wm-pack-radius-sm, 14px);
  background: var(--wm-pack-surface-face, linear-gradient(#ffffff, #fbfcfd));
  box-shadow: var(--wm-pack-card-shadow);
}

.wm-account-baseline-block p {
  margin: 0;
  color: var(--wm-money-copy);
}

.wm-account-baseline-loading p {
  color: var(--wm-money-muted, #6d7a72);
}

.wm-account-baseline-empty {
  background: var(--wm-pack-mint-soft, #ecfdf5);
  border: 1px solid var(--wm-pack-mint-line, rgba(167, 243, 208, 0.9));
  box-shadow: none;
}

.wm-account-baseline-empty p {
  margin: 0 0 12px;
}

/*
 * WMA-117 D1: this is a standalone call to action -- a sibling of the <p>,
 * not a link inside a sentence -- so 2.5.8's inline-link exception does not
 * cover it and it carries its own 24px target. Inline-block is what lets the
 * box obey `line-height` at all; an inline anchor measures its font's content
 * box (20px here) whatever the line around it does.
 */
.wm-account-baseline-empty a {
  display: inline-block;
  min-height: var(--wm-scenario-control-min, 24px);
  line-height: var(--wm-scenario-control-min, 24px);
  color: var(--wm-pack-green, #006948);
  font-weight: 700;
  text-decoration: none;
}

.wm-account-baseline-empty a:hover {
  text-decoration: underline;
}

.wm-account-baseline-empty a:focus-visible,
.wm-account-baseline-edit:focus-visible,
.wm-account-baseline-delete:focus-visible,
.wm-account-baseline-retry:focus-visible {
  outline: 2px solid var(--wm-pack-green-deep, #065f46);
  outline-offset: 2px;
}

.wm-account-baseline-saved-line {
  margin: 0 0 16px;
}

/* WMA-155 R5: the "what is stored" list — plain-word lines, no amounts. */
.wm-account-baseline-facts {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wm-account-baseline-facts:empty {
  display: none;
}

.wm-account-baseline-facts li {
  margin: 0;
  padding-left: 16px;
  position: relative;
  color: var(--wm-money-copy);
  font-size: 14px;
}

.wm-account-baseline-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wm-money-muted, #6d7a72);
}

/* WMA-155 R5: "N answers still needed on your next run" — count only. */
.wm-account-baseline-missing {
  margin: 0 0 16px !important;
  color: var(--wm-money-muted, #6d7a72);
  font-size: 13px;
}

.wm-account-baseline-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.wm-account-baseline-edit {
  color: var(--wm-pack-green, #006948);
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.wm-account-baseline-edit:hover {
  text-decoration: underline;
}

.wm-account-baseline-delete,
.wm-account-baseline-retry {
  border: none;
  background: none;
  padding: 0;
  min-height: 44px;
  color: var(--wm-money-danger, #ba1a1a);
  font-family: var(--wf-font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.wm-account-baseline-delete:hover,
.wm-account-baseline-retry:hover {
  text-decoration: underline;
}

.wm-account-baseline-delete-error {
  margin: 12px 0 0 !important;
  color: var(--wm-money-danger, #ba1a1a);
  font-size: 13px;
}

.wm-account-baseline-error {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.wm-account-baseline-error p {
  margin: 0 0 12px;
}