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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

a {
  color: inherit;
}

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

html {
  scroll-behavior: smooth;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .money-hero-logo {
    font-size: 38px;
  }

  .money-hero-heading {
    font-size: 44px;
    line-height: 0.98;
  }

  .money-hero-kicker {
    font-size: 1rem;
  }

  .money-hero-body {
    font-size: 18px;
    line-height: 28px;
  }

  .money-hero-actions {
    width: 100%;
    display: grid;
  }

  .money-hero-primary,
  .money-hero-secondary,
  .money-waitlist-cta {
    width: 100%;
    justify-content: center;
  }

  .money-hero-preview-card {
    padding: var(--wf-space-24);
  }

  .money-hero-preview-metrics {
    grid-template-columns: 1fr;
  }

  .money-hero-preview-bar-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .money-hero-preview-bar-label {
    min-width: 0;
  }

  .money-section,
  .money-alpha-teaser,
  .money-waitlist-section {
    padding-top: 48px;
  }

  .money-scenarios {
    padding: var(--wf-space-24);
    border-radius: var(--wm-card-radius);
  }

  .money-section-head {
    margin-bottom: 24px;
  }

  .money-scenarios .money-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .money-section-title {
    font-size: 28px;
    line-height: 32px;
  }

  .money-benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--wf-space-16);
  }

  .money-scenario-carousel-controls {
    width: 100%;
    justify-content: space-between;
  }

  .money-scenario-grid {
    gap: var(--wf-space-16);
  }

  .money-scenario-card.wf-surface {
    flex-basis: 100%;
    padding: var(--wf-space-24);
  }

  .money-scenario-question,
  .money-scenario-summary {
    min-height: 0;
  }

  .money-process-head {
    margin-bottom: 28px;
  }

  .money-process-track {
    grid-template-columns: 1fr;
    gap: var(--wf-space-16);
  }

  .money-process-line {
    display: none;
  }

  .money-process-step {
    grid-template-columns: 56px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    text-align: left;
    gap: var(--wf-space-16);
  }

  .money-process-step-index {
    width: 56px;
    height: 56px;
    font-size: 20px;
    line-height: 28px;
  }

  .money-benefit-visual {
    min-height: 192px;
    padding: 20px;
  }

  .money-alpha-teaser-card {
    padding: var(--wf-space-24);
  }

  .money-alpha-teaser-title {
    font-size: 24px;
    line-height: 30px;
  }

  .money-waitlist {
    padding: 32px 24px;
  }

  .money-waitlist-title {
    font-size: 30px;
  }

  .money-waitlist-form {
    display: grid;
  }

  .money-footer {
    margin-top: 40px;
  }

  .money-footer-inner {
    gap: 28px;
  }

  .money-footer-columns {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .scenario-library-page {
    gap: 64px;
    padding: 0 24px 80px;
  }

  .scenario-library-hero {
    padding-top: 40px;
    gap: 32px;
  }

  .scenario-library-hero h1 {
    font-size: 36px;
    line-height: 45px;
    letter-spacing: -0.025em;
  }

  .scenario-library-hero-body {
    font-size: 16px;
    line-height: 26px;
  }

  .scenario-library-hero-subtitle {
    font-size: 18px;
    line-height: 25px;
  }

  .scenario-library-hero-emphasis {
    font-size: 18px;
    line-height: 25px;
  }

  .scenario-library-available {
    display: grid;
    gap: 8px;
    /* D2 type floor. */
    font-size: var(--wm-scenario-text-xs-size, 12px);
    line-height: var(--wm-scenario-text-xs-line, 17px);
  }

  .scenario-library-available strong {
    /* D2 type floor. */
    font-size: var(--wm-scenario-text-xs-size, 12px);
    line-height: var(--wm-scenario-text-xs-line, 17px);
  }

  .scenario-library-hero-actions {
    display: grid;
  }

  .scenario-library-button {
    width: 100%;
    min-height: 56px;
    padding-inline: 20px;
    font-size: 16px;
    line-height: 24px;
  }

  .scenario-library-preview::before {
    inset: -15px;
  }

  .scenario-library-preview-card {
    padding: 25px;
    border-radius: 48px;
  }

  .scenario-library-pill {
    padding: 2px 8px;
    /* D2 type floor. */
    font-size: var(--wm-scenario-text-xs-size, 12px);
    line-height: var(--wm-scenario-text-xs-line, 17px);
  }

  .scenario-library-preview h2 {
    font-size: 20px;
    line-height: 25px;
  }

  .scenario-library-preview-icon {
    width: 28px;
    height: 20px;
  }

  .scenario-library-preview-metrics {
    gap: 12px;
  }

  .scenario-library-preview-metrics div {
    padding: 12px;
  }

  .scenario-library-preview-metrics span {
    /* D2 type floor. */
    font-size: var(--wm-scenario-text-xs-size, 12px);
    line-height: var(--wm-scenario-text-xs-line, 17px);
  }

  .scenario-library-preview-metrics strong {
    font-size: 14px;
    line-height: 20px;
  }

  .scenario-library-preview-note {
    padding: 16px 20px;
    font-size: 12px;
    line-height: 20px;
  }

  .scenario-library-preview-link {
    font-size: 12px;
    line-height: 16px;
  }

  .scenario-library-chooser h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .scenario-library-chooser p {
    font-size: 14px;
    line-height: 20px;
  }

  .scenario-library-chip-row {
    margin-inline: -24px;
    padding: 0 24px 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .scenario-library-chip-row::-webkit-scrollbar {
    display: none;
  }

  .scenario-library-chip {
    min-height: 40px;
    padding-inline: 20px;
    font-size: 14px;
    line-height: 20px;
  }

  .scenario-library-section-head {
    gap: 11px;
    margin-bottom: 40px;
  }

  .scenario-library-section-head h2,
  .scenario-library-process h2 {
    font-size: 30px;
    line-height: 36px;
  }

  .scenario-library-section-head p {
    font-size: 14px;
    line-height: 23px;
  }

  .scenario-library-live-grid,
  .scenario-library-soon-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .scenario-library-card {
    min-height: 0;
    padding: 25px;
    gap: 20px;
  }

  .scenario-library-card h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .scenario-library-card-question {
    font-size: 18px;
    line-height: 24px;
  }

  .scenario-library-card-summary {
    font-size: 14px;
    line-height: 23px;
  }

  .scenario-library-answer-block {
    gap: 16px;
  }

  .scenario-library-answer-block li {
    font-size: 12px;
    line-height: 16px;
  }

  .money-scenario-example-quote,
  .scenario-library-example strong {
    font-size: 14px;
    line-height: 20px;
  }

  .scenario-library-card-cta {
    min-height: 60px;
  }

  .scenario-library-soon-card {
    padding: 25px;
  }

  .scenario-library-process {
    margin-inline: -24px;
    padding: 64px 24px;
    gap: 48px;
  }

  .scenario-library-process-head p {
    font-size: 14px;
    line-height: 20px;
  }

  .scenario-library-step-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .scenario-library-step-grid::before {
    display: none;
  }

  .scenario-library-step {
    gap: 16px;
  }

  .scenario-library-step span {
    width: 48px;
    height: 48px;
    font-size: 20px;
    line-height: 28px;
  }

  .scenario-library-step h3 {
    margin: 0;
    font-size: 18px;
    line-height: 28px;
  }

  .scenario-library-step p {
    font-size: 14px;
    line-height: 20px;
  }

  .scenario-library-bottom-cta {
    padding: 32px;
    display: grid;
    gap: 24px;
    border-radius: 48px;
    text-align: center;
  }

  .scenario-library-bottom-cta h2 {
    font-size: 24px;
    line-height: 30px;
  }

  /* Same scoping as the base rule: only the CTA description shrinks, not the
     preview card's own paragraphs. */
  .scenario-library-bottom-cta > div:first-child > p {
    font-size: 14px;
    line-height: 23px;
  }

  .scenario-library-bottom-actions {
    display: grid;
    gap: 16px;
  }

  .scenario-library-bottom-preview {
    width: 100%;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .money-footer-columns {
    grid-template-columns: 1fr;
  }
}

/* Smallest phones: shrink the wordmark and the auth actions rather than
   dropping one of them, so "Create account" survives all the way down to
   320px. Between them they leave header row 1 enough slack that the brand and
   both actions still share it at 360px and up. */
@media (max-width: 480px) {
  .money-brand-logo {
    font-size: 20px;
  }

  .money-nav-actions {
    gap: 6px;
  }

  .money-nav-secondary.wf-button {
    font-size: 13px;
  }

  .money-nav-primary {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 13px;
  }
}

@media (max-width: 1100px) {
  .money-app-topbar-desktop {
    padding-inline: 24px;
    gap: 20px;
  }

  .money-app-nav-links {
    gap: 18px;
  }

  .money-app-dashboard {
    padding-inline: 24px;
  }

  .money-app-hero {
    padding: 48px;
  }

  .money-app-hero h1 {
    font-size: 48px;
    line-height: 52px;
  }

  .money-app-coming-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .money-app-scenario-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 820px) {
  .money-route-app {
    padding-bottom: calc(94px + env(safe-area-inset-bottom));
  }

  .money-route-scenario:has([data-auth-app-chrome]:not([hidden])),
  .money-route-scenario-library:has([data-auth-app-chrome]:not([hidden])) {
    padding-bottom: calc(94px + env(safe-area-inset-bottom));
  }

  .money-app-topbar {
    backdrop-filter: none;
  }

  .money-app-topbar-desktop {
    display: none;
  }

  .money-app-topbar-mobile {
    min-height: 72px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #f9f9ff;
  }

  .money-app-mobile-brand {
    display: inline-flex;
    align-items: center;
    color: var(--wm-money-accent);
    font-family: var(--wf-font-heading);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.05em;
    text-decoration: none;
  }

  .money-app-avatar {
    width: 40px;
    height: 40px;
    border-width: 2px;
    border-color: #68dba9;
    background: #dce2f6;
  }

  .money-app-avatar svg {
    width: 36px;
    height: 36px;
  }

  /*
   * The bottom tab bar (.money-app-bottom-nav) handles all navigation on mobile.
   * The in-topbar horizontal tab row is redundant here and overflowed/clipped at
   * narrow widths (e.g. 375px), so it stays hidden on small breakpoints.
   */
  .money-app-mobile-tabs {
    display: none;
  }

  .money-app-dashboard {
    padding: 32px 16px 48px;
    gap: 32px;
  }

  .money-app-hero {
    min-height: auto;
    padding: 32px 24px;
    display: grid;
    gap: 28px;
    border-radius: 24px;
  }

  .money-app-hero-copy {
    max-width: none;
  }

  .money-app-hero h1 {
    font-size: 38px;
    line-height: 42px;
  }

  .money-app-hero p {
    max-width: none;
    font-size: 16px;
    line-height: 26px;
  }

  .money-app-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .money-app-primary-link,
  .money-app-secondary-link {
    width: 100%;
    justify-content: center;
  }

  .money-app-hero-preview {
    width: 100%;
    max-width: 416px;
    height: 216px;
    margin: 0 auto;
  }

  .money-app-preview-card {
    min-height: 56px;
    padding: 16px;
    border-radius: 18px;
  }

  .money-app-preview-card.is-top {
    top: 0;
    right: 0;
    transform: none;
  }

  .money-app-preview-card.is-main {
    top: 76px;
    left: 0;
  }

  .money-app-preview-card.is-bottom {
    right: 0;
    bottom: 0;
    transform: none;
  }

  .money-app-preview-card h2,
  .money-app-preview-card.is-main h2 {
    font-size: 16px;
    line-height: 22px;
  }

  .money-app-preview-card p,
  .money-app-preview-card.is-main p {
    /* D2 type floor. Covers .is-top/.is-bottom too: they only override
       colour, not size. */
    font-size: var(--wm-scenario-text-xs-size, 12px);
    line-height: var(--wm-scenario-text-xs-line, 17px);
  }

  .money-app-alpha-card {
    padding: 25px;
    display: grid;
    gap: 16px;
    border-radius: 24px;
  }

  .money-app-alpha-copy {
    display: grid;
    gap: 16px;
  }

  .money-app-alpha-icon {
    display: none;
  }

  .money-app-section {
    gap: 24px;
  }

  .money-app-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .money-app-section h2,
  .money-app-compare-card h2,
  .money-app-coming-soon-panel h1 {
    font-size: 28px;
    line-height: 32px;
  }

  .money-app-coming-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .money-app-scenario-section-actions {
    width: 100%;
    justify-items: start;
  }

  .money-app-scenario-carousel-controls {
    width: 100%;
    justify-content: space-between;
  }

  .money-app-scenario-grid {
    gap: 16px;
  }

  .money-app-scenario-card {
    grid-template-rows: none;
    flex-basis: 100%;
    min-height: 234px;
    padding: 25px;
    border-radius: 24px;
  }

  .money-app-scenario-icon {
    display: none;
  }

  .money-app-coming-card {
    grid-template-rows: none;
    min-height: 0;
    border-radius: 24px;
  }

  .money-app-compare-card {
    min-height: 244px;
    padding: 32px;
    display: grid;
    border-radius: 24px;
  }

  .money-app-compare-button {
    width: 100%;
    min-width: 0;
  }

  .money-app-coming-soon-panel {
    padding: 32px 24px;
    border-radius: 24px;
  }

  .money-app-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    /* One column per rendered tab: five today, six with the flag-on Packs
     * entry (WMA-122). Sized by count rather than a fixed repeat so neither
     * state leaves an empty track or overflows. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(188, 202, 192, 0.15);
    border-radius: 32px 32px 0 0;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 -4px 20px rgba(21, 27, 42, 0.04);
    backdrop-filter: blur(12px);
  }

  .money-app-bottom-nav .money-app-account-menu,
  .money-app-bottom-nav .money-app-account-trigger {
    min-width: 0;
    width: 100%;
  }

  .money-app-bottom-nav .money-app-account-popover {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    z-index: 80;
  }

  .money-app-bottom-link {
    min-width: 0;
    min-height: 48px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    border-radius: var(--wf-radius-pill);
    /* Labels on the 88%-white bar over #f9f9ff (~#fefeff): #94a3b8 was
       2.54:1; slate-500 is 4.72:1. 12px is the platform's minimum text size —
       the 11px labels were the only text in the chrome under it. */
    color: #64748b;
    font-family: var(--wf-font-heading);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    text-decoration: none;
  }

  .money-app-bottom-link.is-active {
    color: #064e3b;
    background: #d1fae5;
  }

  .money-app-bottom-icon,
  .money-app-bottom-icon svg {
    width: 20px;
    height: 20px;
  }

  .money-app-bottom-icon {
    display: inline-flex;
  }
}

@media (max-width: 480px) {
  .money-app-topbar-mobile {
    padding-inline: 20px;
  }

  .money-app-dashboard {
    padding-inline: 16px;
  }

  .money-app-hero {
    padding-inline: 20px;
  }

  .money-app-hero h1 {
    font-size: 34px;
    line-height: 38px;
  }

  .money-app-bottom-nav {
    /* Six tabs (the flag-on Packs entry) at 390px: 8px insets and 4px gaps
       left 59px columns, and "Scenarios" at the 12px floor is 60px on macOS
       and 66px on the Linux fallback face (the webfonts never load, so the
       label renders in whatever the platform has). No gap (only the active
       tab paints a pill, so nothing touches) and 4px insets make each column
       63.7px; five tabs get 76px. */
    gap: 0;
    padding-inline: 4px;
  }

  .money-app-bottom-link > span:last-child {
    /* The other half of fitting six labels: -0.04em at 12px is half a pixel
       per glyph — invisible — and brings a 66px "Scenarios" under 62px, so the
       bar holds on the widest fallback font CI or a phone can hand it. */
    letter-spacing: -0.04em;
  }
}

.debt-scenario-route .debt-scenario-top-nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1440px;
  min-height: 84px;
  padding: 24px 56px;
}

