@charset "UTF-8";
  /*
   * Simply PMG brand (Design System V4, April 2026 — app/design.md)
   * Hierarchy: Option 3 — Welcoming Glow 60% · Anchor Blue 35% · Clear Sky 5%.
   * Opacity variants 85% · 50% · 25% are mixed over the surface they sit on.
   */
  :root {
    color-scheme: light;
    /* Principal */
    --anchor-blue: #005775;
    --clear-sky: #4ec3e0;
    --welcoming-glow: #edf0f2; /* from CMYK 2/1/0/5 */
    /* Neutral */
    --deep-ocean: #00263e;
    --soft-horizon: #4f758b; /* RGB 79/117/139 */
    --open-light: #eef0f2;
    --bright-white: #ffffff;
    /* Web-extended */
    --soft-cloud: #eef8f8;
    --snow-blue: #d2ebf5;
    --stone-teal: #2d787d;

    /* Roles — light */
    --bg: var(--open-light);
    --surface: var(--bright-white);
    --surface-2: var(--soft-cloud);
    --highlight: var(--snow-blue);
    --ink: var(--deep-ocean);
    --ink-brand: var(--anchor-blue);
    --ink-2: var(--soft-horizon);
    --muted: var(--soft-horizon);
    --line: color-mix(in srgb, var(--anchor-blue) 14%, var(--bright-white));
    --line-strong: color-mix(in srgb, var(--anchor-blue) 25%, var(--bright-white));
    --focus: var(--anchor-blue);
    --buy: var(--anchor-blue);
    --rent: var(--clear-sky);
    --good-text: var(--stone-teal);
    --good-bg: var(--soft-cloud);
    --alert-text: var(--welcoming-glow);
    --alert-bg: var(--anchor-blue);
    --short: var(--soft-horizon);
    --shadow: 0 1px 2px rgba(0, 38, 62, .06), 0 10px 28px rgba(0, 38, 62, .07);
    --gradient-4: linear-gradient(90deg, var(--anchor-blue), var(--clear-sky), var(--welcoming-glow));

    /* Gibson and Marydale load when installed through Adobe Fonts; Figtree and Caveat stand in on the web. */
    --f-body: "Gibson", "Figtree", Arial, system-ui, sans-serif;
    --f-hand: "Marydale", "Caveat", "Segoe Print", cursive;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
  }
  /* Light is the default. Dark applies only when the viewer picks it with the theme toggle. */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: var(--deep-ocean);
    --surface: #00324c;
    --surface-2: #003e5a;
    --highlight: #003e5a;
    --ink: var(--bright-white);
    --ink-brand: var(--snow-blue);
    --ink-2: var(--snow-blue);
    --muted: #9ebdcb;
    --line: #0b4661;
    --line-strong: #1d5a74;
    --focus: var(--clear-sky);
    --buy: var(--snow-blue);
    --rent: var(--clear-sky);
    --good-text: var(--snow-blue);
    --good-bg: #0e5361;
    --alert-text: var(--deep-ocean);
    --alert-bg: var(--snow-blue);
    --short: var(--muted);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .25);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 16px/1.55 var(--f-body);
    padding-inline: 16px;
    padding-block: 0;
    -webkit-text-size-adjust: 100%; /* stops iOS from enlarging text in landscape */
    text-size-adjust: 100%;
  }
  /* Full-width banner above the page. Below about 830px wide it stops shrinking and crops
     the side speech bubbles, so the headline in the middle stays readable; 22vw keeps the
     whole headline (about 900px of the 1704px image) in view on a phone. */
  .banner { margin-inline: -16px; background: #7fd0e6; }
  .banner img { display: block; width: 100%; height: auto; min-height: min(22vw, 96px); max-height: 240px; object-fit: cover; }

  /* Gibson: Regular for titles, Medium for subtitles, Bold for numbers */
  h1, h2, h3 { font-family: var(--f-body); text-wrap: balance; margin: 0; color: var(--ink-brand); }
  h1, h2 { font-weight: 400; letter-spacing: -0.015em; }
  h3 { font-weight: 500; }
  p { margin: 0; }
  .eyebrow {
    font: 600 12px/1.3 var(--f-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .num { font-variant-numeric: tabular-nums; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

  /* ---------- Masthead ---------- */
  .masthead { display: grid; gap: 4px; padding-block: 40px 30px; max-width: 900px; }
  .masthead .eyebrow { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: .06em; color: var(--ink-brand); }
  .masthead h1 { font-size: clamp(20px, 3vw, 23px); line-height: 1.15; }
  .masthead h1 .k { text-decoration-line: underline; text-decoration-thickness: .12em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
  .masthead h1 .k-buy { text-decoration-color: var(--buy); }
  .masthead h1 .k-rent { text-decoration-color: var(--rent); }
  /* Marydale: 1–2 words, at least 10pt (≈13px) larger than the Gibson beside it */
  .hand { font-family: var(--f-hand); font-weight: 700; font-size: calc(1em + 14px); line-height: .8; letter-spacing: 0; padding-right: .08em; color: var(--ink-brand); }
  .masthead .lede { color: var(--ink-2); font-size: 18px; max-width: 62ch; }

  /* ---------- Layout ---------- */
  /* Wide screens: the inputs are a sidebar on the left, flush with the screen edge and as tall as the page.
     The heading and results sit to its right in a centered column. */
  .layout {
    --step-head-h: 24px; --step-head-gap: 10px; --step-gap: 28px;
    --side-w: 330px; --rail-w: 88px;
    --main-w: 880px;
    position: relative;
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "dock head" "dock main";
    column-gap: clamp(28px, 4vw, 64px);
    margin-left: -16px;
  }
  .masthead { grid-area: head; }
  .layout > main { grid-area: main; }
  .masthead, .layout > main { width: 100%; max-width: var(--main-w); justify-self: center; }
  /* With the inputs hidden, the sidebar shrinks to a narrow rail and the results take the width it gives up */
  .layout.inputs-off { --main-w: calc(880px + var(--side-w) - var(--rail-w)); grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  /* Very wide screens add a third column on the right for the "Where do I start?" and
     "What can I afford?" bubbles, which stay in view while the results scroll. That column keeps
     a set width; the results stop growing at --main-w and center in the space that is left. */
  .side-bubbles { display: none; }
  .site-link-top { display: none; }
  @media (min-width: 1400px) {
    .layout { --deco-w: clamp(240px, 18vw, 320px); grid-template-columns: var(--side-w) minmax(0, 1fr) var(--deco-w); grid-template-areas: "dock head deco" "dock main deco"; }
    .layout.inputs-off { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--deco-w); }
    /* Staggered: "Where do I start?" sits to the right, "What can I afford?" below it to the left */
    .side-bubbles { grid-area: deco; align-self: start; justify-self: center; width: min(100%, 460px); position: sticky; top: 24px; display: grid; gap: 102px; padding: 204px 24px 0 8px; }
    .side-bubbles img { display: block; height: auto; width: min(245px, 85%); }
    /* The website button sits at the top of the column, under the theme toggle; the sidebar copy is hidden */
    .site-link-top { display: block; position: absolute; top: 68px; right: 0; white-space: nowrap; margin: 0; }
    .site-link-side { display: none; }
    .sb-start { justify-self: end; }
    .sb-afford { justify-self: start; }
    /* The bubbles are drawn light; dimmed so they don't glare on the dark background */
    :root[data-theme="dark"]  .side-bubbles img { opacity: .3; }
  }
  .inputs-dock { grid-area: dock; position: relative; background: var(--surface-2); }
  /* Stays in view while the results scroll; the form scrolls inside it if it is taller than the screen */
  .dock-inner { position: sticky; top: 0; max-height: 100vh; max-height: 100dvh; display: flex; flex-direction: column; }
  /* The show/hide tab hangs off the sidebar's right edge, near the top */
  .fab {
    position: absolute;
    top: 24px; left: 100%;
    z-index: 10;
    width: 22px; height: 56px;
    display: grid; place-items: center;
    border: 0; border-radius: 0 8px 8px 0;
    background: var(--highlight);
    color: var(--ink-brand);
    cursor: pointer;
  }
  .fab:hover { background: color-mix(in srgb, var(--highlight) 82%, var(--ink-brand)); }
  .fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .fab[aria-expanded="true"] .fab-show, .fab[aria-expanded="false"] .fab-hide { display: none; }
  .tab-hide, .tab-show { display: none; }
  /* The rail: an edit button at the top and the mascot peeking from the bottom of the screen */
  .inputs-rail, .peek { display: none; }
  .layout.inputs-off .inputs-rail { display: flex; justify-content: center; padding-top: 22px; }
  .rail-edit { border: 0; background: transparent; padding: 8px; border-radius: var(--r-md); cursor: pointer; line-height: 0; }
  .rail-edit:hover { background: var(--highlight); }
  .rail-edit img { width: 37px; height: auto; }
  .layout.inputs-off .peek { display: block; position: fixed; left: 0; bottom: 40px; width: var(--rail-w); height: auto; pointer-events: none; }
  /* On narrow screens the columns stack. The dock sticks to the top of the screen and the button
     becomes a tab hanging from its bottom edge, like a drawer handle. With the inputs hidden, only the tab shows. */
  @media (max-width: 980px) {
    /* A flex column, so the dock can stick for the whole height of the results */
    .layout, .layout.inputs-off { display: flex; flex-direction: column; align-items: stretch; margin-left: 0; }
    .masthead, .layout > main { max-width: none; }
    .inputs-dock {
      display: block;
      position: sticky;
      top: env(safe-area-inset-top, 0px);
      z-index: 10;
      background: none;
      /* Room for the tab that hangs below, so at rest it doesn't cover the first step's heading */
      margin-bottom: 34px;
    }
    .dock-inner { position: static; display: block; max-height: none; }
    .layout.inputs-off .inputs-rail, .layout.inputs-off .peek, .mascot { display: none; }
    .fab {
      top: calc(100% - 1px);
      left: 50%;
      transform: translateX(-50%);
      width: 108px; height: 26px;
      border: 1px solid var(--line);
      border-top: 0;
      border-radius: 0 0 12px 12px;
      background: var(--surface);
    }
    .fab:hover { background: var(--highlight); }
    .fab:focus-visible { border-radius: 0 0 12px 12px; }
    .fab .fab-hide, .fab .fab-show { display: none; }
    .fab[aria-expanded="true"] .tab-hide, .fab[aria-expanded="false"] .tab-show { display: block; }
  }

  /* ---------- Inputs ---------- */
  .inputs {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    padding: 28px 28px 0;
  }
  /* "We want to start the conversation." bubble above the mascot, at the foot of the sidebar */
  .mascot { display: grid; margin-top: 32px; }
  .bubble { position: relative; justify-self: start; width: 220px; aspect-ratio: 220 / 112; margin: 0 0 -6px; display: grid; }
  .bubble svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .bubble path { fill: var(--surface); stroke: var(--ink-brand); stroke-width: 2; stroke-linejoin: round; }
  .bubble span {
    position: relative;
    height: 82%; /* the oval part, above the tail */
    display: grid; place-items: center;
    padding-inline: 22px;
    text-align: center;
    font: italic 500 20px/1.05 var(--f-body);
    color: var(--ink-brand);
  }
  .mascot img { justify-self: end; width: 240px; height: auto; }
  /* On narrow screens the panel is a card pinned to the top, short enough to leave the results in view */
  @media (max-width: 980px) {
    .inputs {
      display: grid; gap: 12px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      max-height: 60vh; max-height: 60dvh;
      box-shadow: var(--shadow);
    }
  }
  .inputs[hidden] { display: none; }
  .fieldset { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
  .fieldset[hidden] { display: none; }
  .fieldset > legend { padding: 0; margin-bottom: 0; }
  .fieldset > legend.eyebrow { font-weight: 500; }
  .fieldset > legend.eyebrow.lead { width: 100%; text-align: center; text-wrap: balance; font-weight: 700; font-size: 14px; color: var(--ink-brand); margin-bottom: 6px; }
  .field { display: grid; gap: 1px; }
  .field label { font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--ink); }
  .control {
    display: flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    transition: border-color .15s;
  }
  .control:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
  .control .affix { font: 500 11px var(--f-body); color: var(--muted); padding-inline: 6px; white-space: nowrap; }
  .control .affix:first-child { padding-right: 0; }
  .control .affix:last-child { padding-left: 0; }
  .control input, .control select {
    flex: 1;
    width: 0; /* grow from nothing, so the box's built-in ~20ch width never pushes the panel past a small screen */
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 600 13px var(--f-body);
    font-variant-numeric: tabular-nums;
    padding: 4px 6px;
    outline: none;
  }
  .control select { cursor: pointer; font-weight: 500; font-size: 12px; }
  /* The native dropdown takes its background from the select, so it can't be transparent here */
  .control select { background-color: var(--surface); }
  .control select optgroup { background: var(--surface-2); color: var(--ink-2); font-weight: 700; font-style: normal; }
  .control select option { background: var(--surface); color: var(--ink); font-weight: 500; }
  .hint { font-size: 10px; color: var(--muted); }
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
  .grid-2 .field { min-width: 0; align-content: end; } /* a label that wraps keeps its box level with the one beside it */
  .grid-2 .field label { font-size: 10px; color: var(--ink-2); }
  .field-note { grid-column: 1 / -1; margin: -2px 0 2px; line-height: 1.35; } /* a note under a pair of fields */
  details.assumptions { border-top: 1px solid var(--line); padding-top: 10px; }
  details.assumptions > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-brand);
  }
  details.assumptions > summary::-webkit-details-marker { display: none; }
  details.assumptions > summary::after { content: "+"; font: 400 20px var(--f-body); color: var(--muted); }
  details.assumptions[open] > summary::after { content: "–"; }
  .assump-body { display: grid; gap: 12px; padding-top: 10px; }
  /* Phones: larger text and taller boxes that are easy to tap. Inputs at 16px also keep iOS from zooming in on focus. */
  @media (max-width: 980px) {
    .inputs { padding: 16px; gap: 14px; }
    .fieldset { gap: 10px; }
    .fieldset > legend.eyebrow.lead { font-size: 15px; margin-bottom: 4px; }
    .field { gap: 4px; }
    .field label { font-size: 14px; }
    .grid-2 { gap: 10px 10px; }
    .grid-2 .field label { font-size: 13px; }
    .control { min-height: 44px; }
    .control input, .control select { font-size: 16px; padding: 8px 10px; }
    .control .affix { font-size: 14px; padding-inline: 10px; }
    .hint { font-size: 12.5px; }
    details.assumptions > summary { font-size: 13px; min-height: 36px; }
    .btn { padding: 10px 16px; font-size: 15px; }
    /* The phone keyboard is used to type, so the small up/down arrows only take room from the number */
    .control input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
    .control input[type="number"]::-webkit-inner-spin-button,
    .control input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  }
  @media (max-width: 360px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
  .btn {
    font: 600 14px var(--f-body);
    color: var(--ink-brand);
    background: var(--surface);
    border: 1.5px solid var(--ink-brand);
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
  }
  .btn:hover { background: var(--highlight); }
  /* Link styled as a button, above the mascot's bubble */
  .site-link { justify-self: start; margin-bottom: 14px; padding: 9px 18px; font-size: 15px; text-decoration: none; }

  /* Theme toggle: sits in the top-right corner, inside the masthead's top padding */
  .theme-toggle {
    position: absolute;
    top: 16px; right: 0;
    z-index: 1;
    display: inline-flex; align-items: center; gap: 6px;
  }
  @media (max-width: 980px) { .theme-toggle { top: 8px; } }
  .theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  :root:not([data-theme="dark"]) .theme-toggle .ic-sun, :root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

  /* ---------- Main column ---------- */
  main { display: grid; gap: 28px; min-width: 0; padding-bottom: 48px; align-content: start; }
  .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(18px, 3vw, 28px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-width: 0;
  }
  .reveal { display: flex; align-items: center; gap: 14px; }
  .reveal::before, .reveal::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .reveal .btn { padding: 8px 18px; font-size: 15px; }
  /* Three steps: short answer, details, the math */
  .step { display: grid; gap: var(--step-gap); min-width: 0; }
  .step[hidden] { display: none; }
  /* Room above the first step tag so it does not sit against the bar above it */
  #step-1 { padding-top: 24px; }
  /* The negative margin keeps the step tag close to its first box; the boxes below keep the full step gap */
  .step-head { display: grid; gap: 4px; min-height: var(--step-head-h); align-content: center; margin-bottom: calc(var(--step-head-gap) - var(--step-gap)); }
  .step-head p { color: var(--ink-2); max-width: 70ch; }
  .panel-tight { padding-bottom: calc(clamp(18px, 3vw, 28px) - 6px); }
  .panel-head { display: grid; gap: 6px; }
  .panel-head h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; }
  .panel-head h2.one-line { font-size: clamp(20px, 5.6vw, 30px); white-space: nowrap; }
  #d1-intro { white-space: normal; text-wrap: pretty; } /* too long for the one-line question style */
  #d2-head { text-wrap: pretty; } /* balance would squeeze this long question into short lines */
  .panel-head p { color: var(--ink-2); max-width: 70ch; }
  .stage-tag { display: flex; gap: 10px; align-items: center; }
  .stage-tag .eyebrow { font-weight: 700; color: var(--ink-brand); }
  .stage-no {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--ink-brand); color: var(--surface);
    font: 700 12px var(--f-body);
  }

  /* Verdict: Snow Blue highlight banner, Anchor Blue text */
  .verdict { gap: 22px; background: var(--highlight); border-color: transparent; }
  .verdict[hidden] { display: none; }
  /* Question headings: the verdict questions and the Step 2 opener share one size */
  .verdict, .question-panel { container-type: inline-size; }
  .verdict h2, .question-panel .panel-head h2 { font-size: clamp(20px, 2vw, 23px); line-height: 1.15; white-space: nowrap; }
  @container (max-width: 560px) { .verdict h2, .question-panel .panel-head h2 { font-size: 20px; white-space: normal; } }
  .verdict .disclaimer { font-size: 13px; line-height: 1.45; color: var(--ink-2); text-align: center; max-width: 80ch; justify-self: center; margin-top: -8px; }
  .verdict .why { color: var(--ink); font-size: 17px; max-width: 72ch; }
  .scenarios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  @media (max-width: 640px) { .scenarios { grid-template-columns: minmax(0, 1fr); } }
  .scenario {
    background: var(--surface);
    border: 1.5px solid var(--ink-brand);
    box-shadow: var(--shadow);
    border-radius: var(--r-md);
    padding: 18px;
    display: grid;
    gap: 14px;
    align-content: start;
  }
  .scenario-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .scenario-name { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 16px; color: var(--ink-brand); }
  .swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
  .sw-buy { background: var(--buy); }
  .sw-rent { background: var(--rent); }
  .sw-buy-soft { background: color-mix(in srgb, var(--buy) 50%, var(--surface)); }
  .sw-rent-soft { background: color-mix(in srgb, var(--rent) 50%, var(--surface)); }
  .sw-short { background: repeating-linear-gradient(135deg, var(--short) 0 2px, transparent 2px 5px); border: 1px solid var(--short); }
  .scenario .big { font: 700 clamp(34px, 3.8vw, 44px)/1 var(--f-body); letter-spacing: -0.02em; color: var(--ink-brand); }
  .scenario .big-label { font-size: 14px; color: var(--muted); margin-top: 6px; }
  .kv { display: grid; gap: 8px; margin: 0; }
  .kv > div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; border-top: 1px solid var(--line); padding-top: 8px; }
  .kv dt { color: var(--ink-2); }
  .kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); white-space: nowrap; }
  .kv-tag { font-size: calc(1em / 2); } /* "(Default)" note: half the row's text size */
  @media (max-width: 640px) { .kv-tag { font-size: 11px; } } /* half size is too small to read on a phone */
  .kv .total dt { color: var(--ink-brand); font-weight: 500; }
  .kv .total dd { font-weight: 700; color: var(--ink-brand); }
  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 13px var(--f-body);
    border-radius: 999px; padding: 4px 11px; white-space: nowrap;
  }
  .pill.good { color: var(--good-text); background: var(--good-bg); }
  .pill.bad { color: var(--alert-text); background: var(--alert-bg); }
  .pill svg { width: 12px; height: 12px; }

  /* Breakdown columns: buy left, rent right; each matching group shares a grid row (--r) */
  .pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .pg-cell { display: grid; gap: 10px; align-content: start; min-width: 0; grid-row: var(--r); padding: 0 18px 10px; }
  .pg-head { padding-top: 18px; }
  .pg-last { padding-bottom: 18px; }
  /* Same frame as the step 1 boxes, drawn behind each column's cells */
  .pg-frame {
    grid-row: var(--r);
    background: var(--surface);
    border: 1.5px solid var(--ink-brand);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
  }
  .pg-buy { grid-column: 1; }
  .pg-rent { grid-column: 2; }
  .pair-grid h3 { font-size: 17px; display: flex; align-items: center; gap: 9px; }
  /* A follow-on grid under the columns above: its Buy/Rent headings only show when stacked */
  @media (min-width: 641px) {
    .pair-grid-sub .pg-head { padding-bottom: 0; } /* keeps only the frame's top padding */
    .pair-grid-sub .pg-head > * { display: none; }
  }
  /* Stacked on phones: every buy group first, then every rent group */
  @media (max-width: 640px) {
    .pair-grid { grid-template-columns: minmax(0, 1fr); }
    .pg-cell, .pg-frame { grid-row: var(--rs); grid-column: 1; }
    .pg-last { padding-bottom: 10px; }
    .pg-end { padding-bottom: 18px; }
    .pg-rent.pg-frame, .pg-rent.pg-head { margin-top: 14px; }
  }
  /* Small phones: less padding on the boxes inside boxes, so the text gets the width */
  @media (max-width: 480px) {
    .panel { padding: 16px 14px; }
    .scenario { padding: 16px 14px; }
    .pg-cell { padding-inline: 14px; }
  }
  .kv-cont { margin-top: -2px; } /* rows continued from the cell above; matches the .kv gap */
  .kv-title { font: 600 12px/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 15px 0 -2px; }
  .kv-f dt { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
  .kv-f dd { white-space: nowrap; }
  .kv .formula { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .legacy-block { display: grid; gap: 12px; }
  .legacy-block > p { color: var(--ink-2); max-width: 70ch; }
  .note {
    background: var(--surface-2);
    border-radius: var(--r-md);
    padding: 14px 16px;
    color: var(--ink);
    font-size: 15px;
    display: grid;
    gap: 6px;
  }
  .note strong { color: var(--ink-brand); font-weight: 600; }

  /* Charts */
  .chart-block { display: grid; gap: 10px; min-width: 0; }
  .chart-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .chart-title { font-weight: 500; font-size: 15.5px; color: var(--ink-brand); }
  .legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); margin: 0; padding: 0; list-style: none; }
  .legend li { display: flex; align-items: center; gap: 7px; }
  .legend .key { width: 18px; height: 3px; border-radius: 2px; }
  .chart { position: relative; min-width: 0; outline: none; }
  .chart:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
  .chart svg { display: block; width: 100%; overflow: visible; }
  .chart text { font: 500 12px var(--f-body); fill: var(--muted); font-variant-numeric: tabular-nums; }
  .chart .end-label { font-weight: 700; fill: var(--ink-brand); font-size: 13px; }
  .chart .band-label { font-weight: 600; font-size: 11px; fill: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
  .chart .grid { stroke: var(--line); stroke-width: 1; }
  .chart .base { stroke: var(--line-strong); stroke-width: 1; }
  .chart .band { fill: var(--surface-2); }
  .chart .marker { stroke: var(--line-strong); stroke-width: 1; }
  .chart .ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
  .chart .ln.buy { stroke: var(--buy); }
  .chart .ln.rent { stroke: var(--rent); stroke-width: 3; }
  .chart .dot { stroke: var(--surface); stroke-width: 2; }
  .chart .dot.buy { fill: var(--buy); }
  .chart .dot.rent { fill: var(--rent); }
  .chart .cross { stroke: var(--ink-2); stroke-width: 1; }
  .tip {
    position: absolute; top: 0; left: 0;
    pointer-events: none;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 9px 11px;
    font-size: 13px;
    min-width: 180px;
    display: grid;
    gap: 5px;
    z-index: 2;
  }
  .tip[hidden] { display: none; }
  .tip .t-head { font-weight: 600; font-size: 11.5px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
  .tip .t-row { display: flex; align-items: center; gap: 8px; }
  .tip .t-row span:nth-child(2) { color: var(--ink-2); flex: 1; }
  .tip .t-row b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }

  details.data { min-width: 0; }
  details.data > summary {
    cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink-brand);
    width: max-content; max-width: 100%;
  }
  .table-scroll { overflow-x: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-md); max-height: 360px; }
  table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
  th, td { padding: 7px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
  th:first-child, td:first-child { text-align: left; }
  thead th { position: sticky; top: 0; background: var(--surface-2); font-weight: 600; color: var(--ink-brand); font-size: 13px; }
  tbody tr:last-child td { border-bottom: 0; }

  /* Funding & legacy bars */
  .fund { display: grid; gap: 12px; align-content: start; border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
  @media (max-width: 480px) { .fund { padding: 14px 12px; } }
  .fund .need { font: 700 30px/1.1 var(--f-body); letter-spacing: -0.01em; color: var(--ink-brand); }
  .fund .need-sub { font-size: 14px; color: var(--muted); }
  .stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
  .stack > i { display: block; height: 100%; min-width: 0; }
  .seg-buy { background: var(--buy); }
  .seg-buy-soft { background: color-mix(in srgb, var(--buy) 50%, var(--surface)); }
  .seg-rent { background: var(--rent); }
  .seg-rent-soft { background: color-mix(in srgb, var(--rent) 50%, var(--surface)); }
  .seg-short { background: repeating-linear-gradient(135deg, var(--short) 0 2px, color-mix(in srgb, var(--short) 25%, var(--surface)) 2px 5px); }
  .fund-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
  .fund-list li { display: flex; align-items: center; gap: 8px; }
  .fund-list li span:nth-child(2) { flex: 1; color: var(--ink-2); }
  .fund-list b { font-variant-numeric: tabular-nums; color: var(--ink); }
  .fund p { font-size: 14.5px; color: var(--ink-2); }
  .fund p strong { color: var(--ink-brand); font-weight: 600; }

  .legacy-rows { display: grid; gap: 16px; }
  .legacy-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 96px; gap: 14px; align-items: center; }
  @media (max-width: 560px) { .legacy-row { grid-template-columns: minmax(0, 1fr) auto; } .legacy-row .stack { grid-column: 1 / -1; grid-row: 2; } }
  .legacy-row .who { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--ink-brand); }
  .legacy-row .stack { height: 24px; background: transparent; }
  .legacy-row .stack > i:last-child { border-radius: 0 4px 4px 0; }
  .legacy-row .amt { font: 700 19px var(--f-body); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-brand); }

  /* ---------- Footer ---------- */
  /* Always light, like the banner: it uses the brand colors directly instead of the role
     variables that dark mode redefines, so the logos and badges keep their own colors.
     Full width like the banner; position: relative paints it above the fixed .peek mascot. */
  .site-footer {
    color-scheme: light;
    position: relative;
    margin-inline: -16px;
    background: var(--bright-white);
    color: var(--deep-ocean);
    border-top: 1px solid color-mix(in srgb, var(--anchor-blue) 14%, var(--bright-white));
  }
  .footer-inner { max-width: 1160px; margin-inline: auto; padding: 48px 24px 32px; }
  .footer-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
  .footer-col { display: grid; gap: 28px; align-content: start; }
  .site-footer ul { list-style: none; margin: 0; padding: 0; }
  .site-footer a { color: var(--anchor-blue); text-decoration: none; }
  .site-footer a:hover { text-decoration: underline; }
  /* Clear Sky on white is approved for large text only (14pt bold or larger) */
  .footer-head { font: 700 19px/1.3 var(--f-body); letter-spacing: 0; color: var(--clear-sky); margin-bottom: 12px; }
  .footer-col ul { display: grid; gap: 10px; }
  .footer-col li, .footer-col address { font-size: 14px; font-weight: 500; line-height: 1.4; }
  .footer-col address { font-style: normal; display: grid; gap: 10px; color: var(--anchor-blue); }
  /* Brand column: each logo with its tagline, then the social icons */
  .footer-brand { display: grid; gap: 22px; align-content: start; justify-items: start; }
  .fb-item { display: grid; gap: 4px; justify-items: start; }
  .site-footer .fb-item:hover { text-decoration: none; }
  .fb-item:hover .fb-tag { text-decoration: underline; }
  .fb-logo-main { height: 28px; width: auto; }
  .fb-logo { height: 20px; width: auto; }
  .fb-tag { font-size: 13px; font-weight: 500; color: var(--soft-horizon); }
  .footer-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
  .footer-social a { display: block; line-height: 0; border-radius: 50%; }
  .footer-social img { width: 24px; height: 24px; }
  /* Compliance disclosures under a rule, centered */
  .footer-legal { display: grid; gap: 8px; justify-items: center; text-align: center; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--deep-ocean); }
  .footer-legal p { font-size: 12px; font-weight: 500; line-height: 1.5; max-width: 110ch; }
  .footer-legal a { color: var(--deep-ocean); text-decoration: underline; }
  .footer-badges { display: flex; gap: 20px; align-items: center; margin-top: 12px; }
  .footer-badges img { height: 48px; width: auto; }
  @media (max-width: 980px) {
    .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) {
    .footer-inner { padding: 36px 16px 28px; }
    .footer-top { grid-template-columns: minmax(0, 1fr); }
  }


  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }