/* ═══════════════════════════════════════════════════════════════
   DEALCHECK — MOBILE-FIRST COMPLETE REBUILD
   
   Design philosophy:
   - Phone is the ONLY canvas. All structure built for 390px.
   - Desktop gets a sidebar injected via @media — it doesn't change
     the base structure, it enhances it.
   - Touch targets minimum 48px. No hover-only states.
   - Every font size readable without zoom.
   - Inputs feel native, not shrunken web forms.
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  /* Palette — Dark theme */
  --c-bg:       #0f0f13;
  --c-surface:  #1b1b1f;
  --c-border:   rgba(255,255,255,0.08);
  --c-border2:  rgba(255,255,255,0.14);

  --c-ink:      #f0f0f6;
  --c-ink2:     #b0b0cc;
  --c-ink3:     #7a7a99;
  --c-ink4:     #555570;

  --c-blue:     #2563eb;
  --c-blue-d:   #1d4ed8;
  --c-blue-bg:  rgba(37,99,235,0.10);
  --c-blue-ring:rgba(37,99,235,.2);

  --c-green:    #04da7f;
  --c-green-bg: rgba(4,218,127,0.12);
  --c-amber:    #f59e0b;
  --c-amber-bg: rgba(245,158,11,0.12);
  --c-red:      #dc2626;
  --c-red-bg:   rgba(220,38,38,0.12);

  /* Nav / hero overrides */
  --c-nav:      #131317;
  --c-hero-bg:  #131317;
  --c-card-border: rgba(255,255,255,0.08);

  /* Type */
  --f-sans: 'Inter', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', monospace;

  /* Touch */
  --tap:     48px;
  --input-h: 52px;
  --r:       12px;
  --r-sm:    8px;

  /* Safe area */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 16px);

  /* Tab bar height — two-layer nav: wizard tabbar + inner tabbar */
  --wizard-tabbar-h: calc(58px + var(--sab));
  --tabbar-h: calc(58px + var(--sab));
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-sans);
  background: var(--c-bg);
  color: var(--c-ink);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* space for fixed bottom tab bar */
  padding-bottom: var(--tabbar-h);
}


/* ═══════════════════════════════════════════════════════════════
   1. TOP CHROME — phone header
   ═══════════════════════════════════════════════════════════════ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: calc(52px + var(--sat));
  padding-top: var(--sat);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding-left: 16px;
  padding-right: 12px;
  gap: 10px;
}

.header-logo {
  width: 32px;
  height: 32px;
  background: var(--c-ink);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.header-address {
  flex: 1;
  min-width: 0;
  position: relative;
}
.header-address select {
  /* override the generic input styles below */
  height: 36px !important;
  font-size: 1em !important;
  padding: 0 28px 0 10px !important;
  border-radius: 8px !important;
  background-color: var(--c-bg) !important;
  font-family: var(--f-sans) !important;
}

.header-btn {
  height: 36px;
  padding: 0 14px;
  background: var(--c-blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.header-btn:active { opacity: .8; }
/* on very small screens shrink to icon */
.header-btn-text { display: none; }
@media (min-width: 400px) { .header-btn-text { display: inline; } }


/* ═══════════════════════════════════════════════════════════════
   2. DEAL SUMMARY CARD — the hero that replaces the KPI strip
      Stacked vertically, feels native. Swipe hint on numbers.
   ═══════════════════════════════════════════════════════════════ */
/* Deal Analysis hero + related panels — only shown on wizard step 3 */
#saveNudge[data-wizard-hidden="1"],
#scoreDrawer[data-wizard-hidden="1"],
#riskPanel[data-wizard-hidden="1"] { display: none !important; }

/* ── DEAL HERO ─────────────────────────────────────────── */
.deal-hero { background: var(--c-hero-bg); color:#fff; padding:14px 16px 12px; border-radius: var(--r); margin: 10px; margin-bottom: 0; }
.deal-hero-toprow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.deal-hero-label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.11em; color:rgba(255,255,255,.35); }
.deal-hero-saved { font-size:.62rem; color:rgba(255,255,255,.28); display:none; margin-left:auto; }
.deal-hero-saved.visible { display:inline-block; }
.verdict-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:50px; font-size:.78rem; font-weight:800; flex-shrink:0; }
.verdict-badge.pending  { background:rgba(255,255,255,.1);  color:rgba(255,255,255,.45); }
.verdict-badge.strong   { background:rgba(22,163,74,.3);    color:#4ade80; }
.verdict-badge.marginal { background:rgba(217,119,6,.3);    color:#fbbf24; }
.verdict-badge.weak     { background:rgba(220,38,38,.3);    color:#f87171; }
.verdict-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.deal-score-pill { display:flex; align-items:center; gap:5px; padding:4px 10px; background:rgba(255,255,255,.08); border-radius:50px; cursor:pointer; border:1px solid rgba(255,255,255,.1); -webkit-tap-highlight-color:transparent; flex-shrink:0; }
.deal-score-pill:active { background:rgba(255,255,255,.14); }
.deal-score-num   { font-family:var(--f-mono); font-size:1em; font-weight:700; color:#fff; }
.deal-score-label { font-size:.58rem; font-weight:600; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.08em; }
.deal-score-icon  { font-size:10px; color:rgba(255,255,255,.35); }
.hero-metric { margin-bottom:14px; }
.hero-metric-value { font-family:var(--f-mono); font-size:2.6rem; font-weight:700; letter-spacing:-.04em; line-height:1; color:#fff; }
.hero-metric-value.pos  { color:#4ade80; }
.hero-metric-value.neg  { color:#f87171; }
.hero-metric-value.warn { color:#fbbf24; }
.hero-metric-value.idle { color:rgba(255,255,255,.25); }
.hero-metric-sub { font-size:.72rem; color:rgba(255,255,255,.35); margin-top:3px; }
.kpi-strip { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; padding:12px 0 0; border-top:1px solid rgba(255,255,255,.08); }
@media (min-width:768px) { .kpi-strip { grid-template-columns:repeat(6, 1fr); } }
.kpi-chip { display:flex; flex-direction:column; gap:2px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:var(--r-sm); padding:8px 10px; }
/* ── Screening bridge banner (inside deal-hero, Step 3 only) ─── */

/* first-time user hint bar inside hero */
.hero-hint {
  display:flex; align-items:center; gap:8px;
  margin:12px -16px -12px; padding:10px 16px;
  background:rgba(255,255,255,.07);
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.76rem; color:rgba(255,255,255,.55); line-height:1.45;
}
.hero-hint strong { color:rgba(255,255,255,.85); font-weight:700; }
.hero-hint-icon  { font-size:.95rem; flex-shrink:0; }
.hero-hint-text  { flex:1; }
.hero-hint-dismiss {
  background:none; border:none; color:rgba(255,255,255,.25);
  font-size:.85rem; cursor:pointer; flex-shrink:0; padding:0 2px; line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.hero-hint-dismiss:hover { color:rgba(255,255,255,.55); }
.kpi-chip-label { font-size:.56rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.32); white-space:nowrap; }
.kpi-chip-value { font-family:var(--f-mono); font-size:1em; font-weight:600; color:rgba(255,255,255,.7); white-space:nowrap; }
.kpi-chip-value.pos  { color:#86efac; }
.kpi-chip-value.neg  { color:#fca5a5; }
.kpi-chip-value.warn { color:#fde68a; }
/* score drawer */
.score-drawer { display:none; background:var(--c-surface); border-top:1px solid rgba(255,255,255,.08); padding:14px 16px 16px; }
.score-drawer.open { display:block; -webkit-animation:slideDown .2s ease; animation:slideDown .2s ease; }
@keyframes slideDown { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.score-drawer-title { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.35); margin-bottom:10px; }
.score-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.score-row-label { font-size:.76rem; font-weight:500; color:rgba(255,255,255,.6); width:120px; flex-shrink:0; }
.score-bar-wrap { flex:1; height:6px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; }
.score-bar-fill { height:100%; border-radius:3px; background:rgba(255,255,255,.3); transition:width .4s cubic-bezier(.4,0,.2,1); }
.score-bar-fill.full { background:#4ade80; }
.score-bar-fill.part { background:#fbbf24; }
.score-bar-fill.zero { background:#f87171; }
.score-row-pts { font-family:var(--f-mono); font-size:.72rem; font-weight:600; color:rgba(255,255,255,.5); width:44px; text-align:right; flex-shrink:0; }
.score-total-row { display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.1); }
.score-total-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.5); }
.score-total-value { font-family:var(--f-mono); font-size:1.1rem; font-weight:700; color:#fff; }
/* compare drawer */
.compare-drawer { display:none; background:var(--c-surface); border-top:3px solid var(--c-blue); padding:16px; animation:slideDown .2s ease; overflow-x:auto; }
.compare-drawer.open { display:block; }
.compare-drawer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.compare-drawer-title { font-size:.78rem; font-weight:800; color:var(--c-ink); }
.compare-close { font-size:18px; cursor:pointer; color:var(--c-ink3); background:none; border:none; padding:4px; height:auto; line-height:1; -webkit-tap-highlight-color:transparent; }
.compare-table { width:100%; border-collapse:collapse; font-size:.82em; table-layout:auto !important; }
.compare-table th { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--c-ink4); padding:5px 4px; border-bottom:1px solid var(--c-border); text-align:left; background:var(--c-bg); white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; }
.compare-table td { padding:7px 4px; border-bottom:1px solid var(--c-border); vertical-align:middle; }
/* Label column: short two-line labels, no mid-word breaks */
.compare-table td:first-child { font-size:.70rem; font-weight:600; color:var(--c-ink); min-width:76px; max-width:96px; white-space:normal; word-break:normal; overflow-wrap:normal !important; }
/* Value columns: numbers on one line, tight */
.compare-table td:not(:first-child) { white-space:nowrap !important; min-width:48px; }
.compare-table td.mono { font-family:var(--f-mono); font-size:.78rem; color:var(--c-ink2); }
.compare-table td.mono.pos { color:var(--c-green); font-weight:600; }
.compare-table td.mono.neg { color:var(--c-red); }
.compare-table td.mono.warn { color:var(--c-amber); }
.compare-best-badge { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; background:var(--c-blue-bg); color:var(--c-blue); padding:1px 6px; border-radius:4px; white-space:nowrap; display:block; margin-top:2px; }
.compare-bar { height:5px; background:var(--c-border); border-radius:3px; overflow:hidden; margin-top:4px; }
.compare-bar-fill { height:100%; border-radius:3px; background:var(--c-blue); transition:width .5s cubic-bezier(.4,0,.2,1); }
.compare-trigger { display:flex; align-items:center; gap:6px; padding:0 16px; background:rgba(37,99,235,.06); border:1px solid rgba(37,99,235,.15); border-radius:var(--r-sm); font-family:var(--f-sans); font-size:.76rem; font-weight:700; color:var(--c-blue); cursor:pointer; width:100%; justify-content:center; margin-bottom:10px; height:40px; -webkit-tap-highlight-color:transparent; }
.compare-trigger:active { background:rgba(37,99,235,.1); }

/* ═══════════════════════════════════════════════════════════════
   3. STEP CONTENT — full-width on phone
   ═══════════════════════════════════════════════════════════════ */
.step-content {
  padding: 16px 16px 24px;
}

/* Progress dots */
.step-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.step-dots {
  display: flex;
  gap: 4px;
  flex: 1;
}
.step-dot {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--c-border2);
  transition: background .25s;
}
.step-dot.done   { background: var(--c-green); }
.step-dot.active { background: var(--c-blue); }
.step-count {
  font-size: .68rem;
  font-weight: 600;
  color: var(--c-ink3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Step heading */
.step-heading {
  margin-bottom: 16px;
}
.step-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--c-ink3);
  margin-bottom: 4px;
}
.step-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -.025em;
  line-height: 1.15;
}
.step-desc {
  font-size: 1em;
  color: var(--c-ink3);
  margin-top: 5px;
  line-height: 1.5;
}

/* step panels */
.step-panel { display: none; }
.step-panel.active { display: block; }


/* ═══════════════════════════════════════════════════════════════
   4. FORM SECTIONS (accordions)
   ═══════════════════════════════════════════════════════════════ */
.section-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  margin-bottom: 10px;
  overflow: hidden;
}

.section-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  min-height: var(--tap);
  background: none;
  border: none;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  font-family: var(--f-sans);
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  gap: 8px;
}
.section-trigger:active { background: var(--c-bg); }

.section-trigger-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.section-trigger-icon { font-size: 15px; flex-shrink: 0; }
.section-trigger-name {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--c-ink3);
}
.section-trigger-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.section-badge {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 50px;
  background: rgba(255,255,255,.08);
  color: var(--c-ink3);
  white-space: nowrap;
}
.section-badge.required { background: var(--c-blue-bg); color: var(--c-blue); }
.section-badge.live     { background: var(--c-green-bg); color: var(--c-green); }
.section-badge.auto     { background: var(--c-blue-bg); color: var(--c-blue); }
.section-badge.manual   { background: var(--c-amber-bg); color: var(--c-amber); }

.section-caret {
  font-size: 10px;
  color: var(--c-ink4);
  transition: transform .2s;
  flex-shrink: 0;
}
.section-card.collapsed .section-caret { transform: rotate(-90deg); }
.section-card.collapsed .section-trigger { border-bottom: none; }

.section-body {
  padding: 16px;
}
.section-card.collapsed .section-body { display: none; }


/* ═══════════════════════════════════════════════════════════════
   5. FORM FIELDS — designed for thumbs
   ═══════════════════════════════════════════════════════════════ */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

.field-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.field-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-ink2);
}
.field-tag {
  font-size: .62rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
}
.field-tag.auto   { background: var(--c-blue-bg); color: var(--c-blue); }
.field-tag.manual { background: var(--c-amber-bg); color: var(--c-amber); }
.field-tag.calc   { background: var(--c-green-bg); color: var(--c-green); }

.field-hint {
  font-size: .72rem;
  color: var(--c-ink4);
  margin-top: 6px;
  line-height: 1.4;
}

/* ALL INPUTS — large, touchable */
input[type="text"],
input[type="number"],
input[type="date"],
select {
  display: block;
  width: 100%;
  height: var(--input-h);
  padding: 0 14px;
  font-family: var(--f-mono);
  font-size: 1em;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px var(--c-blue-ring);
}
input::placeholder {
  font-family: var(--f-sans);
  font-size: .9rem;
  color: var(--c-ink4);
}
input.highlight { border-color: rgba(37,99,235,.3); }
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px var(--c-surface) inset !important;
  -webkit-text-fill-color: var(--c-ink) !important;
}
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3e%3cpath fill='%23aaafbc' d='M7 10L1.5 4h11z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 1em !important;
}

/* result display */
.field-result {
  height: var(--input-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 14px;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-left: 3px solid var(--c-blue);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 1em;
  font-weight: 600;
  color: var(--c-ink);
}
/* legacy .result class compat */
.result {
  height: var(--input-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 14px;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-left: 3px solid var(--c-blue);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 1em;
  font-weight: 600;
  color: var(--c-ink);
  margin-top: 6px;
}

/* radio pills */
.pill-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pill-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 16px;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  font-family: var(--f-sans);
  font-size: .84rem;
  font-weight: 500;
  color: var(--c-ink2);
  cursor: pointer;
  user-select: none;
  transition: all .1s;
  -webkit-tap-highlight-color: transparent;
}
.pill-group label:has(input:checked) {
  border-color: var(--c-blue);
  background: var(--c-blue-bg);
  color: var(--c-blue);
  font-weight: 700;
}
.pill-group input[type="radio"] { display: none; }

/* 2-col grid */
.col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.col3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* unit row */
.unit-row {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 12px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* summary row */
.sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--c-bg);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  min-height: var(--tap);
}
.sum-row-label { font-size: 1em; font-weight: 500; color: var(--c-ink2); }
.sum-row-value { font-family: var(--f-mono); font-size: .95rem; font-weight: 600; color: var(--c-ink); }
.sum-row.highlight {
  background: var(--c-blue-bg);
  border: 1px solid rgba(37,99,235,.15);
}
.sum-row.highlight .sum-row-label { color: var(--c-ink); font-weight: 700; }
.sum-row.highlight .sum-row-value { color: var(--c-blue); font-size: 1em; }

/* ── Insight banners ─────────────────────────────────── */
.banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  margin-bottom: 14px;
  font-size: 1em;
  line-height: 1.5;
}
.banner.tip  { background: var(--c-blue-bg);  border: 1px solid rgba(37,99,235,.15); color: #1e3a8a; }
.banner.warn { background: var(--c-amber-bg); border: 1px solid rgba(217,119,6,.2);  color: #92400e; }
.banner.ok   { background: var(--c-green-bg); border: 1px solid rgba(22,163,74,.2);  color: #14532d; }
.banner-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.banner strong { font-weight: 700; display: block; margin-bottom: 1px; }

/* ── Step nav buttons ────────────────────────────────── */
.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
.btn-back {
  flex: 1;
  height: var(--tap);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  font-family: var(--f-sans);
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-ink2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-back:active { background: var(--c-bg); }
.btn-next {
  flex: 2;
  height: var(--tap);
  background: var(--c-blue);
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--f-sans);
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-next:active { background: var(--c-blue-d); }

/* generic fallback button */
button {
  font-family: var(--f-sans);
  cursor: pointer;
  background: var(--c-blue);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 0 14px;
  height: var(--tap);
  font-size: .85rem;
  font-weight: 600;
  transition: background .12s;
}
button:active { opacity: .8; }
.btn-danger {
  background: var(--c-red-bg);
  color: var(--c-red);
  border: 1px solid rgba(220,38,38,.2);
}
.btn-danger:active { background: var(--c-red); color: #fff; }


/* ═══════════════════════════════════════════════════════════════
   6. RETURNS STEP — metric rows, tables, chart
   ═══════════════════════════════════════════════════════════════ */
.metric-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--c-border);
  gap: 12px;
}
.metric-row:last-child { border-bottom: none; }
.metric-name    { font-size: .85rem; font-weight: 700; color: var(--c-ink); margin-bottom: 2px; }
.metric-explain { font-size: .73rem; color: var(--c-ink4); line-height: 1.4; }
.metric-value {
  font-family: var(--f-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-ink);
  flex-shrink: 0;
  text-align: right;
  min-width: 70px;
}
.metric-value.pos { color: var(--c-green); }
.metric-value.neg { color: var(--c-red); }

/* scenario pills block + row */
.scenario-block { margin-bottom: 4px; }
.scenario-block-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--c-ink4); margin-bottom: 6px;
}
/* Mobile: clean 2×2 grid so pills never orphan-wrap */
.scenario-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 0 14px;
}
/* Wider screens: single row */
@media (min-width: 480px) {
  .scenario-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 10px 0 14px;
  }
  .s-pill { width: auto; padding: 0 14px; }
}
.s-pill {
  height: 38px;
  width: 100%;
  padding: 0 8px;
  text-align: center;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink2);
  border-radius: 9px;
  font-family: var(--f-sans);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: all .1s;
}
.s-pill.active { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.s-pill:active { opacity: .7; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 1em; }
thead th {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--c-ink4);
  padding: 9px 10px;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  white-space: nowrap;
}
tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-ink2);
}
tbody td:first-child { color: var(--c-ink); font-weight: 500; }
tbody td.mono { font-family: var(--f-mono); }
table tr:hover td { background: var(--c-bg); }



/* chart */
#chartContainer {
  width: 100%;
  position: relative;
  height: clamp(260px, 45vw, 420px); /* fluid: ~260px phone → ~420px desktop */
}
#mortgageChart  { width: 100% !important; height: 100% !important; }
.simulated-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: var(--c-bg) !important;
  width: 100% !important;
  height: 100% !important;
}


/* ═══════════════════════════════════════════════════════════════
   7. BOTTOM TAB BAR — THE primary nav (phone)
   ═══════════════════════════════════════════════════════════════ */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  display: flex;
  padding-bottom: var(--sab);
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabbar::-webkit-scrollbar { display: none; }
.tab-btn { min-width: 58px; flex-shrink: 0; }
.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 58px;
  padding: 8px 2px;
  background: none;
  border: none;
  color: var(--c-ink4);
  font-family: var(--f-sans);
  cursor: pointer;
  transition: color .1s;
  -webkit-tap-highlight-color: transparent;
}
.tab-btn.active { color: var(--c-blue); }
.tab-btn:active { opacity: .6; }
.tab-icon  { font-size: 21px; line-height: 1; }
.tab-label {
  font-size: .52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   8. EXPORT STEP
   ═══════════════════════════════════════════════════════════════ */
.export-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.export-opt {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .12s;
}
.export-opt:active { background: var(--c-bg); }
.export-opt-icon  { font-size: 28px; margin-bottom: 8px; }
.export-opt-title { font-size: .84rem; font-weight: 700; color: var(--c-ink); margin-bottom: 3px; }
.export-opt-desc  { font-size: .72rem; color: var(--c-ink3); line-height: 1.4; }

/* ── Export tab — list-row layout ─────────────────────── */
.xport-group-label {
  font-size: .64rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--c-ink4);
  padding: 0 2px 7px; margin-top: 20px;
}
.xport-group-label:first-child { margin-top: 0; }
.xport-group {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  overflow: hidden;
}
.xport-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: none; border: none; border-top: 1px solid var(--c-border);
  width: 100%; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.xport-row:first-child { border-top: none; }