.debt-scenario-route .debt-scenario-top-nav .money-brand,
.debt-scenario-route .debt-scenario-top-nav .money-brand-link {
  grid-column: 1;
  grid-row: 1;
}

.debt-scenario-route .debt-scenario-primary-nav {
  grid-column: 2;
  grid-row: 1;
}

.debt-scenario-route .debt-scenario-nav-icons {
  grid-column: 3;
  grid-row: 1;
}

.debt-scenario-route .debt-scenario-glance-input.wf-input-shell {
  display: inline-flex;
  width: fit-content;
}

.debt-scenario-route .debt-scenario-glance-input .wf-input {
  width: 7ch;
}

.debt-scenario-route .debt-scenario-glance-input.is-percent .wf-input {
  width: 4ch;
}

.debt-scenario-route .debt-scenario-main,
.debt-scenario-route .debt-scenario-hero,
.debt-scenario-route .debt-scenario-at-glance,
.debt-scenario-route .debt-scenario-section,
.debt-scenario-route .debt-scenario-section-heading,
.debt-scenario-route .debt-scenario-section-grid,
.debt-scenario-route .debt-scenario-option-card,
.debt-scenario-route .debt-scenario-progress,
.debt-scenario-route .debt-scenario-chart-card {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1120px) {
  .debt-scenario-route .debt-scenario-top-nav-inner {
    grid-template-columns: 1fr auto;
    min-height: 72px;
    padding: 20px 24px;
  }

  .debt-scenario-route .debt-scenario-primary-nav {
    display: none;
  }

  .debt-scenario-route .debt-scenario-nav-icons {
    grid-column: 2;
  }

  .debt-scenario-route .debt-scenario-main {
    width: 100%;
    overflow-x: hidden;
  }

  .debt-scenario-route .debt-scenario-glance-shell,
  .debt-scenario-route .debt-scenario-section-grid,
  .debt-scenario-route .debt-scenario-option-card.wf-surface {
    width: 100%;
    min-width: 0;
  }
}

