/* ==========================================================================
   site.css — design system
   Monochrome and quiet. Deliberately not the default real-estate look
   (navy + gold + stock photography of keys). Black, white, and a controlled
   grey ramp, so the numbers carry the page instead of the chrome.
   Everything is tokenised: to re-theme the site, change the :root block and
   the two dark-mode blocks, plus the chart ramps in site.js and the four
   calculator pages.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
/* Monochrome. Hierarchy comes from value and weight, not hue — so contrast
   between adjacent greys has to be deliberate. The ramp below is spaced so
   every neighbouring pair stays distinguishable on a cheap laptop screen. */
:root {
  color-scheme: light dark;

  /* Surfaces */
  --bone:       #FFFFFF;
  --bone-2:     #F6F6F6;
  --bone-3:     #EAEAEA;
  --card:       #FFFFFF;

  /* Ink */
  --ink:        #0F0F0F;
  --ink-2:      #333333;
  --muted:      #6E6E6E;
  --faint:      #9A9A9A;

  /* Line */
  --line:       #E0E0E0;
  --line-soft:  #EEEEEE;

  /* Accent — black. Interactive elements rely on weight, underline, and
     fill rather than colour, so links stay obvious without a hue. */
  --clay:       #0F0F0F;
  --clay-deep:  #000000;
  --clay-soft:  #F0F0F0;
  --sage:       #4A4A4A;
  --sage-soft:  #F2F2F2;
  --gold:       #B5B5B5;   /* eyebrows on dark panels */

  /* Semantic. Kept monochrome — direction is carried by the +/− sign and by
     weight, with value as reinforcement. */
  --pos:        #0F0F0F;
  --neg:        #808080;
  --warn:       #4A4A4A;
  --warn-soft:  #F2F2F2;

  /* Categorical ramp for charts and breakdowns. Six steps, evenly spaced in
     luminance so adjacent segments never blur together. */
  --c1: #0F0F0F;
  --c2: #3D3D3D;
  --c3: #626262;
  --c4: #878787;
  --c5: #ACACAC;
  --c6: #D0D0D0;

  /* Type */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  /* Space + shape */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 18px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(26,33,30,.06), 0 1px 3px rgba(26,33,30,.04);
  --shadow:    0 2px 4px rgba(26,33,30,.04), 0 8px 24px rgba(26,33,30,.07);
  --shadow-lg: 0 4px 8px rgba(26,33,30,.05), 0 24px 56px rgba(26,33,30,.12);

  --maxw: 1180px;
  --nav-h: 72px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bone:      #0C0C0C;
    --bone-2:    #151515;
    --bone-3:    #202020;
    --card:      #151515;

    --ink:       #F7F7F7;
    --ink-2:     #D4D4D4;
    --muted:     #9A9A9A;
    --faint:     #6E6E6E;

    --line:      #2B2B2B;
    --line-soft: #222222;

    --clay:      #FFFFFF;
    --clay-deep: #E0E0E0;
    --clay-soft: #1F1F1F;
    --sage:      #B0B0B0;
    --sage-soft: #1C1C1C;
    --gold:      #A8A8A8;

    --pos:       #FFFFFF;
    --neg:       #8A8A8A;
    --warn:      #C0C0C0;
    --warn-soft: #1E1E1E;

    /* Ramp inverts so the "heaviest" category stays the most prominent. */
    --c1: #FFFFFF;
    --c2: #CFCFCF;
    --c3: #A6A6A6;
    --c4: #7D7D7D;
    --c5: #585858;
    --c6: #3A3A3A;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow:    0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 24px 56px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bone: #0C0C0C; --bone-2: #151515; --bone-3: #202020; --card: #151515;
  --ink: #F7F7F7; --ink-2: #D4D4D4; --muted: #9A9A9A; --faint: #6E6E6E;
  --line: #2B2B2B; --line-soft: #222222;
  --clay: #FFFFFF; --clay-deep: #E0E0E0; --clay-soft: #1F1F1F;
  --sage: #B0B0B0; --sage-soft: #1C1C1C; --gold: #A8A8A8;
  --pos: #FFFFFF; --neg: #8A8A8A; --warn: #C0C0C0; --warn-soft: #1E1E1E;
  --c1: #FFFFFF; --c2: #CFCFCF; --c3: #A6A6A6; --c4: #7D7D7D; --c5: #585858; --c6: #3A3A3A;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow: 0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 24px 56px rgba(0,0,0,.6);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* --- Type --------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -0.022em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.06rem; font-family: var(--sans); font-weight: 600; letter-spacing: -0.005em; }

p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

.eyebrow {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 1rem;
}
.lede { font-size: clamp(1.08rem, 1.6vw, 1.28rem); color: var(--ink-2); line-height: 1.6; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.tiny  { font-size: .78rem; line-height: 1.5; }
.tnum  { font-variant-numeric: tabular-nums; }

/* --- Layout ------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.wrap-narrow { max-width: 760px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-alt { background: var(--bone-2); }
.section-ink { background: var(--ink); color: var(--bone-3); }
.section-ink h1, .section-ink h2, .section-ink h3 { color: var(--bone); }
.section-ink .eyebrow { color: var(--gold); }

.stack   > * + * { margin-top: 1.1rem; }
.stack-s > * + * { margin-top: .55rem; }
.stack-l > * + * { margin-top: 2rem; }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.center { text-align: center; }
.center-x { margin-inline: auto; }

/* --- Nav ---------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bone) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav > .wrap { display: flex; align-items: center; gap: 2rem; width: 100%; }

.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; margin-right: auto; }

/* Small avatar in the nav. Scaled up inside an overflow-hidden circle so the
   crop lands on the face rather than head-and-shoulders — the source is a
   landscape studio shot, so a plain cover crop reads as too far away. */
.brand-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  background: var(--bone-3);
  border: 1px solid var(--line);
}
.brand-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transform: scale(1.12);
  transform-origin: 50% 30%;
}
.brand-mark {
  font-family: var(--display); font-size: 1.22rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.02em; white-space: nowrap;
}
.brand-sub {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; white-space: nowrap;
}
/* Hide early — the nav has six links and the subtitle is the first thing that
   should give up horizontal room. */