.xport-row:active { background: var(--c-bg); }
.xport-row.primary { background: var(--c-blue-bg); }
.xport-icon-wrap {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--c-bg); border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.xport-row.primary .xport-icon-wrap {
  background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.2);
}
.xport-text { flex: 1; min-width: 0; }
.xport-title {
  font-size: .84rem; font-weight: 600; color: var(--c-ink); line-height: 1.2;
}
.xport-row.primary .xport-title { color: var(--c-blue); }
.xport-sub {
  font-size: .7rem; color: var(--c-ink4); margin-top: 2px; line-height: 1.3;
}
.xport-chevron { color: var(--c-ink4); font-size: 1.1rem; flex-shrink: 0; opacity: .5; }
/* Snapshot list (rendered by JS) */
.snapshot-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.snapshot-item { display: flex; align-items: center; gap: 8px; background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 8px 10px; }
.snapshot-item-info { flex: 1; min-width: 0; }
.snapshot-item-label { font-size: .74rem; font-weight: 600; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snapshot-item-meta  { font-size: .65rem; color: var(--c-ink4); margin-top: 1px; }
.snapshot-item-actions { display: flex; gap: 5px; flex-shrink: 0; }
.snap-action-btn { font-size: .68rem; font-weight: 700; padding: 3px 8px;
  border: 1px solid var(--c-border); border-radius: 4px; background: var(--c-surface);
  color: var(--c-blue); cursor: pointer; white-space: nowrap; }
.snap-action-btn.danger { color: var(--c-red, #dc2626); }


/* ═══════════════════════════════════════════════════════════════
   9. DESKTOP ENHANCEMENTS — sidebar layout added via media query
      Nothing in the base HTML changes. Only layout is augmented.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  body { padding-bottom: 0; }

  .app-layout {
    display: flex;
    align-items: flex-start;
  }

  /* sidebar appears — it's hidden on mobile */
  .app-sidebar {
    display: block !important;
    width: 220px;
    flex-shrink: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    position: sticky;
    top: 62px;
    height: calc(100dvh - 62px - 64px);
    overflow-y: auto;
    scrollbar-width: none;
    padding: 16px 0;
    margin: 10px 0 10px 10px;
  }
  .app-sidebar::-webkit-scrollbar { display: none; }

  /* main grows to fill */
  .app-main {
    flex: 1;
    min-width: 0;
    max-width: 760px;
  }

  .step-content { padding: 24px 28px 40px; }

  /* hide mobile-only progress dots on desktop */
  .step-progress { display: none; }

  /* hide bottom tabbar on desktop */
  .tabbar { display: none; }

  /* KPI strip: remove fade mask on desktop (no scroll needed) */
  .kpi-row {
    -webkit-mask-image: none;
            mask-image: none;
    overflow-x: visible;
    flex-wrap: wrap;
    gap: 0;
  }

  /* deal summary stays but looks tighter */
  .deal-summary { padding: 14px 20px; }
}

/* sidebar nav items */
.app-sidebar { display: none; } /* mobile default: hidden */
.sidebar-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-ink4);
  padding: 12px 16px 5px;
}
.sidebar-progress-wrap { margin: 2px 16px 10px; }
.sidebar-progress {
  height: 3px;
  background: var(--c-border2);
  border-radius: 2px;
  overflow: hidden;
}
.sidebar-progress-fill {
  height: 100%;
  background: var(--c-blue);
  border-radius: 2px;
  transition: width .3s ease;
}
.sidebar-nav-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  height: auto;
  font-family: var(--f-sans);
  font-size: 1em;
  font-weight: 500;
  color: var(--c-ink2);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background .08s, color .08s;
}
.sidebar-nav-btn:hover { background: var(--c-bg); color: var(--c-ink); }
.sidebar-nav-btn.active {

  color: var(--c-blue);
  background: var(--c-blue-bg);
  font-weight: 600;
}
.sidebar-nav-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--c-blue);
  border-radius: 0 2px 2px 0;
}
.sidebar-nav-btn .s-icon { font-size: 14px; opacity: .7; flex-shrink: 0; }
.sidebar-nav-btn.active .s-icon { opacity: 1; }
.sidebar-check {
  margin-left: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: transparent;
  flex-shrink: 0;
}
.sidebar-nav-btn.done .sidebar-check {
  background: var(--c-green);
  border-color: var(--c-green);
  color: #fff;
}

/* ── Legacy compat ───────────────────────────────────── */
.sticky-buttons    { display: none !important; }
.sticky-bottom-bar { display: none !important; }