/* Debt vs Savings guided scenario refresh */
.debt-scenario-route {
  --debt-bg: #f9f9ff;
  --debt-surface: #f1f3ff;
  --debt-surface-strong: #dce2f6;
  --debt-card: #fff;
  --debt-ink: #151b2a;
  --debt-copy: #3d4a42;
  --debt-muted: #6f7b74;
  --debt-green: #006948;
  --debt-green-strong: #005137;
  --debt-green-bright: #68dba9;
  --debt-green-tint: rgba(0, 105, 72, 0.1);
  --debt-line: rgba(188, 202, 192, 0.3);
  --debt-line-soft: rgba(188, 202, 192, 0.14);
  --debt-rose: #b42318;
  --debt-amber: #b45309;
  --debt-amber-strong: #92400e;
  background: var(--debt-bg);
  color: var(--debt-ink);
}

.debt-scenario-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.debt-scenario-route .debt-scenario-page {
  max-width: none;
  min-height: auto;
  margin: 0;
  padding: 0;
  background: var(--debt-bg);
}

.debt-scenario-route .debt-scenario-main {
  display: grid;
  gap: 48px;
  width: min(1280px, 100%);
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 56px 96px;
  overflow-x: clip;
}

.debt-scenario-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 32px;
}

.debt-scenario-header > div {
  display: grid;
  gap: 16px;
  max-width: 672px;
}

.debt-scenario-eyebrow {
  margin: 0;
  color: var(--debt-green);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-route .debt-scenario-title {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 48px;
  font-weight: 800;
  line-height: 60px;
  letter-spacing: 0;
}

.debt-scenario-subtitle {
  margin: 0;
  color: var(--debt-copy);
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.debt-scenario-education-note {
  flex: 0 0 auto;
  margin: 0;
  padding: 13px 25px;
  border: 1px solid var(--debt-line);
  border-radius: var(--wf-radius-pill);
  background: var(--debt-surface);
  color: var(--debt-copy);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.debt-scenario-setup-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: center;
  padding: 32px;
  border: 1px solid rgba(188, 202, 192, 0.1);
  border-radius: 32px;
  background: var(--debt-surface);
}

.debt-scenario-setup-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  min-width: 0;
}

.debt-scenario-setup-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.debt-scenario-setup-item span,
.debt-scenario-editor-field span,
.debt-scenario-path-metrics dt,
.debt-scenario-split-results dt,
.debt-scenario-allocation-card span {
  color: var(--debt-copy);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-setup-item strong {
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
}

.debt-scenario-editor {
  justify-self: end;
}

.debt-scenario-editor[open] {
  display: grid;
  grid-column: 1 / -1;
  justify-self: stretch;
  gap: 20px;
}

.debt-scenario-editor summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 32px;
  border-radius: var(--wf-radius-pill);
  background: var(--debt-surface-strong);
  color: var(--debt-green);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  list-style: none;
}

.debt-scenario-editor summary::-webkit-details-marker {
  display: none;
}

.debt-scenario-editor summary:focus-visible,
.debt-scenario-path-action:focus-visible,
.debt-scenario-mobile-tab:focus-visible,
.debt-scenario-tune-button:focus-visible,
.debt-scenario-split-slider input:focus-visible,
.debt-scenario-final-action a:focus-visible,
.debt-scenario-final-action button:focus-visible {
  outline: 3px solid var(--wf-color-focus-ring);
  outline-offset: 3px;
}

.debt-scenario-editor[open] summary {
  justify-self: end;
}

.debt-scenario-editor-panel {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  padding-top: 8px;
}

.debt-scenario-editor-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.debt-scenario-route .debt-scenario-editor-input.wf-input-shell {
  min-height: 44px;
  padding: 0 12px;
  border-color: var(--debt-line);
  background: #fff;
}

.debt-scenario-route .debt-scenario-editor-input .wf-input {
  width: 100%;
  min-width: 0;
  padding: 9px 0;
  font-family: var(--wf-font-mono);
  font-size: 16px;
  font-weight: 700;
}

.debt-scenario-route .debt-scenario-editor-input.is-percent .wf-input {
  width: 100%;
}

.debt-scenario-editor-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.debt-scenario-run-row {
  display: grid;
  align-self: end;
  min-width: 184px;
}

.debt-scenario-run-button.wf-button {
  width: 100%;
  min-height: 52px;
  padding: 12px 24px;
  border-color: var(--wm-money-accent);
  background: var(--wm-money-accent);
  color: var(--wf-color-text-inverse);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  box-shadow: var(--wm-money-accent-shadow-soft);
}

.debt-scenario-run-button.wf-button[disabled] {
  cursor: not-allowed;
  opacity: 0.56;
  box-shadow: none;
}

.debt-scenario-tradeoff-hero {
  position: relative;
  overflow: hidden;
  padding: 48px;
  border-radius: 32px;
  background: radial-gradient(circle at right top, rgba(104, 219, 169, 0.2), transparent 34%), var(--debt-green);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.debt-scenario-tradeoff-copy {
  display: grid;
  gap: 16px;
  max-width: 768px;
}

.debt-scenario-tradeoff-title {
  margin: 0;
  color: #fff;
  font-family: var(--wf-font-heading);
  font-size: 36px;
  font-weight: 800;
  line-height: 45px;
}

.debt-scenario-tradeoff-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 28px;
}

.debt-scenario-tradeoff-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
}

.debt-scenario-tradeoff-chips span {
  padding: 9px 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--wf-radius-pill);
  background: #00855d;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.debt-scenario-tradeoff-chips span.is-active {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.16);
}

.debt-scenario-strategy-selector,
.debt-scenario-key-tradeoffs,
.debt-scenario-timeline {
  display: grid;
  gap: 40px;
}

.debt-scenario-section-heading {
  display: grid;
  gap: 8px;
}

.debt-scenario-section-heading h2,
.debt-scenario-key-tradeoffs h2,
.debt-scenario-timeline h2 {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 30px;
  font-weight: 800;
  line-height: 36px;
  letter-spacing: 0;
}