@media (max-width: 1180px) { .brand-sub { display: none; } }

.nav-links { display: flex; align-items: center; gap: .35rem; list-style: none; padding: 0; }
.nav-links a {
  display: block; padding: .5rem .75rem; border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 500; color: var(--ink-2);
  text-decoration: none; transition: background .18s, color .18s;
}
.nav-links a:hover { background: var(--bone-3); color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--clay); font-weight: 600; }
/* `.nav-links a` (0,1,1) outranks `.btn-primary` (0,1,0), so without this the
   CTA renders as #333 text on a near-black fill. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: var(--bone); background: var(--clay); }
.nav-links a.btn-primary:hover { background: var(--clay-deep); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .45rem .6rem; cursor: pointer; color: var(--ink);
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bone); border-bottom: 1px solid var(--line);
    padding: .75rem clamp(1.25rem, 4vw, 2.5rem) 1.25rem;
    box-shadow: var(--shadow);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .18s, transform .18s;
  }
  .nav-links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: .8rem .5rem; border-bottom: 1px solid var(--line-soft); }
  .nav-links .btn { margin-top: .75rem; text-align: center; }
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: .94rem; font-weight: 600;
  padding: .8rem 1.4rem; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .18s, border-color .18s, color .18s, transform .12s, box-shadow .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--clay); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--clay-deep); box-shadow: var(--shadow); }
/* On the dark palette the clay token lightens, so flip the label to dark ink
   to keep contrast on the AA side of the line. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { color: #0F0F0F; }
}
:root[data-theme="dark"] .btn-primary { color: #0F0F0F; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bone-3); border-color: var(--muted); }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { background: var(--ink-2); }
.btn-sm { padding: .55rem 1rem; font-size: .86rem; }
.btn-lg { padding: 1rem 1.9rem; font-size: 1rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--clay); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .18s, gap .18s;
}
.link-arrow:hover { border-bottom-color: currentColor; gap: .6rem; }

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 2.5vw, 2rem);
}
.card-hover { transition: transform .2s, box-shadow .2s, border-color .2s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line); }
.card-flush { padding: 0; overflow: hidden; }

/* Tool cards on the index */
.tool-card {
  display: flex; flex-direction: column; gap: .7rem;
  text-decoration: none; color: inherit; height: 100%;
}
.tool-icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--r); background: var(--clay-soft); color: var(--clay);
  margin-bottom: .3rem;
}
.tool-card h3 { font-family: var(--sans); font-size: 1.08rem; font-weight: 650; letter-spacing: -.01em; }
.tool-card p { font-size: .92rem; color: var(--muted); line-height: 1.55; }
.tool-card .link-arrow { margin-top: auto; padding-top: .6rem; font-size: .89rem; }