/* ── Print ───────────────────────────────────────────── */
@media print {
  .app-header, .deal-summary, .app-sidebar, .tabbar { display: none !important; }
  .step-panel { display: block !important; }
  body { background: #fff; padding-bottom: 0; }
  .step-content { padding: 0; }
}

/* ══════════════════════════════════════════════════════════════
   FEATURES: CONFIDENCE · BENCHMARKS · RISK FLAGS · WHATIF · PORTFOLIO
   ══════════════════════════════════════════════════════════════ */

/* ── Confidence meter (inside deal-hero) ───────────────────── */
.confidence-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0 2px;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:10px;
}
.confidence-label {
  font-size:.58rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.38);
  white-space:nowrap;
}
.confidence-bar-wrap {
  flex:1;
  height:5px;
  background:rgba(255,255,255,.12);
  border-radius:3px;
  overflow:hidden;
}
.confidence-bar-fill {
  height:100%;
  border-radius:3px;
  background:linear-gradient(90deg,#f87171,#fbbf24,#4ade80);
  background-size:300% 100%;
  transition:width .5s cubic-bezier(.4,0,.2,1), background-position .5s;
}
.confidence-bar-fill.hi  { background-position:100% 0; }
.confidence-bar-fill.mid { background-position:50%  0; }
.confidence-bar-fill.lo  { background-position:0%   0; }
.confidence-pct {
  font-family:var(--f-mono);
  font-size:.78rem;
  font-weight:700;
  color:rgba(255,255,255,.6);
  white-space:nowrap;
  min-width:36px;
  text-align:right;
}
.confidence-tip {
  font-size:.62rem;
  color:rgba(255,255,255,.28);
  margin-top:3px;
  padding-bottom:2px;
}

/* ── KPI benchmarks (under kpi-chip values) ─────────────────── */
.kpi-bench {
  font-size:.56rem;
  font-weight:600;
  margin-top:1px;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:2px;
}
.kpi-bench.above { color:#86efac; }
.kpi-bench.below { color:#fca5a5; }
.kpi-bench.near  { color:#fde68a; }
.kpi-bench.none  { color:rgba(255,255,255,.2); }
.bench-arrow { font-size:8px; }

/* ── Risk flags panel ───────────────────────────────────────── */
.risk-panel {
  background:var(--c-surface);
  border: 1px solid rgba(245,158,11,.2);
  border-top: 3px solid var(--c-amber);
  border-radius: var(--r);
  margin: 8px 10px;
  padding:12px 16px;
  display:none;
}
.risk-panel.has-flags { display:block; }
.risk-panel-title {
  font-size:.6rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--c-amber);
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:5px;
}
.risk-list { display:flex; flex-direction:column; gap:6px; }
.risk-flag {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.78rem;
  line-height:1.4;
}
.risk-flag-icon { font-size:13px; flex-shrink:0; margin-top:1px; }
.risk-flag-text { color:var(--c-ink2); }
.risk-flag-text strong { color:var(--c-ink); font-weight:700; }

/* ── What-If drawer ─────────────────────────────────────────── */
.whatif-trigger {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  height:40px;
  background:rgba(37,99,235,.06);
  border:1px solid rgba(37,99,235,.18);
  border-radius:var(--r-sm);
  font-family:var(--f-sans);
  font-size:.76rem;
  font-weight:700;
  color:var(--c-blue);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  margin-bottom:10px;
}
.whatif-trigger:active { background:rgba(37,99,235,.12); }
.whatif-drawer {
  display:none;
  background:var(--c-surface);
  border:1.5px solid var(--c-blue);
  border-radius:var(--r);
  overflow:hidden;
  margin-bottom:10px;
  animation:slideDown .2s ease;
}
.whatif-drawer.open { display:block; }
.whatif-header {
  background:var(--c-surface);
  color:#fff;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.whatif-title { font-size:.8rem; font-weight:700; }
.whatif-close {
  background:none;
  border:none;
  color:rgba(255,255,255,.5);
  font-size:16px;
  padding:4px;
  height:auto;
  line-height:1;
  cursor:pointer;
}
.whatif-body { padding:16px; }
.whatif-row { margin-bottom:18px; }
.whatif-row:last-child { margin-bottom:0; }
.whatif-row-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.whatif-row-label { font-size:.78rem; font-weight:700; color:var(--c-ink); }
.whatif-row-value {
  font-family:var(--f-mono);
  font-size:.84rem;
  font-weight:700;
  color:var(--c-blue);
}
.whatif-slider {
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--c-blue) var(--pct,50%), var(--c-border) var(--pct,50%));
  outline:none;
  cursor:pointer;
  border:none;
  padding:0;
}
.whatif-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--c-blue);
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(37,99,235,.4);
  cursor:pointer;
}
.whatif-slider::-moz-range-thumb {
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--c-blue);
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(37,99,235,.4);
  cursor:pointer;
}
.whatif-impact {
  margin-top:14px;
  padding:14px 16px;
  background:var(--c-bg);
  border-radius:var(--r-sm);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.whatif-impact-label { font-size:.72rem; font-weight:700; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.08em; }
.whatif-impact-arrow {
  font-size:.72rem;
  color:var(--c-ink4);
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  justify-content:flex-end;
}
.whatif-impact-old {
  font-family:var(--f-mono);
  font-size:1.15rem;
  font-weight:600;
  color:rgba(255,255,255,.3);
  text-decoration:line-through;
}
.whatif-impact-new {
  font-family:var(--f-mono);
  font-size:1.45rem;
  font-weight:800;
  color:#4ade80;
}
.whatif-impact-new.neg { color:#f87171; }
.whatif-impact-new.warn { color:#fbbf24; }
.whatif-preview-note {
  margin-top:10px;
  padding:9px 12px;
  background:var(--c-amber-bg);
  border:1px solid rgba(217,119,6,.2);
  border-radius:var(--r-sm);
  font-size:.72rem;
  color:#92400e;
  line-height:1.5;
}

/* ── Portfolio page ─────────────────────────────────────────── */
.portfolio-page {
  display:none;
  min-height:100dvh;
  padding-bottom:var(--tabbar-h);
}
.portfolio-page.active { display:block; }

.portfolio-summary {
  background:var(--c-nav);
  color:#fff;
  padding:16px 16px 14px;
}
.portfolio-summary-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.portfolio-summary-title {
  font-size:.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:rgba(255,255,255,.38);
}
.portfolio-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (min-width:480px) { .portfolio-grid { grid-template-columns:repeat(4,1fr); } }
.portfolio-stat-label {
  font-size:.56rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.35);
  margin-bottom:2px;
}
.portfolio-stat-value {
  font-family:var(--f-mono);
  font-size:1.15rem;
  font-weight:700;
  color:#fff;
}
.portfolio-stat-value.pos { color:#4ade80; }

.portfolio-content { padding:16px; }
.portfolio-section-title {
  font-size:.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--c-ink4);
  margin-bottom:10px;
}

.property-card {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r);
  padding:14px 14px 12px;
  margin-bottom:10px;
  cursor:pointer;
  transition:border-color .12s, box-shadow .12s;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.property-card:active { border-color:var(--c-blue); box-shadow:0 0 0 3px var(--c-blue-ring); }
.property-card-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.property-card-addr {
  font-size:.84rem;
  font-weight:700;
  color:var(--c-ink);
  line-height:1.3;
  flex:1;
}
.property-card-verdict {
  font-size:.62rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:50px;
  flex-shrink:0;
  white-space:nowrap;
}
.property-card-verdict.strong   { background:var(--c-green-bg); color:var(--c-green); }
.property-card-verdict.marginal { background:var(--c-amber-bg); color:var(--c-amber); }
.property-card-verdict.weak     { background:var(--c-red-bg);   color:var(--c-red); }
.property-card-verdict.pending  { background:var(--c-bg);       color:var(--c-ink4); }

.property-card-cf {
  font-family:var(--f-mono);
  font-size:1.2rem;
  font-weight:700;
}
.property-card-cf.pos  { color:var(--c-green); }
.property-card-cf.neg  { color:var(--c-red); }
.property-card-cf.warn { color:var(--c-amber); }

.property-card-chips {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.property-card-chip {
  font-size:.64rem;
  color:var(--c-ink4);
  background:var(--c-bg);
  padding:2px 7px;
  border-radius:5px;
  display:flex;
  align-items:center;
  gap:3px;
}
.property-card-chip strong { color:var(--c-ink2); font-weight:600; }

.portfolio-empty {
  text-align:center;
  padding:48px 24px;
  color:var(--c-ink4);
  font-size:.88rem;
  line-height:1.6;
}
.portfolio-empty-icon { font-size:40px; margin-bottom:12px; display:block; }
.portfolio-add-btn {
  margin:16px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  max-width:260px;
  height:var(--tap);
  background:var(--c-blue);
  color:#fff;
  border:none;
  border-radius:var(--r-sm);
  font-family:var(--f-sans);
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* Tab bar — Portfolio tab */
.tab-btn.portfolio-tab.active { color:var(--c-blue); }

/* Export FAB */
.export-fab {
  display:none; /* hidden on mobile — export is in header */
  position:fixed;
  bottom:calc(72px + var(--sab));
  right:16px;
  z-index:150;
  width:50px;
  height:50px;
  background:var(--c-blue);
  color:#fff;
  border:none;
  border-radius:50%;
  font-size:20px;
  line-height:1;
  box-shadow:0 4px 16px rgba(37,99,235,.4);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (min-width:768px) { .export-fab { display:none !important; } }

/* Desktop: hide portfolio page sidebar-area, keep main */
@media (min-width:768px) {
  .portfolio-page { padding-bottom:0; }
}

/* ── PORTFOLIO EQUITY SECTION ───────────────────────────── */
.port-updated { font-size:.62rem; color:rgba(255,255,255,.28); }
.port-divider { height:1px; background:rgba(255,255,255,.1); margin:12px 0 10px; }
.port-equity-label {
  font-size:.58rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.35);
  margin-bottom:8px;
}
.port-equity-note { font-weight:400; opacity:.7; }
.port-equity-val  { color:#a5f3fc; } /* cyan — separate from CF green */

/* ── PORTFOLIO CHARTS ────────────────────────────────────── */
.portfolio-charts {
  background:var(--c-bg);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media (min-width:640px) { .portfolio-charts { flex-direction:row; } }
.port-chart-block {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r);
  padding:14px;
  flex:1;
}
.port-chart-title {
  font-size:.8rem;
  font-weight:700;
  color:var(--c-ink);
  margin-bottom:2px;
}
.port-chart-sub {
  font-size:.62rem;
  color:var(--c-ink4);
  margin-bottom:10px;
}
.port-chart-wrap { position:relative; height:160px; }
@media (min-width:768px) { .port-chart-wrap { height:200px; } }

/* ── PORTFOLIO SECTION HEADER ────────────────────────────── */
.port-section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.port-share-all-btn {
  font-size:.68rem;
  font-weight:700;
  color:var(--c-blue);
  background:var(--c-blue-bg);
  border:1px solid rgba(37,99,235,.2);
  border-radius:var(--r-sm);
  padding:5px 10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  height:auto;
}

/* ── PROPERTY CARD — share button ────────────────────────── */
.property-card-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:8px;
  border-top:1px solid var(--c-border);
}
.property-card-share {
  font-size:.64rem;
  font-weight:700;
  color:var(--c-blue);
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  -webkit-tap-highlight-color:transparent;
  height:auto;
}
.property-card-share:hover { text-decoration:underline; }

.property-card-delete {
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:7px;
  background:#d32f2f;
  color:#ffffff !important;
  border:none;
  cursor:pointer;
  font-size:1.1rem;
  font-weight:900;
  flex-shrink:0;
  line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s, transform .1s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  text-decoration:none;
}
.property-card-delete:hover  { background:#b71c1c; }
.property-card-delete:active { transform:scale(.92); }

.property-card-share {
  font-size:.75rem;
  font-weight:700;
  color:var(--c-blue);
  background:var(--c-blue-bg, rgba(37,99,235,.07));
  border:none;
  border-radius:6px;
  padding:6px 10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  min-height:36px;
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════
   DEAL ROOM MODAL
   ══════════════════════════════════════════════════════════ */
.deal-room-overlay {
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:0;
  overflow-y:auto;
}
.deal-room-overlay.open { display:flex; }
.deal-room-modal {
  background:var(--c-bg);
  width:100%;
  max-width:680px;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  animation:drSlideUp .22s cubic-bezier(.4,0,.2,1);
}
@keyframes drSlideUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@media (min-width:700px) {
  .deal-room-overlay { padding:32px 16px; align-items:flex-start; }
  .deal-room-modal { min-height:auto; border-radius:var(--r); box-shadow:0 20px 60px rgba(0,0,0,.3); }
}

/* Top bar */
.deal-room-topbar {
  background:var(--c-nav);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  position:sticky;
  top:0;
  z-index:10;
  flex-shrink:0;
}
.deal-room-logo { font-size:1em; font-weight:800; letter-spacing:-.01em; }
.deal-room-actions { display:flex; align-items:center; gap:8px; }
.dr-btn {
  border:none;
  cursor:pointer;
  border-radius:var(--r-sm);
  font-family:var(--f-sans);
  font-size:.72rem;
  font-weight:700;
  padding:6px 12px;
  height:auto;
  -webkit-tap-highlight-color:transparent;
}
.dr-copy { background:var(--c-blue); color:#fff; }
.dr-copy.copied { background:#16a34a; }
.dr-close { background:rgba(255,255,255,.15); color:#fff; font-size:14px; }

/* Body */
.deal-room-body { flex:1; overflow-y:auto; }

/* Deal Room sections */
.dr-hero {
  background:var(--c-hero-bg);
  color:#fff;
  padding:20px 16px 16px;
}
.dr-address {
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:4px;
  line-height:1.3;
}
.dr-scenario-tag {
  font-size:.62rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.4);
  margin-bottom:14px;
}
.dr-verdict-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.dr-big-num {
  font-family:var(--f-mono);
  font-size:2.2rem;
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1;
}
.dr-big-num.pos  { color:#4ade80; }
.dr-big-num.neg  { color:#f87171; }
.dr-big-num.warn { color:#fbbf24; }
.dr-big-label {
  font-size:.64rem;
  color:rgba(255,255,255,.4);
  margin-top:4px;
}
.dr-kpi-row {
  display:flex;
  gap:0;
  overflow-x:auto;
  margin:0 -16px;
  padding:12px 16px 0;
  border-top:1px solid rgba(255,255,255,.1);
  -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);
  mask-image:linear-gradient(90deg,#000 80%,transparent);
}
.dr-kpi-row::-webkit-scrollbar { display:none; }
@media (min-width:500px) { .dr-kpi-row { -webkit-mask-image:none; mask-image:none; flex-wrap:wrap; overflow:visible; } }
.dr-kpi-chip { flex:0 0 auto; padding-right:20px; display:flex; flex-direction:column; gap:1px; }
.dr-kpi-label { font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.32); white-space:nowrap; }
.dr-kpi-val   { font-family:var(--f-mono); font-size:.9rem; font-weight:600; color:rgba(255,255,255,.75); white-space:nowrap; }
.dr-kpi-val.pos  { color:#86efac; }
.dr-kpi-val.neg  { color:#fca5a5; }
.dr-kpi-val.warn { color:#fde68a; }

/* Sections inside deal room */
.dr-section {
  background:var(--c-surface);
  margin:12px;
  border-radius:var(--r);
  border:1px solid var(--c-border);
  overflow:hidden;
}
.dr-section-head {
  font-size:.6rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--c-ink4);
  padding:10px 14px 8px;
  border-bottom:1px solid var(--c-border);
  background:var(--c-bg);
}
.dr-table { width:100%; border-collapse:collapse; font-size:1em; }
.dr-table tr:last-child td { border-bottom:none; }
.dr-table td { padding:9px 14px; border-bottom:1px solid var(--c-border); }
.dr-table td:first-child { color:var(--c-ink3); font-size:.76rem; }
.dr-table td:last-child  { font-family:var(--f-mono); font-weight:600; color:var(--c-ink); text-align:right; }
.dr-table td.dr-pos { color:var(--c-green); }
.dr-table td.dr-neg { color:var(--c-red); }
.dr-table td.dr-warn { color:var(--c-amber); }

/* Risk flags inside deal room */
.dr-flags { padding:10px 14px; display:flex; flex-direction:column; gap:6px; }
.dr-flag { display:flex; align-items:flex-start; gap:8px; font-size:.78rem; line-height:1.4; }

/* Score bar inside deal room */
.dr-score-wrap { padding:12px 14px; }
.dr-score-total {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.dr-score-label { font-size:.76rem; font-weight:700; color:var(--c-ink); }
.dr-score-num   { font-family:var(--f-mono); font-size:1.1rem; font-weight:700; }
.dr-score-row   { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.dr-score-row-label { font-size:.72rem; color:var(--c-ink3); width:110px; flex-shrink:0; }
.dr-score-bar-wrap  { flex:1; height:5px; background:var(--c-border); border-radius:3px; overflow:hidden; }
.dr-score-bar-fill  { height:100%; border-radius:3px; background:var(--c-blue); transition:width .4s; }
.dr-score-bar-fill.full { background:var(--c-green); }
.dr-score-bar-fill.part { background:var(--c-amber); }
.dr-score-bar-fill.zero { background:var(--c-red); }
.dr-score-pts   { font-size:.68rem; font-family:var(--f-mono); color:var(--c-ink4); width:36px; text-align:right; flex-shrink:0; }

/* Footer */
.dr-footer {
  margin:12px;
  padding:14px;
  background:var(--c-blue-bg);
  border:1px solid rgba(37,99,235,.15);
  border-radius:var(--r);
  text-align:center;
}
.dr-footer-title { font-size:.78rem; font-weight:700; color:var(--c-blue); margin-bottom:4px; }
.dr-footer-sub   { font-size:.68rem; color:var(--c-ink3); line-height:1.4; }
.dr-footer-url   {
  font-family:var(--f-mono);
  font-size:.7rem;
  color:var(--c-ink4);
  background:rgba(0,0,0,.04);
  padding:6px 10px;
  border-radius:6px;
  margin-top:8px;
  word-break:break-all;
  cursor:pointer;
  display:block;
}
.dr-footer-url:hover { background:rgba(37,99,235,.1); color:var(--c-blue); }
.dr-copy-feedback {
  font-size:.68rem;
  color:var(--c-green);
  font-weight:700;
  margin-top:6px;
  height:16px;
}

/* ── UNITS STEPPER (Step 3) ─────────────────────────────── */
.units-count-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0 14px;
  border-bottom:1px solid var(--c-border);
  margin-bottom:14px;
}
.units-count-label {
  font-size:.84rem;
  font-weight:700;
  color:var(--c-ink);
}
.units-stepper {
  display:flex;
  align-items:center;
  gap:0;
  border:1.5px solid var(--c-border);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.units-step-btn {
  width:40px;
  height:40px;
  background:var(--c-bg);
  border:none;
  font-size:1.2rem;
  font-weight:700;
  color:var(--c-blue);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
}
.units-step-btn:active { background:var(--c-blue-bg); }
.units-step-input {
  width:48px;
  height:40px;
  border:none;
  border-left:1.5px solid var(--c-border);
  border-right:1.5px solid var(--c-border);
  text-align:center;
  font-family:var(--f-mono);
  font-size:1em;
  font-weight:700;
  color:var(--c-ink);
  background:var(--c-surface);
  padding:0;
  border-radius:0;
}

/* ── PROPERTY TAX MODES ─────────────────────────────────── */
.tax-pct-row {
  display:flex;
  align-items:center;
  gap:8px;
}
.tax-mode-input {
  flex:1;
  height:var(--input-h);
  border:1.5px solid var(--c-border);
  border-radius:var(--r-sm);
  padding:0 12px;
  font-size:1em;
  font-family:var(--f-mono);
  background:var(--c-surface);
  color:var(--c-ink);
}
.tax-mode-unit {
  font-size:.76rem;
  color:var(--c-ink3);
  white-space:nowrap;
  font-weight:600;
}
.tax-result-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
}
.tax-annual-display {
  font-size:.76rem;
  color:var(--c-ink3);
  font-family:var(--f-mono);
}
	/* =========================================================
   iPhone / iOS Safari stability patch
   Put this at the VERY END of your CSS
   ========================================================= */

/* ---- 1) Root / viewport stability ---- */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  position: relative;
}

/* Keep all major layout shells from widening the page */
.app-layout,
.app-main,
.step-panel,
.step-content,
.section-card,
.section-body,
.score-drawer,
.compare-drawer,
.portfolio-page,
.portfolio-summary,
.portfolio-content,
.portfolio-charts,
.port-chart-block,
.dr-section,
.dr-score-wrap,
.whatif-drawer,
.whatif-body,
.export-options {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
/* Deal-hero and risk-panel float with margins — use auto width */
.deal-hero,
.risk-panel {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  box-sizing: border-box;
}

/* Flex/grid children that commonly cause overflow */
.header-address,
.section-trigger-left,
.section-trigger-right,
.sum-row,
.metric-row,
.property-card-top,
.port-section-header,
.whatif-impact,
.compare-drawer-header,
.deal-room-topbar,
.deal-room-actions,
.dr-score-row,
.dr-verdict-row,
.portfolio-summary-top {
  min-width: 0;
}

/* Long text should wrap instead of pushing layout wider */
.sum-row-label,
.sum-row-value,
.metric-name,
.metric-explain,
.metric-value,
.property-card-addr,
.dr-address,
.dr-footer-url,
.dr-table td,
.compare-table td,
.compare-table th,
.banner,
.field-hint,
.step-desc {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- 2) Prevent iOS input zoom / viewport shove ---- */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="password"],
select,
textarea {
  font-size: 16px !important;
  max-width: 100%;
}

/* Specific controls in your UI */
.header-address select,
#newAddressInput,
.units-step-input,
.tax-mode-input {
  font-size: 16px !important;
}

/* Buttons with tiny text are fine visually, but avoid layout squeeze */
.header-btn,
.btn-back,
.btn-next,
button,
.s-pill,
.compare-trigger,
.whatif-trigger,
.port-share-all-btn,
.property-card-share,
.dr-btn {
  max-width: 100%;
}

/* ---- 3) Fix horizontal drift from negative margins + scroll rows ---- */
/* These rows were using negative margins, which often causes iOS sideways drift */
.dr-kpi-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Add inner breathing room back with first/last chip padding */
.kpi-chip:first-child,
.dr-kpi-chip:first-child {
  padding-left: 16px;
}
.kpi-chip:last-child,
.dr-kpi-chip:last-child {
  padding-right: 16px;
}

/* Keep hero / sections from exposing overscroll */
.deal-hero,
.dr-hero,
.compare-drawer,
.score-drawer {
  overflow-x: clip;
}

/* ---- 4) Fixed / sticky mobile chrome stabilization ---- */
.app-header {
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.tabbar {
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Do not let the fixed tabbar itself scroll horizontally */
.tab-btn {
  min-width: 0 !important;
  flex: 1 1 0 !important;
}

/* ---- 5) Tables are common overflow sources on mobile ---- */
table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

th,
td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Keep special tables usable */
.compare-table,
.dr-table,
.roi-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
.roi-table th:first-child, .roi-table td:first-child {
  text-align: left;
  width: 40%;
}
.roi-table th:not(:first-child), .roi-table td:not(:first-child) {
  text-align: right;
  width: 30%;
}
.roi-table tr.total th {
  background: var(--c-surface);
  color: #fff;
  padding: 10px;
}

.compare-table tbody,
.compare-table thead,
.dr-table tbody,
.dr-table thead,
.roi-table tbody,
.roi-table thead {
  width: 100%;
}
/* ---- 6) Grid collapse on narrow iPhones ---- */
@media (max-width: 430px) {
  .col2,
  .col3,
  .unit-row,
  .export-options,
  .portfolio-grid,
  .portfolio-charts {
    grid-template-columns: 1fr !important;
  }

  .tax-pct-row,
  .units-count-row,
  .port-section-header,
  .portfolio-summary-top,
  .compare-drawer-header,
  .deal-room-topbar,
  .deal-room-actions,
  .whatif-impact,
  .dr-verdict-row {
    flex-wrap: wrap;
  }

  .header-btn {
    padding-left: 10px;
    padding-right: 10px;
  }

  .property-card-top {
    flex-wrap: wrap;
  }
}

/* ---- 7) Safer modal / portfolio heights on iOS ---- */
.portfolio-page,
.deal-room-modal {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* Keep overlay from causing sideways movement */
.deal-room-overlay,
.deal-room-modal,
.deal-room-body {
  max-width: 100%;
  overflow-x: clip;
}

/* ---- 8) Chart / fullscreen safety ---- */
#chartContainer,
.port-chart-wrap {
  max-width: 100%;
  overflow: hidden; /* prevent canvas bleed-out */
}
#mortgageChart,
canvas {
  max-width: 100%;
  display: block; /* removes inline baseline gap */
}

.simulated-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

/* ---- 9) iOS-specific keyboard/focus hardening ---- */
@supports (-webkit-touch-callout: none) {
  html,
  body {
    overflow-x: clip;
  }

  .app-header,
  .tabbar,
  .deal-room-topbar {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  input,
  select,
  textarea {
    scroll-margin-top: 96px;
    font-size: 16px !important;
  }
}
	
	.header-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22.5%;
  display: block;
}

/* ── SEO titlebar ───────────────────────────────────────── */
.app-titlebar {
  padding: 10px 16px 6px;
  background: var(--c-bg);
}
.app-title-copy h1 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--c-ink);
}
.app-subtitle {
  margin: 5px 0 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--c-ink3);
  max-width: 760px;
}

/* ── Capability chips ───────────────────────────────────── */
.app-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px 0 4px;
}
.cap-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font-size: .65rem;
  font-weight: 700;
  color: var(--c-ink2);
  white-space: nowrap;
}

/* ── About / what-it-analyzes panel ────────────────────── */
.app-about-card {
  margin: 16px 16px 0;
}
.app-about-card details {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 12px 14px;
}
.app-about-card summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-ink);
  user-select: none;
}
.app-about-body {
  margin-top: 10px;
}
.app-about-body p {
  margin: 0 0 10px;
  font-size: .80rem;
  line-height: 1.55;
  color: var(--c-ink2);
}
.app-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.app-feature-tags li {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--c-blue-bg);
  color: var(--c-blue);
  font-size: .65rem;
  font-weight: 700;
}

/* ── Titlebar dismiss button ────────────────────────────── */
.app-titlebar {
  position: relative;
}
.app-titlebar-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-ink4);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  border-radius: 4px;
}
.app-titlebar-close:hover { color: var(--c-ink2); }

/* ── Hero disclaimer ─────────────────────────────────────── */
.hero-disclaimer {
  font-size: .58rem;
  line-height: 1.4;
  color: rgba(255,255,255,.38);
  padding: 6px 0 2px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 8px;
}
.hero-disclaimer a {
  color: rgba(255,255,255,.5);
  text-decoration: underline;
}

/* ── Desktop: hide titlebar (sidebar handles context) ───── */
@media (min-width: 768px) {
  .app-titlebar { display: none; }
}

/* ── M1 Legal banner ────────────────────────────────────── */
#legalBanner {
  position: fixed;
  bottom: var(--tabbar-h, 58px);
  left: 0;
  right: 0;
  z-index: 200;
  background: #1e1e2a;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: var(--c-ink);
  font-size: .78rem;
  line-height: 1.45;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -2px 8px rgba(0,0,0,.18);
  transform: translateY(100%);
  transition: transform .3s ease;
}
#legalBanner.visible {
  transform: translateY(0);
}
.legal-banner-text { flex: 1; }
.legal-banner-text a {
  color: #93c5fd;
  text-decoration: underline;
}
#legalBannerBtn {
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 6px;
  color: #fff;
  font-family: var(--f-sans);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
#legalBannerBtn:active { opacity: .7; }


/* ═══════════════════════════════════════════════════════════════
   THE FINANCIAL ARCHITECT — WIZARD COMPONENTS
   Added for the 3-step unified wizard integration.
   ═══════════════════════════════════════════════════════════════ */

/* ── MASTER HEADER ──────────────────────────────────────────── */
.master-header {
  position: sticky;
  top: 0;
  z-index: 300;
  padding-top: var(--sat);
  background: var(--c-nav);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
}
/* Row 1: Brand + Sign-in */
.master-header-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  height: 56px;
}
.master-header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.master-header-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.master-addr-subtitle {
  font-size: .62rem;
  color: var(--c-ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  margin-top: 1px;
}
.master-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.master-avatar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.master-avatar img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.master-header-logo-img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }

/* Row 2: Unified address bar (input + chips) */
.master-header-addr-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 16px 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.header-addr-wrap {
  position: relative;
  width: 100%;
}
.header-addr-input-row {
  display: flex;
  gap: 8px;
}
.header-addr-input-row .na-input {
  flex: 1;
  min-width: 0;
}
.header-addr-input-row .na-analyze-btn {
  flex-shrink: 0;
}
/* Chips row inside header */
.master-header-addr-row .saved-properties-row {
  padding: 0;
}

/* ── DEAL HERO — Asset Class Grade Card ────────────────────── */
/* Prominent bordered card — left column of deal-hero-toprow    */
/* Hero grade pill — mirrors .grade-card style from Step 1 */
.hero-grade-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-top: 3px solid rgba(255,255,255,.14);
  border-radius: var(--r);
  padding: 10px 14px;
  flex-basis: 100%;
  background: rgba(255,255,255,.04);
}
.hero-grade-pill .deal-hero-label {
  font-size: .55rem;
  margin-bottom: 1px;
}
.hero-grade-pill .hero-grade-letter {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: var(--f-mono);
  line-height: 1;
  flex-shrink: 0;
}
.hero-grade-pill .hero-grade-name {
  font-size: .85rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}
/* Grade-specific tinted backgrounds + top border (mirrors .grade-card) */
.hero-grade-pill.grade-a { border-top-color: var(--c-blue);  background: rgba(37,99,235,0.10); }
.hero-grade-pill.grade-a .hero-grade-letter { color: #60a5fa; }
.hero-grade-pill.grade-b { border-top-color: var(--c-green); background: rgba(4,218,127,0.10); }
.hero-grade-pill.grade-b .hero-grade-letter { color: var(--c-green); }
.hero-grade-pill.grade-c { border-top-color: var(--c-amber); background: rgba(245,158,11,0.10); }
.hero-grade-pill.grade-c .hero-grade-letter { color: var(--c-amber); }
.hero-grade-pill.grade-d { border-top-color: var(--c-red);   background: rgba(220,38,38,0.10); }
.hero-grade-pill.grade-d .hero-grade-letter { color: #f87171; }
.hero-grade-pill.grade-a .hero-grade-name { color: rgba(96,165,250,.9); }
.hero-grade-pill.grade-b .hero-grade-name { color: rgba(4,218,127,.9); }
.hero-grade-pill.grade-c .hero-grade-name { color: rgba(245,158,11,.9); }
.hero-grade-pill.grade-d .hero-grade-name { color: rgba(248,113,113,.9); }
/* Legacy stubs */
.hero-grade-banner { display: none; }
.hero-grade-score-disp {
  font-size: .72rem;
  color: var(--c-ink3);
  font-family: var(--f-mono);
}

/* ── SAVED PROPERTIES ROW (Step 1) ─────────────────────────── */
.saved-properties-row {
  padding: 0 16px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.saved-prop-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink4);
  margin-right: 2px;
}
.saved-prop-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  font-size: .72rem;
  font-weight: 500;
  color: var(--c-ink2);
  cursor: pointer;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s, border-color .15s;
}
.saved-prop-chip.active { background: rgba(37,99,235,0.18); border-color: var(--c-blue); color: var(--c-blue); font-weight: 700; }
.saved-prop-chip:hover { background: rgba(255,255,255,0.1); }
.saved-prop-new { color: var(--c-blue); border-color: rgba(37,99,235,0.3); background: rgba(37,99,235,0.08); font-weight: 700; }
.saved-prop-new:hover { background: rgba(37,99,235,0.16) !important; }

/* Body saved-properties row hidden — header has unified chips */
#savedPropertiesRow { display: none !important; }

/* ── INLINE ADDRESS REMOVE BUTTON ──────────────────────────── */
.addr-remove-btn {
  flex-shrink: 0;
  height: var(--input-h);
  padding: 0 10px;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-sm);
  color: var(--c-ink4);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  white-space: nowrap;
}
.addr-remove-btn:hover { color: #f87171; background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); }

/* ── ANALYZED ADDRESS DISPLAY ───────────────────────────────── */
.ig-analyzed-addr {
  margin: 0 16px 4px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-sm);
  font-size: .78rem;
  color: var(--c-ink3);
  line-height: 1.4;
  word-break: break-word;
}
.ig-analyzed-addr strong { color: var(--c-ink2); font-weight: 600; }

/* ── FINANCIAL BENCHMARKS SECTION ───────────────────────────── */
.fin-benchmarks {
  margin: 0 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fin-bench-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 12px 14px;
}
.fin-bench-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink3); margin-bottom: 4px; }
.fin-bench-value { font-family: var(--f-mono); font-size: 1.1rem; font-weight: 700; color: var(--c-ink); }
.fin-bench-sub { font-size: .68rem; color: var(--c-ink3); margin-top: 2px; }

/* ── WALK SCORE SECTION ─────────────────────────────────────── */
.walk-score-grid {
  margin: 0 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.walk-score-card {
  background: var(--c-surface);
  border: 1px solid var(--c-card-border);
  border-radius: var(--r-sm);
  padding: 10px 8px;
  text-align: center;
}
.walk-score-icon { font-size: 1.2rem; margin-bottom: 4px; }
.walk-score-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink3); }
.walk-score-value { font-family: var(--f-mono); font-size: 1rem; font-weight: 700; color: var(--c-ink2); margin-top: 2px; }
.walk-score-value.na { font-size: .68rem; color: var(--c-ink4); }

/* ── SCREENING ASSUMPTIONS PANEL ───────────────────────────── */
.screening-assumptions {
  margin: 8px 16px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  overflow: hidden;
}
.screening-assumptions summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-ink2);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.screening-assumptions summary:hover { background: rgba(255,255,255,0.06); color: var(--c-ink); }
.sa-hint {
  font-size: .7rem; font-weight: 400; color: var(--c-ink4);
  margin-left: auto; margin-right: .5rem;
}
.screening-assumptions summary::after { content: '▾'; font-size: .7rem; color: var(--c-ink3); transition: transform .2s; }
.screening-assumptions[open] summary::after { transform: rotate(180deg); }
.screening-assumptions-body {
  padding: 1.25rem;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sa-field label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  color: var(--c-ink3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 5px;
}
/* Direct inputs (not inside .sa-input-wrap) */
.sa-field > input, .sa-field > select {
  width: 100%;
  height: 36px;
  background: var(--c-bg);
  border: 1px solid var(--c-border2);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: .875rem;
  padding: 0 10px;
  outline: none;
  transition: border-color .15s;
}
.sa-field > input:focus, .sa-field > select:focus { border-color: var(--c-blue); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.sa-rerun-btn {
  width: 100%;
  height: 44px;
  background: rgba(37,99,235,0.1);
  border: 1px solid rgba(37,99,235,0.35);
  border-radius: var(--r-sm);
  color: var(--c-blue);
  font-family: var(--f-sans);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .15s;
  margin-top: .25rem;
}
.sa-rerun-btn:hover { background: rgba(37,99,235,0.18); }
.sa-rerun-btn:active { background: rgba(37,99,235,0.25); }

/* Assumptions groups grid (DealPulse style) */
.sa-groups-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: .25rem;
}
.sa-group {
  flex: 1 1 160px;
  min-width: 150px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: .75rem .875rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sa-group-title {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink4);
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
.sa-group-note {
  font-size: .65rem;
  color: var(--c-ink4);
  line-height: 1.4;
  margin-top: 2px;
}
.sa-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sa-input-wrap {
  display: flex;
  align-items: center;
  background: var(--c-bg);
  border: 1px solid var(--c-border2);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color .15s;
}
.sa-input-wrap:focus-within { border-color: var(--c-blue); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.sa-prefix, .sa-unit {
  padding: 0 7px;
  font-size: .8rem;
  color: var(--c-ink3);
  background: rgba(255,255,255,0.05);
  white-space: nowrap;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.sa-prefix { border-right: 1px solid var(--c-border); }
.sa-unit   { border-left:  1px solid var(--c-border); }
.sa-input-with-prefix input,
.sa-input-with-unit input {
  flex: 1;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: .875rem;
  padding: 0 8px;
  outline: none;
  min-width: 0;
}

/* ── WIZARD OUTER TAB BAR ──────────────────────────────────── */
.wizard-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--wizard-tabbar-h);
  background: var(--c-nav);
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: var(--sab);
}
.wizard-tab-btn {
  flex: 1;
  min-height: var(--tap);
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 10px;
  margin: 0 3px;
  color: var(--c-ink3);
  transition: background .15s, color .15s;
}
.wizard-tab-btn.active {
  background: rgba(37,99,235,0.1);
  color: var(--c-blue);
}
.wizard-tab-icon { font-size: 1.1rem; line-height: 1; }
.wizard-tab-label { font-size: .62rem; font-weight: 600; letter-spacing: .02em; }

/* Syncing indicator — pulsing dot on Screening tab while calc→screening sync runs */
.wizard-tab-btn.syncing .wizard-tab-icon::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-blue);
  margin-left: 3px;
  vertical-align: top;
  animation: tab-sync-pulse 0.9s ease-in-out infinite;
}
@keyframes tab-sync-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.25; transform: scale(.7); }
}