.debt-scenario-section-heading p {
  margin: 0;
  color: var(--debt-copy);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

.debt-scenario-mobile-tabs {
  display: none;
}

.debt-scenario-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.debt-scenario-path-card.wf-surface {
  position: relative;
  display: grid;
  gap: 24px;
  align-content: start;
  min-height: 440px;
  padding: 32px;
  border: 1px solid var(--debt-line);
  border-radius: 32px;
  background: #fff;
  box-shadow: none;
}

.debt-scenario-path-card.is-selected.wf-surface {
  border: 2px solid var(--debt-green);
  box-shadow: 0 12px 30px rgba(0, 105, 72, 0.12);
}

.debt-scenario-path-card.is-balance-path.wf-surface {
  gap: 20px;
}

.debt-scenario-path-head,
.debt-scenario-mobile-path-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.debt-scenario-path-head h3,
.debt-scenario-mobile-path-head h3 {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 32px;
}

.debt-scenario-path-kicker {
  margin: 0 0 4px;
  color: var(--debt-green);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-path-badge,
.debt-scenario-viewing-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 25px;
  padding: 4px 12px;
  border-radius: var(--wf-radius-pill);
  background: #e9edff;
  color: var(--debt-copy);
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.debt-scenario-viewing-pill {
  background: var(--debt-green);
  color: #fff;
}

.debt-scenario-path-description,
.debt-scenario-mobile-path-card > p {
  margin: 0;
  color: var(--debt-copy);
  font-size: 18px;
  font-weight: 500;
  line-height: 29px;
}

.debt-scenario-path-metrics {
  display: grid;
  gap: 16px;
  margin: 0;
}

.debt-scenario-path-metrics div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--debt-line-soft);
}

.debt-scenario-path-metrics dd {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  text-align: right;
}

.debt-scenario-path-metrics div.is-warning dd {
  color: var(--debt-amber);
}

.debt-scenario-path-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: auto;
  padding: 14px 24px;
  border: 1px solid var(--debt-line);
  border-radius: var(--wf-radius-pill);
  color: var(--debt-green);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  text-decoration: none;
}

span.debt-scenario-path-action {
  cursor: default;
}

.debt-scenario-path-card.is-selected .debt-scenario-path-action {
  border-color: var(--debt-green);
  background: var(--debt-green);
  color: #fff;
}

.debt-scenario-card-split-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(0, 105, 72, 0.14);
  border-radius: 24px;
  background: var(--debt-green-tint);
}

.debt-scenario-card-split-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.debt-scenario-card-split-grid div,
.debt-scenario-card-split-results div {
  display: grid;
  gap: 4px;
}

/*
 * KNOWN CROWDING, NOT YET FIXED — needs a design call (WMA-117 Lane K, 8 Sep 2026).
 *
 * These labels came up from 10px to D2's floor, which is not optional. The
 * container was sized for 10px and cannot hold them: measured on the path
 * card's Breakdown panel, the grid is 250px wide and lays out three 75px
 * columns with a 12px gap, while "TOWARD EMERGENCY SAVINGS" and "EMERGENCY
 * SAVINGS GOAL REACHED" both render 86px wide. The 11px of overflow eats the
 * gap, so "EMERGENCY" and the next column's "DEBT-FREE" now touch.
 *
 * It is NOT fixable by shrinking the type — that is the violation this rule
 * just stopped committing. Every remaining option changes the card's design:
 * fewer columns (`repeat(auto-fit, minmax(78px, 1fr))` falls to two here),
 * a wider card, or shorter label text. Letter-spacing alone does not close
 * it — "EMERGENCY" is ~77px at 12px bold with no tracking at all, against a
 * 75px column, and a fit that tight would not survive the fallback font
 * (see docs: the webfonts named in tokens.css are never actually delivered,
 * so these layouts render in SF Pro locally and something wider on Linux).
 *
 * Left crowded and reported rather than redesigned here, which is the same
 * call Lane C made on the line-heights it refused to re-point.
 */
.debt-scenario-card-split-grid span,
.debt-scenario-card-split-results dt {
  color: var(--debt-copy);
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 800;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-card-split-grid strong,
.debt-scenario-card-split-results dd {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
}

.debt-scenario-card-split-panel .debt-scenario-split-slider {
  margin: 2px 6px 0;
}

.debt-scenario-split-value {
  margin: -4px 0 0;
  color: var(--debt-green);
  font-family: var(--wf-font-mono);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

.debt-scenario-card-split-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding-top: 4px;
}

.debt-scenario-insight-card {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: center;
  padding: 32px;
  border: 1px solid rgba(0, 105, 72, 0.16);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 105, 72, 0.08);
}

.debt-scenario-insight-card h2 {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 32px;
}

.debt-scenario-insight-card p {
  margin: 0;
  color: var(--debt-copy);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

.debt-scenario-insight-eyebrow {
  margin: 0 0 6px;
  color: var(--debt-green);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-tradeoff-list {
  display: grid;
  gap: 16px;
}

.debt-scenario-tradeoff-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) repeat(3, minmax(92px, 0.45fr)) minmax(220px, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 118px;
  padding: 32px;
  border: 1px solid var(--debt-line-soft);
  border-radius: 28px;
  background: #fff;
}

.debt-scenario-tradeoff-row.is-selected {
  border-color: rgba(0, 105, 72, 0.36);
  background: var(--debt-green-tint);
  box-shadow: 0 8px 18px rgba(0, 105, 72, 0.08);
}

.debt-scenario-tradeoff-row h3,
.debt-scenario-split-results h3,
.debt-scenario-plan-summary h2 {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 32px;
}

.debt-scenario-tradeoff-eyebrow {
  margin: 0 0 4px;
  color: var(--debt-green);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-tradeoff-row p,
.debt-scenario-tradeoff-stat span {
  margin: 0;
  color: var(--debt-copy);
  font-size: 16px;
  line-height: 24px;
}

.debt-scenario-tradeoff-stat {
  display: grid;
  gap: 4px;
}

.debt-scenario-tradeoff-stat span {
  font-size: var(--wm-scenario-text-min-size);
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-tradeoff-stat strong {
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}

.debt-scenario-tradeoff-stat.is-warning strong {
  color: var(--debt-amber-strong);
}

.debt-scenario-tradeoff-quote {
  font-style: italic;
}

.debt-scenario-split-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 64px;
  align-items: stretch;
}

.debt-scenario-split-panel {
  display: grid;
  gap: 28px;
  align-content: start;
}

.debt-scenario-tune-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.debt-scenario-tune-button {
  display: grid;
  gap: 2px;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: var(--wf-radius-pill);
  background: var(--debt-surface);
  color: var(--debt-copy);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  text-decoration: none;
}


.debt-scenario-tune-button.is-active {
  background: var(--debt-green);
  color: #fff;
}

.debt-scenario-allocation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.debt-scenario-allocation-card {
  display: grid;
  gap: 8px;
  padding: 28px 32px;
  border: 1px solid var(--debt-line-soft);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.debt-scenario-allocation-card p {
  margin: 0;
  color: var(--debt-copy);
  font-size: 14px;
  line-height: 20px;
}

.debt-scenario-allocation-card strong {
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 30px;
  line-height: 40px;
}

.debt-scenario-split-slider {
  position: relative;
  display: block;
  height: 32px;
  margin: 4px 8px 0;
}

.debt-scenario-split-slider input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 32px;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.debt-scenario-split-track,
.debt-scenario-split-fill {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 8px;
  border-radius: var(--wf-radius-pill);
  transform: translateY(-50%);
}

.debt-scenario-split-track {
  background: var(--debt-surface-strong);
}

.debt-scenario-split-fill {
  left: 0;
  width: var(--split-position);
  background: var(--debt-green-bright);
}

.debt-scenario-split-thumb {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--split-position);
  width: 28px;
  height: 28px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--debt-green);
  box-shadow: 0 4px 12px rgba(0, 105, 72, 0.2);
  transform: translate(-50%, -50%);
}


.debt-scenario-split-note {
  display: block;
  margin: 0;
  padding: 18px 22px;
  border: 1px solid rgba(0, 105, 72, 0.16);
  border-radius: 18px;
  background: var(--debt-green-tint);
  color: var(--debt-copy);
  font-size: 14px;
  line-height: 22px;
}

.debt-scenario-split-results {
  display: grid;
  gap: 28px;
  align-content: start;
  padding: 48px;
  border: 1px solid var(--debt-line-soft);
  border-radius: 32px;
  background: rgba(220, 226, 246, 0.5);
}

.debt-scenario-split-results dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}

.debt-scenario-split-results dl div {
  display: grid;
  gap: 8px;
  align-content: start;
}