/* --- Forms -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field > label, .label {
  font-size: .82rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.field-hint { font-size: .74rem; color: var(--faint); line-height: 1.45; }

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], select, textarea {
  font-family: var(--sans); font-size: .95rem; color: var(--ink);
  background: var(--bone); border: 1px solid var(--line);
  border-radius: var(--r); padding: .62rem .75rem; width: 100%;
  transition: border-color .16s, box-shadow .16s, background .16s;
  font-variant-numeric: tabular-nums;
}
textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--clay); background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 16%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
select {
  appearance: none; padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7873' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center;
}

/* Money / percent inputs with an affix */
.affix { position: relative; display: flex; align-items: center; }
.affix > span {
  position: absolute; font-size: .9rem; color: var(--faint);
  pointer-events: none; font-weight: 500;
}
.affix-pre  > span { left: .75rem; }
.affix-pre  > input { padding-left: 1.65rem; }
.affix-post > span { right: .75rem; }
.affix-post > input { padding-right: 2rem; }

/* Range + number paired control */
/* 112px fits "$3,000,000" typed as 3000000 without clipping. */
.range-row { display: grid; grid-template-columns: 1fr 112px; gap: .6rem; align-items: center; }
.range-row input[type="number"] { padding-inline: .55rem; }
.range-row .affix-post > input { padding-right: 1.75rem; }
.range-row .affix-post > span { right: .55rem; }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px; padding: 0;
  background: var(--line); cursor: pointer; border: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--clay); border: 2px solid var(--card);
  box-shadow: 0 1px 4px rgba(26,33,30,.25); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; background: var(--clay);
  border: 2px solid var(--card); cursor: grab;
}
input[type="range"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 20%, transparent); }

/* Segmented toggle */
.segmented { display: inline-flex; background: var(--bone-3); border-radius: var(--r); padding: 3px; gap: 2px; }
.segmented button {
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
  padding: .4rem .8rem; border: none; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background .16s, color .16s;
}
.segmented button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }

.check {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .88rem; line-height: 1.5; cursor: pointer;
}
.check input { width: auto; margin-top: .2rem; accent-color: var(--clay); flex-shrink: 0; }

/* --- Calculator shell --------------------------------------------------- */
.calc { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 940px) { .calc { grid-template-columns: 1fr; } }