/* When wizard step 3 is active, inner tabbar sits above wizard tabbar */
body.wizard-step-3 { padding-bottom: calc(var(--wizard-tabbar-h) + var(--tabbar-h)); }
body.wizard-step-3 .tabbar {
  bottom: var(--wizard-tabbar-h);
}

/* ── WIZARD PANELS ─────────────────────────────────────────── */
.wizard-panel {
  min-height: calc(100dvh - 64px - var(--sat) - var(--wizard-tabbar-h));
  padding-bottom: calc(var(--wizard-tabbar-h) + 40px);
}

/* Explicit per-step body padding so content clears fixed tabbars */
body.wizard-step-1,
body.wizard-step-2 { padding-bottom: var(--wizard-tabbar-h); }

/* SEO titlebar is only relevant on the Calculator step */
body.wizard-step-1 .app-titlebar,
body.wizard-step-2 .app-titlebar { display: none !important; }

/* ── STEP 1: NEIGHBORHOOD INTELLIGENCE ────────────────────── */
/* Body address block hidden — header has unified address bar */
.neighborhood-address-block {
  display: none;
  padding: 20px 16px 16px;
}
.na-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--c-ink3);
  text-transform: uppercase;
  letter-spacing: .10em;
  margin-bottom: 10px;
}
.na-input-row {
  display: flex;
  gap: 8px;
}
.na-input {
  flex: 1;
  height: var(--input-h);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: 1em;
  padding: 0 14px;
  outline: none;
  transition: border-color .15s;
}
.na-input:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-ring); }
.na-analyze-btn {
  height: var(--input-h);
  min-width: var(--tap);
  padding: 0 20px;
  background: var(--c-blue);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--f-sans);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.na-analyze-btn:active { background: var(--c-blue-d); }
.na-analyze-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Address autocomplete dropdown */
.addr-autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #1e1e24;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  z-index: 200;
  list-style: none;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3);
  max-height: 260px;
  overflow-y: auto;
}
.addr-ac-item, .addr-ac-add {
  padding: 13px 16px;
  font-size: .9rem;
  color: var(--c-ink);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .12s ease;
}
.addr-ac-item::before {
  content: '\1F4CD';
  font-size: .85rem;
  opacity: .6;
  flex-shrink: 0;
}
.addr-ac-item:last-of-type { border-bottom: none; }
.addr-ac-item:hover {
  background: rgba(37,99,235,0.12);
  color: var(--c-ink);
}
.addr-ac-add {
  color: var(--c-blue);
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: none;
}

/* Loading state */
.ig-loading {
  padding: 32px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ig-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-blue);
  border-radius: 50%;
  animation: igSpin .8s linear infinite;
}
@keyframes igSpin { to { transform: rotate(360deg); } }
.ig-loading-text { font-size: .95rem; font-weight: 600; color: var(--c-ink2); }
.ig-loading-steps { font-size: .78rem; color: var(--c-ink3); }

/* Grade card */
.grade-card {
  margin: 0 16px 16px;
  padding: 20px 16px;
  border-radius: var(--r);
  border: 1px solid var(--c-border);
  border-top-width: 3px;
  border-top-color: var(--c-border2);
  display: flex;
  align-items: center;
  gap: 16px;
}
.grade-card.grade-a { border-top-color: var(--c-blue);  background: rgba(37,99,235,0.08);  }
.grade-card.grade-b { border-top-color: var(--c-green); background: rgba(4,218,127,0.08);  }
.grade-card.grade-c { border-top-color: var(--c-amber); background: rgba(245,158,11,0.08); }
.grade-card.grade-d { border-top-color: var(--c-red);   background: rgba(220,38,38,0.08);  }
.grade-letter {
  font-size: 2.8rem;
  font-weight: 800;
  font-family: var(--f-mono);
  line-height: 1;
}
.grade-card.grade-a .grade-letter { color: #60a5fa; }
.grade-card.grade-b .grade-letter { color: var(--c-green); }
.grade-card.grade-c .grade-letter { color: var(--c-amber); }
.grade-card.grade-d .grade-letter { color: #f87171; }
.grade-info { flex: 1; }
.grade-label-text { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-ink3); }
.grade-name { font-size: 1.05rem; font-weight: 700; color: var(--c-ink); margin-top: 2px; }
.grade-score-display { font-size: .78rem; color: var(--c-ink3); font-family: var(--f-mono); margin-top: 2px; }

/* Tract metrics grid */
.tract-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 16px;
}
.tract-metric-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 12px;
}
.tract-metric-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink3);
  margin-bottom: 4px;
}
.tract-metric-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.tract-metric-change {
  font-size: .68rem;
  margin-top: 2px;
  font-family: var(--f-mono);
}
.tract-metric-change.up   { color: var(--c-green); }
.tract-metric-change.down { color: #f87171; }
.tract-metric-change.flat { color: var(--c-ink4); }

/* Sovereign warnings */
.sovereign-warnings {
  margin: 0 16px 16px;
}
.sw-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-amber);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sw-title::before { content: '⚠'; font-size: .9rem; }
.sw-flag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--c-amber-bg);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
}
.sw-flag-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-amber);
}
.sw-flag-detail {
  font-size: .75rem;
  color: var(--c-ink2);
  margin-top: 2px;
}

/* FEMA panel */
.fema-panel {
  margin: 0 16px 16px;
  padding: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}
.fema-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink3);
  margin-bottom: 8px;
}
.fema-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: .82rem;
}
.fema-row-label { color: var(--c-ink2); }
.fema-row-value { font-family: var(--f-mono); font-weight: 600; color: var(--c-ink); }

/* Continue CTA */
.ig-cta {
  padding: 16px;
  border-top: 1px solid var(--c-border);
  margin-top: 8px;
}
.ig-cta-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--c-ink3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 8px;
}
.ig-price-input {
  width: 100%;
  height: var(--input-h);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-family: var(--f-mono);
  font-size: 1.1em;
  font-variant-numeric: tabular-nums;
  padding: 0 14px;
  outline: none;
  margin-bottom: 10px;
  transition: border-color .15s;
}
.ig-price-input:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-ring); }

.wizard-continue-btn {
  width: 100%;
  height: var(--tap);
  min-height: var(--tap);
  background: var(--c-blue);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--f-sans);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.wizard-continue-btn:active { background: var(--c-blue-d); }
.wizard-continue-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── STEP 2: SCREENING ─────────────────────────────────────── */
.screening-verdict {
  padding: 1.25rem 1rem;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.sv-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.sv-prelim-tag {
  margin-left: auto;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink4);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}
.sv-badge {
  padding: 7px 18px;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sv-badge.go    { background: rgba(4,218,127,0.15);  color: var(--c-green); }
.sv-badge.maybe { background: rgba(37,99,235,0.15);   color: #60a5fa; }
.sv-badge.weak  { background: rgba(245,158,11,0.15);  color: var(--c-amber); }
.sv-badge.pass  { background: rgba(220,38,38,0.12);   color: #f87171; }
.sv-title { font-size: 1rem; font-weight: 700; color: var(--c-ink); }
.sv-metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.sv-metric-chip {
  padding: 5px 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: .75rem;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink2);
}
.sv-metric-chip strong { color: var(--c-ink); font-weight: 700; }
.sv-best-detail {
  font-size: .7rem;
  color: var(--c-ink4);
  margin-top: 8px;
  letter-spacing: .01em;
}
.sv-best-detail strong { color: var(--c-ink3); }

/* ── Dual-column verdict (FMR est. vs actual rent) ────────────── */
.sv-dual-header {
  display: flex;
  justify-content: center;
  padding: 0 0 4px;
}
.sv-dual-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.sv-dual-col {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sv-dual-col-actual {
  border-color: rgba(37,99,235,0.3);
  background: rgba(37,99,235,0.05);
}
.sv-dual-col-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-ink4);
}
.sv-dual-col-actual .sv-dual-col-label { color: #60a5fa; }
.sv-col-sub {
  font-size: .68rem;
  color: var(--c-ink3);
  font-weight: 500;
}
.sv-metrics-sm {
  flex-wrap: wrap;
  gap: 4px;
}
.sv-metrics-sm .sv-metric-chip {
  font-size: .65rem;
  padding: 2px 7px;
}

/* ── Strategy & Financing Cards (DealPulse-style interactive) ── */
.strategy-section {
  padding: 16px 16px 12px;
}
.section-heading {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-ink3);
  margin: 0 0 14px;
}
.grid-filter-hint {
  font-size: .7rem;
  font-weight: 500;
  color: var(--c-blue);
  opacity: .9;
  text-transform: none;
  letter-spacing: 0;
}
.strategy-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 900px) {
  .strategy-cards-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 500px) {
  .strategy-cards-grid { grid-template-columns: 1fr; }
}
.strategy-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 1.375rem;
  position: relative;
  cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.strategy-card:hover { transform: translateY(-2px); border-color: var(--c-border2); }