.debt-scenario-split-results dt {
  color: var(--debt-copy);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debt-scenario-split-results dd {
  margin: 0;
  color: var(--debt-ink);
  font-family: var(--wf-font-mono);
  font-size: 24px;
  font-weight: 800;
  line-height: 32px;
}

.debt-scenario-split-results p {
  margin: 12px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--debt-line-soft);
  color: var(--debt-copy);
  font-size: 14px;
  font-style: italic;
  line-height: 23px;
  text-align: left;
}

.debt-scenario-timeline {
  padding: 48px 0 80px;
}

.debt-scenario-timeline-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--timeline-count, 4), minmax(0, 1fr));
  gap: 48px;
  margin: 0;
  padding: 0 16px;
  list-style: none;
}

.debt-scenario-timeline-list::before {
  content: "";
  position: absolute;
  top: 53px;
  right: 32px;
  left: 32px;
  height: 6px;
  border-radius: var(--wf-radius-pill);
  background: var(--debt-surface-strong);
}

.debt-scenario-timeline-list li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 32px;
  text-align: center;
}

.debt-scenario-timeline-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--debt-green);
  color: #fff;
  font-family: var(--wf-font-mono);
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.debt-scenario-timeline-list li:first-child .debt-scenario-timeline-dot {
  border: 4px solid var(--debt-green-bright);
  background: #fff;
  color: var(--debt-green);
}

.debt-scenario-timeline-list li:nth-child(2) .debt-scenario-timeline-dot {
  background: var(--debt-green-bright);
  color: var(--debt-green-strong);
}

.debt-scenario-timeline-list li:last-child .debt-scenario-timeline-dot {
  background: var(--debt-green-strong);
}

.debt-scenario-timeline-list div {
  display: grid;
  gap: 12px;
}

.debt-scenario-timeline-marker {
  margin: 0;
  color: var(--debt-green);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.debt-scenario-timeline-list h3 {
  margin: 0;
  color: var(--debt-ink);
  font-size: 24px;
  font-weight: 800;
  line-height: 32px;
}

.debt-scenario-timeline-list p:not(.debt-scenario-timeline-marker) {
  margin: 0;
  color: var(--debt-copy);
  font-family: var(--wf-font-mono);
  font-size: 16px;
  line-height: 26px;
}

.debt-scenario-plan-summary {
  display: grid;
  gap: 24px;
  padding: 40px;
  border: 2px solid rgba(0, 105, 72, 0.2);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.debt-scenario-plan-summary p {
  margin: 0;
  color: var(--debt-ink);
  font-size: 20px;
  line-height: 32px;
}

.debt-scenario-plan-summary .debt-scenario-plan-comparison {
  padding-top: 24px;
  border-top: 1px solid var(--debt-line-soft);
  color: var(--debt-copy);
  font-size: 18px;
  font-style: italic;
  line-height: 29px;
}

.debt-scenario-final-action {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}

.debt-scenario-final-action a,
.debt-scenario-final-action button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 28px;
  border: 1.5px solid var(--debt-green);
  border-radius: var(--wf-radius-pill);
  color: var(--debt-green);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.debt-scenario-final-action button {
  border-color: var(--debt-green);
  background: var(--debt-green);
  color: #fff;
  cursor: pointer;
}

.debt-scenario-final-action a:hover {
  background: var(--debt-green);
  color: #fff;
}

.debt-scenario-copy-status {
  flex-basis: 100%;
  min-height: 20px;
  margin: 0;
  color: var(--debt-copy);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

@media (max-width: 1120px) {
  .debt-scenario-route .debt-scenario-main {
    width: min(760px, 100%);
    padding: 40px 24px 72px;
    gap: 40px;
    overflow-x: clip;
  }

  .debt-scenario-header {
    display: grid;
    gap: 16px;
  }

  .debt-scenario-education-note {
    width: fit-content;
  }

  .debt-scenario-setup-card,
  .debt-scenario-split-section {
    grid-template-columns: 1fr;
  }

  .debt-scenario-setup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debt-scenario-editor,
  .debt-scenario-editor[open] summary {
    justify-self: stretch;
  }

  .debt-scenario-editor summary {
    width: 100%;
  }

  .debt-scenario-editor-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debt-scenario-run-row {
    justify-content: stretch;
  }

  .debt-scenario-run-row .wf-button {
    width: 100%;
  }

  .debt-scenario-path-grid {
    gap: 20px;
  }

  .debt-scenario-path-card.wf-surface {
    padding: 24px;
  }

  .debt-scenario-tradeoff-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 720px) {
  .debt-scenario-route .debt-scenario-main {
    padding: 32px 24px 56px;
  }

  .debt-scenario-route .debt-scenario-title {
    font-size: 36px;
    line-height: 40px;
  }

  .debt-scenario-subtitle {
    font-size: 18px;
    line-height: 29px;
  }

  .debt-scenario-education-note {
    width: 100%;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .debt-scenario-setup-card {
    padding: 24px;
  }

  .debt-scenario-setup-grid {
    gap: 24px 16px;
  }

  .debt-scenario-setup-item span {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
  }

  .debt-scenario-setup-item strong {
    font-size: 18px;
    line-height: 28px;
  }

  .debt-scenario-editor-panel {
    grid-template-columns: 1fr;
  }

  .debt-scenario-tradeoff-hero {
    min-height: 0;
    padding: 32px;
  }

  .debt-scenario-tradeoff-title {
    font-family: var(--wf-font-body);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
  }

  .debt-scenario-tradeoff-subtitle {
    color: rgba(133, 248, 196, 0.85);
    font-size: 14px;
    line-height: 20px;
  }

  .debt-scenario-tradeoff-chips span {
    padding: 6px 16px;
    font-size: 12px;
    line-height: 16px;
  }

  .debt-scenario-section-heading h2,
  .debt-scenario-key-tradeoffs h2,
  .debt-scenario-timeline h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .debt-scenario-section-heading p {
    font-size: 14px;
    line-height: 22px;
  }

  .debt-scenario-path-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .debt-scenario-path-card.wf-surface {
    order: var(--mobile-order);
    min-height: 0;
    padding: 24px;
    border-radius: 28px;
  }

  .debt-scenario-path-head {
    align-items: start;
    gap: 12px;
  }

  .debt-scenario-path-head h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .debt-scenario-path-description {
    font-size: 14px;
    line-height: 22px;
  }

  .debt-scenario-card-split-panel {
    padding: 18px;
    border-radius: 22px;
  }

  .debt-scenario-card-split-grid,
  .debt-scenario-card-split-results {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .debt-scenario-card-split-grid div,
  .debt-scenario-card-split-results div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .debt-scenario-split-value {
    text-align: left;
  }

  .debt-scenario-insight-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px;
    border-radius: 24px;
  }

  .debt-scenario-insight-card h2 {
    font-size: 20px;
    line-height: 28px;
  }

  .debt-scenario-insight-card p {
    font-size: 14px;
    line-height: 22px;
  }

  .debt-scenario-path-metrics div {
    align-items: center;
  }

  .debt-scenario-path-metrics dt {
    font-size: var(--wm-scenario-text-min-size);
  }

  .debt-scenario-path-metrics dd {
    font-size: 16px;
    line-height: 24px;
  }

  .debt-scenario-tradeoff-row {
    min-height: 0;
    padding: 16px 20px;
    border-radius: 18px;
  }

  .debt-scenario-tradeoff-row h3,
  .debt-scenario-split-results h3,
  .debt-scenario-plan-summary h2 {
    font-size: 20px;
    line-height: 28px;
  }

  .debt-scenario-tradeoff-row p,
  .debt-scenario-tradeoff-stat span,
  .debt-scenario-tradeoff-stat strong {
    font-size: 14px;
    line-height: 22px;
  }

  .debt-scenario-split-section {
    gap: 40px;
  }

  .debt-scenario-tune-control {
    flex-wrap: nowrap;
    margin-inline: -24px;
    padding-inline: 24px;
    overflow-x: auto;
  }

  .debt-scenario-tune-button {
    flex: 0 0 auto;
  }

  .debt-scenario-allocation-grid {
    gap: 16px;
  }

  .debt-scenario-allocation-card {
    padding: 16px;
    border-radius: 24px;
  }

  .debt-scenario-allocation-card strong {
    font-size: 24px;
    line-height: 32px;
  }

  .debt-scenario-split-results {
    padding: 24px;
  }

  .debt-scenario-split-results dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .debt-scenario-split-results dl div {
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
  }

  .debt-scenario-split-results dd {
    font-size: 16px;
    line-height: 24px;
  }

  .debt-scenario-split-results p {
    font-size: 14px;
    line-height: 22px;
  }

  .debt-scenario-timeline {
    padding: 0;
    gap: 48px;
  }

  .debt-scenario-timeline-list {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 0 0 32px;
  }

  .debt-scenario-timeline-list::before {
    top: 8px;
    bottom: 8px;
    left: 12px;
    width: 2px;
    height: auto;
  }

  .debt-scenario-timeline-list li {
    justify-items: start;
    min-height: 64px;
    text-align: left;
  }

  .debt-scenario-timeline-dot {
    position: absolute;
    top: 0;
    left: -32px;
    width: 24px;
    height: 24px;
    border-width: 0;
    font-size: 12px;
    box-shadow: 0 0 0 4px #fff, 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .debt-scenario-timeline-list h3 {
    font-size: 16px;
    line-height: 24px;
  }

  .debt-scenario-timeline-list p:not(.debt-scenario-timeline-marker) {
    font-size: 12px;
    line-height: 16px;
  }

  .debt-scenario-plan-summary {
    padding: 24px;
    border-radius: 32px;
  }

  .debt-scenario-plan-summary p,
  .debt-scenario-plan-summary .debt-scenario-plan-comparison {
    font-size: 14px;
    line-height: 23px;
  }

  .debt-scenario-final-action {
    display: grid;
    justify-items: stretch;
  }

  .debt-scenario-final-action a,
  .debt-scenario-final-action button {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 24px;
  }
}


.wm-legal-page {
  background:
    linear-gradient(180deg, var(--wm-money-canvas, #f9f9ff) 0%, var(--wm-money-canvas, #f9f9ff) 72%, var(--wf-color-background-surface) 100%);
}

.wm-legal-inner {
  display: grid;
  gap: 96px;
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 80px 40px 128px;
}

.wm-legal-hero {
  display: grid;
  gap: 32px;
}

.wm-legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0;
  padding: 6px 16px;
  border-radius: var(--wf-radius-pill);
  background: #68dba9;
  color: #005137;
  font-family: var(--wf-font-body);
  font-size: var(--wm-scenario-text-min-size);
  /* Uppercase kicker at the 12px floor; 16px line is its own, no min line token. */
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wm-legal-eyebrow span {
  width: 8px;
  height: 8px;
  border-radius: var(--wf-radius-pill);
  background: currentColor;
}

.wm-legal-hero h1 {
  max-width: 12em;
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  /* WMA-147: display headline above the scale's top rung (display-lg = 48). 1
     rule across apps/ + packages/ draws 96px (grep font-size: 96px) — no rung. */
  font-size: 96px;
  line-height: 1;
  font-weight: 800;
}

.wm-legal-subtitle {
  max-width: 768px;
  margin: 0;
  color: var(--wm-money-copy);
  font-size: var(--wf-font-heading-md-size);
  line-height: 39px;
}

.wm-legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
}

.wm-legal-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin: 0;
  color: var(--wm-money-muted, #4f5f56);
}

.wm-legal-meta-icon,
.wm-legal-summary-icon,
.wm-legal-notice-mark,
.wm-legal-button svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wm-legal-meta-icon svg {
  width: 20px;
  height: 20px;
}

.wm-legal-meta-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.wm-legal-meta-value {
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
}

.wm-legal-notice {
  position: relative;
  display: grid;
  gap: 24px;
  overflow: hidden;
  padding: 48px;
  border-radius: 32px;
  background: #00855d;
  color: #f5fff7;
}

.wm-legal-notice::after {
  content: "";
  position: absolute;
  top: 32px;
  right: 48px;
  width: 92px;
  height: 112px;
  border: 3px solid rgba(245, 255, 247, 0.16);
  border-radius: 34px 34px 48px 48px;
  transform: rotate(8deg);
}

.wm-legal-notice-mark {
  display: none;
}

.wm-legal-notice-copy {
  display: grid;
  gap: 24px;
  max-width: 896px;
}

.wm-legal-notice h2 {
  margin: 0;
  color: inherit;
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-title-md-size);
  line-height: 36px;
}

.wm-legal-notice p {
  margin: 0;
  color: #ffffff;
  font-size: var(--wf-font-heading-sm-size);
  line-height: 32.5px;
}

.wm-legal-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.wm-legal-summary-card {
  display: grid;
  align-content: start;
  gap: 24px;
  min-height: 280px;
  padding: 40px;
  border-radius: 32px;
  background: var(--wm-money-surface-soft, #f1f3ff);
  color: var(--wm-money-copy);
}

.wm-legal-summary-card h2 {
  margin: 0 0 16px;
  color: var(--wm-money-ink);
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
  font-weight: 700;
}

.wm-legal-summary-card p {
  margin: 0;
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-legal-summary-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--wf-radius-pill);
  background: rgba(0, 105, 72, 0.09);
  color: var(--wm-money-accent);
}

.wm-legal-summary-card.is-negative .wm-legal-summary-icon {
  background: var(--wf-color-status-error-bg);
  color: var(--wf-color-status-error-text);
}

.wm-legal-summary-card.is-data .wm-legal-summary-icon {
  background: rgba(0, 106, 97, 0.09);
  color: #006a61;
}

.wm-legal-summary-icon svg {
  width: 21px;
  height: 21px;
}

/* /privacy variant: a denser treatment than the generic legal desktop. These
   selectors carry two classes, so they outrank every single-class rule in the
   media blocks below regardless of source order. Any mobile override of a
   property set here only lands on /privacy through a `.wm-route-privacy`-
   prefixed counterpart inside that media block — see the counterpart cluster
   in the 720px block. On phones both legal pages share one scale by design;
   the notice's left accent bar is the only privacy-specific detail kept. */
.wm-route-privacy .wm-legal-inner {
  gap: 64px;
  padding-top: 56px;
}

.wm-route-privacy .wm-legal-hero h1 {
  /* WMA-147: display headline between display-md (40) and display-lg (48) — no
     rung. 3 rules across apps/ + packages/ draw 56px (grep font-size: 56px). */
  font-size: 56px;
  line-height: 61.6px;
}

.wm-route-privacy .wm-legal-subtitle {
  font-size: var(--wf-font-heading-sm-size);
  line-height: 32.5px;
}

.wm-route-privacy .wm-legal-meta {
  gap: 16px;
}

.wm-route-privacy .wm-legal-meta-item {
  padding: 9px 17px;
  border: 1px solid rgba(188, 202, 192, 0.15);
  border-radius: var(--wf-radius-pill);
  background: #e9edff;
  color: var(--wm-money-accent);
}

.wm-route-privacy .wm-legal-meta-icon,
.wm-route-privacy .wm-legal-meta-label {
  display: none;
}

.wm-route-privacy .wm-legal-notice {
  padding: 48px 32px 32px 40px;
  border-left: 8px solid #006948;
  box-shadow: 0 4px 12px rgba(0, 105, 72, 0.08);
}

.wm-route-privacy .wm-legal-notice::after {
  content: none;
}

.wm-route-privacy .wm-legal-notice-mark {
  display: inline-flex;
  width: 24px;
  height: 30px;
  align-self: start;
  color: #f5fff7;
}

.wm-route-privacy .wm-legal-notice-copy {
  gap: 8px;
}

.wm-route-privacy .wm-legal-notice h2 {
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
}

.wm-route-privacy .wm-legal-notice p {
  max-width: 768px;
  color: #ffffff;
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-route-privacy .wm-legal-summary-card {
  min-height: 290px;
  padding: 32px;
}

.wm-route-privacy .wm-legal-summary-card h2 {
  font-size: var(--wm-scenario-text-2xl-size);
}

.wm-route-privacy .wm-legal-summary-card p {
  font-size: var(--wm-scenario-text-md-size);
  /* 22.75px line is this card's own; not the md pair's 20px. */
  line-height: 22.75px;
}

.wm-legal-data {
  display: grid;
  gap: 32px;
  padding-top: 32px;
}

.wm-legal-section-heading {
  display: grid;
  gap: 8px;
}

.wm-legal-section-heading h2 {
  margin: 0;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-md-size);
  line-height: 32px;
}

.wm-legal-section-heading p {
  max-width: 42rem;
  margin: 0;
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: 26px;
}

.wm-legal-data-table-wrap {
  overflow: hidden;
  border: 1px solid rgba(188, 202, 192, 0.15);
  border-radius: 32px;
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.wm-legal-data-table {
  width: 100%;
  border-collapse: collapse;
}

.wm-legal-data-table th,
.wm-legal-data-table td {
  padding: 24px 32px;
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-xl-size);
  line-height: var(--wm-scenario-text-xl-line);
  text-align: left;
  vertical-align: top;
}

.wm-legal-data-table thead th {
  padding-block: 20px;
  background: #e2e8fc;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wm-legal-data-table tbody th {
  color: var(--wm-money-ink);
  font-weight: 700;
}

.wm-legal-data-table tbody td:nth-child(2) {
  font-family: var(--wf-font-mono);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
}

.wm-legal-data-table tbody tr + tr {
  border-top: 1px solid rgba(188, 202, 192, 0.15);
}

.wm-legal-data-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.4);
}

.wm-legal-content-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 64px;
  align-items: start;
  padding: 32px 0;
}

.wm-legal-toc {
  position: sticky;
  top: 112px;
  /* The list is generated from the document's own sections, so a long policy
     produces a long list. Keep it inside the viewport and let it scroll on
     its own rather than parking entries below the fold of a sticky block. */
  max-height: calc(100vh - 144px);
  overflow-y: auto;
  overscroll-behavior: contain;
  grid-column: span 3;
  padding: 33px;
  border: 1px solid var(--wm-money-border-soft);
  border-radius: 32px;
  background: var(--wm-money-surface-soft, #f1f3ff);
}

.wm-legal-toc h2 {
  margin: 0 0 24px;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
}

.wm-legal-toc ol {
  display: grid;
  gap: 11.5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-legal-toc a {
  display: flex;
  align-items: center;
  gap: 8px;
  /* WMA-147 D1 floor: these nav links rendered 184x20, under the 24px minimum.
     This is a generated policy index in a sticky, self-scrolling sidebar; a full
     44px per row would nearly double each entry and break the dense list, so the
     hard floor (control-min = 24) is taken instead. No-op on phones, where the
     16/24 mobile type already fills 24px. */
  min-height: var(--wm-scenario-control-min);
  color: var(--wm-money-copy);
  border-radius: var(--wf-radius-sm);
  font-size: var(--wm-scenario-text-md-size);
  line-height: var(--wm-scenario-text-md-line);
  font-weight: 600;
  text-decoration: none;
}

.wm-legal-toc a:hover {
  color: var(--wm-money-accent);
}

.wm-legal-toc a:focus-visible,
.wm-legal-contact a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--wf-border-width-strong) var(--wf-color-focus-ring);
}

.wm-legal-toc a span {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--wf-radius-pill);
  background: rgba(0, 105, 72, 0.3);
}