.calc-inputs {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
@media (min-width: 941px) { .calc-inputs { position: sticky; top: calc(var(--nav-h) + 1.25rem); } }

.calc-results { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

fieldset { border: none; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
legend {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  padding: 0 0 .1rem; width: 100%;
  border-bottom: 1px solid var(--line-soft); margin-bottom: .35rem;
}

/* --- Simple / Detailed mode --------------------------------------------
   One rule does all the hiding. Inputs keep their values while hidden, so
   the two modes always produce the same number — Simple asks fewer
   questions, it does not compute a rougher answer.
   ---------------------------------------------------------------------- */
.calc.mode-simple [data-adv] { display: none !important; }

.mode-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: .25rem;
  border-bottom: 1px solid var(--line-soft);
}
.mode-more {
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  transition: color .16s;
}
.mode-more:hover { color: var(--ink); }
/* In Detailed there is nothing more to reveal, so the invitation goes away. */
.calc:not(.mode-simple) .mode-more { display: none; }

.mode-note {
  font-size: .76rem; line-height: 1.55; color: var(--faint);
  border-top: 1px solid var(--line-soft); padding-top: .9rem;
}
.mode-note strong { color: var(--muted); font-weight: 600; }

details.advanced { border-top: 1px solid var(--line-soft); padding-top: .9rem; }
details.advanced > summary {
  cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--clay);
  list-style: none; display: flex; align-items: center; gap: .4rem;
}
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before { content: '+'; font-size: 1rem; line-height: 1; }
details.advanced[open] > summary::before { content: '–'; }
details.advanced > *:not(summary) { margin-top: .9rem; }

/* --- Result display ----------------------------------------------------- */
.headline-figure {
  background: var(--ink); color: var(--bone);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.25rem);
}
.headline-figure .label {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: .4rem;
}
.headline-figure .figure {
  font-family: var(--display); font-size: clamp(2.6rem, 6.5vw, 4rem);
  line-height: 1; letter-spacing: -.035em; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.headline-figure .figure-note { color: color-mix(in srgb, var(--bone) 62%, transparent); font-size: .92rem; margin-top: .6rem; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: var(--card); padding: 1.05rem 1.15rem; }
.stat .k { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.stat .v { font-family: var(--display); font-size: 1.5rem; color: var(--ink); letter-spacing: -.02em; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.stat .s { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
.stat .v.pos { color: var(--pos); }
.stat .v.neg { color: var(--neg); }

/* Breakdown list with a proportional bar */
.breakdown { display: flex; flex-direction: column; }
.breakdown-row {
  display: grid; grid-template-columns: 10px 1fr auto;
  gap: .75rem; align-items: center;
  padding: .62rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: .93rem;
}
.breakdown-row:last-child { border-bottom: none; }
.breakdown-row .swatch { width: 10px; height: 10px; border-radius: 3px; }
.breakdown-row .amt { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.breakdown-row.total {
  border-top: 2px solid var(--ink); border-bottom: none;
  margin-top: .3rem; padding-top: .8rem; font-size: 1.02rem;
}
.breakdown-row.total .amt { font-family: var(--display); font-size: 1.3rem; }
.breakdown-row.credit .amt { color: var(--neg); }

/* Stacked proportion bar */
.propbar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--bone-3); }
.propbar > span { display: block; height: 100%; }

/* Chart canvas holder */
.chart-wrap { position: relative; width: 100%; overflow-x: auto; }
.chart { width: 100%; height: auto; display: block; }

/* Table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .89rem; }
th, td { text-align: right; padding: .62rem .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; }
thead th {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; background: var(--bone-2);
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
}
tbody tr + tr td { border-top: 1px solid var(--line-soft); }
tbody tr:hover td { background: var(--bone-2); }

/* --- Callouts ----------------------------------------------------------- */
.callout {
  border-radius: var(--r); padding: .95rem 1.1rem;
  font-size: .89rem; line-height: 1.55;
  display: flex; gap: .7rem; align-items: flex-start;
  border: 1px solid;
}
.callout-info  { background: var(--sage-soft); border-color: color-mix(in srgb, var(--sage) 26%, transparent); color: var(--ink-2); }
.callout-warn  { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 34%, transparent); color: var(--ink-2); }
.callout-clay  { background: var(--clay-soft); border-color: color-mix(in srgb, var(--clay) 24%, transparent); color: var(--ink-2); }
.callout strong { color: var(--ink); }
.callout svg { flex-shrink: 0; margin-top: .15rem; }

.disclaimer {
  font-size: .76rem; line-height: 1.6; color: var(--faint);
  border-top: 1px solid var(--line-soft); padding-top: 1rem;
}

/* --- Badges / pills ----------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  padding: .28rem .65rem; border-radius: 999px;
  background: var(--bone-3); color: var(--ink-2);
}
.pill-clay { background: var(--clay-soft); color: var(--clay-deep); }
.pill-sage { background: var(--sage-soft); color: var(--sage); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 55% at 78% 18%, color-mix(in srgb, var(--clay) 9%, transparent), transparent 68%),
    radial-gradient(60% 50% at 8% 82%, color-mix(in srgb, var(--sage) 11%, transparent), transparent 70%);
}
/* Fixed photo column + a capped text column, packed to the start.
   Do NOT use fractional columns here: a small portrait inside a wide `.85fr`
   column gets stranded at the far right and opens a ~270px hole in the middle
   of the hero. Sizing the column to the image keeps the gap equal to the grid
   gap, and the leftover width falls at the outer edge where it reads as margin. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 620px) 280px;
  justify-content: start;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* --- Portrait -----------------------------------------------------------
   Built for a white-background studio headshot. The photo sits on a warm
   tinted arch and uses mix-blend-mode: multiply, which makes a pure-white
   backdrop disappear into the shape — no cutout or alpha channel needed.
   The shape stays light in both themes so the blend keeps working.
   ---------------------------------------------------------------------- */
.portrait { position: relative; }

/* The portrait fills whatever column it's given — the column controls the
   size, not a max-width on the image. Capping the image inside a wider column
   is what strands it away from the text. */
@media (max-width: 900px) {
  .hero .portrait { max-width: 300px; }
}

.portrait-shape {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% var(--r-xl) var(--r-xl) / 42% 42% var(--r-xl) var(--r-xl);
  background:
    radial-gradient(85% 70% at 50% 92%, rgba(15,15,15,.10), transparent 70%),
    linear-gradient(165deg, #FAFAFA 0%, #F0F0F0 55%, #E4E4E4 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}

.portrait-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  mix-blend-mode: multiply;   /* white studio background dissolves into the arch */
  background: transparent;
}

/* If a photo already has a transparent or non-white background, add
   class="is-cutout" to .portrait-shape to switch the blend off. */
.portrait-shape.is-cutout img { mix-blend-mode: normal; }
/* Placeholder state until a real headshot is dropped in */
.portrait-placeholder {
  width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--bone-3), var(--bone-2));
  border: 2px dashed var(--line);
  display: grid; place-content: center; text-align: center; gap: .5rem;
  padding: 2rem; color: var(--faint);
}
.portrait-caption {
  position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: .5rem 1.1rem;
  font-size: .8rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow); white-space: nowrap;
}

/* --- Hero offer list ---------------------------------------------------- */
.offer-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  /* 180px lets all five fit on one row at desktop instead of orphaning the
     fifth; below that they reflow to 3, then 2, then 1. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 1.5rem clamp(1rem, 2vw, 1.75rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.5rem, 3vw, 2rem) !important;
}
.offer-list li { display: flex; gap: .7rem; align-items: flex-start; }
.offer-list strong {
  display: block; font-size: .93rem; font-weight: 650;
  color: var(--ink); margin-bottom: .15rem;
}
.offer-list span:not(.offer-ico) { font-size: .84rem; line-height: 1.5; color: var(--muted); }
.offer-list a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.offer-ico {
  flex-shrink: 0; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px; background: var(--bone-3); color: var(--ink);
}

/* --- Story / values ----------------------------------------------------- */
.value-item { display: flex; gap: 1rem; align-items: flex-start; }
.value-num {
  font-family: var(--display); font-size: 1.05rem; color: var(--clay);
  border: 1px solid color-mix(in srgb, var(--clay) 32%, transparent);
  border-radius: 50%; width: 38px; height: 38px;
  display: grid; place-items: center; flex-shrink: 0;
}

.quote {
  font-family: var(--display); font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.4; color: var(--ink); letter-spacing: -.018em;
  border-left: 3px solid var(--clay); padding-left: clamp(1.25rem, 3vw, 2rem);
}
.section-ink .quote { color: var(--bone); border-left-color: var(--gold); }

/* --- Market explorer ---------------------------------------------------- */
.market-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; }
@media (max-width: 900px) { .market-layout { grid-template-columns: 1fr; } }

