@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 {
    /* 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;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: var(--deep-ocean);
      --surface: #00324c; /* Anchor Blue 25% over Deep Ocean */
      --surface-2: #003e5a; /* Anchor Blue 50% over Deep Ocean */
      --highlight: #003e5a;
      --ink: var(--bright-white);
      --ink-brand: var(--snow-blue);
      --ink-2: var(--snow-blue);
      --muted: #9ebdcb; /* Snow Blue 75% over surface */
      --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);
    }
  }
  :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 {
    background: var(--bg);
    color: var(--ink);
    font: 400 16px/1.55 var(--f-body);
    padding-inline: 16px;
    padding-block: 0 48px;
  }
  .wrap { max-width: 1240px; margin-inline: auto; }
  .brand-strip { height: 6px; background: var(--gradient-4); margin-inline: -16px; }

  /* 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 ---------- */
  .layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
  @media (max-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr); } }

  /* ---------- Inputs ---------- */
  .inputs {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px;
    display: grid;
    gap: 12px;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    max-height: calc(100vh - 32px);
    overflow: auto;
  }
  @media (max-width: 980px) { .inputs { position: static; max-height: none; } }
  .fieldset { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
  .fieldset > legend { padding: 0; margin-bottom: 0; }
  .fieldset > legend.eyebrow { font-weight: 500; }
  .fieldset > legend.eyebrow.lead { font-weight: 700; font-size: 14px; color: var(--ink-brand); }
  .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;
    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: 1fr 1fr; gap: 6px 8px; }
  .grid-2 .field label { font-size: 10px; color: var(--ink-2); }
  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: 500;
    font-size: 14px;
    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; }
  .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); }

  /* ---------- Main column ---------- */
  main { display: grid; gap: 28px; min-width: 0; }
  .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(18px, 3vw, 28px);
    display: grid;
    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; }
  .how { display: grid; gap: 28px; min-width: 0; }
  .how[hidden] { display: none; }
  .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; }
  .panel-head p { color: var(--ink-2); max-width: 70ch; }
  .stage-tag { display: flex; gap: 10px; align-items: center; }
  .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 { container-type: inline-size; }
  .verdict[hidden] { display: none; }
  .verdict h2 { font-size: clamp(20px, 2vw, 23px); line-height: 1.15; white-space: nowrap; }
  @container (max-width: 560px) { .verdict h2 { font-size: 20px; white-space: normal; } }
  .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 transparent;
    border-radius: var(--r-md);
    padding: 18px;
    display: grid;
    gap: 14px;
    align-content: start;
  }
  .scenario.win { border-color: var(--ink-brand); box-shadow: var(--shadow); }
  .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); }
  .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 */
  .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  @media (max-width: 640px) { .cols { grid-template-columns: minmax(0, 1fr); } }
  .col { display: grid; gap: 10px; align-content: start; }
  .col h3 { font-size: 17px; display: flex; align-items: center; gap: 9px; }
  .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; }
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
  .stat { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 2px; }
  .stat .label { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
  .stat .value { font: 700 24px/1.2 var(--f-body); letter-spacing: -0.01em; color: var(--ink-brand); }
  .stat .sub { font-size: 13px; color: var(--muted); }

  /* 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 > 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; }
  .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.method { display: grid; gap: 14px; color: var(--ink-2); font-size: 15px; padding: 8px 4px 0; }
  footer.method h2 { font-size: 20px; }
  footer.method ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; max-width: 80ch; }
  footer.method .fine { font-size: 13px; color: var(--muted); max-width: 80ch; }

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