.strategy-card.selected {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 2px rgba(37,99,235,.35);
}
.strategy-card.best {
  border-color: var(--c-amber);
  box-shadow: 0 0 0 1px rgba(245,158,11,.25);
}
.strategy-card.best.selected {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 2px rgba(37,99,235,.35), 0 0 0 4px rgba(245,158,11,.2);
}
.strategy-best-badge {
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--c-amber);
  color: #000;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .2rem .75rem;
  border-radius: 20px;
  white-space: nowrap;
}
.strategy-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 1rem;
}
.strategy-name-wrap { display: flex; align-items: center; gap: .5rem; }
.strategy-emoji { font-size: 1.375rem; line-height: 1; }
.strategy-name { font-weight: 700; font-size: .9375rem; color: var(--c-ink); }
.strategy-desc { font-size: .7rem; color: var(--c-ink3); margin-top: .1rem; }
.strategy-sublabel { font-size: .65rem; color: var(--c-ink3); opacity: .8; margin-top: .15rem; }
.strategy-verdict {
  font-size: .625rem; font-weight: 700; letter-spacing: .05em;
  padding: .2rem .6rem; border-radius: 20px; flex-shrink: 0;
}
.strategy-verdict.go    { background: var(--c-green-bg); color: var(--c-green); }
.strategy-verdict.maybe { background: var(--c-blue-bg);  color: #60a5fa; }
.strategy-verdict.weak  { background: var(--c-amber-bg); color: var(--c-amber); }
.strategy-verdict.pass  { background: var(--c-red-bg);   color: #f87171; }
.strategy-metrics { display: flex; flex-direction: column; gap: .45rem; }
.sm-row { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; }
.sm-label { color: var(--c-ink3); }
.sm-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.sm-value.positive { color: var(--c-green); }
.sm-value.negative { color: #f87171; }
.strategy-divider { height: 1px; background: var(--c-border); margin: .5rem 0; }
.strategy-coc { display: flex; justify-content: space-between; align-items: baseline; margin-top: .35rem; }
.strategy-coc .label { font-size: .72rem; color: var(--c-ink3); font-weight: 500; }
.strategy-coc .value { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.strategy-coc .value.positive { color: var(--c-green); }
.strategy-coc .value.negative { color: #f87171; }
.strategy-coc .value.neutral  { color: var(--c-blue); }

/* Sensitivity table */
.sensitivity-section { padding: 0 16px 16px; }
.sens-table {
  width: 100%; border-collapse: collapse; font-size: .78rem;
}
.sens-table th {
  padding: 5px 6px; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-ink4); text-align: center; border-bottom: 1px solid var(--c-border);
}
.sens-table th:first-child { text-align: left; }
.sens-table td {
  padding: 7px 6px; border-bottom: 1px solid var(--c-border);
  font-family: var(--f-mono); font-size: .78rem; font-variant-numeric: tabular-nums;
  text-align: center;
}
.sens-table td:first-child { font-family: var(--f-sans); color: var(--c-ink2); text-align: left; }
.sens-table td.positive { color: var(--c-green); font-weight: 600; }
.sens-table td.neutral  { color: #60a5fa; }
.sens-table td.negative { color: #f87171; }
.sens-table tr.sens-base td { font-weight: 700; color: var(--c-ink); background: rgba(255,255,255,.03); }
.sens-table td.sens-best-col { font-family: var(--f-sans); color: var(--c-ink2); font-size: .7rem; }
.sens-footnote { font-size: .6rem; color: var(--c-ink4); margin: 8px 0 0; line-height: 1.4; }

/* Projections table */
.projections-section { padding: 0 16px 16px; }
.proj-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.growth-toggle-group { display: flex; gap: 4px; flex-wrap: wrap; }
.growth-toggle {
  padding: 3px 10px; font-size: .68rem; font-weight: 600;
  border-radius: 20px; border: 1px solid var(--c-border2); background: transparent;
  color: var(--c-ink3); cursor: pointer; transition: all .15s;
}
.growth-toggle:hover  { background: rgba(255,255,255,.06); color: var(--c-ink); }
.growth-toggle.active { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.proj-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.proj-table th {
  padding: 5px 6px; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-ink4); text-align: right; border-bottom: 1px solid var(--c-border);
}
.proj-table th:first-child { text-align: left; }
.proj-table td {
  padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--c-border);
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
}
.proj-table td:first-child { text-align: left; font-family: var(--f-sans); color: var(--c-ink2); font-weight: 600; }
.proj-table td.positive { color: var(--c-green); }
.proj-table td.neutral  { color: #60a5fa; }
.proj-table td.negative { color: #f87171; }
.proj-assumptions { font-size: .6rem; color: var(--c-ink4); margin: 8px 0 0; line-height: 1.4; }

/* (legacy — kept for reference, replaced by .sa-groups-row layout) */
.sa-section-label {
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-ink4); margin: 0 0 8px;
}
.sa-field-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sa-advanced {
  border: none; margin: 8px 0 0;
}
.sa-advanced summary {
  font-size: .7rem; color: var(--c-ink3); cursor: pointer; padding: 4px 0;
  list-style: none; font-weight: 600;
}
.sa-advanced summary:hover { color: var(--c-ink2); }
.fema-flood-high { color: #f87171 !important; font-weight: 600; }
.fema-flood-safe { color: var(--c-green) !important; }

/* Screening CTA */
.screening-cta {
  padding: 16px;
  border-top: 1px solid var(--c-border);
}

/* ── AI SUGGESTION BADGES ──────────────────────────────────── */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  background: rgba(37,99,235,0.12);
  border: 1px solid rgba(37,99,235,0.3);
  border-radius: 20px;
  font-size: .62rem;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 6px;
}
.ai-badge-source {
  color: rgba(97,165,250,0.8);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.ai-badge-value {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: #60a5fa;
}
.ai-badge-use {
  background: var(--c-blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 1px 7px;
  cursor: pointer;
  font-size: .6rem;
  font-weight: 700;
  min-height: 20px;
  line-height: 1.4;
}
.ai-badge-use:active { background: var(--c-blue-d); }
.ai-badge-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0 2px;
  font-size: .75rem;
  line-height: 1;
  min-height: 20px;
}
.ai-badge-dismiss:hover { color: rgba(255,255,255,0.6); }

/* AI badge variant: sits below the input field rather than inline with label */
.ai-badge.ai-badge-below {
  /* When JS clears style.display, this rule takes over (flex = block-level row) */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  margin-left: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(37,99,235,0.22);
  font-size: .72rem;
}

/* ── DESKTOP ENHANCEMENTS ──────────────────────────────────── */
@media (min-width: 640px) {
  .tract-metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .wizard-tab-label { font-size: .7rem; }
}

/* ── Deal Hero: hidden on Steps 1 & 2, full on Step 3 ─────── */
body:not(.wizard-step-3) .deal-hero { display: none; }

/* ── Screening Verdict: inline asset class grade pill ──────── */
.sv-grade-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--c-border2);
  border-radius: 8px;
  padding: 4px 10px;
  flex-shrink: 0;
}
.sv-grade-letter {
  font-size: 1rem;
  font-weight: 900;
  font-family: var(--f-mono);
  line-height: 1;
}
.sv-grade-name {
  font-size: .6rem;
  font-weight: 600;
  color: var(--c-ink3);
  white-space: nowrap;
}
.sv-grade-pill.grade-a { border-color: rgba(4,218,127,0.4); }
.sv-grade-pill.grade-a .sv-grade-letter { color: var(--c-green); }
.sv-grade-pill.grade-a .sv-grade-name   { color: rgba(4,218,127,.7); }
.sv-grade-pill.grade-b { border-color: rgba(37,99,235,0.4); }
.sv-grade-pill.grade-b .sv-grade-letter { color: #60a5fa; }
.sv-grade-pill.grade-b .sv-grade-name   { color: rgba(96,165,250,.7); }
.sv-grade-pill.grade-c { border-color: rgba(245,158,11,0.4); }
.sv-grade-pill.grade-c .sv-grade-letter { color: var(--c-amber); }
.sv-grade-pill.grade-c .sv-grade-name   { color: rgba(245,158,11,.7); }
.sv-grade-pill.grade-d { border-color: rgba(220,38,38,0.4); }
.sv-grade-pill.grade-d .sv-grade-letter { color: #f87171; }
.sv-grade-pill.grade-d .sv-grade-name   { color: rgba(248,113,113,.7); }

/* ── Step content wrapper: strip lateral margins from inner sections ── */
.step-content .neighborhood-address-block { padding-left: 0; padding-right: 0; }
.step-content .grade-card                 { margin-left: 0; margin-right: 0; }
.step-content .tract-metrics-grid         { margin-left: 0; margin-right: 0; }
.step-content .fin-benchmarks             { margin-left: 0; margin-right: 0; }
.step-content .walk-score-grid            { margin-left: 0; margin-right: 0; }
.step-content .sovereign-warnings         { margin-left: 0; margin-right: 0; }
.step-content .fema-panel                 { margin-left: 0; margin-right: 0; }
.step-content .ig-loading                 { margin-left: 0; margin-right: 0; }
.step-content .ig-cta                     { margin-left: 0; margin-right: 0; }
.step-content .strategy-section           { margin-left: 0; margin-right: 0; }

/* ══════════════════════════════════════════════════════════════
   OUTPUT DASHBOARD CARDS — static, always-open, metric grids
   ══════════════════════════════════════════════════════════════ */
.section-card.output-card {
  border-top: 3px solid var(--c-blue);
}
.section-card.output-card .section-trigger {
  cursor: default;
  border-bottom: none;
  pointer-events: none;
  padding: 14px 16px 4px;
  min-height: auto;
}
.section-card.output-card .section-trigger-icon  { display: none; }
.section-card.output-card .section-trigger-right  { display: none; }
.section-card.output-card .section-trigger-name {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--c-ink3);
}
.section-card.output-card .section-body {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 16px 16px;
}

/* Sum-rows → metric cards */
.section-card.output-card .sum-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  margin-bottom: 0;
  padding: 12px;
  min-height: auto;
}
.section-card.output-card .sum-row-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink3);
}
.section-card.output-card .sum-row-value {
  font-size: 1.1rem;
  font-weight: 700;
}
.section-card.output-card .sum-row.highlight {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* Metric-rows (Key Metrics) → grid cards */
.section-card.output-card .metric-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}
.section-card.output-card .metric-row:last-child {
  border-bottom: 1px solid var(--c-border);
}
.section-card.output-card .metric-name {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink3);
  margin-bottom: 0;
}
.section-card.output-card .metric-value {
  font-size: 1.1rem;
}
.section-card.output-card .metric-explain {
  font-size: .6rem;
  color: var(--c-ink4);
  line-height: 1.3;
}

/* ROI table spans full width */
.section-card.output-card .roi-table {
  grid-column: 1 / -1;
}

/* Mobile: 1-column grid */
@media (max-width: 430px) {
  .section-card.output-card .section-body {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   INPUT ACCORDION CARDS — screening-assumptions style
   ══════════════════════════════════════════════════════════════ */
.section-card.input-card .section-trigger {
  background: rgba(255,255,255,0.03);
  border-bottom: none;
  padding: 12px 16px;
  min-height: auto;
}
.section-card.input-card:not(.collapsed) .section-trigger {
  border-bottom: 1px solid var(--c-border);
}
.section-card.input-card .section-trigger:hover {
  background: rgba(255,255,255,0.06);
}
.section-card.input-card .section-trigger-icon { display: none; }
.section-card.input-card .section-badge        { display: none; }
.section-card.input-card .section-trigger-name {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--c-ink3);
}
.section-card.input-card:not(.collapsed) .section-trigger-name {
  color: var(--c-ink);
}
.section-card.input-card .section-caret {
  font-size: .7rem;
  color: var(--c-ink3);
  transition: transform .2s;
}
.section-card.input-card:not(.collapsed) .section-caret {
  transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════
   SEMANTIC VALUE TINTING — red/green on computed values
   ══════════════════════════════════════════════════════════════ */
.sum-row.val-negative,
.metric-row.val-negative {
  background: rgba(220,38,38,0.08) !important;
  border-color: rgba(220,38,38,0.15) !important;
}
.sum-row.val-negative .sum-row-value,
.metric-row.val-negative .metric-value {
  color: #f87171 !important;
}
.sum-row.val-positive .sum-row-value,
.metric-row.val-positive .metric-value {
  color: var(--c-green);
}
.sum-row.highlight.val-positive {
  background: rgba(4,218,127,0.08);
  border-color: rgba(4,218,127,0.15);
}
.sum-row.highlight.val-negative {
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.15);
}
.sum-row.highlight.val-positive .sum-row-value { color: var(--c-green); }
.sum-row.highlight.val-negative .sum-row-value { color: #f87171; }