.city-list { max-height: 620px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.city-item {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  width: 100%; text-align: left; background: none; border: none;
  padding: .7rem 1rem; cursor: pointer; font-family: var(--sans);
  border-bottom: 1px solid var(--line-soft); transition: background .14s;
}
.city-item:last-child { border-bottom: none; }
.city-item:hover { background: var(--bone-2); }
.city-item[aria-selected="true"] { background: var(--clay-soft); }
.city-item[aria-selected="true"] .city-name { color: var(--clay-deep); font-weight: 650; }
.city-name { font-size: .93rem; font-weight: 550; color: var(--ink); }
.city-county { font-size: .74rem; color: var(--faint); }
.city-price { font-size: .86rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.county-group {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); padding: .8rem 1rem .35rem; background: var(--bone-2);
  border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 1;
}

.delta-up   { color: var(--pos); font-weight: 600; }
.delta-down { color: var(--neg); font-weight: 600; }
.delta-flat { color: var(--muted); font-weight: 600; }

/* --- Alerts / saved search ---------------------------------------------- */
.alert-panel {
  background: linear-gradient(155deg, var(--ink), color-mix(in srgb, var(--ink) 82%, var(--sage)));
  color: var(--bone-3); border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.alert-panel h2, .alert-panel h3 { color: var(--bone); }
.alert-panel .eyebrow { color: var(--gold); }
.alert-panel input, .alert-panel select {
  background: color-mix(in srgb, var(--bone) 8%, transparent);
  border-color: color-mix(in srgb, var(--bone) 20%, transparent);
  color: var(--bone);
}
.alert-panel input::placeholder { color: color-mix(in srgb, var(--bone) 42%, transparent); }
.alert-panel input:focus, .alert-panel select:focus {
  background: color-mix(in srgb, var(--bone) 13%, transparent);
  border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.alert-panel .label, .alert-panel .check { color: var(--bone-3); }
.alert-panel .field-hint { color: color-mix(in srgb, var(--bone) 52%, transparent); }

/* --- Footer ------------------------------------------------------------- */
.footer { background: var(--ink); color: color-mix(in srgb, var(--bone) 70%, transparent); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer a { color: color-mix(in srgb, var(--bone) 82%, transparent); text-decoration: none; }
.footer a:hover { color: var(--bone); text-decoration: underline; }
.footer h4 { color: var(--bone); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .85rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; }

.legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--bone) 14%, transparent);
  font-size: .76rem; line-height: 1.65;
  color: color-mix(in srgb, var(--bone) 52%, transparent);
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start;
}
.legal .housing-logos { display: flex; gap: .75rem; align-items: center; flex-shrink: 0; }
.legal .housing-logos svg { opacity: .65; }

/* --- Responsive grid collapse -------------------------------------------
   Two-column layouts declared with an inline `grid-template-columns` collapse
   to one column here. This MUST be CSS with !important rather than JS: an
   inline declaration can't be restored by setting the property back to '',
   which just deletes it and leaves the grid stacked at every width.
   Add data-collapse (860px) or data-collapse="sm" (720px) to the grid.
   ---------------------------------------------------------------------- */
@media (max-width: 860px) {
  [data-collapse]:not([data-collapse="sm"]) { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  [data-collapse="sm"] { grid-template-columns: 1fr !important; }
}

/* --- Utility ------------------------------------------------------------ */
.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;
}
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 3px; }
.hidden { display: none !important; }
.divider { height: 1px; background: var(--line); border: none; }

/* Reveal-on-scroll (progressive: visible by default if JS is off) */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

@media print {
  .nav, .footer, .btn, .calc-inputs { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .calc { grid-template-columns: 1fr; }
}


/* ===== Long-form pages: articles, privacy, terms =========================== */
.article h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin: .35rem 0 .75rem; }
.article h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin: 2.2rem 0 .6rem; }
.article h3 { font-size: 1.12rem; margin: 1.6rem 0 .4rem; }
.article p, .article li { line-height: 1.7; color: var(--ink-2); }
.article p + p { margin-top: .9rem; }
.article ul, .article ol { padding-left: 1.25rem; margin: .6rem 0; }
.article li + li { margin-top: .35rem; }
.article a { color: var(--clay); text-underline-offset: 2px; }
.article table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.article th, .article td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
.article .sources { font-size: .86rem; }
.article .sources li { overflow-wrap: anywhere; }
.article .byline { color: var(--muted); font-size: .9rem; }
.article .note { background: var(--bone-2); border-radius: 12px; padding: 1rem 1.15rem; font-size: .92rem; margin: 1.5rem 0; }
.post-list { list-style: none; padding: 0; }
.post-list li + li { margin-top: 1rem; }