.wm-legal-article {
  grid-column: span 9;
  padding: 49px;
  border: 1px solid var(--wm-money-border-soft);
  border-radius: 32px;
  background: var(--wf-color-background-surface);
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-legal-markdown {
  color: var(--wm-money-ink);
}

.wm-legal-anchor {
  display: block;
  position: relative;
  top: -96px;
  visibility: hidden;
}

.wm-legal-markdown h1,
.wm-legal-markdown h2,
.wm-legal-markdown h3 {
  margin: 0 0 24px;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-md-size);
  line-height: 32px;
  font-weight: 700;
}

.wm-legal-markdown h1 {
  font-size: var(--wf-font-heading-lg-size);
  line-height: 36px;
}

.wm-legal-markdown h2:not(:first-child),
.wm-legal-markdown h3:not(:first-child) {
  margin-top: 56px;
}

.wm-legal-markdown p,
.wm-legal-markdown li {
  color: var(--wm-money-ink);
  font-size: var(--wm-scenario-text-2xl-size);
  /* Long-form body leading; 32.4px is not the 2xl pair's 24px. */
  line-height: 32.4px;
}

.wm-legal-markdown p {
  margin: 0 0 18px;
}

.wm-legal-markdown ul,
.wm-legal-markdown ol {
  display: grid;
  gap: 8px;
  margin: 0 0 24px;
  padding-left: 24px;
}

.wm-legal-markdown blockquote {
  margin: 32px 0;
  padding: 31px 32px 32px 36px;
  border-left: 4px solid var(--wm-money-accent);
  border-radius: 32px;
  background: var(--wm-money-surface-soft, #f1f3ff);
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-legal-markdown blockquote p {
  margin: 0;
}

.wm-legal-markdown hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--wm-money-border-medium);
}

.wm-legal-markdown a {
  color: var(--wm-money-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.wm-legal-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  padding: 49px;
  border: 1px solid rgba(0, 105, 72, 0.1);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--wm-money-shadow-hairline);
}

.wm-legal-contact h2 {
  margin: 0 0 16px;
  color: var(--wm-money-ink);
  font-family: var(--wf-font-heading);
  font-size: var(--wf-font-heading-xl-size);
  line-height: 40px;
}

.wm-legal-contact p {
  margin: 0;
  color: var(--wm-money-copy);
  font-size: var(--wm-scenario-text-2xl-size);
  line-height: 28px;
}

.wm-legal-contact-actions {
  display: grid;
  justify-items: end;
  gap: 16px;
}

.wm-legal-contact-actions p {
  color: var(--wm-money-accent);
  font-family: var(--wf-font-mono);
  font-size: var(--wf-font-heading-sm-size);
  line-height: 28px;
  font-weight: 700;
}

.wm-legal-footer-disclaimer {
  flex-basis: 100%;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 105, 72, 0.1);
}

.wm-legal-button {
  gap: 8px;
  color: var(--wf-color-action-primary-text);
  text-decoration: none;
}

.wm-legal-button svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 1100px) {
  .wm-legal-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wm-route-privacy .wm-legal-summary-card {
    min-height: 0;
  }

  .wm-legal-content-layout {
    grid-template-columns: 1fr;
  }

  .wm-legal-toc,
  .wm-legal-article {
    grid-column: auto;
  }

  .wm-legal-toc {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 720px) {
  .wm-legal-inner {
    gap: 64px;
    padding: 40px 24px 96px;
  }

  .wm-legal-hero {
    gap: 23px;
  }

  .wm-legal-eyebrow {
    padding: 4px 16px;
    background: #85f8c4;
    font-family: var(--wf-font-mono);
    font-weight: 600;
  }

  .wm-legal-hero h1 {
    /* WMA-147: display headline between display-md (40) and display-lg (48) — no
       rung. 3 rules across apps/ + packages/ draw 56px (grep font-size: 56px). */
    font-size: 56px;
    line-height: 61.6px;
  }

  .wm-legal-subtitle {
    max-width: 32rem;
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 29.25px;
  }

  .wm-legal-meta {
    display: grid;
    gap: 16px;
    padding-top: 0;
  }

  .wm-legal-meta-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 0;
    min-height: 67px;
    padding: 16px;
    border-radius: 32px;
    background: var(--wm-money-surface-soft, #f1f3ff);
  }

  .wm-legal-meta-icon {
    grid-row: span 2;
  }

  .wm-legal-meta-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    /*
      Normal-weight text this small needs the full 4.5:1. #6d7a72 only reaches
      ~4.1:1 on the chip's surface-soft background (and ~3.9:1 on the privacy
      route's #e9edff chips) — axe flags both. The muted token is the same
      family and clears ~5.8:1 on every chip tint in play.
    */
    color: var(--wm-money-muted, #4f5f56);
    font-family: var(--wf-font-mono);
    /* WMA-147 D2 floor: was 10px, under the 12px minimum; raised to the floor. */
    font-size: var(--wm-scenario-text-min-size);
    line-height: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .wm-legal-meta-value {
    color: var(--wm-money-ink);
    font-weight: 600;
  }

  .wm-legal-notice {
    padding: 32px;
  }

  .wm-legal-notice::after {
    top: -40px;
    right: -40px;
    width: 96px;
    height: 120px;
  }

  .wm-legal-notice-mark {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: var(--wf-radius-pill);
    background: rgba(255, 255, 255, 0.2);
  }

  .wm-legal-notice-mark svg {
    width: 22px;
    height: 22px;
  }

  .wm-legal-notice-copy {
    gap: 8px;
  }

  .wm-legal-notice h2 {
    font-family: var(--wf-font-body);
    font-size: var(--wf-font-heading-sm-size);
    line-height: 28px;
  }

  .wm-legal-notice p {
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 26px;
  }

  .wm-legal-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* /privacy counterparts: the two-class rules above the media blocks outrank
     this block's single-class rules, so a phone value only lands on /privacy
     when re-declared with the prefix. Keep these in step with the generic
     rules they shadow; where the two values already agree no counterpart is
     needed. The notice keeps its left accent bar on purpose. */
  .wm-route-privacy .wm-legal-inner {
    padding-top: 40px;
  }

  .wm-route-privacy .wm-legal-subtitle {
    font-size: var(--wm-scenario-text-2xl-size);
    line-height: 29.25px;
  }

  .wm-route-privacy .wm-legal-meta-item {
    padding: 16px;
    border: 0;
    border-radius: 32px;
    background: var(--wm-money-surface-soft, #f1f3ff);
    color: var(--wm-money-muted, #4f5f56);
  }

  .wm-route-privacy .wm-legal-meta-icon,
  .wm-route-privacy .wm-legal-meta-label {
    display: inline-flex;
  }

  .wm-route-privacy .wm-legal-meta-label {
    display: block;
  }

  .wm-route-privacy .wm-legal-notice {
    padding: 32px;
  }

  .wm-route-privacy .wm-legal-notice-mark {
    width: 48px;
    height: 48px;
  }

  .wm-route-privacy .wm-legal-summary-card {
    padding: 24px;
  }

  .wm-route-privacy .wm-legal-summary-card h2 {
    font-size: var(--wm-scenario-text-xl-size);
  }

  .wm-route-privacy .wm-legal-summary-card p {
    line-height: 20px;
  }

  .wm-legal-summary-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    padding: 24px;
    background: var(--wf-color-background-surface);
    box-shadow: 0 4px 20px rgba(21, 27, 42, 0.04);
  }

  .wm-legal-summary-card h2 {
    margin-bottom: 4px;
    color: var(--wm-money-accent);
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 24px;
  }

  .wm-legal-summary-card.is-negative h2 {
    color: var(--wf-color-status-error-text);
  }

  .wm-legal-summary-card.is-data h2 {
    color: #006a61;
  }

  .wm-legal-summary-card.is-user h2 {
    color: var(--wm-money-ink);
  }

  .wm-legal-summary-card p {
    font-size: var(--wm-scenario-text-md-size);
    line-height: var(--wm-scenario-text-md-line);
  }

  .wm-legal-data {
    gap: 24px;
    padding-top: 0;
  }

  .wm-legal-data-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .wm-legal-data-table,
  .wm-legal-data-table thead,
  .wm-legal-data-table tbody,
  .wm-legal-data-table tr,
  .wm-legal-data-table th,
  .wm-legal-data-table td {
    display: block;
  }

  .wm-legal-data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .wm-legal-data-table tbody {
    display: grid;
    gap: 16px;
  }

  .wm-legal-data-table tbody tr {
    padding: 20px;
    border: 1px solid rgba(188, 202, 192, 0.15);
    border-radius: 24px;
    background: var(--wf-color-background-surface);
    box-shadow: 0 4px 20px rgba(21, 27, 42, 0.04);
  }

  .wm-legal-data-table tbody tr + tr {
    border-top: 1px solid rgba(188, 202, 192, 0.15);
  }

  .wm-legal-data-table th,
  .wm-legal-data-table td {
    padding: 0;
    font-size: var(--wm-scenario-text-lg-size);
    line-height: var(--wm-scenario-text-lg-line);
  }

  .wm-legal-data-table th::before,
  .wm-legal-data-table td::before {
    content: attr(data-label);
    display: block;
    margin: 0 0 4px;
    /* Same eyebrow pattern as .wm-legal-meta-label: #6d7a72 sits under 4.5:1 on
       the page canvas. axe cannot see ::before content, so this one never fails
       a scan — keep it in step with the label color anyway. */
    color: var(--wm-money-muted, #4f5f56);
    font-family: var(--wf-font-mono);
    /* WMA-147 D2 floor: was 10px, under the 12px minimum; raised to the floor. */
    font-size: var(--wm-scenario-text-min-size);
    line-height: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .wm-legal-data-table th + td,
  .wm-legal-data-table td + td {
    margin-top: 16px;
  }

  .wm-legal-content-layout {
    gap: 64px;
    padding: 0;
  }

  .wm-legal-toc {
    padding: 32px;
  }

  .wm-legal-toc h2 {
    margin-bottom: 24px;
    /* Eyebrow on the TOC's surface-soft card: #6d7a72 is ~4.1:1 there, under the
       4.5:1 bar for text this small. */
    color: var(--wm-money-muted, #4f5f56);
    font-family: var(--wf-font-mono);
    /* WMA-147 D2 floor: was 10px, under the 12px minimum; raised to the floor. */
    font-size: var(--wm-scenario-text-min-size);
    line-height: 15px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .wm-legal-toc ol {
    gap: 12px;
  }

  .wm-legal-toc a {
    justify-content: space-between;
    color: var(--wm-money-accent);
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 24px;
  }

  .wm-legal-toc a span {
    order: 2;
    width: 9px;
    height: 9px;
    background: transparent;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 0;
    transform: rotate(45deg);
  }

  .wm-legal-article {
    padding: 33px;
  }

  .wm-legal-markdown h1,
  .wm-legal-markdown h2,
  .wm-legal-markdown h3 {
    margin-bottom: 16px;
    font-size: var(--wf-font-heading-md-size);
    line-height: 32px;
  }

  .wm-legal-markdown h2:not(:first-child),
  .wm-legal-markdown h3:not(:first-child) {
    margin-top: 48px;
  }

  .wm-legal-markdown p,
  .wm-legal-markdown li {
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 26px;
  }

  .wm-legal-markdown blockquote {
    margin: 24px 0;
    padding: 24px 24px 24px 28px;
  }

  .wm-legal-contact {
    display: grid;
    justify-items: center;
    padding: 32px;
    border-radius: 40px;
    background: var(--wm-money-ink);
    text-align: center;
  }

  .wm-legal-contact h2 {
    color: var(--wf-color-background-canvas);
    font-size: var(--wf-font-title-md-size);
    line-height: 36px;
  }

  .wm-legal-contact p,
  .wm-legal-contact-actions p {
    color: #dce2f6;
    font-size: var(--wm-scenario-text-xl-size);
    line-height: 24px;
  }

  .wm-legal-contact-actions {
    width: 100%;
    justify-items: stretch;
  }

  .wm-legal-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .wm-legal-inner {
    padding-inline: 20px;
  }

  .wm-legal-hero h1 {
    /* WMA-147: between title-xl (34) and display-md (40) — no rung. 9 rules
       across apps/ + packages/ draw 42px (grep font-size: 42px); adding a step
       is Lane G's call, so left raw and reported. */
    font-size: 42px;
    line-height: 48px;
  }

  .wm-route-privacy .wm-legal-hero h1 {
    /* Same rung-less 42px as the generic hero h1 above. */
    font-size: 42px;
    line-height: 48px;
  }

  .wm-legal-notice,
  .wm-legal-toc,
  .wm-legal-article,
  .wm-legal-contact {
    border-radius: 24px;
    padding: 24px;
  }

  /* Re-declared with the prefix for the same reason as the 720px block: the
     720px `.wm-route-privacy .wm-legal-notice { padding: 32px }` counterpart
     outranks the single-class rule above. */
  .wm-route-privacy .wm-legal-notice {
    padding: 24px;
  }

  .wm-legal-summary-card {
    border-radius: 24px;
  }
}