/* ===========================================
   REI ANALYZER · LIGHT AI-STARTUP THEME
   Loaded AFTER styles.css to override the
   editorial palette with a Linear / Vercel /
   Anthropic-flavored light system.
   =========================================== */

/* The `hidden` attribute must always win.
   -----------------------------------------------------------------
   The browser's own rule is just [hidden]{display:none} at UA
   specificity, so ANY class that sets `display` silently defeats it.
   We hide things with the attribute all over the app, and this bit us
   three separate times in one day — most seriously with the admin-only
   menu rows (.dum-row{display:flex}), which meant "Admin Dashboard",
   "Screenshot this tab" and "Record this tab" were rendered with
   hidden but visible to EVERY account. Also hit .pf-add (dead
   "+ Add Property" above a locked portfolio) and others.
   One rule closes the whole class of bug, including future cases. */
[hidden]{ display: none !important; }

:root{
  /* ===== GREEN-LIGHT (P5) — public/marketing default theme =====
     Bright green #7EE86A for FILLS (buttons/badges/borders), readable
     ink-green #2E8B3A for TEXT/icons (--accent-ink), dark text on green
     buttons (--on-accent). This is the always-on theme for public pages. */
  --bg:         #F5F6F8;                    /* light cool-gray page bg (was green-tinted) */
  --surface:    rgba(241,243,246,0.80);    /* translucent for glass */
  --surface-2:  #EEF0F3;
  --surface-solid: #FFFFFF;                /* opaque cards */

  --ink:        #11151C;
  --ink-2:      #333A45;
  --ink-3:      #5B6472;
  --ink-4:      #9AA1AD;
  --ink-muted:  #5B6472;

  --line:       #E3E6EB;
  --line-2:     #CCD2DB;
  --border:     #E3E6EB;

  /* Accent — LIGHT mode uses a RICH green (no light/bright green on light bg);
     bright #7EE86A is reserved for dark mode where it pops on near-black. */
  --accent:        #2E8B3A;                /* rich green — fills/buttons/borders/text */
  --accent-ink:    #2E8B3A;                /* same in light (already readable) */
  --accent-soft:   #E6F1E2;                /* very subtle green-tint bg / aurora seed */
  --accent-2:      #246E2E;                /* deeper green for hover */
  --accent-3:      #2E8B3A;
  --accent-4:      #2F8F7E;                /* deep teal-green */
  --accent-grad:   #2E8B3A;                /* flat rich green */
  --accent-grad-soft: linear-gradient(135deg, rgba(46,139,58,0.12) 0%, rgba(46,139,58,0.08) 100%);

  --on-accent: #FFFFFF;                    /* white text on the rich-green fill (light mode) */
  --on-dark:   #FFFFFF;                    /* light text on dark/ink surfaces */
  --brand-green-ink: #17A34A;              /* vivid, still-legible green for accent TEXT on white */

  /* Brand mark — theme-INVARIANT. The REIzer logo chip + avatar are
     always bright green #7EE86A with a near-black glyph, in BOTH light
     and dark (matches _dashboard-reizer-theme.html). Only the "zer"
     wordmark text adapts (--accent-ink) for readability on light bg. */
  --brand-fill: #7EE86A;
  --brand-ink:  #0C0F0A;
  --brand-glow: rgba(126,232,106,0.18);
  /* Membership tier badge colors — used everywhere a plan badge renders
     (pricing cards, settings, dashboard menu). Pro = reizer brand green. */
  --tier-explorer:     #B87333; --tier-explorer-ink: #FFFFFF;   /* bronze */
  --tier-investor:     #AEB4BD; --tier-investor-ink: #1F2630;   /* silver */
  --tier-pro:          var(--brand-fill); --tier-pro-ink: var(--brand-ink);  /* reizer green */
  --tier-elite:        #D4AF37; --tier-elite-ink: #2E2200;      /* gold */
  /* Elegant serif for large marketing/hero display text (not the UI). */
  --font-serif: 'Instrument Serif', 'Playfair Display', Georgia, 'Times New Roman', serif;

  --pos:        #2E8B3A;
  --pos-soft:   rgba(54,169,75,0.14);
  --neg:        #D64545;
  --neg-soft:   rgba(214,69,69,0.12);
  --warn:       #C2691A;
  --warn-soft:  rgba(194,105,26,0.12);

  --accent-strong: #1F6B2A;
  --pos-strong:    #1F6B2A;
  --neg-strong:    #B02E2E;
  --warn-strong:   #8A6A12;

  --shadow-sm:  0 1px 2px rgba(20,30,15,0.05);
  --shadow-md:  0 8px 24px -8px rgba(20,30,15,0.12);
  --shadow-lg:  0 24px 60px -20px rgba(20,30,15,0.18);

  --radius:     14px;
  --radius-lg:  20px;
}

/* ============================================================
   DARK THEME — global CSS variable overrides
   ------------------------------------------------------------
   Every component that uses `var(--xxx)` automatically picks
   up the dark value when html[data-theme="dark"] is set. The
   theme switcher (assets/js/theme-service.js) toggles that
   attribute. Components with hardcoded colors get scoped
   overrides further down in this file under the same selector.
   ============================================================ */
html[data-theme="dark"]{
  /* ===== GREEN-DARK (P5) — dashboard/app opt-in dark theme ===== */
  --bg:            #0C0F0A;
  --surface:       rgba(19, 23, 16, 0.82);
  --surface-2:     #131710;
  --surface-solid: #181D14;

  --ink:    #E8EDE4;
  --ink-2:  #C2CBBA;
  --ink-3:  #7A8872;
  --ink-4:  #4A5445;
  --ink-muted: #7A8872;

  --line:   #252C1F;
  --line-2: #3A4530;
  --border: #252C1F;

  --accent:           #7EE86A;        /* bright green works as fill AND text on dark */
  --accent-ink:       #7EE86A;
  --accent-soft:      rgba(126,232,106,0.18);
  --accent-2:         #6FD85A;
  --accent-3:         #5BC947;
  --accent-4:         #4FB89A;
  --accent-grad:      #7EE86A;
  --accent-grad-soft: linear-gradient(135deg, rgba(126,232,106,0.18) 0%, rgba(126,232,106,0.12) 100%);

  --on-accent: #0C0F0A;
  --on-dark:   #E8EDE4;

  --pos:       #6BDB55;
  --pos-soft:  rgba(126,232,106,0.18);
  --neg:       #E86A6A;
  --neg-soft:  rgba(232,106,106,0.18);
  --warn:      #E8C46A;
  --warn-soft: rgba(232,196,106,0.18);

  --accent-strong: #4FA838;
  --pos-strong:    #4FA838;
  --neg-strong:    #C24A4A;
  --warn-strong:   #B8862A;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.50);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.65);
}

/* ============================================================
   MIDNIGHT THEME — pure black, OLED-friendly
   ============================================================ */
html[data-theme="midnight"]{
  /* ===== GREEN-MIDNIGHT (P5) — OLED-black variant of green-dark ===== */
  --bg:            #000000;
  --surface:       rgba(8, 10, 6, 0.82);
  --surface-2:     #080A06;
  --surface-solid: #0E120A;

  --ink:    #F0F4EC;
  --ink-2:  #C8D0C0;
  --ink-3:  #808E78;
  --ink-4:  #4E5848;
  --ink-muted: #808E78;

  --line:   #1A1F15;
  --line-2: #2A3220;
  --border: #1A1F15;

  --accent:           #7EE86A;
  --accent-ink:       #7EE86A;
  --accent-soft:      rgba(126,232,106,0.20);
  --accent-2:         #6FD85A;
  --accent-3:         #5BC947;
  --accent-4:         #4FB89A;
  --accent-grad:      #7EE86A;
  --accent-grad-soft: linear-gradient(135deg, rgba(126,232,106,0.20) 0%, rgba(126,232,106,0.12) 100%);

  --on-accent: #000000;
  --on-dark:   #F0F4EC;

  --pos:       #6BDB55;
  --pos-soft:  rgba(126,232,106,0.20);
  --neg:       #E86A6A;
  --neg-soft:  rgba(232,106,106,0.20);
  --warn:      #E8C46A;
  --warn-soft: rgba(232,196,106,0.20);

  --accent-strong: #4FA838;
  --pos-strong:    #4FA838;
  --neg-strong:    #C24A4A;
  --warn-strong:   #B8862A;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.60);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.70);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.80);
}

/* ===========================================
   PAGE BACKGROUND — soft radial aurora
   =========================================== */
html, body{
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 8% -10%, rgba(15,23,42,0.035) 0%, transparent 60%),
    radial-gradient(800px 500px at 90% 100%, rgba(15,23,42,0.022) 0%, transparent 60%);
  background-attachment: fixed;
}
/* Dark aurora: soft green glows on near-black base */
html[data-theme="dark"], html[data-theme="dark"] body{
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 8% -10%,  rgba(126,232,106,0.10) 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%,   rgba(126,232,106,0.07) 0%, transparent 55%),
    radial-gradient(800px 500px at 90% 100%,  rgba(63,169,140,0.06)  0%, transparent 60%);
}
/* Midnight: minimal green glow on true black, OLED-friendly */
html[data-theme="midnight"], html[data-theme="midnight"] body{
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 8% -10%,  rgba(126,232,106,0.07) 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%,   rgba(126,232,106,0.05) 0%, transparent 55%);
}

/* ===========================================
   PLATFORM NAV — frosted glass over the aurora
   =========================================== */
nav.platform-nav{
  background: #0C0F0A;   /* black header across the whole app (matches dashboard + marketing) */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* App pages use plain .platform-nav (no .landing-nav) — give them the same
   black-header treatment: green chevron, REI-white/zer-green wordmark, white
   tabs. (.landing-nav rules below are more specific and win on marketing.) */
nav.platform-nav .brand{ color: #ffffff; }
nav.platform-nav .brand em{ color: var(--brand-fill); font-style: normal; }
nav.platform-nav .brand .brand-mark{ display: none; }
nav.platform-nav .brand-icon{ width: 34px; height: 34px; background: transparent; box-shadow: none; border-radius: 0; }
nav.platform-nav .brand-icon .cm-roof{ width: 28px; height: 28px; }
nav.platform-nav .brand-icon .cm-roof path{ stroke: var(--brand-fill); stroke-width: 2.6; }
nav.platform-nav .tabs a{ color: rgba(255,255,255,0.82); }
nav.platform-nav .tabs a:hover,
nav.platform-nav .tabs a.active{ color: #ffffff; background: rgba(255,255,255,0.10); }
html[data-theme="dark"] nav.platform-nav{
  background: rgba(12, 15, 10, 0.82);
  border-bottom-color: var(--line);
}
html[data-theme="midnight"] nav.platform-nav{
  background: rgba(4, 5, 3, 0.85);
  border-bottom-color: var(--line);
}

/* Brand chevron mark layout (used inside .brand on marketing pages). */
.brand-icon{ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-icon .cm-roof{ display: block; }

/* === Black marketing/landing header (Robinhood-style) — applies to EVERY
   .landing-nav page (index + about/pricing/how-it-works/faq/contact/
   solutions/privacy/terms/auth). Green chevron + green grotesk "REIzer",
   full-white tabs, green Try-Demo CTA. Analyzer pages use plain
   .platform-nav and are unaffected. === */
nav.platform-nav.landing-nav{ background: #0C0F0A; border-bottom: 1px solid rgba(255,255,255,0.08); }
nav.platform-nav.landing-nav .brand{ font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -0.025em; color: #ffffff; gap: 9px; }
nav.platform-nav.landing-nav .brand em{ color: var(--brand-fill); font-style: normal; }
nav.platform-nav.landing-nav .brand .brand-mark{ display: none; }
nav.platform-nav.landing-nav .brand-icon{ width: 38px; height: 38px; background: transparent; box-shadow: none; border-radius: 0; }
nav.platform-nav.landing-nav .brand-icon .cm-roof{ width: 32px; height: 32px; }
nav.platform-nav.landing-nav .brand-icon .cm-roof path{ stroke: var(--brand-fill); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
nav.platform-nav.landing-nav .landing-tabs a{ color: #ffffff; }
nav.platform-nav.landing-nav .landing-tabs a:hover{ color: #fff; background: rgba(255,255,255,0.12); border-color: transparent; }
/* Selected tab: no green pill — just white text with a subtle green underline. */
nav.platform-nav.landing-nav .landing-tabs a.active{ color: #fff; background: transparent; border-bottom: 2px solid var(--brand-fill); }
nav.platform-nav.landing-nav .nav-try-demo{ background: var(--brand-fill); color: var(--brand-ink); border-color: var(--brand-fill); }
nav.platform-nav.landing-nav .nav-try-demo:hover{ filter: brightness(1.05); background: var(--brand-fill); }
/* Other nav-cta / auth-widget text (e.g. "Sign in") reads light on black —
   but not the green .nav-btn ('Open dashboard'), which keeps its black text. */
nav.platform-nav.landing-nav .nav-cta a:not(.nav-try-demo):not(.nav-btn),
nav.platform-nav.landing-nav .auth-widget,
nav.platform-nav.landing-nav .auth-widget a,
nav.platform-nav.landing-nav .auth-widget button{ color: rgba(255,255,255,0.90); }
/* "Sign out" text link shown beside "Open dashboard" when signed in. */
nav.platform-nav.landing-nav .nav-signout{
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  text-decoration: none; padding: 8px 12px; border-radius: 8px;
  white-space: nowrap; flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
nav.platform-nav.landing-nav .nav-signout:hover{ color: #fff; background: rgba(255,255,255,0.12); }

/* ===========================================
   CARDS — light glass surfaces, soft shadow
   =========================================== */
section.card{
  background: var(--surface);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
section.card:hover{
  border-color: rgba(126,232,106,0.25);
  box-shadow: var(--shadow-md);
}

/* Variant that used to be "dark" — keep the visual hierarchy but stay light.
   Neutral surface tint (was an old indigo→violet gradient); distinguishes the
   primary panel from plain-white siblings without leaking off-theme hue. */
section.card.dark{
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-2);
}
section.card.dark .label,
section.card.dark .field-hint{ color: var(--ink-3); }
section.card.dark input{
  background: var(--surface-solid);
  color: var(--ink);
  border-color: var(--line);
}
section.card.dark .card-header .num{ background: var(--surface-2); color: var(--ink-3); }

/* ===========================================
   BUTTONS — gradient primary, refined ghost
   =========================================== */
/* The app's primary button. Uses the SAME brand green as .pf-add, the
   pricing CTAs and the upgrade modal — it previously used --accent-grad
   (#2E8B3A, a darker green with white text), so two different primary
   greens could appear side by side on one page. */
button.calc{
  background: var(--brand-fill);
  color: var(--brand-ink);
  border: none;
  border-radius: 999px;                       /* pill */
  padding: 12px 22px;
  box-shadow: 0 6px 16px -6px rgba(126,232,106,0.45);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
button.calc:hover:not(:disabled){
  background: color-mix(in srgb, var(--brand-fill), #000 8%);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(126,232,106,0.55);
}
button.calc:active:not(:disabled){ transform: translateY(0); filter: brightness(0.98); }

button.calc.secondary{
  background: var(--surface-solid);
  color: var(--ink-2);                  /* neutral outline secondary — was green */
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
}
button.calc.secondary:hover:not(:disabled){
  background: var(--surface-2);
  border-color: var(--ink-3);
  color: var(--ink);
  filter: none;
  box-shadow: 0 6px 16px -6px rgba(17,21,28,0.18);
}

button.calc.tertiary{
  background: var(--surface-solid);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
}
button.calc.tertiary:hover:not(:disabled){
  border-color: var(--ink-3);
  background: var(--surface-2);
  filter: none;
}

button.calc.export{
  background: var(--surface-solid);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
}
button.calc.export:hover:not(:disabled){
  border-color: var(--ink-3);
  background: var(--surface-2);
  filter: none;
}

button.ghost{
  background: var(--surface-solid);
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all 0.15s ease;
}
button.ghost:hover{
  color: var(--ink);
  border-color: var(--accent-ink);
  background: var(--accent-soft);
}

/* ===========================================
   PLATFORM-NAV TAB STATES — indigo accent
   =========================================== */
.platform-nav ul.tabs a.active{
  background: var(--accent-soft);
  color: var(--accent-2);
}
.platform-nav .brand .brand-mark{
  background: var(--surface-2);   /* neutral chip, not green-on-green */
  color: var(--ink-3);
}
.platform-nav .brand em{ color: var(--accent-ink); }

/* ===========================================
   ICON SYSTEM (P3) — currentColor line icons via assets/js/icons.js.
   [data-icon] holds an emoji fallback; the script swaps in an inline SVG that
   inherits the surrounding color (stroke:currentColor) and scales to ~1em.
   =========================================== */
[data-icon]{ display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
[data-icon] svg{ width: 2em; height: 2em; display: block; }
/* Prevent the emoji-fallback flash on load: keep [data-icon] slots reserved
   but hidden until icons.js swaps in the SVGs (it sets data-icons on <html>
   at that moment). visibility:hidden holds layout so nothing shifts. The
   <noscript> block on each page re-reveals the emoji when JS is off. */
html:not([data-icons]) [data-icon]{ visibility: hidden; }

/* Inline-with-text contexts (portfolio / my-deals buttons + links) — the
   2em default is sized for icon-only nav rails; next to a text label the
   icon should match the cap height, not tower over it. */
.pf-btn-ico{ vertical-align: -0.14em; }
.pf-btn-ico svg{ width: 1.05em; height: 1.05em; }
.dc-ico svg{ width: 1.25em; height: 1.25em; }
.pf-photo-icon[data-icon] svg{ width: 1.2em; height: 1.2em; }

/* ===========================================
   MASTHEAD H1 ".amp" — gradient text
   =========================================== */
h1 .amp{
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Subpage (masthead) titles — elegant Instrument Serif, all-black.
   The green accent on the "Workbench" word looked off, so it's neutral too. */
.masthead h1{
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;   /* Instrument Serif is a narrow display face — no negative tracking */
}
.masthead h1 .amp{
  background: none;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
  font-weight: 400;
}

/* ===========================================
   INPUT FIELDS — softer borders, focus ring
   =========================================== */
.input-wrap{
  border-radius: 10px;
}
.input-wrap input{
  border-radius: 10px;
  /* Opaque white, matching .input-wrap select and section.card.dark input.
     Without this, inputs inherit the translucent --surface from styles.css,
     which reads as grey inside plain .card sections while dark-card inputs
     and selects stay pure white — the same field looked two different colors
     across sections. Normalize every input to --surface-solid. */
  background: var(--surface-solid);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.input-wrap input:focus{
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 4px rgba(126,232,106,0.12);
  outline: none;
}
/* Missing required field — danger ring, mirrors the focus treatment */
.input-wrap.input-missing input,
.input-wrap.input-missing input:focus{
  border-color: var(--neg);
  box-shadow: 0 0 0 4px var(--neg-soft);
  background: var(--neg-soft);
}
.field.field-missing .label .req{
  animation: reqPulse 0.9s ease 2;
}
@keyframes reqPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.6); }
}

/* ===========================================
   STATS / VERDICT — refined accents
   =========================================== */
.stat{
  background: var(--surface);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-radius: var(--radius);
}
.stat:hover{ box-shadow: var(--shadow-sm); }

.verdict{
  background: linear-gradient(180deg, rgba(238,242,255,0.8) 0%, rgba(245,243,255,0.6) 100%);
  border-radius: var(--radius);
}

/* Subtle gradient on the section-title numeral */
.section-title .num{
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===========================================
   SIDE PANEL — slides in from the right
   Houses one feature's result block at a time.
   =========================================== */
#resultsStaging{
  position: fixed;
  left: -10000px;
  top: 0;
  width: 672px;
  visibility: visible;
  pointer-events: none;
  z-index: -1;
}
#resultsStaging .results-section{
  display: block;
  margin-top: 0;
}

.side-panel{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(720px, 94vw);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-left: 1px solid var(--line);
  box-shadow: -32px 0 60px -24px rgba(126,232,106,0.22);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 100;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.side-panel.open{ transform: translateX(0); }
/* Wide variant — for panels with charts + dense tables (e.g. NC stress tests) */
.side-panel.wide{ width: min(1180px, 98vw); }

.side-panel .sp-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(238,242,255,0.65) 0%, rgba(255,255,255,0) 100%);
}
.side-panel .sp-head h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.side-panel .sp-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  font-family: var(--font-display);
}
.side-panel .sp-close:hover{
  border-color: var(--accent-ink);
  color: var(--accent-ink);
  background: var(--accent-soft);
  transform: scale(1.05);
}

.side-panel .sp-body{
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 32px;
}

/* Scrollbar styling — mirrors the chat panel (ai-chat.css) so the
   side panel doesn't render the OS-default white scrollbar (which
   looks broken in dark/midnight themes). Thin track-less rail with
   a translucent thumb that flips to white-alpha in dark themes so
   it stays visible against the dark surface. */
.side-panel,
.side-panel *{
  scrollbar-width: thin;
  scrollbar-color: rgba(15,23,42,0.22) transparent;
}
.side-panel ::-webkit-scrollbar,
.side-panel::-webkit-scrollbar{ width: 8px; height: 8px; }
.side-panel ::-webkit-scrollbar-track,
.side-panel::-webkit-scrollbar-track{ background: transparent; }
.side-panel ::-webkit-scrollbar-thumb,
.side-panel::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,0.20);
  border-radius: 4px;
}
.side-panel ::-webkit-scrollbar-thumb:hover,
.side-panel::-webkit-scrollbar-thumb:hover{
  background: rgba(15,23,42,0.36);
}
.side-panel ::-webkit-scrollbar-button,
.side-panel::-webkit-scrollbar-button{
  display: none;
  width: 0;
  height: 0;
}
.side-panel ::-webkit-scrollbar-corner,
.side-panel::-webkit-scrollbar-corner{ background: transparent; }

html[data-theme="dark"] .side-panel,
html[data-theme="dark"] .side-panel *,
html[data-theme="midnight"] .side-panel,
html[data-theme="midnight"] .side-panel *{
  scrollbar-color: rgba(255,255,255,0.22) transparent;
}
html[data-theme="dark"] .side-panel ::-webkit-scrollbar-thumb,
html[data-theme="dark"] .side-panel::-webkit-scrollbar-thumb,
html[data-theme="midnight"] .side-panel ::-webkit-scrollbar-thumb,
html[data-theme="midnight"] .side-panel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.20);
}
html[data-theme="dark"] .side-panel ::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .side-panel::-webkit-scrollbar-thumb:hover,
html[data-theme="midnight"] .side-panel ::-webkit-scrollbar-thumb:hover,
html[data-theme="midnight"] .side-panel::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.36);
}

/* Page-level scrollbar in dark / midnight — the analyzer page's
   own body scroll renders white by default which looks broken
   against the dark surface. Apply the same translucent-thumb
   treatment to <html> + <body> so every scrollbar in the app
   matches the chat panel's. Light theme keeps OS-default. */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="midnight"],
html[data-theme="midnight"] body{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) transparent;
}
html[data-theme="dark"]::-webkit-scrollbar,
html[data-theme="dark"] body::-webkit-scrollbar,
html[data-theme="midnight"]::-webkit-scrollbar,
html[data-theme="midnight"] body::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
html[data-theme="dark"]::-webkit-scrollbar-track,
html[data-theme="dark"] body::-webkit-scrollbar-track,
html[data-theme="midnight"]::-webkit-scrollbar-track,
html[data-theme="midnight"] body::-webkit-scrollbar-track{
  background: transparent;
}
html[data-theme="dark"]::-webkit-scrollbar-thumb,
html[data-theme="dark"] body::-webkit-scrollbar-thumb,
html[data-theme="midnight"]::-webkit-scrollbar-thumb,
html[data-theme="midnight"] body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.20);
  border-radius: 5px;
}
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] body::-webkit-scrollbar-thumb:hover,
html[data-theme="midnight"]::-webkit-scrollbar-thumb:hover,
html[data-theme="midnight"] body::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.36);
}
html[data-theme="dark"]::-webkit-scrollbar-button,
html[data-theme="dark"] body::-webkit-scrollbar-button,
html[data-theme="midnight"]::-webkit-scrollbar-button,
html[data-theme="midnight"] body::-webkit-scrollbar-button{
  display: none;
  width: 0;
  height: 0;
}
html[data-theme="dark"]::-webkit-scrollbar-corner,
html[data-theme="dark"] body::-webkit-scrollbar-corner,
html[data-theme="midnight"]::-webkit-scrollbar-corner,
html[data-theme="midnight"] body::-webkit-scrollbar-corner{
  background: transparent;
}
.side-panel .sp-body .results-section{
  display: block;
  margin-top: 24px;
  animation: none;                    /* the rise keyframe was for inline appearance */
}
.side-panel .sp-body .section-divider,
.side-panel .sp-body .section-title{
  display: none;                      /* panel head already shows the title */
}
.side-panel .sp-body .section-sub{
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 13.5px;
  color: var(--ink-3);
}

.sp-scrim{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease-out;
  z-index: 90;
}
.sp-scrim.open{
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px){
  .side-panel{ width: 100vw; }
  #resultsStaging{ width: 92vw; }
}

/* ===========================================
   AUTH NAV WIDGET — sign-in chip + menu
   =========================================== */
.auth-widget{
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.auth-signin{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--on-accent);
  background: var(--accent-grad);
  border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(126,232,106,0.45),
              inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.auth-signin:hover{
  transform: translateY(-1px);
  filter: brightness(1.05) saturate(1.1);
  box-shadow: 0 8px 18px -6px rgba(126,232,106,0.55);
}
.auth-signin .auth-arrow{ font-size: 12px; opacity: 0.85; }

.auth-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.auth-chip:hover{
  border-color: var(--accent-ink);
  box-shadow: 0 4px 10px -4px rgba(126,232,106,0.30);
}
.auth-chip .auth-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.auth-chip .auth-email{
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-chip .auth-chev{
  font-size: 10px;
  color: var(--ink-4);
  margin-left: 2px;
}

/* Plan badge inside the auth chip — one-word tier indicator */
.auth-plan-badge{
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  margin-left: 6px;
  font-family: var(--font-display);   /* was mono — see .settings-table th */
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--line);
  line-height: 1.2;
}
.auth-plan-badge.auth-plan-explorer{
  background: var(--tier-explorer);
  color: var(--tier-explorer-ink);
  border-color: color-mix(in srgb, var(--tier-explorer), #000 16%);
}
.auth-plan-badge.auth-plan-investor{
  background: var(--tier-investor);
  color: var(--tier-investor-ink);
  border-color: color-mix(in srgb, var(--tier-investor), #000 16%);
}
.auth-plan-badge.auth-plan-pro{
  background: var(--tier-pro);
  color: var(--tier-pro-ink);
  border-color: color-mix(in srgb, var(--tier-pro), #000 16%);
}
.auth-plan-badge.auth-plan-elite{
  background: var(--tier-elite);
  color: var(--tier-elite-ink);
  border-color: color-mix(in srgb, var(--tier-elite), #000 16%);
}

/* Current-plan card at the top of the dropdown menu */
.auth-menu-plan{
  padding: 10px 12px 12px;
  margin-bottom: 4px;
  background: var(--surface-2);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.auth-menu-plan .amp-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.auth-menu-plan .amp-value{
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.auth-menu-plan .amp-link{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
}
.auth-menu-plan .amp-link:hover{ color: var(--accent-2); }
.auth-menu-plan button.amp-link{
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-ink);
}
.auth-menu-plan button.amp-link:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   AUTH WIDGET v2 — Claude-style circle avatar + dropdown
   ============================================================ */
.auth-chip-circle{
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.auth-chip-circle:hover{
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 4px rgba(126,232,106, 0.12);
}
.auth-chip-circle:focus-visible{
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 4px rgba(126,232,106, 0.20);
}
.auth-chip-circle .auth-avatar{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* New dropdown layout */
.auth-menu-v2{
  min-width: 240px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* Identity card at the top of the dropdown */
.auth-menu-id{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px 12px;
}
.amid-avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.amid-meta{
  flex: 1;
  min-width: 0;
}
.amid-email{
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.amid-plan{
  margin-top: 4px;
}
.amid-plan .auth-plan-badge{
  margin-left: 0;
}

.auth-menu-divider{
  height: 1px;
  margin: 4px 4px;
  background: var(--line);
}

/* Menu item with icon */
.auth-menu-v2 .auth-menu-item-icon{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background-color .12s ease, color .12s ease;
}
.auth-menu-v2 .auth-menu-item-icon:hover{
  background: var(--accent-soft);
  color: var(--accent-2);
}
.amii-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-3);
  flex-shrink: 0;
}
.amii-icon svg{
  width: 100%;
  height: 100%;
}
.auth-menu-v2 .auth-menu-item-icon:hover .amii-icon{
  color: var(--accent-2);
}
.amii-label{
  flex: 1;
}

/* =================================================================
   PRICING PAGE (P1-7 Phase 2)
================================================================= */
.pricing-hero{
  text-align: center;
  padding: 36px 20px 32px;
}
.pricing-hero .kicker{
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.pricing-hero h1{
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
}
/* Title accent stays uniform with the rest — no bold, no green gradient. */
.pricing-hero h1 .amp{
  background: none;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
  font-weight: 400;
}
.pricing-hero .tagline{
  max-width: 640px;
  margin: 0 auto 28px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* Monthly / Annual toggle */
.pricing-toggle{
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.pt-opt{
  background: transparent;
  border: none;
  padding: 9px 22px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.pt-opt:hover{ color: var(--ink); }
.pt-opt.is-active{
  background: var(--ink-2);          /* charcoal selected pill */
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(17,21,28,0.40);
}
.pt-save{
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  background: #E7B23D;               /* gold — reads as "savings", distinct from brand green */
  color: #3A2A00;
  font-weight: 700;
}
.pt-opt.is-active .pt-save{
  background: #F0C969;               /* lift gold for contrast on the charcoal pill */
  color: #3A2A00;
}

/* Card grid */
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 12px 0 56px;
  align-items: stretch;
}
@media (max-width: 1100px){
  .pricing-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .pricing-grid{ grid-template-columns: 1fr; }
}
.pricing-card{
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pricing-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}
/* Featured (recommended) plan stands out via a clean white lift + stronger
   neutral border — the green "Most popular" ribbon + filled CTA carry the
   accent, not a green frame/tint. */
.pricing-card.is-featured{
  border-color: var(--ink-4);
  box-shadow: 0 16px 40px -16px rgba(17,21,28,0.20);
  background: var(--surface-solid);
}
.pricing-card.is-current{
  border-color: color-mix(in srgb, var(--accent-ink) 55%, var(--line));
  box-shadow:
    0 0 0 3px rgba(126,232,106,0.16),          /* tight faint reizer-green ring */
    0 0 24px 1px rgba(126,232,106,0.30),       /* soft green glow around the frame */
    0 16px 36px -18px rgba(46,139,58,0.26);    /* depth */
}
.pricing-card.is-current:hover{
  box-shadow:
    0 0 0 3px rgba(126,232,106,0.20),
    0 0 28px 2px rgba(126,232,106,0.38),
    0 18px 40px -18px rgba(46,139,58,0.30);
}
.pc-ribbon{
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  background: var(--brand-fill);
  color: var(--brand-ink);
  border-radius: 999px;
  box-shadow: 0 4px 10px -2px rgba(126,232,106,0.35);
}
/* Current-plan ribbon — charcoal, distinct from the green "Most popular".
   Takes the ribbon slot (so a current Pro shows this, not "Most popular"). */
.pc-ribbon.pc-ribbon-current{
  background: var(--ink-2);
  color: #fff;
  box-shadow: 0 4px 10px -2px rgba(17,21,28,0.30);
}
.pc-tier{
  display: inline-flex;
  align-self: flex-start;          /* shrink-wrap the badge, sit it left */
  align-items: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.005em;
  padding: 6px 15px;
  border-radius: 9px;
  color: var(--ink);               /* per-tier color set on .pricing-card[data-plan] */
  background: var(--surface-2);
  border: 1px solid transparent;
}
.pc-tagline{
  font-size: 12.5px;
  color: var(--ink-3);
  min-height: 18px;
}
.pc-price{
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.pc-amount{
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.04em;
}
.pc-period{
  font-size: 13px;
  color: var(--ink-3);
}
.pc-altprice{
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  margin-top: -2px;
}
.pc-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--surface-solid);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.pc-cta:hover{
  background: var(--surface-2);
  border-color: var(--ink-4);
}
.pc-cta.primary{
  background: var(--brand-fill);
  color: var(--brand-ink);
  border-color: var(--brand-fill);
  box-shadow: 0 6px 16px -6px rgba(126,232,106,0.45);
}
.pc-cta.primary:hover{
  background: color-mix(in srgb, var(--brand-fill), #000 8%);
  border-color: color-mix(in srgb, var(--brand-fill), #000 8%);
}
.pc-cta.is-current{
  background: var(--surface-2);
  color: var(--ink-3);
  border-color: var(--line);
  cursor: default;
  opacity: 0.85;
}
.pc-trial{
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
.pc-features{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.pc-features li{
  position: relative;
  padding-left: 22px;
}
.pc-features li::before{
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-2);
  font-weight: 700;
}
.pc-features li:first-child{
  font-weight: 600;
  color: var(--ink);
}
.pc-features li:first-child::before{ content: ''; }

/* Plan-name badge — a disabled-button-style pill, one metal color per tier.
   Keyed on data-plan so it applies anywhere the plan cards render. */
.pricing-card[data-plan="explorer"] .pc-tier{ background: var(--tier-explorer); color: var(--tier-explorer-ink); border-color: color-mix(in srgb, var(--tier-explorer), #000 16%); }
.pricing-card[data-plan="investor"] .pc-tier{ background: var(--tier-investor); color: var(--tier-investor-ink); border-color: color-mix(in srgb, var(--tier-investor), #000 16%); }
.pricing-card[data-plan="pro"]      .pc-tier{ background: var(--tier-pro);      color: var(--tier-pro-ink);      border-color: color-mix(in srgb, var(--tier-pro), #000 16%); }
.pricing-card[data-plan="elite"]    .pc-tier{ background: var(--tier-elite);    color: var(--tier-elite-ink);    border-color: color-mix(in srgb, var(--tier-elite), #000 16%); }

/* Comparison table */
.pricing-table-wrap{
  margin: 56px 0 48px;
}
.pt-title{
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
}
.pt-sub{
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
  margin: 0 0 28px;
}
.pricing-table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.pricing-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.pricing-table thead th{
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  color: var(--ink);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.pricing-table thead th:not(:first-child){
  text-align: center;
  min-width: 130px;
}
.pricing-table thead th.is-featured{ color: var(--accent-ink); }
.pricing-table tbody td{
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.pricing-table tbody td:not(:first-child){
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
}
.pricing-table tbody tr:last-child td{ border-bottom: none; }
.pricing-table .ptt-group td{
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 700;
  padding: 12px 16px 6px;
}
.pricing-table .ptt-no{ color: var(--ink-3); }
.pricing-table .ptt-soft{ color: var(--ink-3); font-style: italic; }

/* FAQ */
.pricing-faq{
  margin: 56px auto 80px;
  max-width: 720px;
}
.pf-q{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 8px;
  overflow: hidden;
}
.pf-q > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  transition: background 0.15s ease;
}
.pf-q > summary::-webkit-details-marker{ display: none; }
.pf-q > summary::after{
  content: '+';
  position: absolute;
  right: 20px;
  top: 14px;
  font-size: 22px;
  color: var(--ink-3);
  transition: transform 0.2s ease;
}
.pf-q[open] > summary::after{ content: '−'; }
.pf-q[open] > summary{ background: var(--accent-soft); }
.pf-q > p{
  padding: 0 20px 16px;
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

.toast.toast-info{
  background: var(--accent);
  color: var(--on-accent);
}

/* =================================================================
   UPGRADE MODAL (P1-7 Phase 3)
   Shown when a user hits a plan limit or tries to access a gated feature.
================================================================= */
.upgrade-modal{
  position: fixed;
  inset: 0;
  /* Above the dashboard chrome (rail/subnav/drawer sit at 1000-1200). At the
     old z-index of 300 the sidebar rendered ON TOP of the scrim, so nav items
     stayed clickable behind the modal and it lingered after navigating. */
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.upgrade-modal .um-scrim{
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.upgrade-modal .um-card{
  position: relative;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 32px 80px -16px rgba(15,23,42,0.40);
  width: min(440px, 100%);
  padding: 36px 28px 26px;
  text-align: center;
}
.upgrade-modal .um-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.upgrade-modal .um-close:hover{ background: var(--surface-2); color: var(--ink); }
/* REIzer-green disc with a yellow lightning bolt at its center. */
.upgrade-modal .um-icon{
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-fill) 0%, var(--accent) 100%);
  color: #FFD54A;                     /* the bolt (currentColor on the svg) */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(46,139,58,0.45);
}
.upgrade-modal .um-icon svg{
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.28));
}
.upgrade-modal .um-title{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.upgrade-modal .um-reason{
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 20px;
}
.upgrade-modal .um-target-card{
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 14px;
  margin-bottom: 18px;
  text-align: left;
}
.upgrade-modal .um-tag{
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--surface-solid);
  white-space: nowrap;
}

/* Per-tier theming — the plan name renders as the SAME solid badge used on
   the pricing page (.pc-tier), on a neutral card. No tinted backgrounds:
   the tier color lives only in the badge, exactly like /pricing. */
.upgrade-modal .um-plan-explorer .um-tier{
  background: var(--tier-explorer); color: var(--tier-explorer-ink);
  border-color: color-mix(in srgb, var(--tier-explorer), #000 16%);
}
.upgrade-modal .um-plan-investor .um-tier{
  background: var(--tier-investor); color: var(--tier-investor-ink);
  border-color: color-mix(in srgb, var(--tier-investor), #000 16%);
}
.upgrade-modal .um-plan-pro .um-tier{
  background: var(--tier-pro); color: var(--tier-pro-ink);
  border-color: color-mix(in srgb, var(--tier-pro), #000 16%);
}
.upgrade-modal .um-plan-elite .um-tier{
  background: var(--tier-elite); color: var(--tier-elite-ink);
  border-color: color-mix(in srgb, var(--tier-elite), #000 16%);
}
/* Mirrors .pc-tier on the pricing page so the badge is pixel-identical. */
.upgrade-modal .um-tier{
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.005em;
  padding: 6px 15px;
  border-radius: 9px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid transparent;
  margin-top: 6px;
}
/* Charcoal and larger — the price is the headline fact of the card, and it
   read as a washed-out link in the old deep green. The brand colour comes
   back as an underline instead of colouring the text. */
.upgrade-modal .um-price{
  display: inline-block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 8px 0 14px;
  padding-bottom: 3px;
  border-bottom: 2.5px solid var(--brand-fill);
}
.upgrade-modal .um-price .um-price-sub{
  border-bottom: none;   /* the "billed annually" note shouldn't be underlined */
}
.upgrade-modal .um-price-sub{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  margin-left: 4px;
}
.upgrade-modal .um-features{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.upgrade-modal .um-features li{
  position: relative;
  padding-left: 20px;
}
.upgrade-modal .um-features li::before{
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-ink);
  font-weight: 700;
}
.upgrade-modal .um-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 2px;
}
.upgrade-modal .um-actions .um-later,
.upgrade-modal .um-actions .um-cta{
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.upgrade-modal .um-actions .um-later{
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line);
}
.upgrade-modal .um-actions .um-later:hover{
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--ink-3);
}
.upgrade-modal .um-actions .um-cta{
  background: var(--brand-fill);
  color: var(--brand-ink);
  border-color: var(--brand-fill);
}
.upgrade-modal .um-actions .um-cta:hover{
  background: color-mix(in srgb, var(--brand-fill), #000 10%);
  border-color: color-mix(in srgb, var(--brand-fill), #000 10%);
}
.upgrade-modal .um-actions .um-cta .arrow{ transition: transform .15s ease; }
.upgrade-modal .um-actions .um-cta:hover .arrow{ transform: translateX(2px); }

/* =================================================================
   CHECKOUT RESULT PAGES (success / cancel)
================================================================= */
.checkout-result{
  max-width: 540px;
  margin: 80px auto;
  text-align: center;
  padding: 48px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--shadow-md);
}
.checkout-result .cr-icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--on-accent);
}
.checkout-result-success .cr-icon{
  background: linear-gradient(135deg, var(--pos) 0%, var(--pos) 100%);
  box-shadow: 0 12px 32px -10px rgba(5,150,105,0.45);
}
.checkout-result-cancel .cr-icon{
  background: linear-gradient(135deg, var(--ink-3) 0%, var(--ink-2) 100%);
  box-shadow: 0 12px 32px -10px rgba(100,116,139,0.40);
}
.checkout-result .cr-title{
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--ink);
}
.checkout-result .cr-lede{
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 24px;
}
.checkout-result .cr-lede strong{ color: var(--ink); font-weight: 700; }

/* Celebration mark — replaces the green tick disc. A subscription starting
   is a moment worth marking, not a form submitting successfully. */
.checkout-result .cr-celebrate{
  font-size: 54px;
  line-height: 1;
  margin: 0 0 14px;
}

/* Trial reassurance — the thing a new subscriber most wants confirmed
   right after handing over a card. */
.checkout-result .cr-trial{
  margin: 0 auto 22px;
  max-width: 420px;
  padding: 11px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-fill);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.checkout-result .cr-trial[hidden]{ display: none; }

/* What the plan unlocks */
.checkout-result .cr-unlocked{
  margin: 0 auto 26px;
  max-width: 420px;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.checkout-result .cr-unlocked[hidden]{ display: none; }
.checkout-result .cr-unlocked-head{
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.checkout-result .cr-unlocked-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.checkout-result .cr-unlocked-list li{ position: relative; padding-left: 22px; }
.checkout-result .cr-unlocked-list li::before{
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.checkout-result .cr-detail{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
  padding: 8px 16px;
  background: var(--surface-2);
  border-radius: 999px;
  margin-bottom: 26px;
}
.checkout-result .cr-detail-ok{
  background: var(--pos-soft);
  color: var(--pos);
}
.checkout-result .cr-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
}
.checkout-result .cr-fine{
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

/* =================================================================
   COMPARE PAGE IMPROVEMENTS (P1-6)
================================================================= */

/* Top actions bar — Copy share link / Export PDF */
.compare-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 14px;
}
.compare-actions .ghost{
  padding: 8px 16px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Mixed-strategy banner */
.compare-mix-banner{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px 12px 14px;
  margin-bottom: 18px;
  background: var(--warn-soft);
  border: 1px solid rgba(217,119,6,0.30);
  border-left: 4px solid var(--warn);
  border-radius: 10px;
}
.compare-mix-banner .cmb-icon{
  font-size: 18px;
  line-height: 1.2;
  color: var(--warn);
  flex-shrink: 0;
}
.compare-mix-banner .cmb-body{
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.compare-mix-banner .cmb-body strong{ color: var(--ink); font-weight: 600; }
.compare-mix-banner .cmb-body em{
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 1px 5px;
  background: var(--surface-2);
  border-radius: 3px;
  color: var(--ink-3);
}

/* N/A cells in the matrix */
.cm-value.cm-na{
  color: var(--ink-4);
  font-style: italic;
  background: repeating-linear-gradient(45deg,
    transparent 0px,
    transparent 4px,
    rgba(148,163,184,0.05) 4px,
    rgba(148,163,184,0.05) 8px);
}

/* ----- Clickable matrix cells (metric drill-down) ----- */
.cm-value.cm-clickable{
  cursor: pointer;
  transition: box-shadow .15s, transform .15s, background-color .15s;
}
.cm-value.cm-clickable:hover{
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cm-value.cm-clickable:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ----- Metric drill-down modal ----- */
body.mm-open{ overflow: hidden; }

.mm-host{ position: fixed; inset: 0; z-index: 9000; }
.mm-host[hidden]{ display: none; }

.mm-overlay{
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: mm-fade .18s ease-out;
}
@keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } }

.mm-panel{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100% - 32px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.30);
  padding: 24px 28px 22px;
  animation: mm-pop .22s cubic-bezier(.16, 1, .3, 1);
}
@keyframes mm-pop {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.mm-close{
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink-3);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.mm-close:hover{
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}

.mm-kicker{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.mm-title{
  margin: 0 40px 14px 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mm-headline{
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(126,232,106,0.06), rgba(126,232,106,0.02));
  border: 1px solid rgba(126,232,106,0.20);
  border-radius: 10px;
  margin-bottom: 16px;
}
.mm-value{
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: -0.01em;
}
.mm-band{
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mm-band-good { background: var(--pos-soft); color: var(--pos-strong); }
.mm-band-mid  { background: var(--warn-soft); color: var(--warn-strong); }
.mm-band-weak { background: var(--neg-soft); color: var(--neg-strong); }
.mm-rank{
  font-size: 13px;
  color: var(--ink-2);
}
.mm-rank strong{ color: var(--ink); }
.mm-rank-na{ font-style: italic; color: var(--ink-3); }

.mm-desc{
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}

.mm-formula{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 12px;
}
.mm-formula-lbl{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.mm-formula code{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}

.mm-section-lbl{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 4px 0 8px;
}

.mm-components{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-bottom: 18px;
}
.mm-comp{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 13px;
}
.mm-comp-lbl{ color: var(--ink-2); }
.mm-comp-val{
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.mm-ranking{
  display: flex; flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.mm-row{
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.mm-row:last-child{ border-bottom: none; }
.mm-row-rank{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  text-align: center;
}
.mm-row-rank-na{ font-style: italic; }
.mm-row-name{
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-row-name em{
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-left: 4px;
}
.mm-row-tag-whatif{
  font-style: normal !important;
  font-family: var(--font-mono);
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(126,232,106, 0.12);
  color: var(--accent-strong) !important;
  margin-left: 6px;
  vertical-align: middle;
}
.mm-row-whatif .mm-row-name{
  font-style: italic;
}
.mm-row-val{
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.mm-row-self{
  background: rgba(126,232,106, 0.06);
  box-shadow: inset 3px 0 0 var(--accent);
}
.mm-row-best{ background: rgba(16, 185, 129, 0.08); }
.mm-row-best .mm-row-val{ color: var(--pos-strong); }
.mm-row-worst{ background: rgba(220, 38, 38, 0.06); }
.mm-row-worst .mm-row-val{ color: var(--neg-strong); }
.mm-row-na .mm-row-val{ color: var(--ink-4); font-style: italic; }

.mm-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-3);
}
.mm-foot strong{ color: var(--ink); }
.mm-foot em{ font-style: normal; color: var(--ink-2); }

@media (max-width: 560px){
  .mm-panel{ padding: 18px 18px 16px; }
  .mm-title{ font-size: 18px; }
  .mm-value{ font-size: 22px; }
  .mm-row{ grid-template-columns: 40px 1fr auto; gap: 8px; padding: 8px 10px; }
  .mm-foot{ flex-direction: column; align-items: stretch; }
}

/* ----- What-if column distinguisher (in matrix) ----- */
.cm-whatif-col{
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0px,
      transparent 6px,
      rgba(126,232,106, 0.06) 6px,
      rgba(126,232,106, 0.06) 12px);
  border-left: 2px dashed rgba(126,232,106, 0.45) !important;
}
th.cm-whatif-col{
  border-bottom: 1px solid rgba(126,232,106, 0.30) !important;
}
.cm-badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-top: 4px;
}
.cm-badge-whatif{
  background: rgba(126,232,106, 0.12);
  color: var(--accent-strong);
}

/* ----- What-if card variant ----- */
.compare-card.is-whatif{
  border-style: dashed;
  border-color: rgba(126,232,106, 0.45);
  background:
    linear-gradient(180deg, rgba(126,232,106,0.04), rgba(126,232,106,0.01)),
    var(--surface);
}
.compare-card.is-whatif .cc-rank{
  color: var(--accent-strong);
  background: rgba(126,232,106, 0.10);
}
.cc-whatif-tag{
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(126,232,106, 0.12);
  color: var(--accent-strong);
  vertical-align: middle;
}

/* ----- Actions-bar variants ----- */
.compare-actions .ghost-active{
  border-color: rgba(126,232,106, 0.45);
  color: var(--accent-strong);
  background: rgba(126,232,106, 0.06);
}

/* ----- What-if form ----- */
.mm-panel-form .mm-desc{ margin-bottom: 18px; }
.wi-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.wi-row{
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
}
.wi-row-full{ grid-column: 1 / -1; }
.wi-section-lbl{
  grid-column: 1 / -1;
  margin: 8px 0 -2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wi-lbl{
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.wi-lbl em{
  font-style: normal;
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 2px;
}
.wi-row input[type="text"],
.wi-row input[type="number"]{
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.wi-row input:focus{
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(126,232,106, 0.15);
}
.wi-input-with-prefix,
.wi-input-with-suffix{
  position: relative;
  display: flex;
  align-items: stretch;
}
.wi-input-with-prefix input{ padding-left: 26px; }
.wi-input-with-suffix input{ padding-right: 28px; }
.wi-prefix,
.wi-suffix{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}
.wi-prefix{ left: 10px; }
.wi-suffix{ right: 10px; }

.wi-foot{
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.wi-foot-right{ display: flex; gap: 10px; }
.wi-foot button{
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  transition: background-color .15s, border-color .15s, color .15s;
}
.wi-foot button:hover{
  border-color: var(--ink-4);
  color: var(--ink);
}
.wi-foot button.primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 4px 12px rgba(126,232,106,0.25);
}
.wi-foot button.primary:hover{
  background: linear-gradient(180deg, var(--accent-2), var(--accent-strong));
  color: var(--on-accent);
}
.wi-foot button.ghost-danger{
  border-color: rgba(220, 38, 38, 0.40);
  color: var(--neg-strong);
  background: rgba(254, 226, 226, 0.30);
}
.wi-foot button.ghost-danger:hover{
  background: rgba(254, 226, 226, 0.60);
  color: var(--neg-strong);
}

@media (max-width: 560px){
  .wi-form{ grid-template-columns: 1fr; }
  .wi-foot{ flex-direction: column; align-items: stretch; }
  .wi-foot-right{ flex-direction: column; }
}

.auth-menu{
  /* Pinned to the product face — this menu renders on marketing pages too,
     where --font-display is Space Grotesk, so it used to change typeface
     depending on which page you opened it from. Descendants inherit. */
  font-family: var(--font-app);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.auth-menu[hidden]{ display: none; }
.auth-menu-item{
  display: block;
  text-align: left;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-app);
  font-size: 14px;            /* 13px read as cramped next to the app UI */
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.auth-menu-item:hover{
  background: var(--accent-soft);
  color: var(--accent-2);
}

/* ===========================================
   AUTH PAGE
   =========================================== */
.auth-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 100px);
  padding: 48px 20px;
}
.auth-card{
  width: 100%;
  max-width: 440px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 32px 28px;
  box-shadow: var(--shadow-lg);
}
.auth-card h1{
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}
.auth-card h1 .amp{
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--brand-green-ink);
}
.auth-card .auth-sub{
  font-family: var(--font-display);
  color: var(--ink-3);
  font-size: 14px;
  margin: 0 0 24px;
}

/* ---------- OAuth section (revealed when Supabase active) ---------- */
.auth-oauth{
  margin: 0 0 18px;
}
.auth-oauth[hidden]{ display: none; }
.oauth-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-solid);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.oauth-btn:hover{
  border-color: var(--ink-3);
  box-shadow: var(--shadow-sm);
  background: var(--surface-solid);
}
.oauth-btn:disabled{ opacity: 0.55; cursor: wait; }
.oauth-icon{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.oauth-divider{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-4);
}
.oauth-divider::before,
.oauth-divider::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-tabs{
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 12px;
  margin-bottom: 24px;
}
.auth-tab{
  flex: 1;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: all 0.15s ease;
}
.auth-tab.active{
  background: var(--surface-solid);
  color: var(--brand-green-ink);
  box-shadow: var(--shadow-sm);
}
.auth-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-form[hidden]{ display: none; }
/* Field labels follow the form's own face (Inter) rather than the mono
   eyebrow motif used elsewhere — mixing a mono label into an Inter card
   read as a leftover. Tracking is tighter than the mono version: Inter
   needs less to hold uppercase together. */
.auth-form label{
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 6px;
  display: block;
}
.auth-form input{
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-solid);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-form input:focus{
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 4px rgba(126,232,106,0.12);
}
.auth-submit{
  margin-top: 8px;
  padding: 13px 18px;
  background: var(--brand-fill);
  color: var(--brand-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(126,232,106,0.6),
              inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 0.15s ease, background 0.2s ease, filter 0.2s ease;
}
.auth-submit:hover:not(:disabled){
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--brand-fill), #000 8%);
}
.auth-submit:disabled{ opacity: 0.5; cursor: not-allowed; }

/* password strength meter */
.pw-strength{ margin-top: 8px; }
.pw-strength[hidden]{ display: none; }
.pw-strength-bar{
  height: 5px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.pw-strength-bar span{
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 0.2s ease, background 0.2s ease;
}
.pw-strength-label{
  margin-top: 5px;
  font-family: var(--font-display);   /* was mono — clashed with the Inter form */
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
}
.pw-strength[data-level="1"] .pw-strength-bar span,
.pw-strength[data-level="2"] .pw-strength-bar span{ background: #E0564F; }
.pw-strength[data-level="3"] .pw-strength-bar span{ background: #E0A93F; }
/* Brand green for the passing levels — was --accent / --accent-2 (the old
   deep greens). The bar WIDTH already conveys 4 vs 5, so both use one tone. */
.pw-strength[data-level="4"] .pw-strength-bar span,
.pw-strength[data-level="5"] .pw-strength-bar span{ background: var(--brand-fill); }
.pw-strength[data-level="1"] .pw-strength-label{ color: #C0453F; }

/* "check your inbox" verify view */
.auth-verify{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 12px 4px 4px;
}
.av-icon{
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface-2);
}
.av-icon svg{ width: 26px; height: 26px; }
.av-text{
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.av-text strong{ color: var(--ink); }
.av-hint{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
}

/* re-auth confirmation dialog (destructive actions in Settings) */
.reauth-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10,14,9,0.5);
  backdrop-filter: blur(2px);
}
.reauth-card{
  width: 100%;
  max-width: 380px;
  padding: 24px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(10,14,9,0.5);
}
.reauth-title{
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.reauth-body{
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.reauth-label{
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.reauth-label strong{ color: var(--ink); }
.reauth-input{
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-solid);
  border: 1px solid var(--line-2);
  border-radius: 10px;
}
.reauth-input:focus{
  outline: none;
  border-color: var(--ink-3);
}
.reauth-error{
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 12.5px;
  color: #C0453F;
}
.reauth-error[hidden]{ display: none; }
.reauth-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.auth-error{
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--neg-soft);
  color: var(--neg);
  border-radius: 10px;
  font-size: 13px;
  font-family: var(--font-display);
}
.auth-error[hidden]{ display: none; }

/* ---------- password input with show/hide toggle ---------- */
.pw-wrap{
  position: relative;
}
.pw-wrap input{
  padding-right: 52px;                /* room for the eye button */
}
.pw-toggle{
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.pw-toggle:hover{
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.pw-toggle:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.pw-toggle svg{ width: 18px; height: 18px; }
.pw-toggle .pw-eye-off{ display: none; }
.pw-toggle.is-shown .pw-eye    { display: none; }
.pw-toggle.is-shown .pw-eye-off{ display: block; }

/* ---------- forgot password / back links ---------- */
.auth-row{
  display: flex;
  justify-content: flex-end;
  margin-top: -8px;
}
.auth-link{
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-green-ink);
  background: transparent;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.auth-link:hover{ color: color-mix(in srgb, var(--brand-green-ink), #000 15%); text-decoration: underline; }

.auth-back{
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: pointer;
}
.auth-back:hover{ color: var(--accent-ink); }

/* ---------- demo "email" card shown after requesting a reset ---------- */
.auth-demo-email{
  margin-top: 18px;
  padding: 16px 18px;
  background: linear-gradient(160deg, rgba(238,242,255,0.85) 0%, rgba(245,243,255,0.7) 100%);
  border: 1px dashed rgba(126,232,106,0.40);
  border-radius: 12px;
}
.auth-demo-email .ade-label{
  font-family: var(--font-display);   /* match the form's face, not the mono eyebrow */
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* Charcoal, not --accent-2 (the old deep green): green is an accent here,
     not a text colour — same rule as the other small mono eyebrows. */
  color: var(--ink-2);
  font-weight: 700;
  margin-bottom: 8px;
}
.auth-demo-email .ade-body{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 12px;
}
.auth-demo-email .ade-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--brand-ink);
  background: var(--brand-fill);
  border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(126,232,106,0.45);
  cursor: pointer;
  border: none;
}
.auth-demo-email .ade-link:hover{
  filter: brightness(1.05) saturate(1.1);
  transform: translateY(-1px);
}
.auth-demo-email .ade-foot{
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-3);
}
.auth-demo-email .ade-url{
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  word-break: break-all;
  user-select: all;
}

.auth-success{
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--pos-soft);
  color: var(--pos);
  border-radius: 10px;
  font-size: 13px;
  font-family: var(--font-display);
}
.auth-success[hidden]{ display: none; }

.auth-notice{
  margin-top: 22px;
  padding: 12px 14px;
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 10px;
  font-size: 12px;
  font-family: var(--font-display);
  line-height: 1.5;
  border: 1px solid rgba(217,119,6,0.18);
}
.auth-notice strong{ font-weight: 700; }

@media (max-width: 768px){
  .auth-chip .auth-email{ display: none; }
}

/* ===========================================
   SAVE DEAL BUTTON — outline with violet accent
   =========================================== */
button.calc.save{
  background: var(--surface-solid);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
}
button.calc.save:hover:not(:disabled){
  background: var(--surface-2);
  border-color: var(--ink-3);
  filter: none;
  box-shadow: var(--shadow-sm);
}

/* ===========================================
   TOAST — top-right, below the header
   (top-right avoids the bottom-right copilot FAB)
   =========================================== */
.toast{
  position: fixed;
  right: 22px;
  top: 76px;
  z-index: 250;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--on-dark);
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 16px 32px -8px rgba(15,23,42,0.30);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  max-width: 360px;
}
.toast:not([hidden]){
  opacity: 1;
  transform: translateY(0);
}
.toast.toast-neutral{ background: var(--ink); }   /* explicit charcoal (matches base) */
.toast.toast-success{ background: linear-gradient(135deg, var(--pos), var(--accent-4)); }
.toast.toast-error{   background: linear-gradient(135deg, var(--neg), #f97316); }

/* ===========================================
   MY DEALS PAGE — card grid for saved deals
   =========================================== */
.deals-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}
.deals-count{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.deals-actions-right{ display: flex; gap: 10px; flex-wrap: wrap; }

.deals-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.deal-card{
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.deal-card:hover{
  border-color: rgba(126,232,106,0.30);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.deal-card.selected{
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(126,232,106,0.18), var(--shadow-md);
}
.deal-card .dc-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-left: 30px;          /* clear the absolute checkbox */
}
.deal-card .dc-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  word-break: break-word;
}
.deal-card .dc-badge{
  flex-shrink: 0;
  display: inline-block;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-2);          /* neutral strategy chip — was green */
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.deal-card .dc-address{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
  min-height: 18px;
}

/* Strategy-aware Deal Score header — big number + bar + verdict pill.
   Tone is set via data-tone on the parent so the verdict pill, score number,
   and bar fill can all swap colors in one place. */
.deal-card .dc-score{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
[data-theme="dark"] .deal-card .dc-score{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="midnight"] .deal-card .dc-score{
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.05);
}
.deal-card .dc-score-main{
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}
.deal-card .dc-score-num{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.deal-card .dc-score-out{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.deal-card .dc-score-bar{
  position: relative;
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
[data-theme="dark"] .deal-card .dc-score-bar,
[data-theme="midnight"] .deal-card .dc-score-bar{
  background: rgba(255,255,255,0.07);
}
.deal-card .dc-score-fill{
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent-grad);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.deal-card .dc-score-verdict{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-solid);
  color: var(--ink-3);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.deal-card .dc-score[data-tone="good"] .dc-score-verdict{
  background: var(--pos-soft);
  color: var(--pos);
  border-color: rgba(5,150,105,0.30);
}
.deal-card .dc-score[data-tone="mid"] .dc-score-verdict{
  background: var(--warn-soft);
  color: var(--warn);
  border-color: rgba(217,119,6,0.30);
}
.deal-card .dc-score[data-tone="weak"] .dc-score-verdict{
  background: var(--neg-soft);
  color: var(--neg);
  border-color: rgba(220,38,38,0.30);
}
/* Bar color follows tone too, so a "Weak" score doesn't look celebratory
   with an indigo gradient at 15% width. */
.deal-card .dc-score[data-tone="good"] .dc-score-fill{ background: linear-gradient(90deg, var(--pos), var(--pos)); }
.deal-card .dc-score[data-tone="mid"]  .dc-score-fill{ background: linear-gradient(90deg, var(--warn), #fbbf24); }
.deal-card .dc-score[data-tone="weak"] .dc-score-fill{ background: linear-gradient(90deg, var(--neg), #f87171); }

.deal-card .dc-metrics{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  background: rgba(241,245,249,0.55);
  border-radius: 10px;
}
/* Match the .pf-card-metrics override: the light slate inset above reads as a
   bright gray panel on dark surfaces, so swap to a subtle white tint with a
   hairline border for definition in dark / midnight modes. */
[data-theme="dark"] .deal-card .dc-metrics{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
[data-theme="midnight"] .deal-card .dc-metrics{
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
}
.deal-card .dc-metric{ text-align: left; }
.deal-card .dc-metric-lbl{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 2px;
}
.deal-card .dc-metric-val{
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.deal-card .dc-metric-val.pos{ color: var(--pos); }
.deal-card .dc-metric-val.neg{ color: var(--neg); }
.deal-card .dc-meta{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.deal-card .dc-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
.deal-card .dc-open{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--on-dark);
  background: var(--ink-2);   /* charcoal Open button — was green --accent-grad */
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(17,21,28,0.30);
  transition: transform 0.15s ease, filter 0.2s ease;
}
.deal-card .dc-open:hover{ transform: translateY(-1px); filter: brightness(1.15); }
.deal-card .dc-delete{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  color: var(--ink-3);
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.deal-card .dc-delete:hover{
  color: var(--neg);
  border-color: var(--neg);
  background: var(--neg-soft);
}
.deal-card .dc-select{
  position: absolute;
  top: 16px;
  left: 16px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent-ink);
  z-index: 1;
}

.deals-empty{
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
  padding: 56px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.deals-empty h2{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.deals-empty p{
  font-family: var(--font-display);
  color: var(--ink-3);
  font-size: 14px;
  max-width: 460px;
  margin: 0 auto 22px;
  line-height: 1.55;
}
.deals-empty a.calc{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===========================================
   BRRRR — checkbox row, select, collapsible card,
   auto-computed Holding Costs panel, placeholder notes
   =========================================== */
.checkbox-field{ display: flex; flex-direction: column; gap: 6px; }
.checkbox-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.checkbox-row input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line-2);
  border-radius: 5px;
  background: var(--surface-solid);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.checkbox-row input[type="checkbox"]:checked{
  background: var(--ink-2);   /* charcoal check — was green */
  border-color: transparent;
}
.checkbox-row input[type="checkbox"]:checked::after{
  content: '';
  position: absolute;
  top: 2px; left: 5px;
  width: 4px; height: 9px;
  border: solid var(--surface-solid);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-row input[type="checkbox"]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.input-wrap select{
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-solid);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-wrap select:focus{
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 4px rgba(126,232,106,0.12);
}

/* Collapsible card header (STR What-If) */
.card-header.collapsible{
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
/* Plain chevron indicator (no box) — one clean accordion caret, reusing the
   same SVG the <select> dropdowns use so the whole app's chevrons match.
   The ▾ text glyph is hidden (font-size:0); the SVG carries the shape. */
.collapsible-chev{
  margin-left: 16px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  font-size: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 12 8' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
}
.card-header.collapsible:hover{ opacity: 0.9; }
.card-header.collapsible.open .collapsible-chev{ transform: rotate(180deg); }
/* `.fields { display: grid }` would otherwise win over the UA `[hidden]` rule */
.fields[hidden]{ display: none; }
.field[hidden]{ display: none; }

/* Auto-computed Holding Costs card */
.holding-readout{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.holding-line{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  background: rgba(241,245,249,0.45);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
}
.holding-line[hidden]{ display: none; }
.holding-line .hl-label{
  font-weight: 500;
  color: var(--ink-2);
}
.holding-line .hl-sub{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 8px;
  font-weight: 500;
}
.holding-line .hl-val{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.holding-line.holding-total{
  background: linear-gradient(135deg, rgba(238,242,255,0.85), rgba(245,243,255,0.65));
  border: 1px solid rgba(126,232,106,0.18);
  padding: 12px 14px;
}
.holding-line.holding-total .hl-label{
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.holding-line.holding-total .hl-val{
  font-size: 16px;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.holding-note{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.55;
  margin-top: 4px;
}

/* Dark / midnight: pale slate fill and light gradient on the total
   pill look washed out on a dark page. Swap to dark-friendly tones
   that keep the "Estimated interest carry" readout legible. */
html[data-theme="dark"] .holding-line,
html[data-theme="midnight"] .holding-line{
  background: rgba(30,41,59,0.55);
}
html[data-theme="dark"] .holding-line.holding-total,
html[data-theme="midnight"] .holding-line.holding-total{
  background: linear-gradient(135deg, rgba(126,232,106,0.18), rgba(126,232,106,0.14));
  border-color: rgba(165,180,252,0.30);
}
html[data-theme="midnight"] .holding-line{
  background: rgba(15,15,15,0.70);
}
html[data-theme="midnight"] .holding-line.holding-total{
  background: linear-gradient(135deg, rgba(126,232,106,0.24), rgba(126,232,106,0.18));
  border-color: rgba(165,180,252,0.36);
}

/* ===========================================
   New Construction — segmented toggles, milestone grid
   =========================================== */
.seg-toggle{
  display: flex;
  width: 100%;
  max-width: 460px;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-top: 4px;
}
.seg-opt{
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--ink-3);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}
.seg-opt input[type="radio"]{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}
.seg-opt:hover{ color: var(--ink); background: rgba(12,15,10,0.05); }
/* Selected mode: charcoal pill — the house treatment for filled controls */
.seg-opt.active{
  background: var(--ink-2);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px -6px rgba(12,15,10,0.45);
}
.seg-opt.active:hover{ background: var(--ink-2); color: #ffffff; }
/* Keyboard focus ring on the hidden radio */
.seg-opt:has(input:focus-visible){
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Dark / midnight: the light track + hard-white active pill are
   illegible on a dark surface. Swap to dark-friendly tones with a
   tinted active pill so the selected option still reads. */
html[data-theme="dark"] .seg-toggle,
html[data-theme="midnight"] .seg-toggle{
  background: rgba(30,41,59,0.55);
  border-color: rgba(148,163,184,0.25);
}
html[data-theme="dark"] .seg-opt,
html[data-theme="midnight"] .seg-opt{
  color: var(--ink-2);
}
html[data-theme="dark"] .seg-opt:hover,
html[data-theme="midnight"] .seg-opt:hover{
  color: var(--ink);
}
html[data-theme="dark"] .seg-opt.active,
html[data-theme="midnight"] .seg-opt.active{
  background: rgba(126,232,106,0.20);
  color: #f8fafc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 0 0 1px rgba(165,180,252,0.40);
}
html[data-theme="midnight"] .seg-toggle{
  background: rgba(15,15,15,0.75);
  border-color: rgba(163,163,163,0.22);
}
html[data-theme="midnight"] .seg-opt.active{
  background: rgba(126,232,106,0.26);
}

/* Milestone draw schedule */
.milestone-grid{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: rgba(241,245,249,0.4);
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.16);
  margin-top: 6px;
}
.ms-row{
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 0.7fr;
  gap: 10px;
  align-items: center;
}
.ms-row.ms-head{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(148,163,184,0.25);
  margin-bottom: 2px;
}
.ms-name{
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}
.ms-input{ margin: 0; }
.ms-input input{
  padding: 8px 30px 8px 10px;
  font-size: 12.5px;
}
.ms-input.has-suffix .suffix{
  font-size: 10.5px;
}
.ms-row.ms-footer{
  border-top: 1px dashed rgba(148,163,184,0.25);
  padding-top: 8px;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.ms-total{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ok, var(--pos));
}
.ms-total.ms-total-bad{ color: var(--bad, var(--neg)); }

/* Rental mode wrapper (LTR / STR groups) */
.rent-mode-fields{
  grid-column: 1 / -1;
}
.rent-mode-fields[hidden]{ display: none; }

/* Multi-grid card body — used in Card IX where we have several
   sub-grids stacked (LTR/STR fields, shared OpEx, refi terms). */
.card-stack{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.card-stack-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-section-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-2);
  padding: 8px 0 2px;
  border-top: 1px dashed rgba(148,163,184,0.25);
  margin-top: 4px;
}
.card-stack > .card-section-label:first-child,
.card-stack > .card-stack-row:first-child + .card-section-label{
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* ===========================================
   BRRRR — Refinance Scenarios table + winner banner
   =========================================== */
.brrr-winner{
  position: relative;
  margin: 8px 0 20px;
  padding: 18px 22px;
  background: var(--ink-2);   /* charcoal banner — was solid green --accent-grad */
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px -18px rgba(17,21,28,0.50);
  overflow: hidden;
}
.brrr-winner::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 90% -20%, rgba(255,255,255,0.25), transparent 60%);
  pointer-events: none;
}
.brrr-winner .bw-kicker{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
  font-weight: 600;
}
.brrr-winner .bw-title{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-fill);   /* brand-green scenario title on the charcoal banner */
}
.brrr-winner .bw-crown{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-fill);   /* bright brand-green chip + black star (brand mark) */
  color: var(--brand-ink);
  font-size: 15px;
}
.brrr-winner .bw-sub{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: rgba(255,255,255,0.92);
  line-height: 1.55;
}
.brrr-winner .bw-sub strong{ color: var(--on-dark); font-weight: 700; }

/* The 3-column scenarios table */
.brrr-scenarios-wrap{
  margin-bottom: 22px;
  overflow: visible;        /* tooltips on row labels must escape */
}
.brrr-scenarios{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.brrr-scenarios thead th{
  padding: 14px 14px 12px;
  vertical-align: top;
  text-align: right;
  border-bottom: 1px solid var(--line);
  background: rgba(241,245,249,0.55);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.brrr-scenarios thead th:first-child{ text-align: left; }
.brrr-scenarios .bs-col{
  position: relative;
}
.brrr-scenarios .bs-col-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
}
.brrr-scenarios .bs-col-ltv{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.brrr-scenarios .bs-col.is-winner{
  /* Neutral charcoal-tint highlight (was green --accent-soft) — marks the
     winner column without the green-on-a-bad-deal contradiction. */
  background: var(--surface-2);
}
html[data-theme="dark"] .brrr-scenarios .bs-col.is-winner,
html[data-theme="midnight"] .brrr-scenarios .bs-col.is-winner{
  background: var(--surface-2);
}
.brrr-scenarios .bs-col.is-winner .bs-col-label{
  color: var(--ink);   /* charcoal winner label (was green text-clip) */
}
.brrr-scenarios .bs-crown{
  display: inline-block;
  margin-top: 6px;
  padding: 2px 7px;
  background: var(--ink-2);   /* charcoal WINNER pill (was green --accent-grad) */
  color: var(--on-dark);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.brrr-scenarios tbody td{
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.brrr-scenarios tbody tr:last-child td{ border-bottom: none; }
.brrr-scenarios .bs-rowlabel{
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.brrr-scenarios .bs-val{
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.brrr-scenarios .bs-val.bs-col-winner{
  /* Use accent-soft (a theme-aware indigo wash) so the winner column
     reads as highlighted in light AND dark/midnight — was rgba lavender
     which collapsed to near-white on dark bg. */
  background: var(--accent-soft);
}
html[data-theme="dark"] .brrr-scenarios .bs-val.bs-col-winner,
html[data-theme="midnight"] .brrr-scenarios .bs-val.bs-col-winner{
  background: rgba(126,232,106,0.18);
}
.brrr-scenarios .bs-val.pos{ color: var(--pos); }
.brrr-scenarios .bs-val.neg{ color: var(--neg); }
.brrr-scenarios .bs-val.warn{ color: var(--warn); }

/* The takeaways block under the table */
.brrr-takeaways{
  margin-top: 4px;
  padding: 16px 18px;
  /* Use a theme-aware surface + accent-tinted border so it reads
     correctly in dark / midnight (the old lavender wash collapsed
     into a faint white smudge against the dark panel bg). */
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-2);
  border-radius: 10px;
}
/* Dark / midnight: match the cost-table row tone — translucent
   --surface over the side panel's --surface-solid blends to the
   same shade the table rows render at, giving visual consistency
   between the takeaways callout and the breakdown table above it. */
html[data-theme="dark"] .brrr-takeaways,
html[data-theme="midnight"] .brrr-takeaways{
  background:        var(--surface);
  border-color:      var(--line);
  border-left-color: var(--ink-2);
}
.brrr-takeaways p{
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 10px;
}
.brrr-takeaways p:last-child{ margin-bottom: 0; }
.brrr-takeaways strong{ color: var(--ink); font-weight: 700; }

/* Side panel needs slightly more width to fit the 4-column table comfortably */
@media (min-width: 900px){
  .sp-body .brrr-scenarios-wrap{ overflow-x: auto; }
}

/* =================================================================
   BRRRR — Refinance Scenarios 2-col layout (table | comparison grid)
================================================================= */
.brrr-refi-row{
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;     /* match heights across the row */
}
.brrr-refi-row .brrr-scenarios-wrap{ min-width: 0; }

/* Mini comparison grid on the right — 3 cards stacked vertically
   (one full-width chart per card) so each bar chart gets the full
   right-column width. Cards split the column height evenly so the
   stack matches the table on the left. */
.brrr-refi-compare{
  display: grid;
  grid-template-rows: repeat(3, 1fr);   /* 3 equal-height cards */
  gap: 12px;
  min-width: 0;
  height: 100%;             /* fill the row's stretched height */
}
.brrc-card{
  padding: 10px 14px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.brrc-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.brrc-canvas{
  position: relative;
  width: 100%;
  flex: 1;                  /* fill the card height */
  min-height: 100px;
}
html[data-theme="dark"] .brrc-card,
html[data-theme="midnight"] .brrc-card{
  background: var(--surface-solid);
  border-color: var(--line);
}

/* Collapse to single column on narrower viewports */
@media (max-width: 1100px){
  .brrr-refi-row{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .brrr-refi-compare{ grid-template-rows: auto; }
}

/* =================================================================
   BRRRR — Cost Breakdown 2-col layout (table | donut)
================================================================= */
.brrr-cost-row{
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;     /* match heights across the row */
}
.brrr-cost-donut-wrap{
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.brrr-cost-donut-wrap .chart-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.brrr-cost-donut-canvas{
  position: relative;
  width: 100%;
  flex: 1;                  /* fill the wrap's stretched height */
  min-height: 280px;
  /* Subtle 3D feel — outer shadow gives the ring a sense of float,
     inner subtle gradient ring overlay (drawn on canvas itself) is
     not feasible without per-slice work, so we lean on the canvas
     drop-shadow + a soft glow ring behind. */
  filter: drop-shadow(0 8px 18px rgba(126,232,106,0.22));
}
html[data-theme="dark"] .brrr-cost-donut-canvas,
html[data-theme="midnight"] .brrr-cost-donut-canvas{
  filter: drop-shadow(0 10px 24px rgba(126,232,106,0.40));
}
html[data-theme="dark"] .brrr-cost-donut-wrap,
html[data-theme="midnight"] .brrr-cost-donut-wrap{
  background: var(--surface-solid);
  border-color: var(--line);
}
@media (max-width: 1100px){
  .brrr-cost-row{ grid-template-columns: 1fr; }
}

/* Rent Roll: income tiles (EGI / NOI) beside the chart that plots them. */
.rr-tiles-chart{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 10px;
  align-items: start;
}
.rr-tiles-chart .rr-income-tiles{ align-content: start; }
.rr-chart-card{
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.rr-chart-card .chart-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rr-chart-canvas{ position: relative; width: 100%; flex: 1; min-height: 200px; }
@media (max-width: 1000px){
  .rr-tiles-chart{ grid-template-columns: 1fr; }
}

/* =================================================================
   BRRRR — STR What-If 2-col layout (table | LTR-vs-STR chart)
================================================================= */
.brrr-strwi-row{
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;     /* match heights across the row */
}
.brrr-strwi-chart-wrap{
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.brrr-strwi-chart-wrap .chart-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.brrr-strwi-canvas{
  position: relative;
  width: 100%;
  flex: 1;                  /* fill the wrap's stretched height */
  min-height: 280px;
}
html[data-theme="dark"] .brrr-strwi-chart-wrap,
html[data-theme="midnight"] .brrr-strwi-chart-wrap{
  background: var(--surface-solid);
  border-color: var(--line);
}
@media (max-width: 1100px){
  .brrr-strwi-row{ grid-template-columns: 1fr; }
}

/* ===========================================
   BRRRR — All-In Cost Breakdown
   =========================================== */
.cost-summary{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: var(--ink-2);   /* charcoal banner — matches .brrr-winner */
  color: var(--on-dark);
  border-radius: var(--radius);
  margin: 8px 0 18px;
  box-shadow: 0 16px 36px -18px rgba(17,21,28,0.50);
}
.cost-summary::before{   /* same radial sheen as .brrr-winner / .compare-banner */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 90% -20%, rgba(255,255,255,0.25), transparent 60%);
  pointer-events: none;
}
.cost-summary .cs-kicker,
.cost-summary .cs-val{ position: relative; }
.cost-summary .cs-kicker{
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}
.cost-summary .cs-val{
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cost-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  font-family: var(--font-display);
}
.cost-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.cost-table tr:last-child td{ border-bottom: none; }
.cost-table .ci-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  width: 38%;
}
.cost-table .ci-hint{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
  font-weight: 500;
  text-transform: none;
}
.cost-table .ci-bar-cell{ width: 42%; padding: 12px 14px; }
.cost-table .ci-bar{
  position: relative;
  width: 100%;
  height: 8px;
  /* Theme-aware track — was a hardcoded faint slate that looked
     near-invisible on dark bg. */
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
html[data-theme="dark"] .cost-table .ci-bar,
html[data-theme="midnight"] .cost-table .ci-bar{
  background: var(--surface-2);
  border-color: var(--line);
}
.cost-table .ci-bar-fill{
  position: absolute;
  inset: 0;
  background: var(--ink-2);   /* charcoal proportion bars — were green --accent-grad */
  border-radius: 999px;
  transform-origin: left;
}
.cost-table .ci-val{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.cost-table .ci-pct{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-align: right;
  width: 50px;
  font-weight: 600;
}
.cost-table .ci-total td{
  /* Neutral emphasis wash so the Total Cash In row reads as emphasized
     without the green tint (was --accent-soft). */
  background: var(--surface-2);
  border-top: 2px solid var(--ink-3);
}
html[data-theme="dark"] .cost-table .ci-total td,
html[data-theme="midnight"] .cost-table .ci-total td{
  background: var(--surface-2);
  border-top-color: var(--line-2);
}
.cost-table .ci-total .ci-label,
.cost-table .ci-total .ci-val{ font-weight: 800; color: var(--ink); font-size: 14px; }
.cost-table .ci-total .ci-val{
  color: var(--ink);   /* charcoal total — was green text-clip gradient */
  font-family: var(--font-display);
  font-size: 16px;
}

/* ===========================================
   New Construction — Cost Breakdown overlay
   Adds group headers + cash-in grand total to the cost-table primitive.
   =========================================== */
.nc-summary{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 8px 0 18px;
}
@media (max-width: 720px){
  .nc-summary{ grid-template-columns: 1fr; }
}
.ncs-block{
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ncs-block:first-child{
  position: relative;
  overflow: hidden;
  background: var(--ink-2);   /* charcoal banner — matches .brrr-winner */
  border-color: transparent;
  color: var(--on-dark);
  box-shadow: 0 16px 36px -18px rgba(17,21,28,0.50);
}
.ncs-block:first-child::before{   /* same radial sheen as .brrr-winner */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 90% -20%, rgba(255,255,255,0.25), transparent 60%);
  pointer-events: none;
}
.ncs-block:first-child > *{ position: relative; }
.ncs-block:first-child .ncs-kicker,
.ncs-block:first-child .ncs-sub{ color: rgba(255,255,255,0.85); }
.ncs-kicker{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.ncs-val{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.ncs-block:first-child .ncs-val{ color: var(--on-dark); }
.ncs-sub{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
}

/* Group header rows inside the NC cost table */
.nc-cost-table .cb-group-head td{
  background: linear-gradient(180deg, rgba(248,250,252,0.85), rgba(241,245,249,0.55));
  border-top: 1px solid rgba(148,163,184,0.25);
  border-bottom: 1px solid rgba(148,163,184,0.18);
  padding: 11px 14px;
}
.nc-cost-table .cb-group-head:first-child td{ border-top: none; }
.nc-cost-table .cbg-title{
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.nc-cost-table .cbg-sub{
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.nc-cost-table .cb-item .ci-label{
  padding-left: 22px;
  position: relative;
}
.nc-cost-table .cb-item .ci-label::before{
  content: '';
  position: absolute;
  left: 14px;
  top: calc(50% - 2px);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
  opacity: 0.4;
}

/* =================================================================
   NC — Per-category cost panel (header + 2-col table/donut row)
   One panel per cost bucket (Land, Hard, Soft, Contingency, Loan).
================================================================= */
.nc-cost-category{
  margin: 18px 0 22px;
}
.nc-cost-category .ncc-head{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'title totals'
    'sub   totals';
  align-items: center;
  gap: 4px 18px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(248,250,252,0.85), rgba(241,245,249,0.55));
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  margin-bottom: 0;
}
.nc-cost-category .ncc-title{
  grid-area: title;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.nc-cost-category .ncc-sub{
  grid-area: sub;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-3);
}
.nc-cost-category .ncc-totals{
  grid-area: totals;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.nc-cost-category .ncc-amount{
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nc-cost-category .ncc-pct{
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3);
}
.nc-cost-category .brrr-cost-row{
  border: 1px solid rgba(148,163,184,0.25);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 14px;
  background: var(--surface);
}
.nc-cost-category .brrr-cost-row .cost-table{
  margin-bottom: 0;
  border-radius: 8px;
}
.nc-cost-category .brrr-cost-row .brrr-cost-donut-wrap{
  background: transparent;
  border: none;
  padding: 0;
}
html[data-theme="dark"] .nc-cost-category .ncc-head,
html[data-theme="midnight"] .nc-cost-category .ncc-head{
  background: linear-gradient(180deg, rgba(30,41,59,0.6), rgba(15,23,42,0.4));
  border-color: rgba(148,163,184,0.20);
}
html[data-theme="dark"] .nc-cost-category .brrr-cost-row,
html[data-theme="midnight"] .nc-cost-category .brrr-cost-row{
  background: var(--surface-solid);
  border-color: rgba(148,163,184,0.20);
}

/* Financing waterfall — TPC → loan → cash in, displayed below all categories */
.nc-financing-table{
  margin-top: 22px;
}

/* =================================================================
   NC — Profit Analysis tab strip (Build-to-Sell / Build-to-Rent)
   Sits above the per-tab body. The active tab gets an underline +
   tinted background; disabled tab (rental inputs missing) is muted.
================================================================= */
.nc-profit-tabs{
  display: flex;
  gap: 6px;
  padding: 6px;
  margin: 14px 0 16px;
  background: rgba(241,245,249,0.55);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 12px;
}
.nc-profit-tab{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.nc-profit-tab:hover:not(.is-disabled){ color: var(--ink); }
.nc-profit-tab.is-active{
  background: var(--surface-solid);
  color: var(--ink);
  border-color: rgba(126,232,106,0.20);
  box-shadow: 0 1px 3px rgba(15,23,42,0.08), 0 0 0 1px rgba(126,232,106,0.10);
}
.nc-profit-tab.is-disabled{
  color: var(--ink-3);
  cursor: not-allowed;
  opacity: 0.7;
}
.nc-profit-tab .ncpt-hint{
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
html[data-theme="dark"] .nc-profit-tabs,
html[data-theme="midnight"] .nc-profit-tabs{
  background: rgba(30,41,59,0.55);
  border-color: rgba(148,163,184,0.20);
}
html[data-theme="midnight"] .nc-profit-tabs{
  background: rgba(15,15,15,0.70);
  border-color: rgba(163,163,163,0.20);
}
html[data-theme="dark"] .nc-profit-tab.is-active,
html[data-theme="midnight"] .nc-profit-tab.is-active{
  background: rgba(126,232,106,0.22);
  color: #f8fafc;
  border-color: rgba(165,180,252,0.40);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 0 0 1px rgba(165,180,252,0.30);
}
html[data-theme="midnight"] .nc-profit-tab.is-active{
  background: rgba(126,232,106,0.28);
}

.nc-profit-body[hidden]{ display: none; }
.nc-profit-body > .sa-summary{ margin-top: 0; }

/* =================================================================
   NC — Refinance Mechanics section (inline, two cards)
   Left card: cash flow at refi closing.
   Right card: equity position going forward (ARV − new loan).
================================================================= */
.nc-refi-section{
  margin: 18px 0 22px;
}
.nc-refi-title{
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 4px;
}
.nc-refi-sub{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: 12px;
}
.nc-refi-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px){
  .nc-refi-grid{ grid-template-columns: 1fr; }
}
.nc-refi-card{
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.nc-refi-card-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.nc-refi-card .cost-table{ margin-bottom: 0; }
html[data-theme="dark"] .nc-refi-card,
html[data-theme="midnight"] .nc-refi-card{
  background: var(--surface-solid);
  border-color: rgba(148,163,184,0.20);
}

/* BTR-specific Deal Score slot — sits at the top of the BTR tab.
   DealScore.render() owns the inner layout; this wrapper just spaces
   the gauge from the KPI summary card that follows. */
.nc-btr-score-slot{
  margin: 0 0 18px;
}
.nc-btr-score-slot:empty{ display: none; }

/* The BTR score is rendered without a map slot. By default that
   collapses .ds-body to a single column and stacks gauge + breakdown
   on top of each other inside .ds-left, which makes the gauge SVG
   fill the entire panel width — visually much larger than the main
   page-level score. Flip .ds-left to a row so the gauge sits on the
   left at ~half-width (matching the main score) and the breakdown
   metrics table sits on the right. */
.nc-btr-score-slot .ds-left{
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
}
.nc-btr-score-slot .ds-gauge-pane{
  flex: 1 1 0;
  min-width: 0;
}
.nc-btr-score-slot .ds-breakdown{
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
}
@media (max-width: 900px){
  .nc-btr-score-slot .ds-left{ flex-direction: column; }
}

/* Loan deduction (subtractive) row */
.nc-cost-table .ci-cash td{
  background: rgba(254,242,232,0.55);
  border-top: 1px dashed rgba(234,88,12,0.20);
}
.nc-cost-table .ci-cash .ci-val{
  color: #c2410c;
}

/* Cash-in grand total row (gradient like ci-total but emphasized) */
.nc-cost-table .ci-grand td{
  background: linear-gradient(135deg, rgba(220,252,231,0.85), rgba(187,247,208,0.55));
  border-top: 2px solid rgba(16,185,129,0.32);
  padding: 14px 14px;
}
.nc-cost-table .ci-grand .ci-label{
  font-weight: 800;
  color: var(--ink);
  font-size: 14px;
}
.nc-cost-table .ci-grand .ci-val{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--pos-strong);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

/* Subtotal & negative-value styling inside NC tables */
.nc-cost-table .ci-subtotal td{
  background: rgba(241,245,249,0.5);
  font-weight: 700;
}
.nc-cost-table .neg-val{
  color: var(--neg-strong);
}
.nc-cost-table .pos-val{
  color: var(--pos-strong);
}

/* ===========================================
   New Construction — Verdict banner + Stat row
   Used by BTS, BTR, Compare panels.
   =========================================== */
.nc-verdict{
  position: relative;
  margin: 8px 0 18px;
  padding: 18px 22px;
  border-radius: var(--radius);
  color: var(--on-accent);
  overflow: hidden;
  box-shadow: 0 14px 30px -14px rgba(15,23,42,0.30);
}
.nc-verdict::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 90% -20%, rgba(255,255,255,0.22), transparent 60%);
  pointer-events: none;
}
.nc-verdict-great{ background: linear-gradient(135deg, var(--pos) 0%, #0891b2 100%); }
.nc-verdict-good { background: linear-gradient(135deg, var(--pos) 0%, #14b8a6 100%); }
.nc-verdict-ok   { background: linear-gradient(135deg, var(--warn) 0%, #fb923c 100%); }
.nc-verdict-weak { background: linear-gradient(135deg, #ea580c 0%, var(--neg) 100%); }
.nc-verdict-bad  { background: linear-gradient(135deg, #7f1d1d 0%, var(--neg-strong) 100%); }
.nc-verdict .ncv-kicker{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
  font-weight: 600;
}
.nc-verdict .ncv-title{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.nc-verdict .ncv-sub{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: rgba(255,255,255,0.92);
  line-height: 1.55;
}

/* Stat row — 4 cards across, mirrors BRRRR stat grid */
.nc-stat-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 820px){
  .nc-stat-row{ grid-template-columns: repeat(2, 1fr); }
}
.nc-stat{
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nc-stat .ncst-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.nc-stat .ncst-val{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.nc-stat .ncst-val.pos{ color: var(--pos-strong); }
.nc-stat .ncst-val.neg{ color: var(--neg-strong); }
.nc-stat .ncst-sub{
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
}

/* ===========================================
   New Construction — Head-to-Head (BTS vs BTR)
   =========================================== */
.nc-h2h{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.nc-h2h.nc-h2h-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){
  .nc-h2h.nc-h2h-3{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .nc-h2h{ grid-template-columns: 1fr; }
}
.compare-table .ch-winner-cell{
  background: linear-gradient(135deg, rgba(126,232,106,0.10), rgba(126,232,106,0.06));
  color: var(--ink);
}
.nch-card{
  position: relative;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nch-card.nch-winner{
  border-color: rgba(126,232,106,0.38);
  box-shadow: 0 18px 38px -16px rgba(126,232,106,0.32), 0 0 0 2px rgba(126,232,106,0.12);
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(238,242,255,0.5), rgba(245,243,255,0.25));
}
.nch-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.nch-tag{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.nch-crown{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 14px -6px rgba(126,232,106,0.55);
}
.nch-headline{
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.05;
}
.nch-headline.pos{ color: var(--pos-strong); }
.nch-headline.neg{ color: var(--neg-strong); }
.nch-headline-2{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.05;
}
.nch-headline-2.pos{ color: var(--pos-strong); }
.nch-headline-2.neg{ color: var(--neg-strong); }
.nch-headline-2 .nch-suffix{
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 2px;
}
.nch-sublabel{
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
}

/* Comparison table */
.compare-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  font-family: var(--font-display);
}
.compare-table th,
.compare-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  text-align: left;
}
.compare-table tr:last-child td{ border-bottom: none; }
.compare-table .ch-header{
  background: linear-gradient(180deg, rgba(248,250,252,0.85), rgba(241,245,249,0.55));
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-2);
}
/* Dark / midnight: swap the light-gray gradient for a dark one so the
   Hard Money / All Cash / Conventional column row stops reading as a
   bright bar against the dark panel. */
html[data-theme="dark"] .compare-table .ch-header,
html[data-theme="midnight"] .compare-table .ch-header{
  background: linear-gradient(180deg, var(--surface-2) 0%, rgba(255,255,255,0.02) 100%);
  color: var(--ink-2);
  border-bottom-color: var(--line-2);
}
.compare-table .ch-bts-head.winner,
.compare-table .ch-btr-head.winner{
  background: linear-gradient(135deg, rgba(126,232,106,0.18), rgba(126,232,106,0.10));
  color: var(--ink);
}
.compare-table .ch-label{
  width: 36%;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.compare-table .ch-hint{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 2px;
  font-weight: 500;
}
.compare-table .ch-val{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}

/* ===========================================
   New Construction — Stress Tests table
   =========================================== */
.sx-scroll{
  overflow-x: auto;
  margin-bottom: 16px;
}
.stress-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--font-display);
  min-width: 700px;
}
.stress-table th,
.stress-table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}
.stress-table tr:last-child td{ border-bottom: none; }
.stress-table th{
  background: linear-gradient(180deg, rgba(248,250,252,0.85), rgba(241,245,249,0.55));
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-2);
}
/* Dark / midnight: the light-gray header gradient stays bright on a
   dark panel — swap to a dark gradient so the header band reads as
   part of the table. */
html[data-theme="dark"] .stress-table th,
html[data-theme="midnight"] .stress-table th{
  background: linear-gradient(180deg, var(--surface-2) 0%, rgba(255,255,255,0.02) 100%);
  color: var(--ink-2);
  border-bottom-color: var(--line-2);
}
.stress-table .sx-label{
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  white-space: normal;
  max-width: 260px;
}
.stress-table .sx-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.stress-table .sx-desc{
  font-family: var(--font-display);
  font-size: 10.5px;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.35;
  white-space: normal;
}
/* Compact density variant — shrinks padding + font for dense data */
.stress-table.stress-table-compact th,
.stress-table.stress-table-compact td{
  padding: 7px 9px;
  font-size: 11.5px;
}
.stress-table.stress-table-compact .metric-info{
  font-size: 9.5px;
  width: 14px; height: 14px;
  margin-left: 3px;
  vertical-align: middle;
}
.stress-table.stress-table-compact .sx-verdict{
  padding: 2px 6px;
  font-size: 10px;
}
.stress-table tr.sx-sev-base td{ background: rgba(238,242,255,0.45); font-weight: 700; }
.stress-table tr.sx-sev-mild td{ background: rgba(254,252,232,0.30); }
.stress-table tr.sx-sev-moderate td{ background: rgba(254,243,199,0.30); }
.stress-table tr.sx-sev-severe td{ background: rgba(254,226,226,0.30); }
.stress-table td.sx-good, .stress-table .sx-good{ color: var(--pos-strong); }
.stress-table td.sx-bad, .stress-table .sx-bad{ color: var(--neg-strong); }

/* Dark / midnight: the original pastel washes go pure-white on dark
   panels (alpha blending lifts them way too bright). Re-tint each
   severity band with theme-aware translucent color so the rows still
   read as a cool-to-warm gradient against the dark panel. Also lift
   the +/− value colors so dark green / dark red are legible. */
html[data-theme="dark"] .stress-table tr.sx-sev-base td,
html[data-theme="midnight"] .stress-table tr.sx-sev-base td{
  background: rgba(126,232,106,0.14); font-weight: 700;
}
html[data-theme="dark"] .stress-table tr.sx-sev-mild td,
html[data-theme="midnight"] .stress-table tr.sx-sev-mild td{
  background: rgba(245,158,11,0.10);
}
html[data-theme="dark"] .stress-table tr.sx-sev-moderate td,
html[data-theme="midnight"] .stress-table tr.sx-sev-moderate td{
  background: rgba(234,88,12,0.14);
}
html[data-theme="dark"] .stress-table tr.sx-sev-severe td,
html[data-theme="midnight"] .stress-table tr.sx-sev-severe td{
  background: rgba(239,68,68,0.16);
}
html[data-theme="dark"] .stress-table td.sx-good,
html[data-theme="dark"] .stress-table .sx-good,
html[data-theme="midnight"] .stress-table td.sx-good,
html[data-theme="midnight"] .stress-table .sx-good{ color: #6ee7b7; }
html[data-theme="dark"] .stress-table td.sx-bad,
html[data-theme="dark"] .stress-table .sx-bad,
html[data-theme="midnight"] .stress-table td.sx-bad,
html[data-theme="midnight"] .stress-table .sx-bad{ color: #fca5a5; }
.sx-delta{
  font-size: 10.5px;
  font-weight: 600;
  margin-left: 4px;
}
.sx-delta.sx-good{ color: var(--pos-strong); }
.sx-delta.sx-bad{  color: var(--neg-strong); }
.sx-verdict{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* In sync with the stress-chart TIER_COLOR (str.js) + .ncl-tag legend dots */
.sx-verdict.sx-v-base{ background: rgba(100,116,139,0.15); color: #475569; }
.sx-verdict.sx-v-ok{ background: rgba(34,163,74,0.16); color: var(--pos-strong); }
.sx-verdict.sx-v-hurts{ background: rgba(234,179,8,0.18); color: var(--warn-strong); }
.sx-verdict.sx-v-breaks{ background: rgba(249,115,22,0.18); color: #c2410c; }
.sx-verdict.sx-v-kills{ background: rgba(220,38,38,0.18); color: var(--neg-strong); }
.yr-y{ text-align: left !important; font-family: var(--font-display) !important; font-weight: 600 !important; }

/* Chart wrapper for projection canvas */
.nc-chart-wrap{
  position: relative;
  height: 320px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
/* Taller variant when chart has many horizontal bars (stress tests: 11 scenarios) */
.nc-chart-wrap.nc-chart-wrap-tall{
  height: 380px;
  padding: 14px 10px 14px 10px;
  margin-bottom: 0;
}

/* Stress test chart container — two stacked cards */
.nc-stress-charts{
  display: grid;
  /* minmax(0,·): the Chart.js canvas carries an intrinsic px width — a
     bare 1fr track sizes to it and can never shrink back (overflowed
     the phone sheet). */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.nc-stress-chart-card{
  min-width: 0;
  padding: 16px 16px 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.nc-stress-chart-card .nscc-title{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 3px;
}
.nc-stress-chart-card .nscc-sub{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.nc-stress-chart-card .nc-chart-wrap-tall{
  border: 0;
  background: transparent;
  padding: 0;
}
@media (min-width: 980px){
  .nc-stress-charts{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nc-stress-chart-card .nc-chart-wrap-tall{ height: 460px; }
}

/* Verdict-color legend chips above each chart */
.nc-chart-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 14px;
}
.ncl-tag{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(241,245,249,0.6);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.ncl-tag::before{
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  display: inline-block;
}
/* Dots kept in sync with the stress-chart TIER_COLOR (str.js) + .sx-verdict */
.ncl-tag.ncl-base::before{   background: #64748B; }
.ncl-tag.ncl-ok::before{     background: #22A34A; }
.ncl-tag.ncl-hurts::before{  background: #EAB308; }
.ncl-tag.ncl-breaks::before{ background: #F97316; }
.ncl-tag.ncl-kills::before{  background: #DC2626; }

/* Dark / midnight: the default rgba(241,245,249,0.6) chip bg reads
   too light-gray on the dark panel — lift to surface-2 so the chips
   sit on a clearly dark surface without losing the dot accent.
   Baseline keeps its indigo tint via the ::before pseudo. */
html[data-theme="dark"] .ncl-tag,
html[data-theme="midnight"] .ncl-tag{
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--ink-2);
}

/* ===========================================
   BRRRR — LTV picker chips (Cash Flow panel)
   =========================================== */
.ltv-picker{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ltv-chip{
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ltv-chip .lc-pct{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  margin-left: 4px;
}
.ltv-chip:hover{ border-color: var(--accent-ink); color: var(--accent-2); background: var(--accent-soft); }
.ltv-chip:hover .lc-pct{ color: var(--accent-2); }
.ltv-chip.active{
  background: var(--accent-grad);
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 6px 14px -6px rgba(126,232,106,0.45);
}
.ltv-chip.active .lc-pct{ color: rgba(255,255,255,0.85); }

/* ===========================================
   BRRRR — Cash Flow KPIs + P&L table
   =========================================== */
.cf-kpis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.cf-kpi{
  position: relative;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.cf-kpi::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--line-2);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.cf-kpi.cf-kpi-pos::before{  background: linear-gradient(90deg, var(--pos), var(--accent-4)); }
.cf-kpi.cf-kpi-warn::before{ background: linear-gradient(90deg, var(--warn), #f97316); }
.cf-kpi.cf-kpi-neg::before{  background: linear-gradient(90deg, var(--neg), #f97316); }
.cf-kpi-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 4px;
}
.cf-kpi-val{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.1;
}
.cf-kpi-val.pos{ color: var(--pos); }
.cf-kpi-val.neg{ color: var(--neg); }
.cf-kpi-sub{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 4px;
}

.cf-pnl{
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--font-display);
}
.cf-pnl td{
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
.cf-pnl tr:last-child td{ border-bottom: none; }
.cf-pnl .cf-label{
  font-size: 13px;
  color: var(--ink-2);
}
.cf-pnl .cf-hint{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0.06em;
}
.cf-pnl .cf-val{
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}
.cf-pnl .cf-row.cf-income .cf-val{ color: var(--pos); }
.cf-pnl .cf-row.cf-expense .cf-val{ color: var(--ink-2); }
.cf-pnl .cf-row.cf-subtotal td{
  background: rgba(241,245,249,0.55);
  font-weight: 700;
}
.cf-pnl .cf-row.cf-subtotal .cf-label{ color: var(--ink); font-weight: 700; }
.cf-pnl .cf-row.cf-subtotal .cf-val{ color: var(--ink); font-weight: 700; font-size: 13.5px; }
.cf-pnl .cf-row.cf-total td{
  background: linear-gradient(135deg, rgba(238,242,255,0.85), rgba(245,243,255,0.65));
  border-top: 2px solid rgba(126,232,106,0.25);
}
.cf-pnl .cf-row.cf-total .cf-label{ color: var(--ink); font-weight: 800; font-size: 14px; }
.cf-pnl .cf-row.cf-total .cf-val{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===========================================
   BRRRR — Capital Recovery & Velocity cards
   =========================================== */
.recovery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.recovery-card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.recovery-card.is-winner{
  border-color: rgba(126,232,106,0.45);
  box-shadow: 0 0 0 3px rgba(126,232,106,0.15), var(--shadow-md);
}
.recovery-card .rc-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.recovery-card .rc-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.recovery-card.is-winner .rc-label{
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.recovery-card .rc-ltv{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.10em;
  font-weight: 600;
  margin-top: 2px;
}
.recovery-card .rc-crown{
  display: inline-block;
  padding: 2px 7px;
  background: var(--accent-grad);
  color: var(--on-accent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.recovery-card .rc-recovery{
  text-align: center;
  padding: 10px 0 6px;
}
.recovery-card .rc-recovery-num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.recovery-card .rc-recovery-bar{
  margin: 10px 0 6px;
  height: 6px;
  background: rgba(241,245,249,0.7);
  border-radius: 999px;
  overflow: hidden;
}
.recovery-card .rc-recovery-fill{
  height: 100%;
  background: var(--accent-grad);
  border-radius: 999px;
}
.recovery-card .rc-recovery-sub{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-3);
}
.recovery-card .rc-badge{
  display: inline-block;
  margin-top: 4px;
  padding: 3px 9px;
  background: var(--pos-soft);
  color: var(--pos);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  font-weight: 700;
}

.recovery-card .rc-stat-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(241,245,249,0.45);
  border-radius: 10px;
}
.recovery-card .rc-stat-label{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 2px;
}
.recovery-card .rc-stat-val{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.recovery-card .rc-stat-val.pos{ color: var(--pos); }

.recovery-card .rc-velocity{
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.recovery-card .rc-vel-line{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.recovery-card .rc-vel-label{
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.recovery-card .rc-vel-val{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.recovery-card .rc-vel-sub{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.45;
}

/* ===========================================
   BRRRR — Projection charts + yearly table
   =========================================== */
.brrr-chart-wrap{
  margin-top: 14px;
  margin-bottom: 18px;
  padding: 18px 18px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.brrr-chart-wrap .chart-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 4px;
}
.brrr-chart-wrap .chart-sub{
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: 12px;
}
.brrr-chart-wrap .chart-canvas-wrap{
  position: relative;
  width: 100%;
  height: 320px;
}
.brrr-chart-wrap .chart-canvas-wrap.chart-short{ height: 220px; }

.brrr-yearly{
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.brrr-yearly-head{
  padding: 12px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.015em;
  background: rgba(241,245,249,0.55);
  border-bottom: 1px solid var(--line);
}
.brrr-yearly-scroll{
  max-height: 360px;
  overflow-y: auto;
}
.brrr-yearly-table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.brrr-yearly-table thead th{
  position: sticky; top: 0;
  background: rgba(248,250,252,0.95);
  backdrop-filter: blur(6px);
  padding: 8px 12px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.brrr-yearly-table thead th:first-child{ text-align: center; }
.brrr-yearly-table tbody td{
  padding: 7px 12px;
  text-align: right;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.brrr-yearly-table tbody td:first-child{
  text-align: center;
  font-weight: 700;
  color: var(--ink);
}
.brrr-yearly-table tbody tr:hover td{ background: rgba(238,242,255,0.40); }

/* ===========================================
   BRRRR — STR What-If table (LTR vs STR per LTV)
   =========================================== */
.strwi-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--font-display);
}
.strwi-table thead th{
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  background: rgba(241,245,249,0.55);
  border-bottom: 1px solid var(--line);
}
.strwi-table tbody td{
  padding: 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.strwi-table tbody tr:last-child td{ border-bottom: none; }
.strwi-scen{
  width: 26%;
}
.strwi-scen .strwi-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.strwi-row.is-winner-row .strwi-scen .strwi-label{
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.strwi-scen .strwi-ltv{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.10em;
  font-weight: 600;
  margin-top: 2px;
}
.strwi-side{
  width: 37%;
  padding: 14px;
}
.strwi-side.strwi-side-winner{
  background: linear-gradient(135deg, rgba(238,242,255,0.65), rgba(245,243,255,0.50));
}
.strwi-side-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.strwi-side-winner .strwi-side-label{ color: var(--accent-2); }
.strwi-tag{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--pos);
  background: var(--pos-soft);
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.strwi-stat{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.strwi-stat:last-child{ border-bottom: none; }
.strwi-stat .ss-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
}
.strwi-stat .ss-val{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.strwi-stat .ss-val.pos{ color: var(--pos); }
.strwi-stat .ss-val.neg{ color: var(--neg); }
.strwi-stat .ss-val.warn{ color: var(--warn); }

/* ===========================================
   PDF EXPORT MODE — flattens glass effects so
   html2canvas captures clean, readable snapshots.
   Applied only while exportPDF() is running.
   =========================================== */
body.pdf-export *,
body.pdf-export *::before,
body.pdf-export *::after{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Hide page chrome that would otherwise overlay or tint the export */
body.pdf-export .side-panel,
body.pdf-export .sp-scrim,
body.pdf-export .toast,
body.pdf-export .metric-tooltip,
body.pdf-export .pac-container{
  display: none !important;
}
/* Force opaque backgrounds on every glassy container that lives inside a result block */
body.pdf-export #pdfExportStage,
body.pdf-export .results-section,
body.pdf-export .brrr-scenarios,
body.pdf-export .brrr-chart-wrap,
body.pdf-export .brrr-yearly,
body.pdf-export .cost-table,
body.pdf-export .cf-pnl,
body.pdf-export .cf-kpi,
body.pdf-export .recovery-card,
body.pdf-export .strwi-table{
  background: var(--surface-solid) !important;
}
body.pdf-export .brrr-takeaways{
  background: var(--surface-2) !important;
  border-color: var(--line-2) !important;
}
/* Subtle row tints get washed-down opaque equivalents */
body.pdf-export .brrr-scenarios thead th,
body.pdf-export .brrr-scenarios .bs-val.bs-col-winner,
body.pdf-export .strwi-table thead th,
body.pdf-export .cf-pnl .cf-row.cf-subtotal td,
body.pdf-export .brrr-yearly-head{
  background: var(--surface-2) !important;
}
body.pdf-export .brrr-scenarios .bs-col.is-winner,
body.pdf-export .strwi-side.strwi-side-winner,
body.pdf-export .cost-table .ci-total td,
body.pdf-export .cf-pnl .cf-row.cf-total td,
body.pdf-export .holding-line.holding-total{
  background: var(--accent-soft) !important;
}
/* Charts shouldn't try to redraw with a transparent canvas */
body.pdf-export canvas{ background: var(--surface-solid) !important; }

/* --- New Construction overrides --- */
body.pdf-export .nc-summary .ncs-block,
body.pdf-export .nc-stat,
body.pdf-export .nch-card,
body.pdf-export .nc-stress-chart-card,
body.pdf-export .nc-chart-wrap,
body.pdf-export .compare-table,
body.pdf-export .stress-table{
  background: var(--surface-solid) !important;
  border-color: var(--line-2) !important;
}
body.pdf-export .nc-verdict{
  background: var(--accent-strong) !important;       /* indigo fallback for the rich gradient */
  color: var(--on-accent) !important;
}
body.pdf-export .nc-verdict-great{ background: var(--pos-strong) !important; }
body.pdf-export .nc-verdict-good { background: #0d9488 !important; }
body.pdf-export .nc-verdict-ok   { background: var(--warn-strong) !important; }
body.pdf-export .nc-verdict-weak { background: #c2410c !important; }
body.pdf-export .nc-verdict-bad  { background: var(--neg-strong) !important; }
body.pdf-export .nch-winner{
  background: var(--accent-soft) !important;
  border-color: var(--accent-ink) !important;
}
body.pdf-export .ncs-block:first-child{
  background: var(--accent-strong) !important;
  color: var(--on-accent) !important;
}
body.pdf-export .ncs-block:first-child .ncs-kicker,
body.pdf-export .ncs-block:first-child .ncs-sub{ color: rgba(255,255,255,0.85) !important; }
body.pdf-export .nc-cost-table .ci-grand td{
  background: #dcfce7 !important;
  border-top-color: var(--pos) !important;
}
body.pdf-export .nc-cost-table .ci-cash td{
  background: var(--warn-soft) !important;
  border-top-color: var(--warn) !important;
}
body.pdf-export .nc-cost-table .cb-group-head td,
body.pdf-export .compare-table .ch-header,
body.pdf-export .stress-table th{
  background: var(--surface-2) !important;
}
body.pdf-export .stress-table tr.sx-sev-base td{    background: var(--accent-soft) !important; }
body.pdf-export .stress-table tr.sx-sev-mild td{    background: #fefce8 !important; }
body.pdf-export .stress-table tr.sx-sev-moderate td{background: var(--warn-soft) !important; }
body.pdf-export .stress-table tr.sx-sev-severe td{  background: var(--neg-soft) !important; }
body.pdf-export .sx-verdict{
  background: var(--surface-2) !important;
  color: #334155 !important;
}
/* Hide the inline ? tooltip buttons in the PDF — they'd just clutter */
body.pdf-export .metric-info{ display: none !important; }
/* Recovery bars & cost-row bars keep their gradient fill (linear-gradient renders fine) */
body.pdf-export .ci-bar,
body.pdf-export .rc-recovery-bar,
body.pdf-export .cc-score-bar{
  background: var(--line) !important;
}

/* Placeholder note inside an empty result section */
.placeholder-note{
  padding: 28px 22px;
  background: linear-gradient(160deg, rgba(238,242,255,0.55), rgba(245,243,255,0.40));
  border: 1px dashed rgba(126,232,106,0.30);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
}
.placeholder-note strong{ color: var(--accent-2); }

/* ===========================================
   HOME PAGE ANALYZER CARDS — soften the editorial palette
   =========================================== */
.analyzer-card{
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.22s ease, transform 0.2s ease;
}
.analyzer-card:hover{
  border-color: rgba(126,232,106,0.30);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.analyzer-card::before{
  background: var(--accent-grad);
}
.analyzer-card.coming::before{
  background: linear-gradient(90deg, var(--accent-soft), rgba(126,232,106,0.18));
  opacity: 1;
}
.analyzer-card .ac-badge{
  background: var(--pos-soft);
  color: var(--pos);
}
.analyzer-card.coming .ac-badge{
  color: var(--accent-2);
  background: var(--accent-soft);
}
.analyzer-card .ac-cta{
  color: var(--accent-2);
  font-weight: 600;
}

/* Portfolio Manager — a different category from the four analyzers,
   so it spans both columns and uses a cyan-shifted accent palette. */
.analyzer-card.analyzer-card-module{
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(63,169,140,0.04), rgba(126,232,106,0.04));
  border-color: rgba(63,169,140,0.25);
}
.analyzer-card.analyzer-card-module:hover{
  border-color: rgba(63,169,140,0.50);
  box-shadow: 0 18px 40px -16px rgba(63,169,140,0.25);
}
.analyzer-card.analyzer-card-module::before{
  background: linear-gradient(90deg, var(--accent-4) 0%, var(--accent) 100%);
}
.ac-badge-module{
  background: rgba(63,169,140,0.14) !important;
  color: #0e7490 !important;
}
@media(max-width: 840px){
  .analyzer-card.analyzer-card-module{ grid-column: auto; }
}

/* ===========================================
   COMING SOON BLOCK — indigo/violet feel
   =========================================== */
.coming-soon{
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-top: 4px solid transparent;
  border-image: var(--accent-grad) 1;
  /* Some browsers ignore border-image with border-radius; fall back to a top gradient bar via box-shadow */
  position: relative;
  overflow: hidden;
}
.coming-soon::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent-grad);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.coming-soon .cs-stamp{
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid rgba(126,232,106,0.20);
}
.coming-soon h2 em{
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
.coming-soon .cs-section h4{
  color: var(--accent-2);
}
.coming-soon .cs-section li::before{
  color: var(--accent-ink);
}
.coming-soon .cs-back{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--accent-2);
  background: var(--surface-solid);
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 999px;
  transition: all 0.15s ease;
}
.coming-soon .cs-back:hover{
  border-color: var(--accent-ink);
  background: var(--accent-soft);
}

/* The "future deals" note that links to My Deals */
.cs-future{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 32px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(238,242,255,0.65), rgba(245,243,255,0.55));
  border: 1px solid rgba(126,232,106,0.18);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.cs-future a{
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(126,232,106,0.30);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}
.cs-future a:hover{
  text-decoration-color: var(--accent-ink);
}
.cs-future-dot{
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-grad);
  margin-top: 6px;
  box-shadow: 0 0 0 3px rgba(126,232,106,0.15);
}

/* ===========================================
   PROPERTY MAP — Google Maps slot in the Property card
   =========================================== */
.prop-map-field{ margin-top: 4px; }
.prop-map{
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.prop-map.is-empty{
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(238,242,255,0.6) 0%, rgba(245,243,255,0.45) 100%);
  border-style: dashed;
  border-color: rgba(126,232,106,0.30);
}
.prop-map-empty{
  text-align: center;
  padding: 20px 28px;
  max-width: 420px;
}
.prop-map-empty .pme-glyph{
  font-size: 28px;
  margin-bottom: 8px;
}
.prop-map-empty .pme-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 6px;
}
.prop-map-empty .pme-body{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.55;
}
.prop-map-empty code{
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 1px 5px;
  background: rgba(126,232,106,0.10);
  border-radius: 4px;
  color: var(--accent-2);
}
.prop-map-status{
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-3);
  min-height: 14px;
}
.prop-map-status.is-warn{ color: var(--warn); }
.prop-map-status.is-error{ color: var(--neg); }

/* Google's Places Autocomplete dropdown — tame it to match the theme */
.pac-container{
  margin-top: 4px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-family: var(--font-display);
  background: var(--surface-solid);
  z-index: 300;
}
.pac-item{
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}
.pac-item:first-child{ border-top: none; }
.pac-item:hover{ background: var(--accent-soft); }
.pac-item-query{ color: var(--ink); font-weight: 600; }
.pac-matched{ color: var(--ink); }   /* matched text charcoal, not green */

/* ===========================================
   WEIGHTS PANEL (Compare page) — presets + sliders
   =========================================== */
.weights-panel{
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.weights-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-align: left;
}
.weights-toggle:hover{ background: var(--surface-2); }
.weights-toggle .wt-left{
  display: inline-flex; align-items: center; gap: 10px;
}
.weights-toggle .wt-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--surface-2);   /* neutral — was green */
  color: var(--ink-2);
  font-size: 14px;
}
.weights-toggle .wt-active{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-2);            /* neutral BALANCED chip — was green */
  background: var(--surface-2);
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 6px;
}
.weights-toggle .wt-chev{
  font-size: 14px;
  color: var(--ink-3);
  transition: transform 0.2s ease;
}
.weights-panel.open .wt-chev{ transform: rotate(180deg); }

.weights-body{
  display: none;
  padding: 4px 22px 22px;
  border-top: 1px solid var(--line);
}
.weights-panel.open .weights-body{ display: block; }

.weights-intro{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
  margin: 14px 0 16px;
}
.weights-section-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 8px;
}

.weights-presets{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.preset-btn{
  position: relative;
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.preset-btn:hover{
  border-color: var(--accent-ink);
  color: var(--accent-2);
  background: var(--accent-soft);
}
.preset-btn.active{
  background: var(--accent-grad);
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(126,232,106,0.40);
}

.weight-sliders{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.weight-row{
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr 48px;
  align-items: center;
  gap: 14px;
}
.weight-label{
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.weight-slider{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: var(--line-2);   /* neutral rail — was green (matches MAO) */
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.weight-slider::-webkit-slider-thumb{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--ink-2);     /* charcoal thumb (matches MAO) */
  border: 3px solid var(--surface-solid);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--line), 0 2px 8px -2px rgba(17,21,28,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.weight-slider::-moz-range-thumb{
  width: 18px;
  height: 18px;
  background: var(--ink-2);
  border: 3px solid var(--surface-solid);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--line), 0 2px 8px -2px rgba(17,21,28,0.35);
}
.weight-slider:focus::-webkit-slider-thumb{
  transform: scale(1.10);
  box-shadow: 0 0 0 6px var(--line-2);
}
.weight-slider:focus{ outline: none; }
.weight-value{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}
.weight-value.zero{ color: var(--ink-4); }

.weights-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.weights-foot .wf-note{
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-3);
  flex: 1;
}
.weights-reset{
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.weights-reset:hover{
  color: var(--accent-2);
  border-color: var(--accent-ink);
  background: var(--accent-soft);
}

@media (max-width: 640px){
  .weight-row{ grid-template-columns: 1fr 48px; }
  .weight-row .weight-label{ grid-column: 1 / -1; margin-bottom: -4px; }
}

/* ===========================================
   COMPARE DEALS — winner banner + side-by-side
   =========================================== */
.compare-banner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 32px;
  padding: 24px 30px;
  background: var(--ink-2);   /* charcoal banner — was solid green --accent-grad */
  border-radius: var(--radius-lg);
  color: var(--on-dark);
  box-shadow: 0 24px 60px -26px rgba(17,21,28,0.55);
  overflow: hidden;
}
.compare-banner .cb-main{ position: relative; flex: 1; min-width: 0; }
.compare-banner .cb-gauge{ position: relative; flex-shrink: 0; }
.compare-banner::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 300px at 90% -20%, rgba(255,255,255,0.25), transparent 60%);
  pointer-events: none;
}
.compare-banner .cb-kicker{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 8px;
  font-weight: 600;
}
.compare-banner .cb-title{
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--brand-fill);   /* brand-green winner title on the charcoal banner */
}
.compare-banner .cb-crown{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-fill);   /* bright brand-green chip + black glyph */
  color: var(--brand-ink);
  font-size: 18px;
}
.compare-banner .cb-sub{
  font-family: var(--font-display);
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  margin: 0 0 12px;
  max-width: 720px;
  line-height: 1.55;
}
.compare-banner .cb-score{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 14px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 700;
}
.compare-banner .cb-score-val{ font-size: 18px; }
.compare-banner .cb-score-sub{ font-size: 11px; opacity: 0.85; letter-spacing: 0.06em; }

/* Semicircular score gauge (compare banner + cards) */
.cc-gauge{ display: block; width: 122px; height: auto; }
.cc-gauge text{ font-family: var(--font-display); }
.cc-gauge-lg{ width: 168px; }
.cc-gauge-wrap{ margin: 4px 0 12px; }

/* Side-by-side deal cards */
.compare-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 36px;
}
.compare-card{
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compare-card.is-winner{
  /* Neutral charcoal winner ring (was a green glow) — pairs with the
     charcoal #1 pill; brand-green stays reserved for the hero banner. */
  border-color: var(--ink-3);
  box-shadow: 0 0 0 2px rgba(17,21,28,0.12), var(--shadow-md);
}
.compare-card .cc-rank{
  position: absolute;
  top: -10px;
  left: 16px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--on-dark);
  background: var(--ink);
  border-radius: 999px;
}
.compare-card.is-winner .cc-rank{
  background: var(--ink-2);   /* charcoal #1 pill (was green) */
  box-shadow: 0 4px 12px -4px rgba(17,21,28,0.35);
}
.compare-card .cc-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0;
  word-break: break-word;
}
.compare-card .cc-address{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
}
.compare-card .cc-score-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(241,245,249,0.55);
  border-radius: 10px;
}
[data-theme="dark"] .compare-card .cc-score-row{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
[data-theme="midnight"] .compare-card .cc-score-row{
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
}
.compare-card .cc-score-num{
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.compare-card .cc-score-bar{
  flex: 1;
  height: 8px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.compare-card .cc-score-fill{
  position: absolute;
  inset: 0;
  background: var(--ink-2);   /* neutral score bar — was green --accent-grad */
  transform-origin: left center;
  border-radius: 999px;
}
.compare-card .cc-proscons{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.5;
}
.compare-card .cc-pro,
.compare-card .cc-con{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
}
.compare-card .cc-pro::before{
  content: '+';
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pos-soft);
  color: var(--pos);
  border-radius: 50%;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 13px;
  flex-shrink: 0;
}
.compare-card .cc-con::before{
  content: '−';
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--neg-soft);
  color: var(--neg);
  border-radius: 50%;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 14px;
  flex-shrink: 0;
}
.compare-card .cc-actions{ margin-top: auto; padding-top: 4px; }
.compare-card .cc-open{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-2);          /* neutral outline Open button — was green text */
  background: var(--surface-solid);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.compare-card .cc-open:hover{
  border-color: var(--ink-3);
  background: var(--surface-2);
  color: var(--ink);
}

/* Comparison matrix table */
.compare-matrix{
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  overflow: visible;                /* tooltips on metric labels extend out */
}
.compare-matrix .cm-scroll{
  overflow: visible;                /* must stay visible so tooltips above the
                                       first rows aren't clipped */
}
.compare-matrix h3{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.compare-matrix .cm-legend{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
}
.compare-matrix .cm-legend .swatch{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.compare-matrix .cm-legend .swatch .dot{
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.compare-matrix .cm-legend .dot.best{ background: var(--pos-soft); border-color: rgba(5,150,105,0.30); }
.compare-matrix .cm-legend .dot.worst{ background: var(--neg-soft); border-color: rgba(220,38,38,0.30); }
.compare-matrix .cm-legend .dot.mid{ background: var(--surface-2); border-color: var(--line); }
.compare-matrix .cm-legend strong{ color: var(--ink-2); font-weight: 600; }
.compare-matrix table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: 13px;
}
.compare-matrix thead th{
  text-align: left;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  background: rgba(241,245,249,0.50);
}
[data-theme="dark"] .compare-matrix thead th{
  background: rgba(255,255,255,0.04);
}
[data-theme="midnight"] .compare-matrix thead th{
  background: rgba(255,255,255,0.025);
}
.compare-matrix tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.compare-matrix tbody tr:last-child td{ border-bottom: none; }
.compare-matrix td.cm-metric{
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.compare-matrix td.cm-value{
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.compare-matrix td.cm-best{
  background: linear-gradient(90deg, var(--pos-soft) 0%, rgba(209,250,229,0) 100%);
  color: var(--pos);
}
.compare-matrix td.cm-worst{
  color: var(--neg);
}
.compare-matrix .cm-deal-head{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.compare-matrix .cm-deal-head .name{
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
}
.compare-matrix .cm-deal-head .crown{
  display: inline-block;
  padding: 1px 6px;
  font-size: 9px;
  background: var(--accent-grad);
  color: var(--on-accent);
  border-radius: 4px;
  margin-top: 2px;
  letter-spacing: 0.10em;
}

/* ===========================================
   METRIC INFO TOOLTIP — "?" badge with hover popover
   =========================================== */
.metric-row{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.metric-info{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  border: 1px solid var(--line-2);
  cursor: help;
  transition: all 0.15s ease;
  user-select: none;
  vertical-align: middle;
  padding: 0;
}
.metric-info:hover,
.metric-info:focus{
  background: var(--accent-soft);
  color: var(--accent-2);
  border-color: var(--accent-ink);
  outline: none;
}
.metric-info::after{
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 280px;
  max-width: 80vw;
  padding: 12px 14px;
  /* Fixed dark slate bg regardless of theme — `var(--ink)` becomes
     LIGHT in dark/midnight themes, which would yield white-on-light
     text and an invisible tooltip. */
  background: #0f172a;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-align: left;
  text-transform: none;
  border-radius: 10px;
  box-shadow: 0 18px 40px -14px rgba(15,23,42,0.45);
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
}
.metric-info::before{
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  /* Same fixed dark slate as the tooltip body — keeps the arrow visible
     in every theme. */
  border-top-color: #0f172a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s;
  z-index: 200;
}
.metric-info:hover::after,
.metric-info:focus::after{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.metric-info:hover::before,
.metric-info:focus::before{
  opacity: 1;
  visibility: visible;
}

/* Tooltip below the trigger — for cells at the top of a scroll container
   (e.g. table headers) where an upward tooltip would be clipped. */
.metric-info.tip-down::after{
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
}
.metric-info.tip-down::before{
  bottom: auto;
  top: calc(100% + 4px);
  border-top-color: transparent;
  border-bottom-color: #0f172a;
}
.metric-info.tip-down:hover::after,
.metric-info.tip-down:focus::after{
  transform: translateX(-50%) translateY(0);
}

/* Anchor the tooltip to the right for the leftmost cells so it doesn't clip */
.compare-matrix td.cm-metric .metric-info::after{
  left: 0;
  transform: translateX(-4px) translateY(4px);
}
.compare-matrix td.cm-metric .metric-info:hover::after,
.compare-matrix td.cm-metric .metric-info:focus::after{
  transform: translateX(-4px) translateY(0);
}
.compare-matrix td.cm-metric .metric-info::before{
  left: 8px;
  transform: translateX(0);
}

/* When tooltip.js is loaded, the JS portal tooltip takes over and
   the CSS pseudo-element tooltips are suppressed. The badges still
   render normally. */
html.js-tooltip .metric-info::after,
html.js-tooltip .metric-info::before{
  display: none !important;
}

.metric-tooltip{
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  max-width: 300px;
  width: max-content;
  padding: 12px 14px;
  /* Fixed dark slate bg + light text — keeps the tooltip legible
     in all three themes (var(--ink) flips light in dark/midnight).
     !important guards against any later override. */
  background: #0f172a !important;
  color: var(--bg) !important;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-align: left;
  border-radius: 10px;
  box-shadow: 0 18px 40px -14px rgba(15,23,42,0.55);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.metric-tooltip.is-shown{
  opacity: 1;
  transform: translateY(0);
}
.metric-tooltip-arrow{
  position: absolute;
  bottom: -5px;
  left: 12px;
  width: 10px;
  height: 10px;
  background: #0f172a !important;
  transform: rotate(45deg);
  border-radius: 2px;
}
.metric-tooltip.flip-down .metric-tooltip-arrow{
  bottom: auto;
  top: -5px;
}

/* When the "?" tooltip lives inside a form label / field hint */
.label .metric-info,
.field-hint .metric-info{
  margin-left: 6px;
  vertical-align: middle;
}
.field .metric-info::after{
  width: 260px;
  /* anchor to the right of the badge so it doesn't clip on leftmost columns */
  left: 0;
  transform: translateX(-10px) translateY(4px);
  /* readable on the dark/glass card backgrounds */
}
.field .metric-info:hover::after,
.field .metric-info:focus::after{
  transform: translateX(-10px) translateY(0);
}
.field .metric-info::before{
  left: 12px;
  transform: translateX(0);
}

/* ===========================================
   LANDING PAGE (index.html) — marketing layout
   =========================================== */
body.landing{
  background-image:
    radial-gradient(1400px 700px at 10% -8%,  var(--accent-soft) 0%, transparent 60%),
    radial-gradient(1100px 600px at 100% 0%,  color-mix(in srgb, var(--accent-3) 6%, white) 0%, transparent 55%),
    radial-gradient(900px 600px at 90% 110%,  color-mix(in srgb, var(--accent-4) 8%, white) 0%, transparent 60%);
}
body.landing .wrap{ display: none; }  /* legacy .wrap container not used on landing */
/* Pricing inherits body.landing for the light-lock + landing nav, but its
   content lives inside .wrap — keep it visible. */
body.landing.pricing-page .wrap{ display: block; }
/* auth.js auto-injects .auth-widget into every .platform-nav .nav-inner.
   On landing pages the auth entry point is the hero card (or the manual nav-cta link),
   so hide the auto-injected widget here. */
body.landing .auth-widget{ display: none !important; }
/* Desktop landing: no burger (tabs are visible). Below 980px the tabs
   collapse, so the burger takes over — see MOBILE LANDING NAV block. */
@media (min-width: 981px){
  body.landing .nav-burger{ display: none !important; }
}

/* --- Landing nav: add a CTA on the right --- */
.landing-nav .nav-inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  max-width: none;       /* full-width: brand sits flush at the page's left edge */
  margin: 0;
  padding: 12px 32px;
}
.landing-tabs{
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}
.landing-tabs > li{ position: relative; }
.landing-tabs a{
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.landing-tabs a:hover,
.landing-tabs a.active{ color: var(--accent-2); border-color: var(--accent-ink); }
.landing-tabs a[hidden]{ display: none; }
.landing-tabs li[hidden]{ display: none; }

/* Try Demo: subtle pill highlight so it stands out as the no-signup escape hatch */
.landing-tabs .tab-try-demo > a{
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid rgba(126,232,106,0.22);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
}
.landing-tabs .tab-try-demo > a:hover{
  background: rgba(126,232,106,0.16);
  border-color: rgba(126,232,106,0.40);
  border-bottom-color: rgba(126,232,106,0.40);
}

/* Caret indicators on dropdown trigger */
.landing-tabs .dropdown-trigger .caret{
  font-size: 10px;
  line-height: 1;
  margin-left: 2px;
  transition: transform 0.15s ease;
}
.landing-tabs .has-dropdown:hover .dropdown-trigger .caret,
.landing-tabs .has-dropdown.is-open .dropdown-trigger .caret,
.landing-tabs .has-dropdown:focus-within .dropdown-trigger .caret{
  transform: rotate(180deg);
}

/* ------------------------------------------------------------
   Dropdown panels (Solutions → Deal Analyzer → strategies)
   ------------------------------------------------------------ */
.dropdown,
.submenu{
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 280px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 22px 50px -18px rgba(15,23,42,0.25), 0 0 0 1px rgba(255,255,255,0.6) inset;
  padding: 8px;
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  z-index: 50;
}
.submenu{
  top: -8px;
  left: 100%;
  margin-top: 0;
  margin-left: 4px;
}
.landing-tabs .has-dropdown:hover > .dropdown,
.landing-tabs .has-dropdown.is-open > .dropdown,
.landing-tabs .has-dropdown:focus-within > .dropdown,
.landing-tabs .has-submenu:hover > .submenu,
.landing-tabs .has-submenu.is-open > .submenu,
.landing-tabs .has-submenu:focus-within > .submenu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Bridge the visual gap so the dropdown doesn't close as you move the cursor down to it */
.landing-tabs .has-dropdown > .dropdown::before{
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}
.landing-tabs .has-submenu > .submenu::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -8px; width: 8px;
}
.dropdown-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dropdown-list > li{ position: relative; }
.dropdown-list a{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border-bottom: none;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}
.dropdown-list a:hover{
  background: var(--accent-soft);
  color: var(--accent-2);
  border-color: transparent;
}
.dropdown-list .dl-icon{
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: transparent;
  border-radius: 8px;
  color: var(--ink);
}
.dropdown-list .dl-text{
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.dropdown-list .dl-title{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.dropdown-list .dl-sub{
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
}
.dropdown-list .caret-r{
  margin-left: auto;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1;
}
.dropdown-list a:hover .dl-title{ color: var(--accent-2); }
.dropdown-list a:hover .caret-r{ color: var(--accent-2); }
/* Flat single-column Solutions menu — section label + divider (no fly-out gap) */
.dropdown-list .dl-head{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-4);
  padding: 8px 12px 4px;
}
.dropdown-list .dl-divider{ height: 1px; background: var(--line); margin: 6px 10px; }
.nav-cta{
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-link{
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-link:hover{ background: rgba(126,232,106,0.08); color: var(--accent-2); }
.nav-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-fill);
  padding: 9px 16px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 6px 18px -6px rgba(126,232,106,0.55);
  transition: transform 0.15s ease, box-shadow 0.18s ease;
}
.nav-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(126,232,106,0.65); }
.nav-btn .arrow{ transition: transform 0.15s ease; }
.nav-btn:hover .arrow{ transform: translateX(3px); }

/* Right-corner Try Demo pill (lives in .nav-cta, outside .landing-tabs) */
.nav-try-demo{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);                  /* neutral, readable secondary button */
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 8px 14px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.nav-try-demo:hover{
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ===========================================
   DASHBOARD SHELL (dashboard.html) — left sidebar + iframe workspace
   =========================================== */
body.dashboard-shell{
  margin: 0;
  height: 100vh;        /* fixed (not min-height) so .dash-main can scroll inside */
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Demo-mode strip — sits under the dashboard header (full width), only in
   demo mode. The icon rail is fixed at top:52px (header height); push it
   down by the strip height so it doesn't overlap. */
.dash-demo-strip{ display: none; }
body.dashboard-demo .dash-demo-strip{ display: block; }
body.dashboard-demo .dash-sidebar{ top: 81px; }

/* ===========================================
   DASH-RAIL-1 — Top horizontal header bar
   Spans full width; rail starts BELOW it.
   =========================================== */
.dash-topbar{
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: #0C0F0A;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 70;
}
.dash-topbar .dash-brand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 4px;
  border-radius: 8px;
  text-decoration: none;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Brand icon — green chip holding the roof glyph (matches the REIzer
   dashboard spec: accent-grad fill, on-accent stroke, soft glow). */
/* Black dashboard header: the chevron mark + full "REIzer" wordmark render
   in bright brand green directly on the black bar (no chip). */
.dash-topbar .dash-brand-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
}
.dash-topbar .dash-brand-icon svg{ width: 32px; height: 32px; display: block; }
.dash-topbar .dash-brand-icon svg path{
  stroke: var(--brand-fill);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.dash-topbar .dash-brand-text{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.025em;
  color: #ffffff;
  opacity: 1;
  transition: none;
}
.dash-topbar .dash-brand-text em{
  color: var(--brand-fill);
  font-style: normal;
}
.dash-brand-mark{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid rgba(126,232,106,0.18);
  border-radius: 6px;
  padding: 3px 7px;
}

/* Active-tool chip — icon-only badge next to the brand. */
/* Active-tool icon chip is hidden — the sidebar already shows the active
   tool; no need to echo it in the header (keeps the header minimal). */
.dash-topbar-tool{ display: none !important; }
.dtt-icon{ font-size: 16px; line-height: 1; }

.dash-topbar-spacer{ flex: 1; }

.dash-topbar-actions{
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.dash-topbar-actions[hidden]{ display: none; }
.dash-tb-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.dash-tb-btn:hover{
  background: rgba(126,232,106,0.07);
  color: var(--accent-2);
  border-color: rgba(126,232,106,0.20);
}
.dash-tb-btn .dtb-icon{ font-size: 13px; line-height: 1; display: inline-flex; align-items: center; color: var(--ink-3); }
.dash-tb-btn .dtb-icon svg{ width: 15px; height: 15px; display: block; }
.dash-tb-btn .dtb-label{ line-height: 1; }
@media (max-width: 720px){
  .dash-tb-btn .dtb-label{ display: none; }
  .dash-tb-btn{ padding: 6px 10px; }
}

/* User widget back at the bottom of the rail (Supabase pattern —
   account / theme / sign-out controls live where the eye returns).
   Avatar-only when rail is collapsed; full email + plan when the
   rail is hovered. Menu opens UP + RIGHT of the rail. */
.dash-user{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

/* Topbar is black in every theme — action buttons read light, brand stays
   green (set in the base rules above). */
.dash-topbar .dash-tb-btn{ color: rgba(255,255,255,0.78); }
.dash-topbar .dash-tb-btn:hover{
  background: rgba(255,255,255,0.10);
  color: #fff;
}
/* ===========================================
   DASH-RAIL-1 — Supabase-style icon rail + subnav column
   - Rail is fixed-position 64px icon-only by default
   - Hover (or focus-within) → rail EXPANDS to 240px showing labels
     inline next to icons. Overlays the rest of the page, no layout
     shift, so reading the labels doesn't shove the analyzer around.
   - Selected tool also shows a secondary subnav column with quick
     actions for that strategy.
   =========================================== */
.dash-root{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);   /* bound the row so .dash-main can scroll */
  margin-left: 64px;        /* reserve space for the fixed rail */
  flex: 1;
  min-height: 0;            /* allow children to scroll inside the flex column */
  transition: grid-template-columns 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.dash-root.has-subnav{
  grid-template-columns: 232px 1fr;
}
@media (max-width: 860px){
  .dash-root,
  .dash-root.has-subnav{
    grid-template-columns: 1fr;
    /* Keep the 64px reservation — the icon rail stays position:fixed and would
       otherwise overlap and clip the left edge of the content on phones. */
    margin-left: 64px;
  }
  /* Only the subnav layout gets a header row. Without a subnav the main
     pane must own the whole height — with `auto 1fr` it landed in the
     auto row and collapsed to the iframe's intrinsic 150px (My Deals /
     Portfolio showed as a strip over a white void). */
  .dash-root{ grid-template-rows: minmax(0, 1fr); }
  .dash-root.has-subnav{ grid-template-rows: auto minmax(0, 1fr); }
}

/* ---- Rail — sits BELOW the top header, full height of remaining
   viewport. Width hover-expands as before. ---- */
.dash-sidebar{
  position: fixed;
  left: 0;
  top: 52px;                /* below .dash-topbar */
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  background: rgba(255,255,255,0.92);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  padding: 14px 8px 12px;
  gap: 8px;
  overflow: visible;
  z-index: 1200;            /* above the Leaflet map panes/controls when expanded */
  transition: width 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.22s ease;
}
.dash-sidebar:hover,
.dash-sidebar:focus-within{
  width: 240px;
  box-shadow: 6px 0 24px -10px rgba(15,23,42,0.18);
}
.dash-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 4px;
  border-radius: 10px;
  text-decoration: none;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.dash-brand:hover{ transform: translateY(-1px); }
.dash-brand-svg{ width: 32px; height: 32px; display: block; flex-shrink: 0; }
.dash-brand-text{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.18s ease 0.04s;
}
.dash-sidebar:hover .dash-brand-text,
.dash-sidebar:focus-within .dash-brand-text{ opacity: 1; }

.dash-nav{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
  /* No overflow on the nav container — the icons-only rail fits in
     viewport height (max ~9 items × 44px + dividers) so we don't need
     scrolling. Setting overflow on Y would silently clip overflow-X
     too (CSS spec quirk) and the hover tooltips slide to the RIGHT
     so they'd be invisible. */
  overflow: visible;
}
.dash-nav-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.dash-rail-divider{
  height: 1px;
  width: 28px;
  background: var(--line);
  margin: 6px 0;
  list-style: none;
  transition: width 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.dash-sidebar:hover .dash-rail-divider,
.dash-sidebar:focus-within .dash-rail-divider{
  width: calc(240px - 32px);
}
.dash-item{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  padding: 0 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              background 0.12s ease,
              color 0.12s ease,
              border-color 0.12s ease;
}
.dash-sidebar:hover .dash-item,
.dash-sidebar:focus-within .dash-item{
  width: calc(240px - 16px);   /* sidebar width minus its padding */
}
.dash-item:hover{
  background: var(--surface);
  color: var(--ink);
}
/* Selected state reads via a neutral fill + bold weight + a slim brand
   left-bar — the icon itself stays neutral ink (no green-on-icon). */
.dash-item.is-active{
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
  font-weight: 600;
}
.dash-item.is-active::before{
  /* Slim brand accent bar on the left edge — the one green cue for "you are here". */
  content: '';
  position: absolute;
  left: -8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-fill);
}
.dash-item .di-icon{
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
}
/* Inline label — invisible when the rail is collapsed (we just clip
   to icon width via overflow:hidden), visible alongside the icon when
   the rail expands. Fades in for polish. */
.dash-item .di-label{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.18s ease 0.04s;
}
.dash-sidebar:hover .di-label,
.dash-sidebar:focus-within .di-label{
  opacity: 1;
}

/* ---- Secondary subnav column ---- */
.dash-subnav{
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.85);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: 18px 14px 16px;
  gap: 8px;
  overflow-y: auto;
  animation: dash-subnav-slide 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.dash-subnav[hidden]{ display: none; }
@keyframes dash-subnav-slide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0);    }
}
.dash-subnav-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.dsn-icon{
  font-size: 18px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
.dsn-icon svg{ width: 20px; height: 20px; display: block; }
.dsn-title{
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dash-subnav-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-subnav-list li{ margin: 0; }
/* Plan-gated tool (e.g. Market Trends below Pro): the actions render but
   are inert, so show them as unavailable instead of live no-op buttons. */
.dash-subnav.is-locked .dash-subnav-btn,
.dash-subnav-btn[disabled]{
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}
.dash-subnav.is-locked .dash-subnav-btn:hover,
.dash-subnav-btn[disabled]:hover{ background: transparent; }

.dash-subnav-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
.dash-subnav-btn:hover{
  background: var(--surface-2);
  color: var(--ink);
}
.dash-subnav-btn:active{ transform: translateY(0.5px); }
.dash-subnav-btn .dsb-icon{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--ink-3);
}
.dash-subnav-btn .dsb-icon svg{ width: 18px; height: 18px; display: block; }
.dash-subnav-btn:hover .dsb-icon{ color: var(--ink); }
.dash-subnav-btn .dsb-label{ flex: 1; }
.dash-subnav-divider{
  height: 1px;
  background: var(--line);
  margin: 6px 4px;
  list-style: none;
}

/* Dark / midnight variants */
html[data-theme="dark"] .dash-sidebar,
html[data-theme="midnight"] .dash-sidebar{
  background: rgba(15,23,42,0.78);
  border-right-color: rgba(126,232,106,0.18);
}
html[data-theme="midnight"] .dash-sidebar{
  background: rgba(10,10,10,0.85);
  border-right-color: var(--line);
}
html[data-theme="dark"] .dash-subnav,
html[data-theme="midnight"] .dash-subnav{
  background: rgba(15,23,42,0.85);
  border-right-color: rgba(126,232,106,0.18);
}
html[data-theme="midnight"] .dash-subnav{
  background: rgba(10,10,10,0.92);
  border-right-color: var(--line);
}
html[data-theme="dark"] .dash-rail-divider,
html[data-theme="midnight"] .dash-rail-divider{ background: rgba(255,255,255,0.10); }
/* Dark/midnight: inline label is just text now (no longer a
   floating tooltip), so no surrounding box — just inherit the
   color from .dash-item. */
html[data-theme="dark"] .dash-item .di-label,
html[data-theme="midnight"] .dash-item .di-label{
  background: transparent;
  border: 0;
  color: inherit;
}
html[data-theme="dark"] .dash-subnav-btn:hover,
html[data-theme="midnight"] .dash-subnav-btn:hover{
  background: rgba(126,232,106,0.14);
  color: var(--accent-3);
}
html[data-theme="dark"] .dsn-title,
html[data-theme="midnight"] .dsn-title{ color: var(--ink); }

/* ---- User widget (bottom of compact rail) ---- */
.dash-user{
  position: relative;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  width: 100%;
  display: flex;
  justify-content: center;
}
.dash-user-pill{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 44px;
  height: 44px;
  padding: 0 4px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-display);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              background 0.12s ease,
              border-color 0.12s ease;
}
.dash-sidebar:hover .dash-user-pill,
.dash-sidebar:focus-within .dash-user-pill{
  width: calc(240px - 16px);
  padding: 0 8px;
}
.dash-user-pill:hover,
.dash-user-pill.is-open{
  background: rgba(126,232,106,0.06);
  border-color: var(--line);
}
.dash-user-pill .dash-user-text,
.dash-user-pill .dash-user-caret{
  opacity: 0;
  transition: opacity 0.18s ease 0.04s;
}
.dash-sidebar:hover .dash-user-pill .dash-user-text,
.dash-sidebar:hover .dash-user-pill .dash-user-caret,
.dash-sidebar:focus-within .dash-user-pill .dash-user-text,
.dash-sidebar:focus-within .dash-user-pill .dash-user-caret{
  opacity: 1;
}
/* Open the user menu to the RIGHT of the pill (not above) since the
   pill is now centered in a narrow rail. */
.dash-user-menu{
  position: absolute;
  bottom: 0;
  left: calc(100% + 12px);
  right: auto;
  width: 260px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 22px 50px -18px rgba(15,23,42,0.30);
  padding: 8px;
  z-index: 60;
}
.dash-user-avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-fill);
  color: var(--brand-ink);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0;
}
.dash-user-text{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dash-user-email{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-user-plan{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.dash-user-caret{
  margin-left: 4px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1;
}

/* User menu — opens ABOVE the rail avatar pill. The rail is only
   64px wide, so we extend the menu to the right past the rail edge
   (260px total) — the .dash-sidebar has overflow:visible so the
   overflow is allowed. */
.dash-user-menu{
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
  width: 260px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 22px 50px -18px rgba(15,23,42,0.30);
  padding: 8px;
  z-index: 80;
}
.dash-user-menu[hidden]{ display: none; }
.dum-id{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  margin-bottom: 4px;
}
.dum-id .dash-user-avatar{ width: 36px; height: 36px; font-size: 14px; }
.dum-id-meta{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dum-id-email{
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dum-id-plan{ display: inline-block; }
.dum-plan-badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
  border: 1px solid rgba(126,232,106,0.22);
}
.dum-plan-explorer{ background: var(--tier-explorer); color: var(--tier-explorer-ink); border-color: color-mix(in srgb, var(--tier-explorer), #000 16%); }
.dum-plan-investor{ background: var(--tier-investor); color: var(--tier-investor-ink); border-color: color-mix(in srgb, var(--tier-investor), #000 16%); }
.dum-plan-pro     { background: var(--tier-pro);      color: var(--tier-pro-ink);      border-color: color-mix(in srgb, var(--tier-pro), #000 16%); }
.dum-plan-elite   { background: var(--tier-elite);    color: var(--tier-elite-ink);    border-color: color-mix(in srgb, var(--tier-elite), #000 16%); }

.dum-divider{ height: 1px; background: var(--line); margin: 4px 0; }
.dum-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
  text-align: left;
}
.dum-row:hover{ background: rgba(126,232,106,0.06); color: var(--accent-2); }
.dum-row .dum-row-icon{ width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: var(--ink-3); }
.dum-row:hover .dum-row-icon{ color: var(--accent-2); }
.dum-row.dum-row-danger:hover{ background: rgba(220,38,38,0.08); color: var(--neg); }
.dum-row.dum-row-danger:hover .dum-row-icon{ color: var(--neg); }

/* Dark/midnight disabled for launch — hide the theme switchers (dashboard
   user menu + settings page). Re-enable by removing these two display:none. */
.dum-theme{ display: none !important; }
.settings-body .theme-picker{ display: none !important; }
.dum-theme-label{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.dum-theme-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: transparent;
  padding: 0;
}
.dum-theme-opt{
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 6px 8px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.18s ease;
  text-align: center;
}
.dum-theme-opt:hover{
  border-color: var(--accent-ink);
  transform: translateY(-1px);
}
.dum-theme-opt.is-active{
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(126,232,106,0.15);
}
.dum-ts{
  position: relative;
  display: block;
  height: 38px;
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,0.30);
  overflow: hidden;
}
.dum-ts-bar{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 11px;
}
.dum-ts-card{
  position: absolute;
  bottom: 4px; left: 5px; right: 5px;
  height: 14px;
  border-radius: 3px;
}
.dum-ts-light          { background: var(--bg); }
.dum-ts-light .dum-ts-bar { background: var(--surface-solid); border-bottom: 1px solid var(--line); }
.dum-ts-light .dum-ts-card{ background: var(--surface-solid); border: 1px solid var(--line); }
.dum-ts-dark           { background: #0f172a; }
.dum-ts-dark .dum-ts-bar  { background: var(--ink-2); }
.dum-ts-dark .dum-ts-card { background: var(--ink-2); border: 1px solid #334155; }
.dum-ts-midnight       { background: #000000; }
.dum-ts-midnight .dum-ts-bar  { background: #0a0a0a; }
.dum-ts-midnight .dum-ts-card { background: #111111; border: 1px solid #1f1f1f; }
.dum-ts-name{
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* ---- Main content area ---- */
.dash-main{
  position: relative;
  overflow-y: auto;
  min-height: 0;
  background: var(--bg);
}
.dash-frame{
  display: block;   /* inline iframes leave an ~8px baseline gap that pushes
                       .dash-main into overflow → a redundant second scrollbar
                       beside the iframe's own content scroll. */
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}
.dash-frame[hidden]{ display: none; }

/* Welcome panel — shown when no tool selected */
.dash-welcome{
  min-height: 100%;
  padding: 44px 56px 56px;
  background:
    radial-gradient(900px 600px at 0% -10%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(700px 500px at 100% 100%, color-mix(in srgb, var(--accent-4) 8%, white) 0%, transparent 60%),
    var(--bg);
}
.dash-welcome[hidden]{ display: none; }
@media (max-width: 600px){ .dash-welcome{ padding: 32px 22px 44px; } }
.dash-welcome-inner{ max-width: none; margin: 0; }
.dw-kicker{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-4);
  margin-bottom: 10px;
}
.dw-headline{
  font-family: var(--font-serif);
  font-size: clamp(30px, 5.5vw, 44px);
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 14px;
}
.dw-lede{
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 36px;
  max-width: 640px;
}
.dw-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.dw-card{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.12s ease;
}
.dw-card:hover{
  transform: translateY(-2px);
  border-color: rgba(126,232,106,0.30);
  box-shadow: 0 18px 36px -14px rgba(126,232,106,0.25);
}
.dwc-icon{ font-size: 22px; margin-bottom: 4px; }
.dwc-title{
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.dwc-sub{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ===========================================================
   Dashboard HOME — AI Copilot (inline)
   The real Copilot panel (assets/js/ai-chat.js) is re-parented into
   #dwCopilotHost on the home view and styled inline via .aic-embedded
   (see assets/css/ai-chat.css). This wrapper just owns the spacing.
   =========================================================== */
.dw-copilot{ margin: 0 0 34px; }
.dw-copilot-host{ display: block; }
/* Demo mode has no session, so the Copilot can't mount — hide the block. */
body.dashboard-demo .dw-copilot{ display: none; }

/* ===========================================================
   Dashboard HOME overview — KPI strip + recent deals (TR-1/TR-4)
   Light theme, green-as-accent: green only on positive values.
   =========================================================== */
/* Portfolio block: KPI tiles (left) + wealth chart (right) */
.dh-portfolio-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px){ .dh-portfolio-grid{ grid-template-columns: 1fr; } }
.dh-kpi-col{ display: flex; flex-direction: column; gap: 12px; }
.dh-kpi{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 17px;
  text-align: left;
  font: inherit;
  position: relative;
}
button.dh-kpi{ cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; }
button.dh-kpi:hover{ border-color: var(--line-2); background: var(--surface-2); }
button.dh-kpi.is-active{
  border-color: var(--brand-fill);
  box-shadow: inset 3px 0 0 var(--brand-fill);
  background: var(--surface-solid);
}
.dh-kpi-col{ flex: 1; }
.dh-kpi-col .dh-kpi{ flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dh-kpi .k{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: 8px;
}
.dh-kpi .v{
  font-family: var(--font-mono);
  font-size: 30px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.03em; line-height: 1;
}
.dh-kpi .v small{ font-size: 15px; font-weight: 400; color: var(--ink-3); }
.dh-kpi .d{
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 700; margin-top: 9px;
  display: inline-flex; align-items: center; gap: 4px;
}
.dh-kpi .d.pos{ color: var(--pos); }
.dh-kpi .d.neg{ color: var(--neg); }
.dh-kpi .d.muted{ color: var(--ink-4); }

/* Section heading (tool grid + recent deals) */
.dh-sec-h{
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 14px;
}
.dh-sec-h h2{
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
.dh-sec-h a{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-3);
  text-decoration: none; cursor: pointer;
}
.dh-sec-h a:hover{ color: var(--ink); }
.dh-section{ margin-top: 34px; }
.dh-section[hidden]{ display: none; }

/* Recent deals table */
.dh-deals{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.dh-row{
  display: grid;
  grid-template-columns: 104px 1fr 150px 130px 60px;
  gap: 14px; align-items: center;
  padding: 15px 18px; border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.dh-row:first-child{ border-top: 0; }
a.dh-row:hover{ background: var(--surface-2); }
.dh-row.head{ background: var(--surface-2); }
.dh-row.head span{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 700;
}
/* Deal type = icon + label (neutral; the colored badges had no meaning) */
.dh-type{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; color: var(--ink-2); white-space: nowrap;
}
.dh-type-ic{
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--surface-2); color: var(--ink);
}
.dh-type-ic svg{ width: 17px; height: 17px; }
.dh-name{
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-name small{
  display: block; font-family: var(--font-mono); font-size: 11.5px;
  font-weight: 400; color: var(--ink-3); letter-spacing: 0.02em; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-metric{ font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; }
.dh-metric small{ font-size: 11px; color: var(--ink-3); font-weight: 400; }
.dh-cf{ font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; }
.dh-cf.pos{ color: var(--pos); }
.dh-cf.neg{ color: var(--neg); }
.dh-score{
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; text-align: center;
}
.dh-score.strong{ background: var(--accent-soft); color: var(--accent-2); }
.dh-score.watch{ background: rgba(217,119,6,0.16); color: #B45309; }
.dh-score.weak{ background: var(--neg-soft); color: var(--neg); }
.dh-score.na{ background: var(--surface-2); color: var(--ink-4); }
.dh-empty{
  padding: 26px 18px; text-align: center;
  font-family: var(--font-display); font-size: 14.5px; color: var(--ink-3);
}
@media (max-width: 640px){
  .dh-row{ grid-template-columns: 88px 1fr 60px; }
  .dh-metric, .dh-cf{ display: none; }
}

/* Portfolio-at-a-glance — wealth chart card */
.dh-chart-card{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}
.dh-chart-head{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: 12px;
}
.dh-chart-wrap{ position: relative; flex: 1; min-height: 240px; }

/* Properties table (all, or top/worst when >10) */
.dh-props{ margin-top: 24px; }
.dh-props-block{ margin-top: 20px; }
.dh-subhead{
  font-family: var(--font-display); font-size: 15.5px; font-weight: 700;
  color: var(--ink); margin: 0 0 10px;
}
.dh-prow{
  display: grid;
  grid-template-columns: 1fr 110px 130px 84px 104px;
  gap: 12px; align-items: center;
  padding: 14px 16px; border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.dh-prow:first-child{ border-top: 0; }
a.dh-prow:hover{ background: var(--surface-2); }
.dh-prow.head{ background: var(--surface-2); }
.dh-prow.head span{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 700;
}
.dh-prow.head span.r{ text-align: right; }
.dh-prow.head span.c{ text-align: center; }
.dh-pname{
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-pname small{
  display: block; font-family: var(--font-mono); font-size: 11.5px;
  font-weight: 400; color: var(--ink-3); letter-spacing: 0.02em; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-pval{ font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: right; }
.dh-pval small{ font-size: 11px; color: var(--ink-3); font-weight: 400; }
.dh-pcf{ font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; text-align: right; color: var(--ink); }
.dh-pcf.pos{ color: var(--pos); }
.dh-pcf.neg{ color: var(--neg); }
.dh-pmetric{ font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink-2); text-align: right; }
.dh-pmetric small{ font-size: 11px; color: var(--ink-3); font-weight: 400; }
/* Labeled status pill (replaces the cryptic flag glyph) */
.dh-status{
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; padding: 5px 6px; border-radius: 999px; text-align: center;
}
.dh-status.star{ background: var(--accent-soft); color: var(--accent-2); }
.dh-status.solid{ background: rgba(42,143,168,0.14); color: #2A7E94; }
.dh-status.watch{ background: rgba(217,119,6,0.16); color: #B45309; }
.dh-status.bleeding{ background: var(--neg-soft); color: var(--neg); }
.dh-status.na{ background: var(--surface-2); color: var(--ink-4); }
/* Mobile: the 5-col properties table (~510px min) overflows a phone. Collapse
   to the 3 columns that carry the portfolio signal — name + cash flow +
   status — dropping market value + CoC. Every .dh-prow (incl. the head row)
   has the same 5 children in order, so nth-child collapses head + data in sync. */
@media (max-width: 640px){
  .dh-prow{ grid-template-columns: minmax(0,1fr) 104px 92px; gap: 8px; padding: 12px 12px; }
  .dh-prow > :nth-child(2),
  .dh-prow > :nth-child(4){ display: none; }
}
/* REIzer suggestion callout (shown with the >10-property split) */
.dh-suggestion{
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px; padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-fill);
  border-radius: 10px;
}
.dh-suggestion .dh-sugg-mark{
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2);
  white-space: nowrap; padding-top: 2px;
}
.dh-suggestion .dh-sugg-text{
  font-family: var(--font-display); font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.dh-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 4px; }
@media (max-width: 820px){ .dh-cols{ grid-template-columns: 1fr; } }

/* Dashboard map (Leaflet) */
.dh-map-card{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  isolation: isolate;       /* contain Leaflet's internal z-indexes below the rail */
}
#dhMap{ height: 400px; width: 100%; background: var(--surface-2); }
.leaflet-container{ font-family: var(--font-display); }
.dh-map-toggle{ display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.dh-map-toggle button{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); background: transparent; border: 0; cursor: pointer;
  padding: 6px 13px; border-radius: 999px; transition: background 0.12s ease, color 0.12s ease;
}
.dh-map-toggle button:hover{ color: var(--ink); }
.dh-map-toggle button.is-active{ background: var(--surface-solid); color: var(--ink); box-shadow: var(--shadow-sm); }
.dh-mdot{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dh-mdot.props{ background: #7EE86A; border: 1px solid #1F6B2A; }
.dh-mdot.deals{ background: linear-gradient(135deg, #16a34a 0%, #d97706 50%, #dc2626 100%); }
/* Map marker popup — summary card */
.dh-pop-wrap .leaflet-popup-content-wrapper{ border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(15,23,42,0.28); }
.dh-pop-wrap .leaflet-popup-content{ margin: 12px 14px; }
.dh-map-pop{ font-family: var(--font-display); }
.dh-pop-toprow{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
/* type = line icon (black) + label, matching the saved-deals table */
.dh-pop-type{
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink);
}
.dh-pop-toprow .dh-pop-type{ margin-bottom: 0; }
.dh-pop-type-ic{
  width: 24px; height: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: var(--surface-2); color: var(--ink);
}
.dh-pop-type-ic svg{ width: 15px; height: 15px; display: block; }
/* deal score gauge + verdict */
.dh-pop-deal{ margin-top: 8px; }
.dh-pop-gauge-wrap{ display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.dh-pop-gauge{ flex-shrink: 0; }
.dh-pop-gw-text{ display: flex; flex-direction: column; gap: 1px; }
.dh-pop-gw-k{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.dh-pop-verdict{ font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.dh-pop-status{ font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; }
.dh-pop-status.star{ background: var(--accent-soft); color: var(--accent-2); }
.dh-pop-status.solid{ background: rgba(42,143,168,0.14); color: #2A7E94; }
.dh-pop-status.watch{ background: rgba(217,119,6,0.16); color: #B45309; }
.dh-pop-status.bleeding{ background: var(--neg-soft); color: var(--neg); }
.dh-pop-status.na{ background: var(--surface-2); color: var(--ink-4); }
.dh-pop-name{ font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.dh-pop-loc{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.dh-pop-stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 10px; }
.dh-pop-stat{ display: flex; flex-direction: column; gap: 2px; }
.dh-pop-k{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.dh-pop-v{ font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--ink); }
.dh-pop-v.pos{ color: var(--pos); }
.dh-pop-v.neg{ color: var(--neg); }
@media (max-width: 560px){ .dh-sec-h .dh-map-toggle{ width: 100%; margin-top: 8px; } }

/* ---- Demo mode: Sign-up CTA in place of the user pill at sidebar bottom ---- */
.dash-demo-cta{
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(126,232,106,0.22);
  background: linear-gradient(180deg, rgba(126,232,106,0.10) 0%, rgba(126,232,106,0.05) 100%);
}
/* The rail collapses to 64px — the demo CTA's text box would get crushed,
   so hide it while collapsed and reveal it only when the rail expands
   (same pattern as the nav labels). */
.dash-sidebar .dash-demo-cta{ display: none; }
.dash-sidebar:hover .dash-demo-cta,
.dash-sidebar:focus-within .dash-demo-cta{ display: block; }
.dash-demo-cta .ddc-h{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-2);
  margin-bottom: 6px;
}
.dash-demo-cta .ddc-body{
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.dash-demo-cta .ddc-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-fill);
  border-radius: 10px;
  padding: 9px 12px;
  text-decoration: none;
  box-shadow: 0 8px 22px -8px rgba(126,232,106,0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-demo-cta .ddc-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(126,232,106,0.65); }
.dash-demo-cta .ddc-btn .arrow{ transition: transform 0.15s ease; }
.dash-demo-cta .ddc-btn:hover .arrow{ transform: translateX(2px); }
.dash-demo-cta .ddc-link{
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 11.5px;
  text-align: center;
  color: var(--ink-3);
  text-decoration: none;
}
.dash-demo-cta .ddc-link:hover{ color: var(--accent-2); }

/* DEMO badge removed from the dashboard header (demo state is shown by the
   green top strip on the analyzer pages instead). */

/* ---- Embed mode: hides nav/widgets when an analyzer page loads in the iframe ---- */
html.is-embedded .platform-nav{ display: none !important; }
html.is-embedded .auth-widget{ display: none !important; }
html.is-embedded .nav-burger{ display: none !important; }
html.is-embedded .landing-footer{ display: none !important; }
html.is-embedded body{ padding-top: 0 !important; }
/* When embedded in the dashboard iframe, hide the page's own demo strip —
   the dashboard shell renders one under its header instead (no duplicate). */
html.is-embedded .demo-banner{ display: none !important; }
/* DASH-RAIL-1 — the dashboard topbar + subnav now provide Load
   Example / Clear / Analyze Deal / MAO / Save / PDF / Comps /
   Look-up records, so the analyzer's own .action-rail and the
   property card's lookup / comp buttons are redundant in the
   iframe. Collapse to a single column. */
html.is-embedded .workspace{
  grid-template-columns: 1fr;
}
html.is-embedded .action-rail{ display: none !important; }
/* .pi-lookup-btn is the shared class for both Look-Up Records
   AND Property/STR Comps on the property card. Both move into
   the dashboard subnav. */
html.is-embedded .pi-lookup-btn{ display: none !important; }

/* ---- Dashboard dark/midnight theme tweaks (sidebar surface) ---- */
html[data-theme="dark"] body.dashboard-shell,
html[data-theme="midnight"] body.dashboard-shell{ background: var(--bg); }
html[data-theme="dark"] .dash-sidebar,
html[data-theme="midnight"] .dash-sidebar{
  background: rgba(15,23,42,0.6);
  border-right-color: var(--line);
}
html[data-theme="midnight"] .dash-sidebar{ background: rgba(0,0,0,0.6); }
html[data-theme="dark"] .dash-welcome,
html[data-theme="midnight"] .dash-welcome{
  background:
    radial-gradient(900px 600px at 0% -10%, rgba(126,232,106,0.10) 0%, transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(63,169,140,0.08) 0%, transparent 60%),
    var(--bg);
}
html[data-theme="dark"] .dw-card,
html[data-theme="midnight"] .dw-card{
  background: rgba(30,41,59,0.55);
  border-color: var(--line);
}
html[data-theme="dark"] .dash-user-menu,
html[data-theme="midnight"] .dash-user-menu{
  background: rgba(15,23,42,0.96);
  border-color: var(--line);
}
html[data-theme="midnight"] .dash-user-menu{ background: rgba(8,8,10,0.97); }

/* Theme picker (dashboard menu) — surface stays neutral in dark themes */
html[data-theme="dark"] .dum-theme-opt,
html[data-theme="midnight"] .dum-theme-opt{
  background: rgba(15,23,42,0.55);
  border-color: var(--line);
}
html[data-theme="midnight"] .dum-theme-opt{ background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .dum-theme-opt.is-active,
html[data-theme="midnight"] .dum-theme-opt.is-active{
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(126,232,106,0.25);
}
html[data-theme="dark"] .dum-ts,
html[data-theme="midnight"] .dum-ts{ border-color: rgba(148,163,184,0.20); }
html[data-theme="dark"] .dum-theme-label,
html[data-theme="midnight"] .dum-theme-label{ color: var(--ink-4); }
html[data-theme="dark"] .dum-divider,
html[data-theme="midnight"] .dum-divider{ background: var(--line); }
html[data-theme="dark"] .dum-row,
html[data-theme="midnight"] .dum-row{ color: var(--ink-2); }
html[data-theme="dark"] .dum-row:hover,
html[data-theme="midnight"] .dum-row:hover{
  background: rgba(126,232,106,0.14);
  color: var(--ink);
}
html[data-theme="dark"] .dum-row.dum-row-danger:hover,
html[data-theme="midnight"] .dum-row.dum-row-danger:hover{
  background: rgba(220,38,38,0.18);
  color: #fca5a5;
}

/* Minimal nav used on auth.html — brand left, "Back to home" right */
.landing-nav.auth-nav .nav-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.auth-nav-back .nav-link{
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.auth-nav-back .nav-link:hover{ color: var(--brand-fill); background: transparent; }

@media (max-width: 980px){
  .landing-tabs{ display: none; }
  .landing-nav .nav-inner{ grid-template-columns: auto 1fr; }
}

/* ===========================================
   HOMEPAGE — Claude-style centered hero card
   =========================================== */
body.landing-home{
  background-image:
    radial-gradient(1200px 700px at 50% -8%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 100%, color-mix(in srgb, var(--accent-4) 8%, white) 0%, transparent 60%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.landing-home main.lp-home{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 28px;
}
.home-card{
  width: 100%;
  max-width: 1120px;
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 32px 70px -28px rgba(126,232,106,0.32), 0 0 0 1px rgba(255,255,255,0.6) inset;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 960px){
  .home-card{
    grid-template-columns: 1fr;
    padding: 40px 28px;
    gap: 32px;
  }
}
.hc-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid rgba(126,232,106,0.18);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 22px;
}
.hc-headline{
  font-family: var(--font-display);
  font-size: clamp(32px, 4.8vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 18px;
}
.hc-headline .amp{
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hc-lede{
  font-family: var(--font-display);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 0 28px;
  max-width: 460px;
}
.hc-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.hc-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.15s ease, color 0.15s ease;
}
.hc-cta.primary{
  color: var(--on-accent);
  background: var(--accent-grad);
  box-shadow: 0 10px 26px -8px rgba(126,232,106,0.60);
}
.hc-cta.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -10px rgba(126,232,106,0.70);
}
.hc-cta.primary .arrow{ transition: transform 0.15s ease; }
.hc-cta.primary:hover .arrow{ transform: translateX(3px); }
.hc-cta.ghost{
  color: var(--ink-2);
  background: rgba(126,232,106,0.06);
  border: 1px solid var(--line-2);
}
.hc-cta.ghost:hover{
  color: var(--accent-2);
  background: rgba(126,232,106,0.12);
  border-color: rgba(126,232,106,0.28);
}
.hc-demo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.15s ease;
}
.hc-demo .hc-demo-pill{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid rgba(126,232,106,0.22);
  border-radius: 999px;
  padding: 4px 9px;
}
.hc-demo .arrow{ transition: transform 0.15s ease; }
.hc-demo:hover{ color: var(--accent-2); }
.hc-demo:hover .arrow{ transform: translateX(3px); }

/* Visual side: reuse lh-visual but reduce its size to fit the card */
.hc-visual{ position: relative; }
.hc-visual .lh-visual{ height: 420px; }
@media (max-width: 960px){
  .hc-visual .lh-visual{ height: 340px; }
}

/* --- Hero --- */
.landing-hero{
  padding: 72px 28px 56px;
}
.lh-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 960px){
  .lh-inner{ grid-template-columns: 1fr; gap: 40px; }
  .landing-hero{ padding: 48px 24px 32px; }
}
.lh-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid rgba(126,232,106,0.18);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 22px;
}
.lh-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(126,232,106,0.22);
}
.lh-headline{
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 22px;
  color: var(--ink);
}
.lh-headline .amp{
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lh-lede{
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 540px;
  margin: 0 0 30px;
}
.lh-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.lh-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
  cursor: pointer;
}
.lh-cta.primary{
  color: var(--brand-ink);
  background: var(--brand-fill);
  box-shadow: 0 14px 30px -10px rgba(126,232,106,0.55);
}
.lh-cta.primary:hover{ transform: translateY(-2px); background: color-mix(in srgb, var(--brand-fill), #000 8%); box-shadow: 0 20px 40px -12px rgba(126,232,106,0.65); }
.lh-cta.ghost{
  color: var(--ink-2);
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lh-cta.ghost:hover{ background: var(--surface-solid); border-color: var(--accent-ink); color: var(--accent-2); }
.lh-cta .arrow{ transition: transform 0.15s ease; }
.lh-cta:hover .arrow{ transform: translateX(3px); }

.lh-trust{
  display: flex;
  flex-wrap: wrap;
  gap: 22px 28px;
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-3);
}
.lh-trust strong{
  color: var(--ink);
  font-weight: 700;
  margin-right: 4px;
}

/* --- Hero visual: stacked faux-dashboard cards --- */
.lh-visual{
  position: relative;
  height: 460px;
  perspective: 1400px;
}
@media (max-width: 960px){
  .lh-visual{ height: 380px; }
}
.hv-card{
  position: absolute;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 60px -20px rgba(126,232,106,0.28), 0 0 0 1px rgba(255,255,255,0.6) inset;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.hv-card-back{
  top: 4%;
  right: -2%;
  width: 56%;
  height: 30%;
  background: linear-gradient(135deg, rgba(238,242,255,0.85), rgba(245,243,255,0.65));
  transform: rotate(2deg);
  opacity: 0.85;
}
.hv-card-mid{
  top: 8%;
  left: 0;
  width: 60%;
  padding: 16px 18px;
  transform: rotate(-1.5deg);
}
.hv-card-mid .hv-chip{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--warn-strong);
  background: var(--warn-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.hv-stress-rows{ display: flex; flex-direction: column; gap: 6px; }
.hv-stress-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: 11.5px;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 600;
}
.hv-stress-row span:last-child{ font-family: var(--font-mono); font-weight: 700; }
.hv-stress-row.good{ background: var(--pos-soft); color: var(--pos-strong); }
.hv-stress-row.ok  { background: var(--warn-soft); color: var(--warn-strong); }
.hv-stress-row.warn{ background: #fed7aa; color: #9a3412; }
.hv-stress-row.bad { background: var(--neg-soft); color: var(--neg-strong); }

.hv-card-front{
  top: 38%;
  right: 0;
  width: 72%;
  padding: 22px;
  transform: rotate(1.5deg);
}
.hv-verdict{
  background: linear-gradient(135deg, var(--pos-strong) 0%, #0f766e 100%);
  color: var(--on-dark);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.hv-verdict .hvv-kicker{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.88;
}
.hv-verdict .hvv-title{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 4px 0;
}
.hv-verdict .hvv-sub{
  font-family: var(--font-display);
  font-size: 11.5px;
  opacity: 0.94;
  line-height: 1.4;
}
.hv-stats{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.hv-stat{
  padding: 10px 12px;
  background: rgba(241,245,249,0.55);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.hv-stat .hvs-lbl{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.hv-stat .hvs-val{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hv-stat .hvs-val.pos{ color: var(--pos-strong); }
.hv-spark{ height: 50px; margin-top: 4px; }
.hv-spark svg{ width: 100%; height: 100%; display: block; }

/* --- Hero micro-demo: scripted draw-in loop (~4s active, replays every 18s) --- */
@media (prefers-reduced-motion: no-preference){
  html.js-hero-anim .lh-visual .hv-card-back,
  html.js-hero-anim .lh-visual .hv-card-mid,
  html.js-hero-anim .lh-visual .hv-card-front{ opacity: 0; }
  html.js-hero-anim .lh-visual .hv-card-back { transform: translateY(14px) rotate(2deg); }
  html.js-hero-anim .lh-visual .hv-card-mid  { transform: translateY(14px) rotate(-1.5deg); }
  html.js-hero-anim .lh-visual .hv-card-front{ transform: translateY(14px) rotate(1.5deg); }
  html.js-hero-anim .lh-visual .hv-stress-row{ opacity: 0; transform: translateX(-10px); }
  html.js-hero-anim .lh-visual .hv-verdict   { opacity: 0; transform: translateY(8px); }
  html.js-hero-anim .lh-visual .hv-stat      { opacity: 0; transform: translateY(6px); }
  html.js-hero-anim .lh-visual .hv-gauge-indicator{ opacity: 0; }
  html.js-hero-anim .lh-visual .hv-gauge-label    { opacity: 0; }
  html.js-hero-anim .lh-visual .hv-gauge-progress { stroke-dashoffset: 83; }
  html.js-hero-anim .lh-visual .hv-spark-line     { stroke-dashoffset: 100; }
  html.js-hero-anim .lh-visual .hv-spark-area     { opacity: 0; }

  .lh-visual.is-playing .hv-card-back{
    animation: hv-back-in 700ms ease-out 0ms forwards;
  }
  .lh-visual.is-playing .hv-card-mid{
    animation: hv-mid-in 700ms ease-out 1700ms forwards;
  }
  .lh-visual.is-playing .hv-card-front{
    animation: hv-front-in 650ms cubic-bezier(.22,.61,.36,1) 2500ms forwards;
  }
  .lh-visual.is-playing .hv-gauge-progress{
    animation: hv-gauge-fill 1100ms ease-out 500ms forwards;
  }
  .lh-visual.is-playing .hv-gauge-indicator{
    animation: hv-pop 360ms cubic-bezier(.34,1.56,.64,1) 1300ms forwards;
    transform-box: fill-box;
    transform-origin: center;
  }
  .lh-visual.is-playing .hv-gauge-label{
    animation: hv-fade 450ms ease-out 1300ms forwards;
  }
  .lh-visual.is-playing .hv-stress-row{
    animation: hv-row-in 500ms ease-out forwards;
  }
  .lh-visual.is-playing .hv-stress-row:nth-child(1){ animation-delay: 1950ms; }
  .lh-visual.is-playing .hv-stress-row:nth-child(2){ animation-delay: 2100ms; }
  .lh-visual.is-playing .hv-stress-row:nth-child(3){ animation-delay: 2250ms; }
  .lh-visual.is-playing .hv-stress-row:nth-child(4){ animation-delay: 2400ms; }
  .lh-visual.is-playing .hv-verdict{
    animation: hv-up 600ms ease-out 2750ms forwards;
  }
  .lh-visual.is-playing .hv-stat{
    animation: hv-up 500ms ease-out forwards;
  }
  .lh-visual.is-playing .hv-stat:nth-child(1){ animation-delay: 3100ms; }
  .lh-visual.is-playing .hv-stat:nth-child(2){ animation-delay: 3200ms; }
  .lh-visual.is-playing .hv-stat:nth-child(3){ animation-delay: 3300ms; }
  .lh-visual.is-playing .hv-stat:nth-child(4){ animation-delay: 3400ms; }
  .lh-visual.is-playing .hv-spark-line{
    animation: hv-spark-draw 950ms ease-out 3350ms forwards;
  }
  .lh-visual.is-playing .hv-spark-area{
    animation: hv-fade 800ms ease-out 3550ms forwards;
  }

  @keyframes hv-back-in {
    from{ opacity: 0; transform: translateY(14px) rotate(2deg); }
    to  { opacity: 0.85; transform: translateY(0) rotate(2deg); }
  }
  @keyframes hv-mid-in {
    from{ opacity: 0; transform: translateY(14px) rotate(-1.5deg); }
    to  { opacity: 1; transform: translateY(0) rotate(-1.5deg); }
  }
  @keyframes hv-front-in {
    from{ opacity: 0; transform: translateY(14px) rotate(1.5deg); }
    to  { opacity: 1; transform: translateY(0) rotate(1.5deg); }
  }
  @keyframes hv-gauge-fill { to { stroke-dashoffset: 0; } }
  @keyframes hv-pop {
    from{ opacity: 0; transform: scale(0.4); }
    to  { opacity: 1; transform: scale(1); }
  }
  @keyframes hv-fade { to { opacity: 1; } }
  @keyframes hv-row-in {
    from{ opacity: 0; transform: translateX(-10px); }
    to  { opacity: 1; transform: translateX(0); }
  }
  @keyframes hv-up {
    from{ opacity: 0; transform: translateY(6px); }
    to  { opacity: 1; transform: translateY(0); }
  }
  @keyframes hv-spark-draw { to { stroke-dashoffset: 0; } }
}

/* Reduced-motion or pre-JS: show the final state cleanly */
.lh-visual.is-played .hv-card-back,
.lh-visual.is-played .hv-card-mid,
.lh-visual.is-played .hv-card-front,
.lh-visual.is-played .hv-stress-row,
.lh-visual.is-played .hv-verdict,
.lh-visual.is-played .hv-stat,
.lh-visual.is-played .hv-gauge-indicator,
.lh-visual.is-played .hv-gauge-label,
.lh-visual.is-played .hv-spark-area{ opacity: 1; }
.lh-visual.is-played .hv-gauge-progress,
.lh-visual.is-played .hv-spark-line{ stroke-dashoffset: 0; }

/* --- Personas strip --- */
.lp-personas{
  padding: 38px 28px 18px;
  border-top: 1px solid rgba(226,232,240,0.7);
  border-bottom: 1px solid rgba(226,232,240,0.7);
  background: rgba(255,255,255,0.5);
}
.lp-personas-label{
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.lp-persona-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-persona-list li{
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  opacity: 0.85;
}

/* --- Generic section frame --- */
.lp-section{
  padding: 80px 28px;
}
@media (max-width: 720px){ .lp-section{ padding: 56px 22px; } }
.lp-inner{
  max-width: 1200px;
  margin: 0 auto;
}
.lp-section-head{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 42px;
}
.lp-section-head .lp-kicker{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.lp-h2{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 14px;
}
.lp-lede{
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
}

/* --- How-it-works steps --- */
.lp-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 820px){ .lp-steps{ grid-template-columns: 1fr; } }
.lp-step{
  padding: 28px 26px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lp-step:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.lp-step .lps-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--on-accent);
  background: var(--accent-grad);
  border-radius: 10px;
  margin-bottom: 14px;
  box-shadow: 0 8px 18px -6px rgba(126,232,106,0.45);
}
.lp-step .lps-title{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 0 0 8px;
  color: var(--ink);
}
.lp-step .lps-body{
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
}

/* --- Feature grid --- */
.lp-features{ background: rgba(255,255,255,0.4); }
.lp-feature-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px){ .lp-feature-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .lp-feature-grid{ grid-template-columns: 1fr; } }

.lp-feature{
  padding: 26px 24px;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lp-feature:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(126,232,106,0.30);
}
.lp-feature .lpf-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  border-radius: 10px;
  margin-bottom: 14px;
}
.lp-feature .lpf-title{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 8px;
}
.lp-feature .lpf-body{
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}

/* --- Final CTA block --- */
.lp-cta{
  padding: 80px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lp-cta::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 360px at 50% 0%, rgba(126,232,106,0.18), transparent 60%),
    radial-gradient(500px 320px at 50% 100%, rgba(63,169,140,0.14), transparent 60%);
  pointer-events: none;
}
.lp-cta .lpcta-h{
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.lp-cta .lpcta-sub{
  position: relative;
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 620px;
  margin: 0 auto 28px;
}
.lp-cta .lh-cta-row{
  position: relative;
  justify-content: center;
}

/* --- Footer --- */
.landing-footer{
  border-top: 1px solid var(--line);
  padding: 56px 28px 28px;
  background: var(--surface);   /* green-tinted footer panel, matches spec */
}
.landing-footer .lp-inner{
  max-width: 1200px;
  margin: 0 auto;
}
.lpf-cols{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 32px;
}
@media (max-width: 760px){
  .lpf-cols{ grid-template-columns: 1fr; gap: 30px; }
}
.lpf-col-brand .lpf-brand{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  text-transform: none;   /* wordmark stays mixed-case "REIzer", never REIZER */
}
.lpf-col-brand .lpf-brand em{
  color: var(--brand-fill);   /* bright brand green, matches the nav wordmark "zer" */
  font-style: normal;
  font-weight: 800;
}
.lpf-tag{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 340px;
  margin: 0;
}
.lpf-h{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.lpf-list, .lpf-social{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.landing-footer .lpf-link{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s ease;
}
.landing-footer .lpf-link:hover{ color: var(--accent-2); }
.lpf-social-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s ease;
}
.lpf-social-link:hover{ color: var(--accent-2); }
.lpf-social-link svg{ flex-shrink: 0; }
.lpf-legal{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.lpf-copy{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.lpf-legal-links{
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

/* ---- charcoal footer: applies to ALL marketing pages ---- */
.landing-footer{
  background: #11151C;                    /* deep charcoal near-black (--ink) */
  border-top-color: rgba(255,255,255,0.08);
  -webkit-font-smoothing: antialiased;   /* crisper light-on-dark text */
  -moz-osx-font-smoothing: grayscale;
}
.landing-footer .lpf-brand{
  color: #FFFFFF;                         /* "REI" stays white... */
}
.landing-footer .lpf-brand em{
  color: var(--brand-fill);              /* ...and "zer" glows bright brand green */
}
.landing-footer .lpf-tag,
.landing-footer .lpf-h,
.landing-footer .lpf-link,
.landing-footer .lpf-social-link,
.landing-footer .lpf-copy{
  color: rgba(255,255,255,0.92);         /* soft off-white — reads white, no halation strain */
}
.landing-footer .lpf-link:hover,
.landing-footer .lpf-social-link:hover{
  color: var(--brand-fill);              /* green hover accent */
}
.landing-footer .lpf-h,
.landing-footer .lpf-copy{
  font-family: var(--font-display);      /* clean sans instead of mono for labels */
  letter-spacing: 0.14em;
  font-weight: 600;
}
.landing-footer .lpf-legal{
  border-top-color: rgba(255,255,255,0.08);
}

/* ===========================================
   SOLUTION DETAIL PAGES (solution-str / brrr / flip / nc / portfolio)
   =========================================== */
.sol-hero{
  padding: 64px 28px 36px;
  text-align: center;
}
.sol-hero .lp-inner{ max-width: 880px; margin: 0 auto; }
.sol-hero .lp-kicker{ display: inline-block; margin-bottom: 18px; }
.sol-hero h1{
  font-family: var(--font-display);
  font-size: clamp(30px, 5.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0 0 18px;
}
.sol-hero h1 .amp{
  background: none;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
  font-weight: 400;          /* match the rest of the title — no faux-bold */
}
.sol-hero .sol-lede{
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 auto 28px;
  max-width: 720px;
}
@media (max-width: 540px){ .sol-hero .sol-lede{ font-size: 16px; } }
.sol-hero .lh-cta-row{ justify-content: center; }

/* KPI strip below the hero */
.sol-stats{ padding: 12px 28px 56px; }
.sol-stats-inner{
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.sol-stat{
  text-align: center;
  padding: 22px 18px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(12px) saturate(140%);
}
.sol-stat-num{
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sol-stat-lbl{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-top: 6px;
}

/* Methodology cards — used for the "how it works under the hood" section */
.sol-method-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.sol-method{
  padding: 24px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.sol-method-h{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-2);
  margin-bottom: 6px;
}
.sol-method h3{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
}
.sol-method p{
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
.sol-method code{
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--accent-soft);
  border: 1px solid rgba(126,232,106,0.18);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--accent-2);
}

/* "Try it" card row showing CTAs into the analyzer + sign-up */
.sol-tryit{
  margin-top: 36px;
  text-align: center;
}

/* ===========================================
   MARKETING DOC PAGES (about / terms / privacy / faq)
   =========================================== */
.doc-page{
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 28px 96px;
}
.doc-page .doc-kicker{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);          /* clean muted eyebrow — no green pill */
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 14px;
}
.doc-page h1{
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -0.025em;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 10px;
}

/* Marketing hero headlines → elegant serif (Instrument Serif), matching the
   index hero. Applies to pricing / solutions / doc pages (about, how-it-works,
   faq, privacy, terms) / contact. */
.pricing-hero h1,
.sol-hero h1,
.doc-page h1,
.contact-hero h1.ch-title{
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.doc-page .doc-lede{
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.doc-page .doc-updated{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-4);
  margin-bottom: 40px;
}
.doc-page h2{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 40px 0 12px;
}
.doc-page p{
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.doc-page ul{
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 14px;
  padding-left: 22px;
}
.doc-page li{ margin-bottom: 6px; }
.doc-page a{ color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(126,232,106,0.25); }
.doc-page a:hover{ border-bottom-color: var(--accent-ink); }
.doc-page .doc-placeholder{
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-2);
  margin: 14px 0;
  line-height: 1.55;
}

/* ---- About page: de-greened — charcoal links + neutral placeholder ---- */
.doc-page--neutral a{
  color: var(--ink);
  border-bottom: 1px solid rgba(17,21,28,0.22);
}
.doc-page--neutral a:hover{
  border-bottom-color: var(--ink);
}
.doc-page--neutral .doc-placeholder{
  background: var(--surface-2);
  border-left-color: var(--ink-3);
}

/* FAQ accordion */
.faq-list{ margin-top: 24px; }
.faq-item{
  border-top: 1px solid var(--line);
}
.faq-item:last-child{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1;
}
.faq-item[open] summary::after{ content: '−'; }
.faq-item summary:hover{ color: var(--ink); }
.faq-item .faq-a{
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  padding: 0 4px 24px;
  margin: 0;
}

/* ===========================================
   DEMO MODE — guest preview state for analyzer pages
   =========================================== */

/* --- Sticky banner below the nav --- */
/* Demo-mode notice — slim full-width strip pinned at the very top of the
   page (Stripe "sandbox" style): dark, minimal, centered one-liner with a
   single inline sign-up link. No pill buttons, no status dot. */
.demo-banner{
  position: static;   /* very top of the page; nav stays sticky below it */
  background: var(--brand-fill);
  color: var(--brand-ink);
  border-bottom: 1px solid rgba(0,0,0,0.14);
}
.demo-banner .db-inner{
  max-width: none;
  margin: 0;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.demo-banner .db-pulse{ display: none; }
.demo-banner .db-text{
  flex: 0 1 auto;
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--brand-ink) 82%, transparent);
  text-align: center;
  min-width: 0;
}
.demo-banner .db-text strong{
  font-weight: 700;
  color: var(--brand-ink);
  margin-right: 3px;
}
.demo-banner .db-link{
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.demo-banner .db-link .arrow{ transition: transform 0.15s ease; }
.demo-banner .db-link:hover .arrow{ transform: translateX(2px); }

@media (max-width: 600px){
  .demo-banner .db-inner{ padding: 7px 14px; gap: 8px; }
}

/* --- Locked inputs while in demo mode --- */
body.demo-mode .grid input:disabled,
body.demo-mode .grid select:disabled,
body.demo-mode .grid textarea:disabled{
  opacity: 0.78;
  cursor: not-allowed;
  background: rgba(241,245,249,0.55) !important;
  color: var(--ink-2) !important;
  -webkit-text-fill-color: var(--ink-2) !important;  /* Safari preserves text color on disabled */
}
body.demo-mode .grid .input-wrap{ position: relative; }
body.demo-mode .grid .input-wrap:hover::after{
  content: '🔒';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  opacity: 0.5;
  pointer-events: none;
}
body.demo-mode .grid .input-wrap.has-suffix:hover::after{
  right: 38px;  /* dodge the % / yrs suffix */
}
body.demo-mode .seg-opt{
  cursor: not-allowed;
  opacity: 0.7;
}
body.demo-mode .checkbox-row{
  opacity: 0.7;
  cursor: not-allowed;
}
/* The Save button is still clickable (it redirects to auth) — give it the
   sign-in look instead of the savings-action look */
body.demo-mode button#btnSave{
  background: var(--surface-solid) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line-2) !important;
  opacity: 1 !important;
}
/* Locked .ghost actions */
body.demo-mode .actions .ghost:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===========================================
   CONTACT — section + form
   =========================================== */

/* --- Contact section on landing page --- */
.lp-contact{
  padding: 90px 28px;
  background: rgba(255,255,255,0.45);
  border-top: 1px solid rgba(226,232,240,0.7);
}
.lp-contact-grid{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px){
  .lp-contact-grid{ grid-template-columns: 1fr; gap: 38px; }
  .lp-contact{ padding: 56px 22px; }
}

.lpc-side h2.lp-h2{ margin-bottom: 14px; }
.lpc-side .lp-kicker{ margin-bottom: 12px; }
.lpc-side .lp-lede{ margin-bottom: 24px; }
.lpc-side-h{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 14px;
}
.lpc-side-sub{
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 28px 0 10px;
}
.lpc-side-body{
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
}
.lpc-bullets{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lpc-bullets li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.lpc-bullet-icon{
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 800;
  margin-top: 1px;
}

/* --- The form itself (used on both landing section and contact.html) --- */
.lpc-form-wrap{
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 24px 60px -28px rgba(126,232,106,0.30), 0 0 0 1px rgba(255,255,255,0.6) inset;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
@media (max-width: 600px){ .lpc-form-wrap{ padding: 22px; } }

.contact-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Scoped to the contact form — a bare .cf-row collided with the
   analyzers' cash-flow P&L table rows (also .cf-row), turning them
   into stacked grids on phones. */
.contact-form .cf-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 540px){ .contact-form .cf-row{ grid-template-columns: 1fr; } }
.cf-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cf-field.cf-full{ grid-column: 1 / -1; }
.cf-field label{
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.cf-req{ color: var(--accent-2); font-weight: 700; margin-left: 2px; }
.cf-opt{ color: var(--ink-4); font-weight: 500; font-size: 10.5px; margin-left: 4px; }
.cf-field input,
.cf-field select,
.cf-field textarea{
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-solid);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 11px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  resize: vertical;
  appearance: none;
  -webkit-appearance: none;
}
.cf-field select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23475569' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 7px;
  padding-right: 36px;
  cursor: pointer;
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus{
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 4px rgba(126,232,106,0.14);
  outline: none;
  background: var(--surface-solid);
}
.cf-field textarea{ min-height: 130px; line-height: 1.55; }

.cf-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 6px;
  padding: 13px 22px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-fill);
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(126,232,106,0.55);
  transition: transform 0.15s ease, box-shadow 0.18s ease, opacity 0.15s ease, background 0.15s ease;
}
.cf-submit:hover:not(:disabled){
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--brand-fill), #000 8%);
  box-shadow: 0 16px 32px -10px rgba(126,232,106,0.62);
}
.cf-submit:disabled{ opacity: 0.7; cursor: progress; }
.cf-submit .arrow{ transition: transform 0.15s ease; }
.cf-submit:hover:not(:disabled) .arrow{ transform: translateX(3px); }

.cf-status{
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 500;
}
.cf-status-success{
  background: rgba(16,185,129,0.10);
  color: var(--pos-strong);
  border: 1px solid rgba(16,185,129,0.25);
}
.cf-status-error{
  background: rgba(239,68,68,0.10);
  color: var(--neg-strong);
  border: 1px solid rgba(239,68,68,0.25);
}

/* --- contact.html standalone hero --- */
.contact-hero{
  padding: 64px 28px 24px;
}
.contact-hero .lp-inner{ max-width: 880px; margin: 0 auto; text-align: center; }
.contact-hero .lp-kicker{ display: inline-block; margin-bottom: 14px; }
.contact-hero .ch-title{
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 16px;
}
.contact-hero .ch-lede{
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 auto;
  max-width: 680px;
}

/* ===========================================
   PORTFOLIO TRACKER (P3-3 dashboard)
   =========================================== */

/* ---------- summary bar ---------- */
/* --- Hero wealth trend (replaces the old inline equity sparkline) --- */
.pf-wealth{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px 14px;
  box-shadow: var(--shadow-sm);
  margin: 0 0 16px;
}
.pf-wealth-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pf-wealth-title{ display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
/* "Portfolio Wealth" section title — match the .pf-insights-h scale so all
   section headings (Wealth / Advisor) read consistently. */
.pf-wealth-title .pf-kpi-lbl{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 2px;
}
.pf-wealth-headline{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pf-wealth-total{
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.05;
}
.pf-wealth-delta{
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.pf-wealth-delta.pos{ color: var(--pos); }
.pf-wealth-delta.neg{ color: var(--neg); }
.pf-wealth-delta.flat{ color: var(--ink-3); }
.pf-wealth-sub{
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-3);
}
.pf-wealth-controls{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pf-wealth-legend{ display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pf-legend-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.pf-legend-btn .pf-legend-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3);
  flex-shrink: 0;
}
.pf-legend-btn[data-series="value"]  .pf-legend-dot{ background: #64748b; }
.pf-legend-btn[data-series="debt"]   .pf-legend-dot{ background: #94a3b8; }
.pf-legend-btn[data-series="equity"] .pf-legend-dot{ background: #3b82f6; }
.pf-legend-btn.is-active{
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-2);
}
.pf-legend-btn:not(.is-active){ opacity: 0.5; }
.pf-range-toggle{
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  gap: 2px;
}
.pf-range-btn{
  border: 0;
  background: transparent;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pf-range-btn.is-active{
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15,23,42,0.10);
}
.pf-wealth-chart{
  position: relative;
  height: 240px;
}
.pf-wealth-chart canvas{
  width: 100% !important;
  height: 100% !important;
}

/* --- KPI strip (5 tiles, with YoY delta + tiny per-tile sparkline) --- */
.pf-summary{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 0 0 22px;
}
@media (max-width: 1280px){
  .pf-summary{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px){
  .pf-summary{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px){
  .pf-summary{ grid-template-columns: 1fr; }
}
.pf-summary-kpi{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 14px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 3px;
  min-height: 134px;
}
.pf-summary-kpi .pf-kpi-lbl{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.pf-summary-kpi .pf-kpi-val{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.15;
  margin-top: 1px;
}
.pf-summary-kpi .pf-kpi-delta{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  min-height: 14px;
}
.pf-summary-kpi .pf-kpi-delta.pos{ color: var(--pos); }
.pf-summary-kpi .pf-kpi-delta.neg{ color: var(--neg); }
.pf-summary-kpi .pf-kpi-delta.flat{ color: var(--ink-3); }
.pf-summary-kpi .pf-kpi-spark{
  width: 100% !important;
  height: 28px !important;
  display: block;
  margin-top: 2px;
}
.pf-summary-kpi .pf-kpi-sub{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
}
.pf-summary-kpi .pf-kpi-val.pos{ color: var(--pos); }
.pf-summary-kpi .pf-kpi-val.neg{ color: var(--neg); }

/* ---------- controls row ---------- */
.pf-controls{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}
.pf-controls .pf-search{
  flex: 1 1 220px;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 36px;
}
.pf-controls .pf-search input{
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink);
}
.pf-controls .pf-search-icon{
  width: 14px;
  height: 14px;
  color: var(--ink-4);
  flex-shrink: 0;
}
.pf-controls select{
  height: 36px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-solid);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
/* Pill CTA used by Add Property (masthead) and Wealth Growth (controls).
   De-scoped from .pf-controls so the same theme treatment works in any
   parent (the button was previously falling back to the browser default
   when used outside the controls bar). */
.pf-add{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-ink);
  background: var(--brand-fill);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 12px -4px rgba(126,232,106,0.40);
  transition: filter .15s ease, transform .15s ease, box-shadow .2s ease;
}
.pf-add:hover{
  filter: brightness(1.05) saturate(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(126,232,106,0.55);
}
.pf-add:active{ transform: translateY(0); }
.pf-add:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
/* Inside the controls bar, float to the right end of the row */
.pf-controls .pf-add{ margin-left: auto; }

/* View-mode toggle (Cards / Table) — segmented pill at the start of
   the controls bar, ahead of the search box. */
.pf-view-toggle{
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  gap: 2px;
  flex-shrink: 0;
}
.pf-view-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 4px 12px;
  height: 30px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pf-view-btn svg{ width: 14px; height: 14px; }
.pf-view-btn.is-active{
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15,23,42,0.10);
}

/* ---------- property grid ---------- */
.pf-grid{
  margin-bottom: 26px;
}
.pf-grid.pf-view-cards{
  display: grid;
  /* min(320px, 100%) so the track can never exceed a narrow container */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 18px;
}
.pf-grid.pf-view-table{
  display: block;
}

/* ---------- table view ---------- */
.pf-table-wrap{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.pf-table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: 13.5px;
}
.pf-table thead th{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}
.pf-table thead th.pf-tcell-num{ text-align: right; }
.pf-table thead th.pf-tcell-actions{ width: 1%; }
.pf-table tbody tr.pf-trow{
  cursor: pointer;
  transition: background .12s ease;
  outline: none;
}
.pf-table tbody tr.pf-trow:hover,
.pf-table tbody tr.pf-trow:focus-visible{
  background: rgba(15,23,42,0.04);
}
.pf-table tbody tr.pf-trow + tr.pf-trow td{
  border-top: 1px solid var(--line);
}
.pf-table td{
  padding: 11px 14px;
  vertical-align: middle;
  color: var(--ink);
}
.pf-table .pf-tcell-num{
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.pf-tcell-pos{ color: var(--pos); }
.pf-tcell-neg{ color: var(--neg); }
.pf-tcell-muted{ color: var(--ink-3); }

/* Property cell — photo + name/strategy/address */
.pf-table td.pf-tcell-prop{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}
.pf-trow-photo{
  width: 40px; height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
}
.pf-trow-photo-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-3);
  font-size: 16px;
  border: 1px solid var(--line);
}
.pf-trow-meta{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-trow-name{
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.pf-trow-sub{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.pf-trow-strategy{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink-3);
}
.pf-trow-sep{ opacity: 0.5; }
.pf-trow-addr{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* Action buttons */
.pf-tcell-actions{ white-space: nowrap; text-align: right; }
.pf-tbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  margin-left: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pf-tbtn:hover{ border-color: var(--ink-3); color: var(--ink); }
.pf-tbtn-log{ font-size: 16px; line-height: 1; padding: 0; width: 30px; }
/* Trash delete — red by default in both light and dark themes. SVG icon
   so the color follows currentColor (the emoji 🗑 ignored CSS color). */
.pf-tbtn-del{
  color: var(--neg);
  padding: 0;
  width: 30px;
  border-color: rgba(220,38,38,0.25);
}
.pf-tbtn-del svg{ width: 14px; height: 14px; }
.pf-tbtn-del:hover{
  border-color: var(--neg);
  color: var(--neg);
  background: var(--neg-soft);
}
[data-theme="dark"] .pf-tbtn-del,
[data-theme="midnight"] .pf-tbtn-del{
  color: #fca5a5;
  border-color: rgba(248,113,113,0.30);
}
[data-theme="dark"] .pf-tbtn-del:hover,
[data-theme="midnight"] .pf-tbtn-del:hover{
  background: rgba(248,113,113,0.18);
  border-color: rgba(248,113,113,0.55);
  color: #fecaca;
}

/* Mobile: collapse the actions column into icons only and let the
   table scroll horizontally if it would otherwise overflow. */
@media (max-width: 720px){
  .pf-table td, .pf-table th{ padding: 9px 10px; }
  .pf-trow-addr{ display: none; }
}
.pf-card{
  position: relative;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pf-card:hover{
  border-color: var(--ink-3);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.pf-card-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-right: 44px;   /* clear the absolute delete icon at top-right */
}
.pf-card-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  word-break: break-word;
}
.pf-card-strategy{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 9px;
  flex-shrink: 0;
}
.pf-card-address{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
  min-height: 18px;
}
.pf-card-metrics{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px;
  background: rgba(241,245,249,0.55);
  border-radius: 10px;
}
/* The light slate inset above reads as a bright gray panel on the dark
   card surface. Swap it for a subtle white tint so the strip still feels
   inset without breaking the theme. A 1px hairline gives it definition
   without competing with the card border. */
[data-theme="dark"] .pf-card-metrics{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
[data-theme="midnight"] .pf-card-metrics{
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
}
.pf-metric .pf-metric-lbl{
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 2px;
}
.pf-metric .pf-metric-val{
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pf-metric .pf-metric-val.pos{ color: var(--pos); }
.pf-metric .pf-metric-val.neg{ color: var(--neg); }

.pf-card-spark{
  height: 44px;
  display: block;
}
.pf-card-spark canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ---------- performance flag badge ---------- */
.pf-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pf-badge-star{      background: var(--pos-soft);                       color: var(--pos);        border: 1px solid rgba(5,150,105,0.30); }
.pf-badge-solid{     background: rgba(63,169,140,0.10);                   color: #0e7490;          border: 1px solid rgba(63,169,140,0.30); }
.pf-badge-watch{     background: var(--warn-soft);                       color: var(--warn);       border: 1px solid rgba(217,119,6,0.35); }
.pf-badge-bleeding{  background: var(--neg-soft);                        color: var(--neg);        border: 1px solid rgba(220,38,38,0.35); }
.pf-badge-empty{     background: rgba(148,163,184,0.18);                 color: var(--ink-3);      border: 1px solid var(--line-2); }

.pf-card-actions{
  display: flex;
  gap: 10px;
  margin-top: auto;
}
.pf-card-actions .pf-btn-open,
.pf-card-actions .pf-btn-log{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, filter 0.2s ease;
}
.pf-card-actions .pf-btn-open{
  color: var(--on-accent);
  background: var(--accent-grad);
  box-shadow: 0 4px 12px -4px rgba(126,232,106,0.40);
}
.pf-card-actions .pf-btn-open:hover{ transform: translateY(-1px); filter: brightness(1.05) saturate(1.1); }
.pf-card-actions .pf-btn-log{
  color: var(--ink);
  background: var(--surface-solid);
  border: 1px solid var(--line);
}
.pf-card-actions .pf-btn-log:hover{ border-color: var(--ink-3); color: var(--ink); }

.pf-card-menu{
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
}
.pf-card-menu .pf-icon-btn{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  color: var(--neg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pf-card-menu .pf-icon-btn svg{ width: 15px; height: 15px; }
.pf-card-menu .pf-icon-btn:hover{
  background: var(--neg-soft);
  border-color: rgba(220,38,38,0.45);
}
/* Dark / midnight: keep the icon red but swap the white-ish backing for
   a subtle red-tinted overlay that matches the surface palette. */
[data-theme="dark"] .pf-card-menu .pf-icon-btn,
[data-theme="midnight"] .pf-card-menu .pf-icon-btn{
  background: rgba(248,113,113,0.10);
  border-color: rgba(248,113,113,0.30);
  color: #fca5a5;
}
[data-theme="dark"] .pf-card-menu .pf-icon-btn:hover,
[data-theme="midnight"] .pf-card-menu .pf-icon-btn:hover{
  background: rgba(248,113,113,0.22);
  color: #fecaca;
  border-color: rgba(248,113,113,0.55);
}

/* =================================================
   INSIGHTS PANEL (replaces standalone Advisor + Alerts)
   ================================================= */
.pf-insights{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px 16px;
  box-shadow: var(--shadow-sm);
  margin: 0 0 22px;
}
.pf-insights-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pf-insights-title{ display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.pf-insights-h{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.1;
  margin: 0;
}
.pf-insights-headline{
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  margin-top: 1px;
}
.pf-ins-h-clear{ color: var(--pos); }
.pf-ins-h-stat{ display: inline-block; }
.pf-ins-h-issue{ color: var(--neg); }
.pf-ins-h-opp{ color: var(--pos); }

.pf-insights-controls{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pf-insights-filter{
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  gap: 2px;
}
.pf-ins-filter-btn{
  border: 0;
  background: transparent;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.pf-ins-filter-btn.is-active{
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15,23,42,0.10);
}
.pf-ins-filter-btn.is-empty:not(.is-active){ opacity: 0.45; }
.pf-ins-dismissed-btn{
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pf-ins-dismissed-btn:hover{ color: var(--ink); }

/* --- Health chip strip --- */
.pf-insights-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.pf-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
}
.pf-chip-icon{ font-size: 13px; line-height: 1; }
.pf-chip-count{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.pf-chip-label{ font-weight: 500; color: var(--ink-3); text-transform: lowercase; letter-spacing: 0; }
.pf-chip-bleeding{ background: var(--neg-soft);  color: var(--neg-strong); border-color: rgba(220,38,38,0.30); }
.pf-chip-watch{    background: var(--warn-soft); color: var(--warn-strong); border-color: rgba(217,119,6,0.30); }
.pf-chip-star{     background: var(--pos-soft);  color: var(--pos-strong); border-color: rgba(5,150,105,0.30); }
.pf-chip-solid{    background: rgba(16,185,129,0.08); color: #0f766e; border-color: rgba(16,185,129,0.22); }
.pf-chip-new{      background: rgba(148,163,184,0.10); color: var(--ink-3); }
.pf-chip-primary{  background: rgba(126,232,106,0.08); color: var(--accent-2); border-color: rgba(126,232,106,0.22); }

/* Dark + midnight: the chip text colors above are dark hex values that
   blend into the dark surface. Brighten the foreground and lift the
   border opacity so the pills read with the same punch they have on the
   light theme. The .pf-chip-label muted span also needs a brighter tone
   so the trailing word ("bleedings") stays legible. */
[data-theme="dark"] .pf-chip-bleeding,
[data-theme="midnight"] .pf-chip-bleeding{
  color: #fca5a5; border-color: rgba(248,113,113,0.45);
}
[data-theme="dark"] .pf-chip-watch,
[data-theme="midnight"] .pf-chip-watch{
  color: #fcd34d; border-color: rgba(251,191,36,0.45);
}
[data-theme="dark"] .pf-chip-star,
[data-theme="midnight"] .pf-chip-star{
  color: #6ee7b7; border-color: rgba(16,185,129,0.45);
}
[data-theme="dark"] .pf-chip-solid,
[data-theme="midnight"] .pf-chip-solid{
  background: rgba(16,185,129,0.14);
  color: #5eead4; border-color: rgba(16,185,129,0.38);
}
[data-theme="dark"] .pf-chip-new,
[data-theme="midnight"] .pf-chip-new{
  background: rgba(148,163,184,0.18);
  color: #e5e7eb;
}
[data-theme="dark"] .pf-chip-primary,
[data-theme="midnight"] .pf-chip-primary{
  background: rgba(126,232,106,0.16);
  color: color-mix(in srgb, var(--accent) 52%, white); border-color: rgba(126,232,106,0.42);
}
[data-theme="dark"] .pf-chip .pf-chip-label,
[data-theme="midnight"] .pf-chip .pf-chip-label{
  color: inherit; opacity: 0.78;
}
.pf-chip-empty{
  font-family: var(--font-display);
  color: var(--ink-3);
  font-size: 13px;
}

.pf-insights-body{ display: flex; flex-direction: column; gap: 10px; }
.pf-ins-empty{
  font-family: var(--font-display);
  color: var(--ink-3);
  font-size: 13.5px;
  padding: 4px 2px;
}

/* ---------- health alerts panel ---------- */
.pf-alerts{
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.pf-alerts h3{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.pf-alert{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.45;
  border: 1px solid transparent;
  margin-bottom: 8px;
}
.pf-alert:last-child{ margin-bottom: 0; }
.pf-alert-red{    background: var(--neg-soft); color: var(--neg-strong); border-color: rgba(220,38,38,0.25); }
.pf-alert-amber{  background: var(--warn-soft); color: var(--warn-strong); border-color: rgba(217,119,6,0.30); }
.pf-alert-green{  background: var(--pos-soft); color: var(--pos-strong); border-color: rgba(5,150,105,0.30); }
.pf-alert .pf-alert-icon{
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.pf-alert-empty{
  font-family: var(--font-display);
  color: var(--ink-3);
  font-size: 13.5px;
  padding: 6px 2px;
}

/* ---------- AI advisor placeholder ---------- */
.pf-advisor{
  background: linear-gradient(135deg, rgba(126,232,106,0.06), rgba(126,232,106,0.04));
  border: 1px solid rgba(126,232,106,0.20);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 26px;
}
.pf-advisor-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pf-advisor-head h3{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.pf-advisor-chip{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
}
.pf-advisor p{
  font-family: var(--font-display);
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}

/* ---------- empty / signin states ---------- */
.pf-empty{
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
  padding: 56px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.pf-empty h2{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.pf-empty p{
  font-family: var(--font-display);
  color: var(--ink-3);
  font-size: 14px;
  max-width: 460px;
  margin: 0 auto 22px;
  line-height: 1.55;
}

/* ---------- modal (Add Property / Log Income) ---------- */
.pf-modal{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(6px);
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.pf-modal[hidden]{ display: none; }
.pf-modal-card{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 720px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pf-modal-card.pf-modal-narrow{ max-width: 480px; }
.pf-modal-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-solid);
}
[data-theme="dark"] .pf-modal-head,
[data-theme="midnight"] .pf-modal-head{ background: transparent; }
.pf-modal-head-text{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-modal-eyebrow{
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.pf-modal-head h2{
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
.pf-modal-sub{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-3);
  margin: 2px 0 0;
  line-height: 1.4;
}
.pf-modal-close{
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pf-modal-close:hover{
  color: var(--ink);
  border-color: var(--ink-3);
  background: var(--surface-2);
}
[data-theme="dark"] .pf-modal-close,
[data-theme="midnight"] .pf-modal-close{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .pf-modal-close:hover,
[data-theme="midnight"] .pf-modal-close:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.25);
}
.pf-modal-body{
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  background: var(--surface-2);   /* subtle gray so the white section cards read as cards */
}
/* Gentle scrollbar that matches the theme instead of the OS default */
.pf-modal-body::-webkit-scrollbar{ width: 10px; }
.pf-modal-body::-webkit-scrollbar-track{ background: transparent; }
.pf-modal-body::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.pf-modal-body::-webkit-scrollbar-thumb:hover{ background: rgba(148,163,184,0.55); background-clip: padding-box; border: 2px solid transparent; }
.pf-modal-foot{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
[data-theme="dark"] .pf-modal-foot,
[data-theme="midnight"] .pf-modal-foot{
  background: rgba(255,255,255,0.025);
}
.pf-modal-foot .pf-cancel,
.pf-modal-foot .pf-save{
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  transition: background .15s ease, transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.pf-modal-foot .pf-cancel{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  color: var(--ink);
}
.pf-modal-foot .pf-cancel:hover{ border-color: var(--ink-3); background: var(--surface-2); }
.pf-modal-foot .pf-save{
  background: var(--brand-fill);
  color: var(--brand-ink);
  box-shadow: 0 4px 12px -4px rgba(126,232,106,0.40);
}
.pf-modal-foot .pf-save:hover{
  filter: brightness(1.05) saturate(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(126,232,106,0.55);
}
.pf-modal-foot .pf-save:active{ transform: translateY(0); }
.pf-modal-foot .pf-save:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Each section is now a subtle card inside the modal — clearer visual
   separation and a tighter container for the grid of fields. */
.pf-form-section{
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 22px 22px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: none;
}
[data-theme="dark"] .pf-form-section,
[data-theme="midnight"] .pf-form-section{
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.06);
}
/* Eyebrow-style section header with a short accent tick — replaces the
   old full-width underline, which read as a wireframe. */
.pf-form-section-title{
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 0;
  margin-bottom: 1px;
  border-bottom: none;
}
.pf-form-section-title::before{
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background: var(--ink-2);
  flex-shrink: 0;
}
.pf-form-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
}
.pf-form-grid.pf-form-grid-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px){
  /* minmax(0,·): a wide child (street input + Look Up Records button)
     must not force the track past the modal body */
  .pf-form-grid, .pf-form-grid.pf-form-grid-3{ grid-template-columns: minmax(0, 1fr); }
  .pf-street-row{ flex-wrap: wrap; }
  .pf-street-row input{ flex: 1 1 100%; min-width: 0; }
  .pf-street-row .pf-lookup-btn{ flex: 1 1 auto; justify-content: center; white-space: nowrap; }
}
.pf-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;   /* grid item must be able to shrink below content width */
}
.pf-field.pf-field-wide{ grid-column: 1 / -1; }
.pf-field label{
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.01em;
  font-weight: 600;
  color: var(--ink-2);
}
.pf-field input,
.pf-field select{
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-solid);
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
[data-theme="dark"] .pf-field input,
[data-theme="dark"] .pf-field select,
[data-theme="midnight"] .pf-field input,
[data-theme="midnight"] .pf-field select{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.pf-field input::placeholder{ color: var(--ink-4); }
.pf-field input:hover,
.pf-field select:hover{ border-color: var(--ink-4); }
.pf-field input:focus,
.pf-field select:focus{
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(126,232,106,0.18);
}
/* Tame the browser default number spinners — they look fussy in dark
   themes. We keep arrow controls visible on Firefox but slimmer. */
.pf-field input[type="number"]::-webkit-inner-spin-button,
.pf-field input[type="number"]::-webkit-outer-spin-button{
  opacity: 0.4;
}
.pf-field input[type="number"]:hover::-webkit-inner-spin-button{ opacity: 0.8; }
/* Date pickers' calendar icon — invert in dark for visibility */
[data-theme="dark"] .pf-field input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="midnight"] .pf-field input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(0.85);
}
.pf-field .pf-hint{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-4);
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.pf-checkbox-row{
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
.pf-checkbox-row input{
  accent-color: var(--ink-2);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.pf-checkbox-row label{
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

/* ---------- v3: wider property modal ---------- */
.pf-modal-card.pf-modal-wide{ max-width: 860px; }

/* ---------- v3: photo slot + basics row ---------- */
.pf-photo-row{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  margin-bottom: 4px;
}
@media (max-width: 640px){
  .pf-photo-row{ grid-template-columns: 1fr; }
}
.pf-photo-slot{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 156px;
  border: 1.5px dashed var(--line-2);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.pf-photo-slot:hover{
  border-color: var(--ink-3);
  background: var(--surface);
}
.pf-photo-slot.is-drop-active{
  border-color: var(--accent-ink);
  background: var(--accent-soft);
  transform: scale(1.01);
  border-style: solid;
}
[data-theme="dark"] .pf-photo-slot,
[data-theme="midnight"] .pf-photo-slot{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .pf-photo-slot:hover,
[data-theme="midnight"] .pf-photo-slot:hover,
[data-theme="dark"] .pf-photo-slot.is-drop-active,
[data-theme="midnight"] .pf-photo-slot.is-drop-active{
  background: rgba(126,232,106,0.10);
  border-color: rgba(126,232,106,0.55);
}
/* Clear (×) overlay button sits in the top-right of the slot once a
   photo is loaded. Stops drag-and-drop/file-picker activation via
   pointer-events on the button itself + e.stopPropagation in JS. */
.pf-photo-clear{
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: rgba(15,23,42,0.65);
  color: var(--on-dark);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .15s ease, transform .15s ease;
  z-index: 1;
}
.pf-photo-clear:hover{ background: var(--neg); transform: scale(1.06); }
.pf-photo-slot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pf-photo-placeholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 8px;
  color: var(--ink-3);
}
.pf-photo-icon{
  font-size: 28px;
  opacity: 0.5;
}
.pf-photo-hint{
  font-family: var(--font-display);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-4);
}
.pf-photo-hint em{
  font-style: normal;
  display: block;
  font-size: 10.5px;
  margin-top: 2px;
  color: var(--ink-4);
}
.pf-photo-fields{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Upload button + "or" divider above the URL input */
.pf-photo-input-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.pf-photo-upload-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 40px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-solid);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pf-photo-upload-btn svg{ width: 15px; height: 15px; }
.pf-photo-upload-btn:hover{
  background: var(--surface);
  border-color: var(--ink-3);
}
[data-theme="dark"] .pf-photo-upload-btn,
[data-theme="midnight"] .pf-photo-upload-btn{
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--ink-2);
}
[data-theme="dark"] .pf-photo-upload-btn:hover,
[data-theme="midnight"] .pf-photo-upload-btn:hover{
  background: var(--surface);
  border-color: var(--ink-3);
  color: var(--ink);
}
.pf-photo-or{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-4);
}

/* ---------- v3: address row with lookup button ---------- */
.pf-street-row{
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.pf-street-row input{ flex: 1; }
.pf-lookup-btn{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 40px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-solid);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pf-lookup-btn:hover{
  background: var(--surface);
  border-color: var(--ink-3);
}
[data-theme="dark"] .pf-lookup-btn,
[data-theme="midnight"] .pf-lookup-btn{
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--ink-2);
}
[data-theme="dark"] .pf-lookup-btn:hover,
[data-theme="midnight"] .pf-lookup-btn:hover{
  background: var(--surface);
  border-color: var(--ink-3);
  color: var(--ink);
}

/* ---------- v3: pill toggle (loan vs cash) ---------- */
.pf-pill-toggle{
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 4px;
  position: relative;
}
[data-theme="dark"] .pf-pill-toggle,
[data-theme="midnight"] .pf-pill-toggle{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}
.pf-pill-toggle input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pf-pill-toggle label{
  padding: 8px 18px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.pf-pill-toggle input:checked + label{
  background: var(--surface-solid);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .pf-pill-toggle input:checked + label,
[data-theme="midnight"] .pf-pill-toggle input:checked + label{
  background: rgba(255,255,255,0.12);
  color: var(--ink);
  box-shadow: none;
}

/* ---------- v3: conditional containers + callouts ---------- */
.pf-conditional{
  /* default visibility is on; JS toggles display: none when not applicable */
}
.pf-callout{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---------- v3: static-value display (read-only swap-in) ---------- */
.pf-static{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 8px 0;
  font-weight: 600;
}

/* ---------- v3: projected cashflow readout ---------- */
.pf-projected-readout{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
[data-theme="dark"] .pf-projected-readout,
[data-theme="midnight"] .pf-projected-readout{
  background: rgba(255,255,255,0.04);
  border-color: var(--line);
}
.pf-projected-lbl{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.pf-projected-val{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pf-projected-val.pos{ color: var(--pos); }
.pf-projected-val.neg{ color: var(--neg); }

/* ---------- v3: collapsible details section ---------- */
.pf-details{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  background: var(--surface-2);
}
[data-theme="dark"] .pf-details,
[data-theme="midnight"] .pf-details{
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.06);
}
.pf-details[open]{ padding-bottom: 18px; }
.pf-details-summary{
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  user-select: none;
}
.pf-details-summary::-webkit-details-marker{ display: none; }
.pf-details-summary::after{
  content: '▸';
  font-size: 10px;
  color: var(--ink-4);
  margin-left: auto;
  transition: transform 0.15s ease;
}
.pf-details[open] .pf-details-summary::after{ transform: rotate(90deg); }

/* ---------- v3: disabled (escrowed) inputs ---------- */
.pf-field input[disabled]{
  background: var(--surface-2);
  color: var(--ink-4);
  cursor: not-allowed;
}

/* ---------- v3: card photo ---------- */
.pf-card-photo{
  width: calc(100% + 40px);
  margin: -18px -20px 4px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

/* ---------- v3: empty-state spark replacement for primary house ---------- */
.pf-card-spark.pf-card-spark-empty{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(241,245,249,0.55);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-4);
  letter-spacing: -0.005em;
}
[data-theme="dark"] .pf-card-spark.pf-card-spark-empty{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
[data-theme="midnight"] .pf-card-spark.pf-card-spark-empty{
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
}

/* ---------- v3: lookup modal content ---------- */
.pf-lookup-spinner{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-3);
  padding: 24px 0;
  text-align: center;
}
.pf-lookup-note{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.pf-lookup-note strong{ color: var(--ink); }
.pf-lookup-note p{ margin: 8px 0 0; }
.pf-lookup-note .pf-lookup-meta{
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 10px;
}
.pf-lookup-err{ color: var(--neg); }
.pf-lookup-result{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pf-lookup-photo{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
}
.pf-lookup-table{
  width: 100%;
  border-collapse: collapse;
}
.pf-lookup-table th{
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  padding: 8px 12px 8px 0;
  width: 40%;
  border-bottom: 1px solid var(--line);
}
.pf-lookup-table td{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

/* ---------- v3 tweaks (font-size bump, empty actions, flag guide) ---------- */
.pf-empty-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pf-empty-actions .calc.secondary{
  background: var(--surface-solid);
  color: var(--accent-2);
  border: 1px solid var(--accent);
  box-shadow: none;
}
.pf-empty-actions .calc.secondary:hover{
  background: var(--accent-soft);
}
.pf-empty-fineprint{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-4);
  max-width: 540px;
  margin: 0 auto;
  font-style: italic;
}

/* ---------- Flag definitions guide ---------- */
.pf-flag-guide{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px 26px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.pf-flag-guide summary{
  list-style: none;
  cursor: pointer;
  padding: 17px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  user-select: none;
}
.pf-flag-guide summary:focus:not(:focus-visible){ outline: none; }
.pf-flag-guide summary::-webkit-details-marker{ display: none; }
.pf-flag-guide summary::after{
  content: '▸';
  font-size: 13px;
  color: var(--ink-4);
  margin-left: auto;
  transition: transform 0.15s ease;
}
.pf-flag-guide[open] summary{ border-bottom: 1px solid var(--line); }
.pf-flag-guide[open] summary::after{ transform: rotate(90deg); }
.pf-flag-guide-body{
  padding: 20px 0 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 44px;
}
@media (max-width: 760px){
  .pf-flag-guide-body{ grid-template-columns: 1fr; gap: 10px; }
}
.pf-flag-guide-col h4{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.pf-flag-row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
}
.pf-flag-row:last-child{ border-bottom: none; }
.pf-flag-row .pf-badge{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 104px;
  font-size: 11px;
  padding: 4px 9px;
  margin-top: 1px;
}
.pf-flag-row .pf-flag-desc strong{ color: var(--ink); }
.pf-glossary-row{
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
}
.pf-glossary-row:last-child{ border-bottom: none; }
.pf-glossary-row b{
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  padding-right: 8px;
}

/* ---------- font-size bumps for readability ---------- */
.pf-summary-kpi .pf-kpi-lbl{ font-size: 11.5px; }
.pf-summary-kpi .pf-kpi-val{ font-size: 26px; }
.pf-summary-kpi .pf-kpi-sub{ font-size: 13px; }

.pf-card-title{ font-size: 18px; }
.pf-card-strategy{ font-size: 11px; padding: 4px 10px; }
.pf-card-address{ font-size: 13.5px; }
.pf-metric .pf-metric-lbl{ font-size: 10.5px; }
.pf-metric .pf-metric-val{ font-size: 15px; }
.pf-badge{ font-size: 11.5px; padding: 5px 11px; }

.pf-controls select,
.pf-controls .pf-search input,
.pf-controls .pf-add{ font-size: 14px; height: 38px; }

.pf-alert{ font-size: 14.5px; }
.pf-alert-empty{ font-size: 14px; }
.pf-advisor h3{ font-size: 17px; }
.pf-advisor p{ font-size: 14.5px; }
.pf-alerts h3{ font-size: 17px; }

.pf-field label{ font-size: 11px; }
.pf-field input, .pf-field select{ font-size: 14.5px; height: 38px; }
.pf-field .pf-hint{ font-size: 12.5px; }
.pf-form-section-title{ font-size: 11.5px; }
.pf-callout{ font-size: 13.5px; }
.pf-checkbox-row{ font-size: 13.5px; }
.pf-checkbox-row label{ font-size: 13.5px; }
.pf-projected-lbl{ font-size: 11.5px; }
.pf-projected-val{ font-size: 22px; }
.pf-static{ font-size: 14.5px; }
.pf-modal-head h2{ font-size: 20px; }
.pf-pill-toggle label{ font-size: 13.5px; padding: 8px 18px; }
.pf-lookup-btn{ font-size: 12.5px; height: 38px; }

/* ===========================================
   PORTFOLIO PROPERTY DETAIL PAGE (P3-4)
   =========================================== */

.pp-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);   /* charcoal back link — was green */
  text-decoration: none;
  margin: 12px 0 16px;
}
.pp-back:hover{ text-decoration: underline; }

/* ---------- header ---------- */
.pp-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.pp-header-main{
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}
.pp-header-photo{
  width: 120px;
  height: 90px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.pp-header-text{ min-width: 0; flex: 1; }
.pp-header-row{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pp-header-row h1{
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.pp-header-address{
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-3);
}
.pp-header-actions{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.pp-edit-btn{
  padding: 9px 18px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent-grad);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(126,232,106,0.40);
}
.pp-edit-btn:hover{ filter: brightness(1.05) saturate(1.1); }
.pp-delete-btn{
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.pp-delete-btn:hover{
  color: var(--neg);
  border-color: var(--neg);
  background: var(--neg-soft);
}
@media (max-width: 640px){
  .pp-header{ flex-direction: column; }
  .pp-header-actions{ width: 100%; }
}

/* ---------- quick stats ---------- */
.pp-stats{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 980px){
  .pp-stats{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px){
  .pp-stats{ grid-template-columns: repeat(2, 1fr); }
}
.pp-stat{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
  box-shadow: var(--shadow-sm);
}
.pp-stat-lbl{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.pp-stat-val{
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pp-stat-val.pos{ color: var(--pos); }
.pp-stat-val.neg{ color: var(--neg); }

/* ---------- panel base ---------- */
.pp-panel{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .pp-panel,
[data-theme="midnight"] .pp-panel{
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.07);
}
.pp-panel-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.pp-panel-title{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  flex: 1 1 auto;
}
/* Multiple toggles inside one panel head — stack them at the end. */
.pp-panel-controls{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* Segmented range / index toggles in panel heads. Same look as the
   .pf-range-toggle used on the Portfolio Wealth hero. */
.pp-range-toggle{
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  gap: 2px;
  flex-shrink: 0;
}
[data-theme="dark"] .pp-range-toggle,
[data-theme="midnight"] .pp-range-toggle{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}
.pp-range-btn{
  border: 0;
  background: transparent;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.pp-range-btn.is-active{
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15,23,42,0.10);
}
[data-theme="dark"] .pp-range-btn.is-active,
[data-theme="midnight"] .pp-range-btn.is-active{
  background: rgba(126,232,106,0.20);
  color: color-mix(in srgb, var(--accent) 32%, white);
  box-shadow: none;
}
.pp-panel-head h2{
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pp-panel-sub{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
  max-width: 640px;
  line-height: 1.45;
}
/* In-panel note callout — used by charts that need a short "how to read it"
   block above the canvas. Subtle indigo-tinted card so it reads as helper
   text without competing with the chart. */
.pp-panel-note{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  line-height: 1.55;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(126,232,106,0.20);
  border-radius: 10px;
}
[data-theme="dark"] .pp-panel-note,
[data-theme="midnight"] .pp-panel-note{
  background: rgba(126,232,106,0.10);
  border-color: rgba(126,232,106,0.25);
  color: var(--ink);
}
.pp-panel-note strong{ font-weight: 700; }
.pp-note-pos{ color: var(--pos); font-weight: 700; }
.pp-note-neg{ color: var(--neg); font-weight: 700; }

/* ---------- chart wrappers ---------- */
.pp-chart-wrap{
  height: 280px;
  position: relative;
}
.pp-chart-wrap canvas{
  width: 100% !important;
  height: 100% !important;
}
.pp-equity-legend{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-3);
}
.pp-legend-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pp-swatch{
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
}

/* ---------- value-update form ---------- */
.pp-value-form{
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: end;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
[data-theme="dark"] .pp-value-form,
[data-theme="midnight"] .pp-value-form{
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.07);
}
@media (max-width: 720px){
  .pp-value-form{ grid-template-columns: 1fr; }
}
.pp-value-form .pf-field{ min-width: 0; margin: 0; }
.pp-value-form label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 5px;
  display: block;
}
.pp-value-form input{
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-solid);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
[data-theme="dark"] .pp-value-form input,
[data-theme="midnight"] .pp-value-form input{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.pp-value-form input:focus{
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(126,232,106,0.18);
}
[data-theme="dark"] .pp-value-form input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="midnight"] .pp-value-form input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(0.85);
}

/* PP-4 value auto-refresh opt-out toggle (Pro+; hidden otherwise) */
.pp-autorefresh{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  cursor: pointer;
  user-select: none;
}
.pp-autorefresh input{
  margin: 2px 0 0;
  width: 15px;
  height: 15px;
  accent-color: var(--accent, #2E8B3A);
  cursor: pointer;
  flex: none;
}
.pp-autorefresh-txt{
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.pp-autorefresh-hint{
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Currency-prefixed amount input */
.pp-value-input-wrap{ position: relative; }
.pp-value-input-wrap .pp-value-currency{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
  pointer-events: none;
}
.pp-value-input-wrap input{ padding-left: 26px; }

.pp-value-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pp-value-save,
.pp-value-lookup{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 18px;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .15s ease, transform .15s ease, box-shadow .2s ease, filter .15s ease;
  white-space: nowrap;
}
.pp-value-save svg,
.pp-value-lookup svg{ width: 15px; height: 15px; }

.pp-value-save{
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: 0 4px 12px -4px rgba(126,232,106,0.40);
}
.pp-value-save:hover{
  filter: brightness(1.05) saturate(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(126,232,106,0.55);
}
.pp-value-save:active{ transform: translateY(0); }
.pp-value-save:disabled{ opacity: 0.5; cursor: not-allowed; transform: none; }

.pp-value-lookup{
  background: var(--surface-solid);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
}
.pp-value-lookup:hover{ background: var(--surface); border-color: var(--ink-3); }
[data-theme="dark"] .pp-value-lookup,
[data-theme="midnight"] .pp-value-lookup{
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--ink-2);
}
[data-theme="dark"] .pp-value-lookup:hover,
[data-theme="midnight"] .pp-value-lookup:hover{
  background: var(--surface);
  border-color: var(--ink-3);
  color: var(--ink);
}
.pp-value-lookup:disabled{ opacity: 0.5; cursor: not-allowed; }

/* History list */
.pp-value-history{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pp-history-title{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-history-count{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
  letter-spacing: 0;
  text-transform: none;
}
[data-theme="dark"] .pp-history-count,
[data-theme="midnight"] .pp-history-count{
  background: rgba(126,232,106,0.18);
  color: color-mix(in srgb, var(--accent) 32%, white);
}
.pp-history-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pp-history-list li{
  display: grid;
  grid-template-columns: 140px 1fr 100px auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-2);
  transition: background .12s ease;
}
.pp-history-list li:hover{ background: var(--surface-2); }
[data-theme="dark"] .pp-history-list li:hover,
[data-theme="midnight"] .pp-history-list li:hover{
  background: rgba(255,255,255,0.04);
}
.pp-history-date{
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: -0.005em;
}
.pp-history-val{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pp-history-src{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(148,163,184,0.14);
  color: var(--ink-3);
  text-align: center;
  justify-self: start;
}
[data-theme="dark"] .pp-history-src,
[data-theme="midnight"] .pp-history-src{
  background: rgba(255,255,255,0.06);
}
.pp-history-delete{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--neg);
  background: transparent;
  color: var(--neg);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pp-history-delete svg{ width: 13px; height: 13px; flex-shrink: 0; }
.pp-history-delete:hover{
  background: var(--neg-soft);
  border-color: var(--neg);
}
[data-theme="dark"] .pp-history-delete,
[data-theme="midnight"] .pp-history-delete{
  color: #fca5a5;
  border-color: rgba(248,113,113,0.30);
}
[data-theme="dark"] .pp-history-delete:hover,
[data-theme="midnight"] .pp-history-delete:hover{
  background: rgba(248,113,113,0.18);
  border-color: rgba(248,113,113,0.55);
  color: #fecaca;
}
.pp-history-delete:disabled{ opacity: 0.4; cursor: not-allowed; }
.pp-history-empty{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-4);
}
@media (max-width: 560px){
  .pp-history-list li{ grid-template-columns: 110px 1fr auto; }
  .pp-history-src{ display: none; }
}

/* ---------- log section ---------- */
.pp-log-grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 880px){
  .pp-log-grid{ grid-template-columns: 1fr; }
}
.pp-log-form{
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
[data-theme="dark"] .pp-log-form,
[data-theme="midnight"] .pp-log-form{
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.07);
}
.pp-log-form h3{
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.pp-log-form .pf-field{ min-width: 0; margin: 0; gap: 0; }
.pp-log-form .pf-field label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 5px;
  display: block;
}
.pp-log-form .pf-field input,
.pp-log-form .pf-field select{
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-solid);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
[data-theme="dark"] .pp-log-form .pf-field input,
[data-theme="dark"] .pp-log-form .pf-field select,
[data-theme="midnight"] .pp-log-form .pf-field input,
[data-theme="midnight"] .pp-log-form .pf-field select{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.pp-log-form .pf-field input:focus,
.pp-log-form .pf-field select:focus{
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(126,232,106,0.18);
}
.pp-log-form .pp-value-input-wrap input{ padding-left: 26px; }
.pp-form-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}
.pp-form-row .pf-field{ flex: 1 1 140px; }
.pp-form-row .pf-field-wide{ flex: 1 1 100%; order: 10; }
.pp-form-row .pp-value-actions{
  flex: 0 0 auto;
  margin-left: auto;
  order: 20;
}
@media (max-width: 540px){
  .pp-form-row .pf-field{ flex: 1 1 100%; }
  .pp-form-row .pp-value-actions{ flex: 1 1 100%; justify-content: flex-end; }
}
.pp-log-tabs{
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}
.pp-tab{
  padding: 9px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.pp-tab:hover{ color: var(--ink); }
.pp-tab.pp-tab-active{
  color: var(--accent-2);
  border-bottom-color: var(--accent-ink);
}
.pp-csv{
  margin-left: auto;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-solid);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  cursor: pointer;
}
.pp-csv:hover{ background: var(--surface); border-color: var(--ink-3); }

.pp-log-table{ overflow-x: auto; }
.pp-data-table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: 13.5px;
}
.pp-data-table th,
.pp-data-table td{
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.pp-data-table thead th{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
}
.pp-data-table tbody td{ color: var(--ink-2); }
.pp-data-table tbody td.pos{ color: var(--pos); font-weight: 600; }
.pp-data-table tbody td.neg{ color: var(--neg); font-weight: 600; }
.pp-data-table tbody tr:hover{ background: var(--surface-2); }
.pp-table-empty{
  padding: 16px;
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-4);
  font-style: italic;
}

/* ---------- collapsible advanced panels ---------- */
.pp-details{
  padding: 4px 22px;
}
.pp-details summary{
  cursor: pointer;
  padding: 14px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  user-select: none;
  flex-wrap: wrap;
}
.pp-details summary::-webkit-details-marker{ display: none; }
.pp-details summary::after{
  content: '▸';
  font-size: 12px;
  color: var(--ink-4);
  transition: transform 0.15s ease;
  margin-left: auto;
}
.pp-details[open] summary::after{ transform: rotate(90deg); }
.pp-details summary h2{
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pp-details[open]{ padding-bottom: 16px; }

/* ---------- loan tracker body ---------- */
.pp-loan-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 720px){
  .pp-loan-grid{ grid-template-columns: repeat(2, 1fr); }
}
.pp-loan-stat{
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pp-loan-note{
  margin-top: 12px;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid rgba(217,119,6,0.30);
  border-radius: 8px;
}

/* ---------- linked deal panel ---------- */
.pp-linked-empty{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.pp-linked-picker{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.pp-linked-picker label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.pp-linked-picker select{
  flex: 1;
  min-width: 200px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-solid);
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
}
.pp-linked-picker .pf-save{ height: 38px; }
.pp-linked-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.pp-unlink-btn{
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.pp-unlink-btn:hover{ color: var(--neg); border-color: var(--neg); }
.pp-linked-table th{ width: 32%; }
.pp-linked-table tbody th{
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  letter-spacing: 0;
  text-transform: none;
}

/* ===========================================
   PORTFOLIO ADVISOR (P3-6)
   =========================================== */
.pf-advisor-head{
  position: relative;
}
.pf-advisor-count{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  padding: 4px 10px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-left: 6px;
}
.pf-advisor-show-dismissed{
  margin-left: auto;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-2);
  background: transparent;
  border: 1px solid rgba(126,232,106,0.30);
  border-radius: 999px;
  cursor: pointer;
}
.pf-advisor-show-dismissed:hover{ background: var(--accent-soft); }

.pf-advisor-empty{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-3);
  padding: 6px 2px;
  font-style: italic;
}

.pf-rec{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
  padding: 16px 18px;
  margin-top: 12px;
  position: relative;
  border-left-width: 4px;
}
.pf-rec:first-of-type{ margin-top: 8px; }
.pf-rec-red    { border-left-color: var(--neg); }
.pf-rec-amber  { border-left-color: var(--warn); }
.pf-rec-green  { border-left-color: var(--pos); }

.pf-rec-head{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.pf-rec-icon{
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.pf-rec-titles{ flex: 1; min-width: 0; }
.pf-rec-kicker{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.pf-rec-title{
  margin: 0;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.3;
}
.pf-rec-dismiss{
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  font-size: 18px;
  color: var(--ink-4);
  cursor: pointer;
  line-height: 1;
}
.pf-rec-dismiss:hover{
  background: var(--surface-2);
  color: var(--ink-2);
  border-color: var(--line);
}
.pf-rec-message{
  margin: 4px 0 8px;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.pf-rec-bullets{
  margin: 0 0 10px;
  padding: 8px 14px;
  background: var(--surface-2);
  border-radius: 10px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-rec-bullets li{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-2);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.pf-rec-bullets li::before{
  content: '•';
  position: absolute;
  left: 0;
  color: var(--ink-4);
}
.pf-rec-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pf-rec-action{
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  text-decoration: none;
}
.pf-rec-action:hover{
  background: var(--surface-2);
  border-color: var(--ink-3);
}
/* Action buttons stay neutral on every card type — the semantic left
   border + badge already convey critical/watch/opportunity, so the
   buttons don't need to repeat the color (keeps green an accent). */

/* ===========================================
   PORTFOLIO WEALTH PAGE (P3-5)
   =========================================== */

/* Outline-style secondary CTA (Wealth Growth, etc.) */
.pf-add-secondary{
  background: var(--surface-solid);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  box-shadow: none;
  text-decoration: none;
}
.pf-add-secondary:hover{
  background: var(--surface);
  border-color: var(--ink-3);
  filter: none;
}
/* Dark / midnight: the var(--surface-solid) backing is a dark gray that
   makes the button blend into the page surface. Swap to a tinted indigo
   overlay and brighter accent text so it reads as a clear CTA. */
[data-theme="dark"] .pf-add-secondary,
[data-theme="midnight"] .pf-add-secondary{
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--ink-2);
}
[data-theme="dark"] .pf-add-secondary:hover,
[data-theme="midnight"] .pf-add-secondary:hover{
  background: var(--surface);
  border-color: var(--ink-3);
  color: var(--ink);
  filter: none;
}

/* summary stats strip */
.we-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 980px){
  .we-stats{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px){
  .we-stats{ grid-template-columns: 1fr; }
}
.we-stat{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 3px;
  min-height: 130px;
}
[data-theme="dark"] .we-stat,
[data-theme="midnight"] .we-stat{
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.07);
}
.we-stat-lbl{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  line-height: 1.35;
}
.we-stat-val{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.15;
  margin-top: 1px;
}
.we-stat-val.pos{ color: var(--pos); }
.we-stat-val.neg{ color: var(--neg); }
.we-stat-delta{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  min-height: 14px;
}
.we-stat-delta.pos{ color: var(--pos); }
.we-stat-delta.neg{ color: var(--neg); }
.we-stat-delta.flat{ color: var(--ink-3); }
.we-stat-spark{
  width: 100% !important;
  height: 28px !important;
  display: block;
  margin-top: 2px;
}
.we-stat-sub{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
}

/* chart wrappers per chart density */
.we-chart-tall{ height: 360px; }
.we-chart-medium{ height: 300px; }
@media (max-width: 640px){
  .we-chart-tall{ height: 280px; }
  .we-chart-medium{ height: 240px; }
}

/* ===========================================
   CSV IMPORT PREVIEW (P3-7)
   =========================================== */
.pp-csv-import{
  margin-left: auto;   /* sit between the tabs and the Export CSV button */
}
.pp-import-meta{
  margin-bottom: 14px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pp-import-format{
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.pp-import-format strong{
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--accent-2);
  font-size: 12px;
}
.pp-import-summary{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-2);
}
.pp-tag{
  display: inline-block;
  padding: 2px 8px;
  margin-right: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
}
.pp-tag-new{ background: var(--pos-soft); color: var(--pos); }
.pp-tag-warn{ background: var(--warn-soft); color: var(--warn); }
.pp-tag-dup{ background: rgba(148,163,184,0.18); color: var(--ink-3); }
.pp-tag-err{ background: var(--neg-soft); color: var(--neg); }

.pp-import-tablewrap{
  max-height: 460px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pp-import-tablewrap .pp-data-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
}
.pp-import-tablewrap tr.pp-import-err td{
  background: rgba(220,38,38,0.05);
}

/* ---------- compact masthead variant for the dashboard ---------- */
.pf-masthead{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 16px 0 20px;
}
.pf-masthead .kicker{ margin-bottom: 4px; }
.pf-masthead h1{ margin: 0; }
.pf-masthead .tagline{ max-width: 520px; }
.pf-masthead-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* The .pf-add base style uses `margin-left: auto` so it floats right inside
   the controls bar. In the masthead it's already flex-aligned, so reset it
   and give it a touch more presence (slightly taller). */
.pf-masthead-actions .pf-add{
  margin-left: 0;
  height: 40px;
  padding: 0 18px;
  font-size: 13.5px;
}
/* Primary CTA only — heavier shadow. The secondary outline button keeps
   its flat outline look. */
.pf-masthead-actions .pf-add:not(.pf-add-secondary){
  box-shadow: 0 6px 16px -6px rgba(126,232,106,0.50);
}

/* =================================================================
   PROPERTY IMPORT — lookup button + preview modal (P1-1)
================================================================= */
/* Row of address-related actions (Look up records · View comps · STR
   comps) that sits BELOW the street-address input. Splitting them out
   gives the address field full width and lets the buttons wrap cleanly
   on narrow viewports instead of pushing the input. */
.address-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.address-actions .pi-lookup-btn{ margin-left: 0; }

.pi-lookup-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  margin-left: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  /* Subtle gradient + crisp inner highlight for a tooled look */
  background: linear-gradient(180deg,
              var(--surface-solid) 0%,
              var(--surface-2) 100%);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 1px 2px rgba(17,21,28,0.05);
}
.pi-lookup-btn svg{
  color: var(--ink-3);
  flex-shrink: 0;
}
.pi-lookup-btn:hover{
  background: var(--surface-2);
  border-color: var(--ink-3);
  color: var(--ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.50) inset,
    0 4px 12px -4px rgba(17,21,28,0.10);
  transform: translateY(-0.5px);
}
.pi-lookup-btn:hover svg{ color: var(--ink); }
.pi-lookup-btn:active{ transform: translateY(0); }
.pi-lookup-btn:disabled{ opacity: 0.5; cursor: not-allowed; transform: none; }

/* Dark + midnight: brighter accent, slightly more pronounced glow */
html[data-theme="dark"] .pi-lookup-btn,
html[data-theme="midnight"] .pi-lookup-btn{
  background: linear-gradient(180deg,
              rgba(126,232,106,0.16) 0%,
              rgba(126,232,106,0.06) 100%);
  border-color: rgba(126,232,106,0.42);
  color: color-mix(in srgb, var(--accent) 32%, white);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 1px 2px rgba(0,0,0,0.30);
}
html[data-theme="dark"] .pi-lookup-btn svg,
html[data-theme="midnight"] .pi-lookup-btn svg{ color: color-mix(in srgb, var(--accent) 32%, white); }
html[data-theme="dark"] .pi-lookup-btn:hover,
html[data-theme="midnight"] .pi-lookup-btn:hover{
  background: linear-gradient(180deg,
              rgba(126,232,106,0.26) 0%,
              rgba(126,232,106,0.14) 100%);
  border-color: color-mix(in srgb, var(--accent) 52%, white);
  color: color-mix(in srgb, var(--accent) 18%, white);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 6px 16px -6px rgba(126,232,106,0.50);
}
html[data-theme="dark"] .pi-lookup-btn:hover svg,
html[data-theme="midnight"] .pi-lookup-btn:hover svg{ color: color-mix(in srgb, var(--accent) 18%, white); }

.pi-modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pi-modal[hidden]{ display: none; }
.pi-scrim{
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pi-card{
  position: relative;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px -24px rgba(15,23,42,0.30);
  width: min(560px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pi-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.pi-head h3{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.pi-close{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.pi-close:hover{
  border-color: var(--accent-ink);
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.pi-body{
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}
.pi-spinner{
  padding: 24px 0;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
}
.pi-spinner::before{
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  vertical-align: middle;
  border: 2px solid var(--line);
  border-top-color: var(--accent-ink);
  border-radius: 50%;
  animation: pi-spin 0.7s linear infinite;
}
@keyframes pi-spin { to { transform: rotate(360deg); } }
.pi-note{
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.pi-note-warn{
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.25);
  color: var(--warn-strong);
}
.pi-sub{
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.pi-fields{
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.pi-fields tr{ border-bottom: 1px solid var(--line); }
.pi-fields tr:last-child{ border-bottom: none; }
.pi-fields td{
  padding: 10px 6px;
  vertical-align: middle;
}
.pi-fields td:first-child{ width: 32px; }
.pi-fields .pi-cb{
  width: 18px;
  height: 18px;
  accent-color: var(--accent-ink);
  cursor: pointer;
}
.pi-fields .pi-label{ color: var(--ink-3); }
.pi-fields .pi-value{
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
}
.pi-source{
  margin-top: 14px;
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pi-foot{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
}
.pi-foot[hidden]{ display: none; }

@media (max-width: 640px){
  .pi-modal{ padding: 12px; align-items: flex-end; }
  .pi-card{ max-height: 92vh; width: 100%; }
  .pi-lookup-btn{ margin-left: 0; margin-top: 6px; }
}

/* =================================================================
   PROPERTY COMPS — panel (P1-2)
================================================================= */
.cmps-btn{ /* "View comps" sits next to "Look up records" — same pill style */ }

#comps-panel .cmps-summary{
  margin-bottom: 16px;
}
.cmps-summary-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.cmps-stat{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmps-stat span{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.cmps-stat strong{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.cmps-tabs{
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.cmps-tab{
  padding: 9px 14px;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cmps-tab:hover{ color: var(--ink); }
.cmps-tab.is-active{
  color: var(--accent-ink);
  border-bottom-color: var(--accent-ink);
  font-weight: 600;
}

.cmps-body{ min-height: 200px; }
.cmps-spinner{
  padding: 32px 0;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
}
.cmps-spinner::before{
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  vertical-align: middle;
  border: 2px solid var(--line);
  border-top-color: var(--accent-ink);
  border-radius: 50%;
  animation: pi-spin 0.7s linear infinite;
}
.cmps-empty{
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13.5px;
  background: var(--surface-2);
  border-radius: 12px;
}

.cmps-table{
  width: 100%;
  border-collapse: separate;          /* needed so the outer radius clips children */
  border-spacing: 0;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;                    /* clip the rounded corners */
}
.cmps-table thead th{
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-right:  1px solid var(--line);
  font-weight: 600;
}
.cmps-table thead th:last-child{ border-right: none; }
.cmps-table tbody td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  border-right:  1px solid var(--line);
  color: var(--ink-2);
  vertical-align: middle;
}
.cmps-table tbody td:last-child{ border-right: none; }
.cmps-table tbody tr:last-child td{ border-bottom: none; }
.cmps-table tbody tr:hover td{ background: var(--surface-2); }
.cmps-table .cmps-addr{
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-weight: 500;
}
/* Clickable comp address — opens the listing on Airbnb in a new tab.
   Kept underline-on-hover (not always) so the cell still reads as a
   data row rather than a column of obvious links. */
.cmps-addr-link{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.cmps-addr-link:hover{
  color: var(--accent-ink);
  border-bottom-color: currentColor;
}
.cmps-addr-ext{
  margin-left: 3px;
  font-size: 0.9em;
  color: var(--ink-4);
}
.cmps-addr-link:hover .cmps-addr-ext{ color: var(--accent-ink); }
/* STR-comps panel — amber "stub data" hint chip in the summary strip
   (visible while strCompsProvider is still 'stub'). Same shape as the
   other cmps-stat chips so it slots into the row without re-flow. */
.cmps-stat.cmps-stat-warn{
  background: var(--warn-soft);
  border: 1px solid rgba(217,119,6,0.30);
}
.cmps-stat.cmps-stat-warn strong{ color: var(--warn); }

/* STR-comps filter bar — narrows the in-memory result set without
   re-fetching. Sits between the tabs and the medians strip so users
   can scope first, then read the summary numbers for that scope. */
.strc-filterbar{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin: 12px 0 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
[data-theme="dark"] .strc-filterbar,
[data-theme="midnight"] .strc-filterbar{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}
.strc-filter{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 110px;
}
.strc-filter > span{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.strc-filter select{
  height: 34px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-solid);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="dark"] .strc-filter select,
[data-theme="midnight"] .strc-filter select{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.strc-filter select:focus{
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(126,232,106,0.18);
}
.strc-reset{
  height: 34px;
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;
}
.strc-reset:hover{
  color: var(--accent-2);
  border-color: var(--accent-ink);
  background: var(--accent-soft);
}
.strc-rev{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4);
  font-weight: 500;
}

/* STR Comps hero — subject-property revenue prediction laid out as
   three stat cards (ADR · Occupancy · Annual Revenue). Drops the
   indigo gradient in favor of a calmer card that sits comfortably
   in the overlay's left column. */
.strc-hero{
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
}
.strc-hero-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.strc-hero-kicker{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.strc-conf{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
[data-theme="dark"] .strc-conf,
[data-theme="midnight"] .strc-conf{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.strc-conf-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
}
.strc-conf-high .strc-conf-dot{ background: var(--pos); }
.strc-conf-low  .strc-conf-dot{ background: var(--neg); }

.strc-hero-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 540px){
  .strc-hero-cards{ grid-template-columns: 1fr; }
}
.strc-hero-card{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
}
[data-theme="dark"] .strc-hero-card,
[data-theme="midnight"] .strc-hero-card{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
/* Accent tint on the Annual Revenue card so the "headline" number
   reads as the focal point of the trio. */
.strc-hero-card-accent{
  background: var(--surface-2);
  border-color: var(--line);
}
[data-theme="dark"] .strc-hero-card-accent,
[data-theme="midnight"] .strc-hero-card-accent{
  background: rgba(255,255,255,0.05);
  border-color: var(--line);
}
.strc-hero-card .strc-hero-lbl{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.strc-hero-card .strc-hero-val{
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 4px 0 2px;
}
.strc-hero-card-accent .strc-hero-val{ color: var(--ink); }
[data-theme="dark"] .strc-hero-card-accent .strc-hero-val,
[data-theme="midnight"] .strc-hero-card-accent .strc-hero-val{ color: var(--ink); }
.strc-hero-card .strc-hero-unit{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-4);
  margin-bottom: 4px;
}
.strc-hero-apply{
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-2);
  background: var(--surface-solid);
  border: 1px solid rgba(126,232,106,0.34);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.strc-hero-apply:hover{
  background: var(--accent-soft);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}
.strc-hero-apply.is-applied{
  background: var(--pos-soft);
  color: var(--pos);
  border-color: rgba(5,150,105,0.30);
}
[data-theme="dark"] .strc-hero-apply,
[data-theme="midnight"] .strc-hero-apply{
  background: rgba(255,255,255,0.04);
  color: color-mix(in srgb, var(--accent) 32%, white);
  border-color: rgba(126,232,106,0.40);
}

.strc-market-section{ margin-top: 4px; }
.strc-market-head{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.strc-market-head strong{
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
  font-size: 13px;
}
.strc-market-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.strc-market-card{
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
[data-theme="dark"] .strc-market-card,
[data-theme="midnight"] .strc-market-card{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}
.strc-market-lbl{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.strc-market-val{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.strc-market-hint{
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4);
}

/* =================================================================
   STR COMPS OVERLAY — full-screen window opened by the STR comps
   button. Two-column main area (charts/data left, map right), comps
   list spans full width below. Dedicated overlay (not side panel)
   so the map gets enough real estate to be useful.
================================================================= */
.strc-overlay{
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.strc-overlay[hidden]{ display: none; }
.strc-overlay-scrim{
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(6px);
}
.strc-overlay-card{
  position: relative;
  z-index: 1;
  margin: 24px;
  width: 100%;
  max-width: 1400px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(15,23,42,0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
[data-theme="dark"] .strc-overlay-card,
[data-theme="midnight"] .strc-overlay-card{
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.65);
}
body.strc-overlay-open{ overflow: hidden; }

.strc-overlay-head{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.strc-overlay-head h2{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.strc-overlay-meta{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  margin-left: 6px;
}
.strc-overlay-head .pf-modal-close{ margin-left: 0; }

/* Save/load controls in the overlay header — auto-save indicator
   plus a button that opens the saved-snapshots picker. Pushes the
   close button to the far right. */
.strc-saved-controls{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.strc-saved-loaded-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  background: rgba(5,150,105,0.10);
  border: 1px solid rgba(5,150,105,0.28);
  border-radius: 999px;
  letter-spacing: 0.02em;
}
[data-theme="dark"]  .strc-saved-loaded-tag,
[data-theme="midnight"] .strc-saved-loaded-tag{
  background: rgba(5,150,105,0.16);
  color: #6ee7b7;
}
.strc-saved-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.strc-saved-btn:hover:not(:disabled){
  background: var(--accent-soft);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}
.strc-saved-btn:disabled{ opacity: 0.45; cursor: not-allowed; }
[data-theme="dark"]  .strc-saved-btn,
[data-theme="midnight"] .strc-saved-btn{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

/* Banner shown when opening with an address that has saved snapshots.
   Sits between the overlay header and body. */
.strc-saved-banner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 22px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.strc-saved-banner[hidden]{ display: none; }
[data-theme="dark"]  .strc-saved-banner,
[data-theme="midnight"] .strc-saved-banner{
  background: rgba(255,255,255,0.05);
}
.strc-saved-banner-msg{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}
.strc-saved-banner-msg strong{ color: var(--ink); font-weight: 700; }
.strc-saved-banner-actions{
  display: inline-flex;
  gap: 8px;
}
.strc-saved-banner-btn{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-solid);
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.strc-saved-banner-btn:hover{ background: var(--surface-2); color: var(--ink); }
.strc-saved-banner-btn.is-primary{
  background: var(--ink-2);
  color: var(--on-dark);
}
.strc-saved-banner-btn.is-primary:hover{ filter: brightness(1.08); }
.strc-saved-banner-btn.is-dismiss{
  background: transparent;
  border-color: var(--line);
  color: var(--ink-3);
}
.strc-saved-banner-btn.is-dismiss:hover{
  background: var(--surface-solid);
  color: var(--ink);
  border-color: var(--line);
}

/* Snapshots picker — floats below the header when "Saved (N)" is
   clicked. Lists every saved snapshot for the current address. */
.strc-saved-panel{
  position: absolute;
  top: 70px;
  right: 22px;
  width: min(420px, calc(100vw - 60px));
  max-height: 60vh;
  overflow: auto;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  z-index: 10;
}
.strc-saved-panel[hidden]{ display: none; }
[data-theme="dark"]  .strc-saved-panel,
[data-theme="midnight"] .strc-saved-panel{
  background: var(--surface-2);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}
.strc-saved-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
}
.strc-saved-panel-close{
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-3);
}
.strc-saved-panel-close:hover{ color: var(--ink); }
.strc-saved-empty{
  padding: 18px 14px;
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-4);
  text-align: center;
}
.strc-saved-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.strc-saved-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  transition: background 0.1s ease;
}
.strc-saved-row:last-child{ border-bottom: none; }
.strc-saved-row:hover{ background: var(--surface-2); }
.strc-saved-row.is-loaded{ background: var(--surface-2); }
[data-theme="dark"]  .strc-saved-row:hover,
[data-theme="midnight"] .strc-saved-row:hover{ background: rgba(255,255,255,0.04); }
[data-theme="dark"]  .strc-saved-row.is-loaded,
[data-theme="midnight"] .strc-saved-row.is-loaded{ background: rgba(255,255,255,0.05); }
.strc-saved-row-main{ flex: 1; min-width: 0; }
.strc-saved-row-date{
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.strc-saved-row-sub{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.strc-saved-badge{
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 2px;
}
.strc-saved-badge.is-full{ background: var(--surface-2); color: var(--ink-2); }
.strc-saved-badge.is-light{ background: var(--surface-solid); color: var(--ink-3); border: 1px solid var(--line); }
.strc-saved-row-actions{
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.strc-saved-row-btn{
  padding: 5px 10px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: 6px;
  cursor: pointer;
}
.strc-saved-row-btn.is-load{ color: var(--ink-2); border-color: var(--line-2); }
.strc-saved-row-btn.is-load:hover{ background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.strc-saved-row-btn.is-del{ width: 26px; padding: 0; color: var(--ink-4); font-size: 16px; line-height: 1; }
.strc-saved-row-btn.is-del:hover{ background: rgba(220,38,38,0.10); color: var(--neg); border-color: rgba(220,38,38,0.30); }
[data-theme="dark"]  .strc-saved-row-btn,
[data-theme="midnight"] .strc-saved-row-btn{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}

/* In-body picker: shown right after opening when saves exist for the
   address. Lets the user load saved (free) vs pull fresh (paid). */
.strc-saved-choice{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 24px;
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  text-align: center;
}
[data-theme="dark"]  .strc-saved-choice,
[data-theme="midnight"] .strc-saved-choice{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
}
.strc-saved-choice-icon{
  font-size: 36px;
  opacity: 0.8;
}
.strc-saved-choice-msg{
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-2);
  max-width: 520px;
  line-height: 1.55;
}
.strc-saved-choice-msg strong{ color: var(--ink); font-weight: 700; }
.strc-saved-choice-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.strc-overlay-body{
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Layout (2026-06-04 redesign):
     TOP: hero + box plots LEFT · map RIGHT (map matches left's height)
     MID: full-width trend + RIX + seasonality heatmap
     BOTTOM-IMPACT: bars LEFT · features table + insights RIGHT
     COMP TABLE: full width below
   Mobile (≤960px): every row collapses to a single stacked column. */
.strc-top-grid{
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.4fr);
  gap: 18px;
  align-items: stretch;            /* map matches left column height */
  margin-bottom: 18px;
}
.strc-top-left{
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.strc-top-right{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.strc-mid-full{ margin-bottom: 18px; }
@media (max-width: 960px){
  .strc-top-grid{ grid-template-columns: 1fr; }
}

/* Combined "Amenities Impact" card — single title, two equal-height
   columns side-by-side. Stacks vertically on mobile. */
.strc-impact-card{
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
[data-theme="dark"]  .strc-impact-card,
[data-theme="midnight"] .strc-impact-card{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
/* Up-front explanation of what "Top 25%" and "Bottom 25%" actually
   mean — used to be a tiny gray sub-note nobody could read. Now sits
   in its own banner with colored tags matching the bar colors below
   so the reader can map the words to the bars at a glance. */
.strc-impact-explain{
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--ink-2);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.strc-impact-explain strong{ color: var(--ink); font-weight: 700; }
.strc-impact-tag-top,
.strc-impact-tag-bot{
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.strc-impact-tag-top{ background: rgba(5,150,105,0.18);  color: var(--pos);  }
.strc-impact-tag-bot{ background: rgba(245,158,11,0.18); color: var(--warn-strong);     }
[data-theme="dark"]  .strc-impact-explain,
[data-theme="midnight"] .strc-impact-explain{
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}
[data-theme="dark"]  .strc-impact-tag-bot,
[data-theme="midnight"] .strc-impact-tag-bot{
  background: rgba(245,158,11,0.22); color: var(--warn);
}
.strc-impact-cols{
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.5fr);
  gap: 24px;
  align-items: stretch;
}
.strc-impact-col{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.strc-impact-col-head{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
@media (max-width: 960px){
  .strc-impact-cols{ grid-template-columns: 1fr; }
}

/* Market Analysis section wrapper — title, then trend card full-width,
   then a 2-up grid with seasonality on the left and RIX on the right.
   The 2-up grid prevents the heatmap and RIX from over-stretching to
   panel width (which made the RIX bars look like horizontal rectangles
   and the heatmap cells too wide to be readable). */
.strc-mkt-section{ display: flex; flex-direction: column; gap: 14px; }
.strc-mkt-section-head{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 4px 6px;
}
.strc-mkt-section-title{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.strc-mkt-section-sub{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-3);
}
.strc-mkt-card{
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
[data-theme="dark"]  .strc-mkt-card,
[data-theme="midnight"] .strc-mkt-card{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
/* 2-up grid: seasonality (left) + RIX (right). Collapses to single
   column on narrow viewports so neither shape gets squashed. */
.strc-mkt-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.strc-mkt-grid > .strc-mkt-card{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (max-width: 960px){
  .strc-mkt-grid{ grid-template-columns: 1fr; }
}
/* Hide the redundant .strc-rix wrapper border since the sub-card
   already provides the frame. */
.strc-mkt-card .strc-rix{
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.strc-mkt-card .strc-season{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* Range-aware headline insight at the top of the trend card. */
.strc-mkt-insight{
  margin: 6px 0 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--ink-2);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.strc-mkt-insight strong{ color: var(--ink); font-weight: 700; }
[data-theme="dark"]  .strc-mkt-insight,
[data-theme="midnight"] .strc-mkt-insight{
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}

/* Metric switcher above the map */
.strc-map-bar{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.strc-metric-switcher{
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
[data-theme="dark"] .strc-metric-switcher,
[data-theme="midnight"] .strc-metric-switcher{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.strc-metric-switcher button{
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.strc-metric-switcher button:hover{ color: var(--ink); }
.strc-metric-switcher button.is-active{
  background: var(--surface-solid, #fff);
  color: var(--accent-ink, #2E8B3A);
  box-shadow: 0 1px 3px rgba(17,21,28,0.14);
}
[data-theme="dark"] .strc-metric-switcher button.is-active,
[data-theme="midnight"] .strc-metric-switcher button.is-active{
  background: rgba(255,255,255,0.14);
  color: var(--on-dark);
}

.strc-map-legend{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-left: auto;
}
.strc-legend-grad{
  display: inline-block;
  width: 140px;
  height: 8px;
  border-radius: 999px;
  /* Matches colorForNormalized() in str-comps-panel.js: single hue
     (red 0°) with lightness sweeping from 88% (low) to 32% (high). */
  background: linear-gradient(90deg,
    hsl(0, 72%, 88%) 0%,
    hsl(0, 72%, 60%) 50%,
    hsl(0, 72%, 32%) 100%);
}

.strc-map{
  flex: 1;
  min-height: 460px;
  height: 460px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}
@media (max-width: 960px){
  .strc-map{ min-height: 320px; height: 320px; }
}

/* Comp-derived distribution box plots — replaces the redundant
   market percentile cards. Pure HTML/CSS, no Chart.js needed for
   this; small enough to render fast even with 50+ comps. */
.strc-distrib{
  padding: 18px 20px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
[data-theme="dark"] .strc-distrib,
[data-theme="midnight"] .strc-distrib{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.strc-distrib-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.strc-distrib-kicker{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.strc-distrib-sub{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-4);
}
.strc-box-row{
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}
.strc-box-row:last-child{ border-bottom: none; }
.strc-box-row:first-child{ padding-top: 10px; }
.strc-box-lbl{
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
}
.strc-box-track{
  position: relative;
  height: 34px;
  background: transparent;
  cursor: help;
  outline: none;
}
/* Horizontal whisker spanning min → max */
.strc-box-whisker{
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  background: var(--ink-3);
  transform: translateY(-50%);
  border-radius: 1.5px;
}
/* Vertical end caps — the "T" tops at each whisker's end */
.strc-box-cap{
  position: absolute;
  top: 18%; bottom: 18%;
  width: 3px;
  background: var(--ink-3);
  border-radius: 1.5px;
}
.strc-box-cap-min{ left: 0; }
.strc-box-cap-max{ right: 0; }
/* The interquartile-range box (p25 → p75) */
.strc-box-box{
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 5px;
  border: 2.5px solid;
  box-sizing: border-box;
}
/* Median tick — full track height for emphasis */
.strc-box-median{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--ink);
  transform: translateX(-2px);
  border-radius: 1.5px;
  pointer-events: none;
}
[data-theme="dark"] .strc-box-median,
[data-theme="midnight"] .strc-box-median{ background: var(--surface-solid); }

/* Labels strip — each tick sits at its actual value's x-position so
   the median number lines up under the median bar. */
.strc-box-vals{
  position: relative;
  height: 18px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 600;
}
.strc-box-tick{
  position: absolute;
  top: 0;
  white-space: nowrap;
}
.strc-box-tick-min{ left: 0; }
.strc-box-tick-max{ right: 0; }
.strc-box-tick-med{
  transform: translateX(-50%);
  color: var(--ink);
  font-weight: 700;
}

/* Hover/focus tooltip — shows the full 5-number summary */
.strc-box-tip{
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 14px;
  row-gap: 5px;
  padding: 10px 14px;
  background: var(--surface-solid);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
  z-index: 12;
}
.strc-box-tip::after{
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--surface-solid);
  filter: drop-shadow(0 1px 0 var(--line));
}
.strc-box-tip > div{ display: contents; }
.strc-box-tip span{
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10.5px;
  font-weight: 600;
}
.strc-box-tip strong{
  text-align: right;
  font-weight: 700;
}
.strc-box-track:hover .strc-box-tip,
.strc-box-track:focus .strc-box-tip,
.strc-box-track:focus-visible .strc-box-tip{
  opacity: 1;
  transform: translate(-50%, 0);
}

.strc-empty-block{
  padding: 18px 20px;
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: 12px;
}
[data-theme="dark"] .strc-empty-block,
[data-theme="midnight"] .strc-empty-block{
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.10);
}

/* Market Analysis card — plan-gated trend block (Explorer/Investor see
   the locked variant; Pro/Elite see the click-to-load CTA, then a
   sparkline triplet once the AirRoi /markets fan-out resolves). */
.strc-mkt{
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
[data-theme="dark"] .strc-mkt,
[data-theme="midnight"] .strc-mkt{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.strc-mkt-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.strc-mkt-kicker{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.strc-mkt-sub{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-4);
}
.strc-mkt-lock{
  font-size: 14px;
  color: var(--ink-4);
}

/* Locked variant — feature pitch for Explorer + Investor */
.strc-mkt-locked{
  border-style: dashed;
}
.strc-mkt-pitch-title{
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.strc-mkt-pitch-list{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.7;
}
.strc-mkt-pitch-list li{
  position: relative;
  padding-left: 18px;
}
.strc-mkt-pitch-list li::before{
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-ink);
  font-weight: 700;
}
.strc-mkt-upgrade{
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-fill);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.strc-mkt-upgrade:hover{ filter: brightness(1.08); }
.strc-mkt-upgrade:active{ transform: translateY(1px); }

/* CTA variant — Pro/Elite, before they've fired the paid call */
.strc-mkt-cta-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.strc-mkt-cta-msg{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.strc-mkt-pull{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-2);
  background: var(--surface-solid);
  border: 1px solid rgba(126,232,106,0.34);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.strc-mkt-pull:hover{
  background: var(--accent-soft);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}
[data-theme="dark"] .strc-mkt-pull,
[data-theme="midnight"] .strc-mkt-pull{
  background: rgba(255,255,255,0.04);
  color: color-mix(in srgb, var(--accent) 32%, white);
}

/* CTA + locked variants share a two-column layout: pitch text on the
   left, blurred sparkline preview on the right (so the locked state
   hints at what the upgrade unlocks, and the CTA state shows what
   will appear after the user clicks). Collapses on narrow widths. */
.strc-mkt-cta-layout{
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(180px, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 720px){
  .strc-mkt-cta-layout{ grid-template-columns: 1fr; gap: 16px; }
}
.strc-mkt-preview{
  position: relative;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-solid);
  border: 1px dashed var(--line);
  overflow: hidden;
  min-height: 180px;
  display: flex;
  align-items: center;
}
.strc-mkt-preview.is-cta{
  /* When user already has access, no veil — just a faint hint of the
     incoming chart shape. Light blur so it still reads as a preview. */
  opacity: 0.55;
}
[data-theme="dark"]  .strc-mkt-preview,
[data-theme="midnight"] .strc-mkt-preview{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
.strc-mkt-preview-rows{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  filter: blur(2.5px);
}
.strc-mkt-preview.is-cta .strc-mkt-preview-rows{ filter: blur(1.2px); }
.strc-mkt-preview-row{
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 8px;
}
.strc-mkt-preview-lbl{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 700;
}
.strc-mkt-preview-spark{
  width: 100%;
  height: 44px;
  display: block;
  filter: drop-shadow(0 0 3px currentColor);
}
.strc-mkt-preview-veil{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 70%, transparent),
    color-mix(in srgb, var(--surface-2) 95%, transparent));
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
[data-theme="dark"]  .strc-mkt-preview-veil,
[data-theme="midnight"] .strc-mkt-preview-veil{
  background: linear-gradient(180deg,
    rgba(15,23,42,0.62),
    rgba(15,23,42,0.85));
  color: #e2e8f0;
}

/* Loading skeleton bars */
.strc-mkt-skeleton{
  height: 18px;
  margin: 8px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 0%, var(--surface-solid) 50%, var(--line) 100%);
  background-size: 200% 100%;
  animation: strc-skel 1.4s linear infinite;
}
@keyframes strc-skel{
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Summary strip — current market values + subject-delta chip */
.strc-mkt-summary{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.strc-mkt-chip{
  padding: 8px 10px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.strc-mkt-chip-lbl{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.strc-mkt-chip-val{
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.strc-mkt-chip-delta{
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 1px;
}
.strc-mkt-chip-delta.is-up{   color: var(--pos); }
.strc-mkt-chip-delta.is-down{ color: var(--neg); }
.strc-mkt-chip-aux{
  background: transparent;
  border-style: dashed;
}
[data-theme="dark"] .strc-mkt-chip,
[data-theme="midnight"] .strc-mkt-chip{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
@media (max-width: 700px){
  .strc-mkt-summary{ grid-template-columns: repeat(2, 1fr); }
}

/* Plain-language headline */
.strc-mkt-insight{
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--surface-2);
  border-left: 3px solid var(--ink-2);
  border-radius: 0 8px 8px 0;
}
[data-theme="dark"] .strc-mkt-insight,
[data-theme="midnight"] .strc-mkt-insight{
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}

/* Data variant — three rows, each: label · (sparkline + x-axis) · latest + YoY + min/max */
.strc-trend-row{
  display: grid;
  grid-template-columns: 110px 1fr auto;
  column-gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.strc-trend-row:hover{ background: var(--surface-solid); }
[data-theme="dark"] .strc-trend-row:hover,
[data-theme="midnight"] .strc-trend-row:hover{ background: rgba(255,255,255,0.04); }
.strc-trend-row.strc-trend-empty{ cursor: default; grid-template-columns: 110px 1fr; }
.strc-trend-row.strc-trend-empty:hover{ background: transparent; }
.strc-trend-row:last-child{ border-bottom: none; }
.strc-trend-lbl{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
}
.strc-trend-body{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.strc-trend-chart{
  height: 80px;                       /* was 40px — taller so trend variation reads */
  width: 100%;
  position: relative;
}
.strc-spark-svg{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  color: var(--ink);
}
/* Glow on the smoothed sparkline — replaces the area-under-curve fill,
   which looked odd when early-month values sat at the baseline (fill
   only showed up on the right half of the chart). */
.strc-spark-line{
  filter: drop-shadow(0 0 3px var(--spark-stroke)) drop-shadow(0 0 6px var(--spark-stroke));
  opacity: 0.95;
}
[data-theme="dark"]  .strc-spark-line,
[data-theme="midnight"] .strc-spark-line{
  filter: drop-shadow(0 0 4px var(--spark-stroke)) drop-shadow(0 0 9px var(--spark-stroke));
}
/* Raw monthly underlay — thin and faint so it stays in the background
   without competing with the smoothed trend line on top. The dashed
   pattern visually distinguishes it from the smoothed line in
   addition to the opacity contrast. */
.strc-spark-line-raw{
  opacity: 0.42;
  stroke-dasharray: 3,2;
}
[data-theme="dark"]  .strc-spark-line-raw,
[data-theme="midnight"] .strc-spark-line-raw{
  opacity: 0.55;
}
/* Per-month hit rects — invisible hover targets for the custom JS
   tooltip. Cursor changes so the user knows the chart is interactive.
   No hover fill — the visible cursor dot + tooltip already signal
   that the chart heard the hover (was painting a faint vertical
   strip under each hovered month, which looked like a stray box). */
.strc-spark-hit{ cursor: crosshair; }
/* Endpoint dot (latest point) — HTML overlay so it stays a perfect
   circle regardless of how the SVG stretches horizontally. */
.strc-spark-endpoint{
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--surface-solid);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  pointer-events: none;
}
/* Hover cursor dot — same trick. Positioned in JS via top/left % */
.strc-spark-cursor{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--surface-solid);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
  pointer-events: none;
  transition: left 0.06s, top 0.06s;
}
.strc-spark-cursor[hidden]{ display: none; }
[data-theme="dark"]  .strc-spark-endpoint,
[data-theme="midnight"] .strc-spark-endpoint,
[data-theme="dark"]  .strc-spark-cursor,
[data-theme="midnight"] .strc-spark-cursor{
  border-color: var(--surface-2);
}
/* X-axis label strip — bigger fonts, was unreadable at 9.5px */
.strc-trend-axis{
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding: 4px 2px 0;
}
/* Right-side values column — labeled rows so users can tell at a
   glance which numbers change with the time-range toggle. Sized to be
   readable without monopolizing the chart's horizontal real estate. */
.strc-trend-nums{
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: baseline;
  min-width: 160px;
  white-space: nowrap;
  align-self: center;
}
.strc-trend-num-row{
  display: contents;
}
.strc-trend-num-lbl{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-weight: 500;
}
.strc-trend-num-lbl em{
  font-style: normal;
  font-size: 10px;
  color: var(--ink-4);
  margin-left: 3px;
}
.strc-trend-num-val{
  text-align: right;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.strc-trend-num-val.is-up{   color: var(--pos); }
.strc-trend-num-val.is-down{ color: var(--neg); }
.strc-trend-empty{
  color: var(--ink-4);
  font-family: var(--font-display);
  font-size: 12.5px;
}
.strc-trend-empty-msg{ font-style: italic; }

/* Seasonality heatmap — 12 months × N years grid. Each cell shows
   that month's share of the year's revenue as % + intensity bucket.
   Reveals peak-month shifts that a flat-averaged bar chart hides.
   Uses the Revenue indigo palette consistent with rest of panel. */
.strc-season{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.strc-season-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.strc-season-kicker{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.strc-season-sub{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-4);
}
/* Seasonality heatmap: clean white card + a single-hue green sequential scale
   (faint → rich brand green) so intensity reads at a glance without a heavy
   dark block. Low cells use dark text; the strongest cells flip to white. */
.strc-heat-grid{
  display: grid;
  grid-template-columns: 48px repeat(12, 1fr);
  gap: 4px;
  background: var(--surface);
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.strc-heat-corner{
  /* empty corner cell — left column × month-label row */
}
.strc-heat-month-lbl{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: center;
  font-weight: 600;
  padding: 6px 0 2px;
  letter-spacing: 0.04em;
}
.strc-heat-year-lbl{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  text-align: right;
  padding: 0 10px;
  align-self: center;
  font-weight: 700;
}
.strc-heat-cell{
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  padding: 10px 0;
  border-radius: 4px;
  cursor: help;
  color: var(--ink-2);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.strc-heat-cell:hover{
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(15,23,42,0.20);
  position: relative;
  z-index: 2;
}
/* Five intensity buckets — rich brand green (#2E8B3A) at increasing opacity
   on white; the two strongest flip to white text for contrast. */
.strc-heat-cell.is-vlow{ background: rgba(46,139,58,0.10); color: var(--ink-3); }
.strc-heat-cell.is-low { background: rgba(46,139,58,0.26); color: var(--ink-2); }
.strc-heat-cell.is-mid { background: rgba(46,139,58,0.46); color: var(--ink); }
.strc-heat-cell.is-high{ background: rgba(46,139,58,0.70); color: #ffffff; }
.strc-heat-cell.is-peak{ background: rgba(46,139,58,0.92); color: #ffffff; font-weight: 800; }
.strc-heat-trend{
  margin-top: 10px;
  padding: 8px 10px;
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--surface-2);
  border-left: 3px solid var(--ink-2);
  border-radius: 0 6px 6px 0;
}
.strc-heat-trend strong{ color: var(--ink); }
[data-theme="dark"] .strc-heat-trend,
[data-theme="midnight"] .strc-heat-trend{
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}

/* Inline time-range toggle on the Market Analysis header — same
   shape as the modal's range toggle, just smaller. */
.strc-mkt-range{
  display: inline-flex;
  margin-left: auto;
  align-self: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
}
.strc-mkt-range-btn{
  padding: 3px 10px;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 999px;
  letter-spacing: 0.02em;
  transition: all 0.12s ease;
}
.strc-mkt-range-btn.is-active{
  background: var(--ink-2);
  color: var(--on-dark);
}
[data-theme="dark"] .strc-mkt-range,
[data-theme="midnight"] .strc-mkt-range{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

/* Custom hover tooltip for the sparklines — replaces the unreliable
   native <title> tooltips. Now a small card with one row for the raw
   monthly value and one row for the smoothed value, so users can see
   at a glance how much smoothing is shifting the visible line. */
.strc-trend-tooltip{
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 7px 10px;
  background: var(--ink);
  color: var(--surface-solid);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 6px;
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  min-width: 130px;
}
.strc-trend-tooltip[hidden]{ display: none; }
.strc-tip-hdr{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  text-align: center;
}
.strc-tip-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.35;
}
.strc-tip-key{
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  font-weight: 600;
}
.strc-tip-key.is-raw{ color: #fcd34d; }
.strc-tip-key.is-smoothed{ color: #93c5fd; }
.strc-tip-val{
  font-size: 12.5px;
  font-weight: 700;
}
[data-theme="dark"]  .strc-trend-tooltip,
[data-theme="midnight"] .strc-trend-tooltip{
  background: var(--surface-solid);
  color: var(--ink);
  border: 1px solid var(--line);
}
[data-theme="dark"]  .strc-tip-hdr,
[data-theme="midnight"] .strc-tip-hdr{
  border-bottom-color: var(--line);
}

/* Legend at the top of the trend card — explains the two line styles
   so users know smoothed is the trend and raw is the ground truth. */
.strc-spark-legend{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 4px;
  padding: 6px 10px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
}
[data-theme="dark"]  .strc-spark-legend,
[data-theme="midnight"] .strc-spark-legend{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.strc-spark-legend-item{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.strc-spark-legend-swatch{
  display: inline-block;
  width: 24px;
  height: 0;
  border-top-style: solid;
  border-top-width: 2.5px;
  border-color: var(--ink-2);
}
.strc-spark-legend-swatch.is-raw{
  border-top-width: 1.5px;
  border-top-style: dashed;
  opacity: 0.55;
}
.strc-spark-legend-lbl{ letter-spacing: 0.02em; font-weight: 600; }

/* RIX (Risk Index) — between trend rows and seasonality heatmap.
   Current year's score on the left, 5-year per-year mini bars on the
   right, plain-English trend note below. */
.strc-rix{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-solid);
}
[data-theme="dark"]  .strc-rix,
[data-theme="midnight"] .strc-rix{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
/* RIX header: title + explanation read as one sentence on the same
   row, so users get the definition before they look at the number. */
.strc-rix-head{
  margin-bottom: 14px;
}
.strc-rix-title{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.strc-rix-kicker{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.strc-rix-explain{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
  flex: 1 1 280px;
}
.strc-rix-body{
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 16px;
  align-items: center;
}
.strc-rix-current{
  text-align: center;
  padding: 4px 6px 0;
}
.strc-rix-chart{
  min-width: 0;
  /* SVG inside scales with this container but preserves its own
     aspect ratio via xMidYMid meet — bars stay vertical no matter
     how wide the parent gets. */
}
.strc-rix-now-val{
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
}
.strc-rix-now-val.is-low   { color: var(--pos); }
.strc-rix-now-val.is-mid   { color: var(--warn); }
.strc-rix-now-val.is-high  { color: #ea580c; }
.strc-rix-now-val.is-vhigh { color: var(--neg); }
.strc-rix-now-scale{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-4);
  margin-left: 2px;
  font-weight: 500;
}
.strc-rix-now-lbl{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 6px;
  font-weight: 600;
}
/* 5-year change chip — lives under the current-year score */
.strc-rix-delta-chip{
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.strc-rix-delta-chip.is-up{   color: var(--neg); border-color: rgba(220,38,38,0.30); }
.strc-rix-delta-chip.is-down{ color: var(--pos); border-color: rgba(5,150,105,0.30); }

/* RIX vertical bar chart. Aspect ratio is set by the SVG viewBox
   (360 × 220) plus preserveAspectRatio="xMidYMid meet" — the bars
   never deform horizontally, regardless of container width. Soft
   background bands tint the Low / Mid / High zones so even without
   reading the guide labels you can see what each bar height means. */
.strc-rix-svg{
  width: 100%;
  height: auto;
  max-height: 260px;
  display: block;
  overflow: visible;
}
.strc-rix-grid{
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3,3;
}
.strc-rix-grid-lbl{
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.04em;
}
[data-theme="dark"]  .strc-rix-grid,
[data-theme="midnight"] .strc-rix-grid{ stroke: rgba(255,255,255,0.12); }
[data-theme="dark"]  .strc-rix-grid-lbl,
[data-theme="midnight"] .strc-rix-grid-lbl{ fill: var(--ink-3); }
.strc-rix-band{ opacity: 0.55; }
.strc-rix-band.is-low { fill: rgba(5,150,105,0.10);  }
.strc-rix-band.is-mid { fill: rgba(217,119,6,0.10);  }
.strc-rix-band.is-high{ fill: rgba(220,38,38,0.10);  }
[data-theme="dark"]  .strc-rix-band,
[data-theme="midnight"] .strc-rix-band{ opacity: 0.7; }
.strc-rix-bar{ stroke: rgba(0,0,0,0.10); stroke-width: 0.75; }
.strc-rix-bar.is-low  { fill: rgba(5,150,105,0.85);  }
.strc-rix-bar.is-mid  { fill: rgba(217,119,6,0.90);  }
.strc-rix-bar.is-high { fill: rgba(234,88,12,0.90);  }
.strc-rix-bar.is-vhigh{ fill: rgba(220,38,38,0.95);  }
.strc-rix-bar-lbl{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  fill: var(--ink);
}
.strc-rix-bar-year{
  font-family: var(--font-mono);
  font-size: 11.5px;
  fill: var(--ink-2);
  letter-spacing: 0.04em;
  font-weight: 600;
}
/* Trendline + dots over the bar tops — helps the eye see whether
   year-over-year direction is rising, falling, or flat. */
.strc-rix-trendline{
  stroke: var(--ink-2);
  stroke-dasharray: 4,3;
  opacity: 0.75;
}
.strc-rix-trenddot{
  fill: var(--ink);
  stroke: var(--surface-solid);
  stroke-width: 1.5;
}
[data-theme="dark"]  .strc-rix-trendline,
[data-theme="midnight"] .strc-rix-trendline{ stroke: rgba(255,255,255,0.55); }
[data-theme="dark"]  .strc-rix-trenddot,
[data-theme="midnight"] .strc-rix-trenddot{ stroke: var(--surface-2); }
.strc-rix-note{
  margin-top: 12px;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--surface-2);
  border-left: 3px solid var(--ink-2);
  border-radius: 0 6px 6px 0;
}
.strc-rix-note strong{ color: var(--ink); }
[data-theme="dark"]  .strc-rix-note,
[data-theme="midnight"] .strc-rix-note{
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}
@media (max-width: 720px){
  .strc-rix-body{ grid-template-columns: 1fr; gap: 14px; }
}

/* Amenity / review impact analysis — computed from the already-pulled
   comp set, no API cost. Layered card: amenity-lift bars, rating-axis
   correlation strip, deal insights bullets. */
.strc-impact{
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
[data-theme="dark"] .strc-impact,
[data-theme="midnight"] .strc-impact{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.strc-impact-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.strc-impact-kicker{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.strc-impact-sub-note{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-4);
}
.strc-impact-sub{
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed var(--line);
}
.strc-impact-sub:first-of-type{
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.strc-impact-subhead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.strc-impact-empty{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-4);
  padding: 8px 0;
}

/* Amenity impact tables — one section for "lifts ADR", one for
   "lowers ADR". Each row spells out the comparison: how many comps
   have it, ADR with vs without, the delta, and occupancy shift.
   Plain language over abstract bars. */
.strc-amen-section{
  margin-bottom: 14px;
}
.strc-amen-section:last-child{ margin-bottom: 0; }
.strc-amen-section-head{
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.strc-amen-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: var(--font-display);
}
.strc-amen-table thead th{
  text-align: left;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  background: var(--surface-solid);
}
[data-theme="dark"] .strc-amen-table thead th,
[data-theme="midnight"] .strc-amen-table thead th{
  background: rgba(255,255,255,0.03);
}
.strc-amen-table tbody td{
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: middle;
}
.strc-amen-table tbody tr:last-child td{ border-bottom: none; }
.strc-amen-table tbody tr:hover td{ background: var(--surface-solid); }
[data-theme="dark"] .strc-amen-table tbody tr:hover td,
[data-theme="midnight"] .strc-amen-table tbody tr:hover td{
  background: rgba(255,255,255,0.03);
}
.strc-amen-cell-name{
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strc-amen-cell-n{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.strc-amen-cell-adr{
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  text-align: right;
}
.strc-amen-cell-delta{
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}
.strc-amen-cell-delta.is-up{   color: var(--pos); }
.strc-amen-cell-delta.is-down{ color: var(--neg); }
.strc-amen-cell-occ{
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  text-align: right;
}
.strc-amen-cell-occ .is-up{   color: var(--pos); font-weight: 600; }
.strc-amen-cell-occ .is-down{ color: var(--neg); font-weight: 600; }
.strc-amen-dim{ color: var(--ink-4); }
/* "Link to higher revenue" column — visual bar showing relative
   strength. Wider bar = stronger pattern. Uses the same indigo as
   the Revenue series in the box plots + sparklines + trend modal,
   so all revenue-themed bars on the panel read as one family. */
.strc-amen-cell-link{
  min-width: 120px;
  padding-right: 12px;
}
.strc-amen-link-track{
  display: block;
  height: 10px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.strc-amen-link-bar{
  display: block;
  height: 100%;
  background: rgba(126,232,106,0.65);     /* matches box-plot Revenue indigo */
  border-radius: 999px;
}
[data-theme="dark"] .strc-amen-link-track,
[data-theme="midnight"] .strc-amen-link-track{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
/* Lopsided-sample warning chip — appears next to the amenity name
   when one side has < 5 comps. Hover reveals the explanation. */
.strc-amen-warn{
  color: var(--warn);
  cursor: help;
  font-size: 11px;
  margin-left: 2px;
}
.strc-amen-table tr.is-unbalanced .strc-amen-cell-delta{
  opacity: 0.75;
  font-style: italic;
}

/* Quartile performance bars — top 25% vs bottom 25% on ADR / Occ /
   Revenue. Two stacked horizontal bars per metric, scaled relative
   to the larger of the two values so the proportion reads true. */
.strc-quart-bars{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.strc-quart-metric{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.strc-quart-metric-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.strc-quart-metric-lbl{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.strc-quart-metric-lift{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--pos);
  font-weight: 700;
}
.strc-quart-bar-row{
  display: grid;
  grid-template-columns: 88px 1fr 80px;
  align-items: center;
  column-gap: 10px;
  font-size: 12px;
}
.strc-quart-bar-tag{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 4px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.strc-quart-bar-tag.is-top{ background: rgba(5,150,105,0.18);   color: var(--pos);      }
.strc-quart-bar-tag.is-bot{ background: rgba(245,158,11,0.18);  color: var(--warn-strong);         }
[data-theme="dark"]  .strc-quart-bar-tag.is-bot,
[data-theme="midnight"] .strc-quart-bar-tag.is-bot{
  background: rgba(245,158,11,0.20); color: var(--warn);
}
.strc-quart-bar-track{
  position: relative;
  height: 16px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.strc-quart-bar{
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.strc-quart-bar.is-top{ background: rgba(5,150,105,0.70);  }
.strc-quart-bar.is-bot{ background: rgba(245,158,11,0.70); }
.strc-quart-bar-val{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
[data-theme="dark"] .strc-quart-bar-track,
[data-theme="midnight"] .strc-quart-bar-track{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

/* Rating-axis correlation chips — 2 or 3 cols depending on width */
.strc-rate-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
@media (max-width: 600px){
  .strc-rate-grid{ grid-template-columns: repeat(2, 1fr); }
}
.strc-rate-chip{
  padding: 8px 10px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.strc-rate-chip-axis{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.strc-rate-chip-r{
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.strc-rate-chip.is-strong{ border-color: var(--ink-2); }
.strc-rate-chip.is-strong .strc-rate-chip-r{ color: var(--ink-2); }
.strc-rate-chip.is-mild .strc-rate-chip-r{ color: var(--ink-2); }
.strc-rate-chip.is-weak  { opacity: 0.6; }
.strc-rate-chip.is-weak .strc-rate-chip-r{ color: var(--ink-3); }
[data-theme="dark"] .strc-rate-chip,
[data-theme="midnight"] .strc-rate-chip{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

/* Insights bullets */
.strc-impact-insights .strc-impact-subhead{ margin-bottom: 6px; }
.strc-insight-list{
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.strc-insight-list li{
  position: relative;
  padding: 6px 0 6px 22px;
  border-bottom: 1px dotted var(--line);
}
.strc-insight-list li:last-child{ border-bottom: none; }
.strc-insight-list li::before{
  content: '\2022';
  position: absolute;
  left: 6px;
  top: 6px;
  color: var(--accent-ink);
  font-weight: 700;
}
.strc-insight-list strong{ color: var(--ink); font-weight: 700; }
.strc-insight-cta{ color: var(--ink-3); font-style: italic; }
.strc-insight-warn{
  display: block;
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--warn-soft);
  border-left: 2px solid var(--warn);
  border-radius: 0 4px 4px 0;
  color: var(--ink-2);
  font-size: 11.5px;
  font-style: italic;
}
.strc-insight-list li.has-warn::before{ content: ''; }

/* Loading shells on the left column while data is in flight */
.strc-hero.strc-hero-loading,
.strc-market-loading{
  padding: 22px 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-3);
}
[data-theme="dark"] .strc-hero.strc-hero-loading,
[data-theme="dark"] .strc-market-loading,
[data-theme="midnight"] .strc-hero.strc-hero-loading,
[data-theme="midnight"] .strc-market-loading{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

/* Bottom comps-list section sits below the 2-col grid */
.strc-bottom{
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
[data-theme="dark"] .strc-bottom,
[data-theme="midnight"] .strc-bottom{ border-top-color: rgba(255,255,255,0.10); }

.cmps-market-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.cmps-market-card{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cmpm-lbl{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.cmps-market-card strong{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.cmps-source{
  margin-top: 14px;
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 640px){
  .cmps-table{ font-size: 12px; }
  .cmps-table thead th,
  .cmps-table tbody td{ padding: 8px 6px; }
  .cmps-table .cmps-addr{ max-width: 140px; }
  /* Allow the comps table to scroll horizontally on narrow screens */
  .cmps-body{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* =================================================================
   MAX ALLOWABLE OFFER PANEL (P1-3)
================================================================= */
/* Per-strategy callout shown above the intro (e.g. "Based on the
   Aggressive refi scenario at 80% LTV"). Hidden when empty. */
.mao-strategy-note{
  /* Theme-aware surface + left accent stripe (matches the Summary
     block convention used across STR/BRRRR sections). */
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-2);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
html[data-theme="dark"] .mao-strategy-note,
html[data-theme="midnight"] .mao-strategy-note{
  background: var(--surface-solid);
  border-color: var(--line);
  border-left-color: var(--ink-2);
}
.mao-strategy-note[hidden]{ display: none; }
.mao-strategy-note strong{ color: var(--ink); font-weight: 600; }

/* Collapsible intro: click the question to expand the explanation */
.mao-intro-details{
  margin-bottom: 14px;
}
/* Quiet, understated help toggle (was a green pill — user disliked the eyebrow) */
.mao-intro-details > summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-radius: 8px;
  transition: color 0.15s ease;
}
.mao-intro-details > summary::-webkit-details-marker{ display: none; }
.mao-intro-details > summary:hover{
  color: var(--ink);
}
.mao-intro-details[open] > summary{
  color: var(--ink);
  font-weight: 600;
}
.mao-intro-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--line-2);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 11px;
}
.mao-intro-details > summary > span:nth-child(2){ display: inline; }
.mao-intro-details > .mao-intro{ margin-top: 10px; }

.mao-intro{
  background: linear-gradient(135deg, rgba(126,232,106,0.06) 0%, rgba(126,232,106,0.02) 100%);
  border: 1px solid rgba(126,232,106,0.20);
  border-left: 4px solid var(--ink-2);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
.mao-intro h4{
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.mao-intro p{
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 10px;
}
.mao-intro p em{
  color: var(--accent-ink);
  font-style: normal;
  font-weight: 500;
}
.mao-intro ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.mao-intro li{
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.mao-intro li::before{
  content: '→';
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--accent-ink);
  font-weight: 700;
}
.mao-intro li strong{ color: var(--ink); }
.mao-intro li em{ color: var(--accent-ink); font-style: normal; }

.mao-breakdown-help{
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.55;
  margin: 0 0 14px;
}
.mao-breakdown-help em{ color: var(--ink); font-style: normal; font-weight: 500; }
.mao-breakdown-help strong{ color: var(--accent-ink); }

.mao-card-head{
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);   /* charcoal — was washed-out --ink-3 gray */
  margin-bottom: 10px;
}
.mao-card-subhead{
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-2);
  margin: 12px 0 8px;
}

/* Scenario picker — radio row for selecting refi LTV used in MAO solve */
.mao-scenario-picker{
  background: rgba(245,158,11,0.05);
  border: 1px solid rgba(245,158,11,0.20);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.mao-scenario-label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.mao-scenario-options{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mao-scenario-opt{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-solid);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.mao-scenario-opt input{
  accent-color: var(--accent-ink);
  cursor: pointer;
}
.mao-scenario-opt:hover{
  border-color: var(--accent-ink);
  background: var(--accent-soft);
}
.mao-scenario-opt:has(input:checked){
  background: var(--accent-soft);
  border-color: var(--accent-ink);
  color: var(--accent-2);
  font-weight: 600;
}

/* Optional / advanced metrics — collapsible group toggled by a checkbox */
.mao-optional-toggle{
  margin: 16px 0 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.mao-optional-toggle label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.mao-optional-toggle input{
  width: 16px;
  height: 16px;
  accent-color: var(--accent-ink);
  cursor: pointer;
}
.mao-optional-body{
  margin-top: 8px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-radius: 10px;
}
.mao-optional-body[hidden]{ display: none; }
.mao-optional-note{
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.55;
  margin: 0 0 12px;
}
.mao-optional-note strong{ color: var(--ink); }
.mao-targets-card{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px 16px;
  margin-bottom: 18px;
}
.mao-targets-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px 22px;
  margin-bottom: 14px;
}
.mao-target{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mao-target-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.mao-target-head label{
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 500;
}
.mao-target-val{
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-ink);
  letter-spacing: -0.01em;
}

/* Styled HTML5 range input — charcoal thumb on a neutral rail (de-greened) */
.mao-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--line-2);
  outline: none;
  margin: 4px 0 2px;
  cursor: pointer;
}
.mao-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-2);
  /* Theme-aware ring so the charcoal thumb stays visible against the
     rail in light + dark + midnight. */
  border: 3px solid var(--surface-solid);
  box-shadow: 0 0 0 1px var(--line), 0 2px 8px -2px rgba(17,21,28,0.35);
  cursor: grab;
  transition: transform 0.15s ease;
}
.mao-slider::-webkit-slider-thumb:hover{ transform: scale(1.15); }
.mao-slider::-webkit-slider-thumb:active{ cursor: grabbing; transform: scale(1.20); }
.mao-slider::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 3px solid var(--surface-solid);
  box-shadow: 0 0 0 1px var(--line), 0 2px 8px -2px rgba(17,21,28,0.35);
  cursor: grab;
}
.mao-slider:focus-visible{
  box-shadow: 0 0 0 3px var(--line-2);
}
.mao-target-scale{
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 2px;
  font-family: var(--font-mono);
}
.mao-target-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.mao-reset-btn{
  font-size: 12px;
  padding: 6px 14px;
}

.mao-hero{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-2);
  border-radius: 12px;
  padding: 26px 22px;
  margin-bottom: 18px;
  text-align: center;
}
html[data-theme="dark"] .mao-hero,
html[data-theme="midnight"] .mao-hero{
  background: var(--surface-solid);
  border-color: var(--line);
  border-left-color: var(--ink-2);
}
.mao-hero-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--accent-2);
  margin-bottom: 6px;
}
.mao-hero-value{
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 4px 0 12px;
}
.mao-hero-constraint{
  font-size: 13px;
  color: var(--ink-2);
}
.mao-hero-constraint strong{ color: var(--accent-ink); }
.mao-hero-failed{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-left: 4px solid var(--neg);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
}
html[data-theme="dark"] .mao-hero-failed,
html[data-theme="midnight"] .mao-hero-failed{
  background: var(--surface-solid);
  border-color: var(--line);
  border-left-color: var(--neg);
}
.mao-hero-failed .mao-hero-label{ color: var(--neg); }
.mao-hero-failed .mao-hero-body{
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 6px;
}

/* "Targets are non-binding" — every target is satisfied even at $50M */
.mao-hero-loose{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
}
html[data-theme="dark"] .mao-hero-loose,
html[data-theme="midnight"] .mao-hero-loose{
  background: var(--surface-solid);
  border-color: var(--line);
  border-left-color: var(--warn);
}
.mao-hero-loose .mao-hero-label{ color: var(--warn); }
.mao-hero-value-soft{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 8px 0 10px;
}
.mao-hero-loose .mao-hero-body{
  font-size: 13px;
  color: var(--ink-2);
}

/* Stacked-bar visualization — each constraint's max price as a bar */
.mao-chart-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px 28px;
  margin-bottom: 18px;
}
.mao-chart{
  position: relative;
  margin-top: 8px;
  padding-bottom: 24px;
}
.mao-bar-row{
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.mao-bar-label{
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mao-bar-track{
  position: relative;
  height: 24px;
  background: var(--surface-2);
  border-radius: 6px;
  overflow: visible;
}
.mao-bar-fill{
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 6px;
  transition: width 0.22s ease;
}
.mao-bar-fill.is-binding{
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 2px 8px -2px rgba(126,232,106,0.40);
}
/* Slack tint must read clearly against --surface-2 (the track bg).
   --accent-soft (var(--accent-soft)) is too close to --surface-2 (var(--surface-2)) in
   light theme — the slack bars were nearly invisible. Use a tinted
   semi-transparent indigo instead. */
.mao-bar-fill.is-slack{
  background: rgba(126,232,106,0.32);
}
html[data-theme="dark"] .mao-bar-fill.is-slack,
html[data-theme="midnight"] .mao-bar-fill.is-slack{
  background: rgba(126,232,106,0.38);
}
.mao-bar-value{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  pointer-events: none;
}
.mao-bar-value.mao-bar-inf{
  color: var(--ink-3);
  font-weight: 500;
}

/* Stat strip below the bars — current price vs MAO + headroom */
.mao-chart-footer{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.mao-chart-stat{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mao-chart-stat span{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.mao-chart-stat strong{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.mao-chart-stat strong.is-pos{ color: var(--pos); }
.mao-chart-stat strong.is-neg{ color: var(--neg); }

@media (max-width: 640px){
  .mao-bar-row{ grid-template-columns: 1fr; }
  .mao-bar-label{ text-align: left; }
  .mao-chart-footer{ grid-template-columns: 1fr; gap: 8px; }
}

.mao-breakdown-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
}
.mao-breakdown{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mao-breakdown thead th{
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.mao-breakdown tbody td{
  padding: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.mao-breakdown tbody tr:last-child td{ border-bottom: none; }
.mao-row-binding td:nth-child(3){
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-ink);
}
.mao-row-slack td:nth-child(3){
  font-family: var(--font-mono);
  color: var(--ink);
}
.mao-row-bad td:nth-child(3){
  color: var(--neg);
}
.mao-status{
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.mao-status-binding{
  background: var(--accent-soft);
  color: var(--accent-2);
}
.mao-status-slack{
  background: var(--surface-2);
  color: var(--ink-3);
}
.mao-status-bad{
  background: var(--neg-soft);
  color: var(--neg);
}

.mao-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}
/* Apply button — REIzer BRAND green (bright --brand-fill #7EE86A + black glyph),
   the signature logo/CTA green. Explicit so it stays brand-bright in both themes
   and the hover is a clean green, not the global .calc's leftover blue. */
.mao-actions .calc{
  background: var(--brand-fill);
  color: var(--brand-ink);
}
.mao-actions .calc:hover:not(:disabled){
  background: color-mix(in srgb, var(--brand-fill) 88%, black);
  box-shadow: 0 4px 14px var(--brand-glow);
}
.mao-actions .calc[disabled]{
  opacity: 0.5;
  cursor: not-allowed;
}
.mao-note{
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 640px){
  .mao-hero-value{ font-size: 34px; }
  .mao-breakdown{ font-size: 12px; }
  .mao-breakdown thead th,
  .mao-breakdown tbody td{ padding: 8px 6px; }
}

/* =================================================================
   BRRRR PDF SCENARIO PICKER (P1-4)
   Modal that pops when the user clicks Export PDF on BRRRR, so they
   can pick which refi scenario the report should be based on.
================================================================= */
.bsp-overlay{
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bsp-scrim{
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bsp-card{
  position: relative;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px -24px rgba(15,23,42,0.30);
  width: min(560px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bsp-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.bsp-head h3{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.bsp-close{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.bsp-close:hover{
  border-color: var(--accent-ink);
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.bsp-sub{
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
  padding: 14px 22px 8px;
  line-height: 1.55;
}
.bsp-options{
  padding: 8px 22px 6px;
  overflow-y: auto;
}
.bsp-option{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.bsp-option:hover{
  border-color: var(--accent-ink);
  background: var(--accent-soft);
}
.bsp-option input[type="radio"]{
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent-ink);
  flex-shrink: 0;
}
.bsp-option:has(input:checked){
  border-color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px rgba(126,232,106,0.18);
}
.bsp-opt-body{ flex: 1; min-width: 0; }
.bsp-opt-head{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  margin-bottom: 4px;
}
.bsp-opt-head strong{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.bsp-ltv{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.bsp-tag{
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
}
.bsp-tag-winner{
  background: var(--pos-soft);
  color: var(--pos);
}
.bsp-opt-detail{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.bsp-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-solid);
}

/* ---------- brand-pick modal (scoped) ----------
   Reuses the .bsp-* scenario-picker shell, but these options hold prose,
   not numeric data — so drop the mono font for the clean sans, and follow
   the de-green rule: hover/select gets a neutral border + surface tint;
   green stays only on the radio control itself. */
.bsp-brand .bsp-opt-detail{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
}
.bsp-brand .bsp-option:hover{
  border-color: var(--ink-3);
  background: var(--surface);
}
/* Selected radio dot = bright brand green, not the rich-green --accent-ink. */
.bsp-brand .bsp-option input[type="radio"]{
  accent-color: var(--brand-fill);
}
.bsp-brand .bsp-option:has(input:checked){
  border-color: var(--ink-3);
  background: var(--surface);
  box-shadow: 0 0 0 2px rgba(15,23,42,0.08);
}
/* Primary CTA = bright brand green + black ink (the hero-CTA pattern),
   not the rich-green .calc fill. */
.bsp-brand .bsp-actions .calc{
  background: var(--brand-fill);
  color: var(--brand-ink);
}
.bsp-brand .bsp-actions .calc:hover:not(:disabled){
  background: color-mix(in srgb, var(--brand-fill), #000 8%);
}



/* =================================================================
   P0-5 · MOBILE RESPONSIVENESS
   Loaded last so it can override anything earlier in the cascade.
================================================================= */

/* ---------- Hamburger button (injected by auth.js) ---------- */
.platform-nav .nav-burger{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  order: 99;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.platform-nav .nav-burger:hover{
  border-color: var(--accent-ink);
  background: var(--accent-soft);
}

@media (max-width: 767px){
  /* Brand stays visible; tabs collapse behind hamburger */
  .platform-nav .nav-inner{
    padding: 12px 18px;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .platform-nav .nav-burger{
    display: inline-flex;
  }
  .platform-nav ul.tabs{
    display: none;
    width: 100%;
    order: 100;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    padding: 8px 0 12px;
    border-top: 1px solid var(--line);
  }
  .platform-nav.nav-open ul.tabs{
    display: flex;
  }
  .platform-nav ul.tabs li{ width: 100%; }
  .platform-nav ul.tabs a{
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: 14.5px;
    min-height: 44px;
  }
  /* Auth widget shrinks to just the avatar — hide the email text */
  .platform-nav .auth-widget .auth-email{ display: none; }
  .platform-nav .auth-widget .auth-chip{ padding: 6px 10px; min-height: 40px; }

  /* ---------- Bottom-sheet side panel ---------- */
  .side-panel{
    width: 100vw;
    height: 92vh;
    max-height: 92vh;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    border-left: none;
    border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px -12px rgba(126,232,106,0.22);
  }
  .side-panel.open{ transform: translateY(0); }
  .side-panel.wide{ width: 100vw; }
  /* Drag-handle visual at the top of the sheet */
  .side-panel::before{
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--line-2);
    pointer-events: none;
  }
  .side-panel .sp-head{
    padding: 18px 18px 14px;
  }
  .side-panel .sp-body{
    padding: 0 18px 24px;
  }

  /* ---------- Touch targets — bump small controls to >=44px ---------- */
  .side-panel .sp-close{ width: 44px; height: 44px; font-size: 24px; }
  .pw-toggle{ width: 48px; height: 44px; }
  .deal-card .dc-delete{ width: 44px; height: 44px; font-size: 18px; }
  /* Larger hit area around the deal-card checkbox via padding */
  .deal-card .dc-select{
    width: 22px;
    height: 22px;
    top: 12px;
    left: 12px;
  }
  /* Ensure form inputs are tall enough to tap (some are 30-36px today).
     NOT checkboxes/radios — 44px min-height turns an 18px-wide checkbox
     into a tall sliver; their whole label row is the tap target. */
  .grid input:not([type="checkbox"]):not([type="radio"]),
  .grid select,
  .grid textarea,
  .pf-form-grid input:not([type="checkbox"]):not([type="radio"]),
  .pf-form-grid select{
    min-height: 44px;
  }
  /* Give the label row the tap height instead */
  .checkbox-row{ min-height: 44px; }

  /* ---------- Form grids → single column at <640px ---------- */
}

@media (max-width: 640px){
  .pf-form-grid,
  .pf-form-grid-3,
  .pp-loan-grid,
  .pp-log-grid,
  .milestone-grid,
  .days-grid,
  .compare-grid{
    grid-template-columns: 1fr !important;
  }
  .stat-grid{ grid-template-columns: repeat(2, 1fr) !important; }

  /* Card padding — give content room on narrow screens */
  section.card{ padding: 18px 16px; }

  /* my-deals: card grid stacks; Compare button sticks to bottom */
  .deals-grid{ grid-template-columns: 1fr !important; }
  .deals-actions{
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(247,247,245,0.95) 30%);
    padding: 10px 0 12px;
    /* no negative margin — it pulled the first card up under this bar's
       translucent veil, washing out the card's top edge */
    margin-bottom: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5;
  }

  /* Compare matrix: horizontal scroll so the wide table doesn't break layout.
     Tooltip clipping is acceptable on mobile — content fits the viewport. */
  .compare-matrix{ padding: 18px 14px; }
  .compare-matrix .cm-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .compare-matrix .cm-scroll table{ white-space: nowrap; }
}

/* =================================================================
   SETTINGS PAGE (P1-7 Phase 5)
   ----------------------------------------------------------------
   Two-column layout: sidebar nav on the left, content area on the
   right. Each section renders as a stack of cards. Theme-aware so
   dark/midnight overrides at the bottom of this file can re-skin
   the entire surface without touching the markup.
================================================================= */

.settings-body{
  background: var(--surface-2);
  color: var(--ink);
  min-height: 100vh;
}

.settings-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 28px 64px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}

/* ----- Sidebar ----- */
.settings-sidebar{
  position: sticky;
  top: 88px;
  align-self: start;
}
.settings-sidebar-title{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 0 12px;
  margin-bottom: 18px;
}
.settings-nav{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-nav-item{
  position: relative;              /* anchors the .active accent bar */
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.settings-nav-item:hover{
  background: var(--accent-soft);
  color: var(--accent-2);
}
/* Matches the dashboard sidebar (.dash-item.is-active): neutral surface
   with a slim brand bar as the single green "you are here" cue, rather
   than a pale-green pill. */
.settings-nav-item.active{
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
}
.settings-nav-item.active::before{
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-fill);
}
.snav-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: currentColor;
  opacity: 0.8;
}
.snav-icon svg{ width: 100%; height: 100%; }

/* ----- Content area ----- */
.settings-content{ min-width: 0; }
.settings-section[hidden]{ display: none; }

.settings-h1{
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--ink);
}
.settings-lede{
  font-size: 15px;
  color: var(--ink-3);
  margin: 0 0 28px;
  line-height: 1.55;
}

/* ----- Cards (the building block for each section) ----- */
.settings-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 20px;
}
.settings-card-head{
  margin-bottom: 18px;
}
.settings-card-head h2{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.settings-card-head p{
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
}
.settings-card-danger{
  border-color: rgba(220, 38, 38, 0.25);
}
.settings-card-danger .settings-card-head h2{
  color: var(--neg-strong);
}
.settings-foot-note{
  font-size: 12px;
  color: var(--ink-3);
  margin: 16px 0 0;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: 8px;
}

/* Generic row used in Account / Billing */
.settings-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.settings-row:last-child{ border-bottom: none; }
.settings-row-label{
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
}
.settings-row-value{
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}
.settings-mono{ font-family: var(--font-mono); font-size: 12px; }

/* Buttons */
.settings-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, color .15s, background-color .15s;
}
.settings-btn:hover:not(:disabled){
  border-color: var(--accent-ink);
  color: var(--accent-2);
}
.settings-btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}
/* Brand green, matching every other primary button. Was a dark
   --accent -> --accent-2 gradient, which read as the old palette. */
.settings-btn-primary{
  background: var(--brand-fill);
  color: var(--brand-ink);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(126,232,106, 0.25);
}
.settings-btn-primary:hover:not(:disabled){
  background: color-mix(in srgb, var(--brand-fill), #000 8%);
}
.settings-btn-primary:hover:not(:disabled){
  background: linear-gradient(180deg, var(--accent-2), var(--accent-strong));
  color: var(--on-accent);
  border-color: transparent;
}
.settings-btn-danger{
  border-color: rgba(220, 38, 38, 0.35);
  color: var(--neg-strong);
  background: var(--surface-solid);
}
.settings-btn-danger:hover:not(:disabled){
  background: var(--neg-soft);
  color: var(--neg-strong);
  border-color: rgba(220, 38, 38, 0.55);
}

/* Inline message under a button (success/error) */
.settings-msg{
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.settings-msg-success{ background: var(--pos-soft); color: var(--pos-strong); border: 1px solid #6ee7b7; }
.settings-msg-error  { background: var(--neg-soft); color: var(--neg-strong); border: 1px solid #fca5a5; }

/* ----- PDF reports card ----- */
.settings-row-hint{
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}
.settings-input{
  width: 100%;
  max-width: 360px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.settings-input:focus{
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(126,232,106, 0.15);
}
.settings-switch{
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  cursor: pointer;
}
.settings-switch input{ opacity: 0; width: 0; height: 0; }
.settings-switch-track{
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 999px;
  transition: background 0.15s;
}
.settings-switch-track::before{
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: var(--surface-solid);
  border-radius: 50%;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(15,23,42,0.2);
}
.settings-switch input:checked + .settings-switch-track{
  background: var(--accent);
}
.settings-switch input:checked + .settings-switch-track::before{
  transform: translateX(18px);
}
.settings-card-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.settings-card-actions .settings-msg{ margin-top: 0; }
.pdf-logo-preview{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: var(--surface-2);
  margin-bottom: 8px;
}
.pdf-logo-preview img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.pdf-logo-empty{
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: center;
  padding: 8px;
}
.pdf-logo-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ----- Theme picker (General tab) ----- */
.theme-picker{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.theme-option{
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.theme-option:hover{
  border-color: var(--accent-ink);
  transform: translateY(-1px);
}
.theme-option.active{
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 4px rgba(126,232,106, 0.12);
}
.theme-swatch{
  position: relative;
  height: 60px;
  border-radius: 8px;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 6px;
}
.ts-bar{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
}
.ts-card{
  position: absolute;
  bottom: 8px; left: 8px; right: 8px;
  height: 22px;
  border-radius: 4px;
}
.theme-swatch-light{
  background: var(--bg);
}
.theme-swatch-light .ts-bar{ background: var(--surface-solid); border-bottom: 1px solid var(--line); }
.theme-swatch-light .ts-card{ background: var(--surface-solid); border: 1px solid var(--line); }
.theme-swatch-dark{
  background: #0f172a;
}
.theme-swatch-dark .ts-bar{ background: var(--ink-2); }
.theme-swatch-dark .ts-card{ background: var(--ink-2); border: 1px solid #334155; }
.theme-swatch-midnight{
  background: #000000;
}
.theme-swatch-midnight .ts-bar{ background: #0a0a0a; }
.theme-swatch-midnight .ts-card{ background: #111111; border: 1px solid #1f1f1f; }

.theme-name{
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.theme-desc{
  font-size: 11px;
  color: var(--ink-3);
}

/* ----- Billing: plan card ----- */
.billing-plan .bp-loading{
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
}
.bp-name{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bp-price{
  font-size: 14px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.bp-blurb{
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--ink-3);
}
.bp-actions{
  display: flex;
  gap: 10px;
}

/* ----- Invoices table ----- */
.settings-table-wrap{ overflow-x: auto; }
.settings-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.settings-table th{
  text-align: left;
  font-weight: 600;
  /* Inter, not mono: DATE / AMOUNT / STATUS read as leftovers beside the
     Inter body copy. Tighter tracking — Inter needs less than a mono face
     to hold uppercase together. */
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.settings-table td{
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.settings-table tr:last-child td{ border-bottom: none; }
.settings-table-num{ text-align: right; font-variant-numeric: tabular-nums; }
.settings-table-actions{ text-align: right; }
.settings-empty{
  text-align: center;
  color: var(--ink-3);
  font-style: italic;
  padding: 28px 12px !important;
}

.inv-status{
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.inv-status-paid  { background: var(--pos-soft); color: var(--pos-strong); }
.inv-status-open  { background: var(--warn-soft); color: var(--warn-strong); }
.inv-status-other { background: var(--surface-2); color: var(--ink-3); }
.inv-action{
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: none;
}
.inv-action:hover{ color: var(--accent-ink); text-decoration: underline; }
.inv-action-na{ color: var(--ink-4); }

/* ----- Usage tab ----- */
.usage-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.usage-card{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.usage-card-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.usage-card-title{
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.usage-card-value strong{
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.usage-card-value .uc-of{
  font-size: 12px;
  color: var(--ink-3);
}
.usage-bar{
  height: 6px;
  background: var(--surface);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin: 8px 0;
}
.usage-bar > div{
  height: 100%;
  transition: width .25s ease;
}
.usage-bar-ok    { background: var(--brand-fill); }
.usage-bar-warn  { background: var(--warn); }
.usage-bar-over  { background: var(--neg); }
.usage-blurb{
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
}
.usage-note{
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 6px;
  font-size: 12px;
}
.usage-note a{
  font-weight: 600;
  text-decoration: none;
}
.usage-note-warn{
  background: var(--warn-soft);
  color: var(--warn-strong);
}
.usage-note-warn a{ color: var(--warn-strong); }
.usage-note-over{
  background: var(--neg-soft);
  color: var(--neg-strong);
}
.usage-note-over a{ color: var(--neg-strong); }
.usage-note-blocked{
  background: var(--surface-2);
  color: var(--ink-3);
}
.usage-note-blocked a{ color: var(--accent-2); }

/* ----- Toast ----- */
.settings-toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 18px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  z-index: 1000;
  animation: settings-toast-in .2s ease-out;
}
.settings-toast.toast-success{ background: var(--pos-strong); }
.settings-toast.toast-error  { background: var(--neg-strong); }
@keyframes settings-toast-in{
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ----- Responsive ----- */
@media (max-width: 800px){
  .settings-wrap{
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 16px 48px;
  }
  .settings-sidebar{ position: static; }
  .settings-sidebar-title{ font-size: 20px; padding: 0 4px; }
  /* Keep the section nav VERTICAL on mobile — a horizontal scroll row hid the
     later tabs (Usage/PDF) off-screen. Full-width stacked items instead. */
  .settings-nav{ flex-direction: column; overflow-x: visible; padding-bottom: 0; }
  .settings-nav-item{ width: 100%; }
  .settings-card{ padding: 20px; }
  .theme-picker{ grid-template-columns: 1fr; }
  .usage-grid{ grid-template-columns: 1fr; }
}

/* =================================================================
   DARK + MIDNIGHT THEME OVERRIDES (settings page only for v1)
   ----------------------------------------------------------------
   These re-skin only the settings.html surface. The platform nav at
   the top stays its default look because we only swap variables
   inside .settings-body. Full app coverage in a follow-up.
================================================================= */
html[data-theme="dark"] .settings-body{
  background: var(--bg);
  color: #e2e8f0;
}
html[data-theme="dark"] .settings-body .settings-card,
html[data-theme="dark"] .settings-body .theme-option,
html[data-theme="dark"] .settings-body .settings-btn{
  background: var(--surface-2);
  border-color: var(--line);
  color: #e2e8f0;
}
html[data-theme="dark"] .settings-body .settings-h1,
html[data-theme="dark"] .settings-body .settings-card-head h2,
html[data-theme="dark"] .settings-body .settings-sidebar-title,
html[data-theme="dark"] .settings-body .settings-row-value,
html[data-theme="dark"] .settings-body .theme-name,
html[data-theme="dark"] .settings-body .usage-card-title,
html[data-theme="dark"] .settings-body .usage-card-value strong{
  color: var(--ink);
}
html[data-theme="dark"] .settings-body .settings-lede,
html[data-theme="dark"] .settings-body .settings-row-label,
html[data-theme="dark"] .settings-body .settings-card-head p,
html[data-theme="dark"] .settings-body .theme-desc,
html[data-theme="dark"] .settings-body .bp-price,
html[data-theme="dark"] .settings-body .bp-blurb,
html[data-theme="dark"] .settings-body .usage-blurb,
html[data-theme="dark"] .settings-body .uc-of{
  color: var(--ink-3);
}
html[data-theme="dark"] .settings-body .settings-nav-item{ color: var(--ink-2); }
html[data-theme="dark"] .settings-body .settings-nav-item:hover,
html[data-theme="dark"] .settings-body .settings-nav-item.active{
  background: rgba(126,232,106, 0.18);
  color: color-mix(in srgb, var(--accent) 32%, white);
}
html[data-theme="dark"] .settings-body .settings-row,
html[data-theme="dark"] .settings-body .settings-table th,
html[data-theme="dark"] .settings-body .settings-table td,
html[data-theme="dark"] .settings-body .usage-card,
html[data-theme="dark"] .settings-body .usage-bar{
  border-color: var(--line);
}
html[data-theme="dark"] .settings-body .usage-card,
html[data-theme="dark"] .settings-body .usage-bar{
  background: var(--bg);
}
html[data-theme="dark"] .settings-body .settings-foot-note,
html[data-theme="dark"] .settings-body .usage-note-blocked{
  background: var(--bg);
  color: var(--ink-3);
}
html[data-theme="dark"] .settings-body .settings-table td{ color: #e2e8f0; }
html[data-theme="dark"] .settings-body .settings-btn:hover:not(:disabled){
  border-color: var(--accent-2);
  color: color-mix(in srgb, var(--accent) 32%, white);
}
html[data-theme="dark"] .settings-body .settings-card-danger{
  border-color: rgba(220, 38, 38, 0.35);
}
html[data-theme="dark"] .settings-body .settings-btn-danger{
  background: transparent;
  color: #fca5a5;
  border-color: rgba(220, 38, 38, 0.45);
}
html[data-theme="dark"] .settings-body .settings-btn-danger:hover:not(:disabled){
  background: rgba(220, 38, 38, 0.12);
  color: #fecaca;
}

/* Midnight = darker base, pure black surfaces */
html[data-theme="midnight"] .settings-body{
  background: var(--bg);
  color: #e2e8f0;
}
html[data-theme="midnight"] .settings-body .settings-card,
html[data-theme="midnight"] .settings-body .theme-option,
html[data-theme="midnight"] .settings-body .settings-btn{
  background: var(--surface-2);
  border-color: var(--line);
  color: #e2e8f0;
}
html[data-theme="midnight"] .settings-body .settings-h1,
html[data-theme="midnight"] .settings-body .settings-card-head h2,
html[data-theme="midnight"] .settings-body .settings-sidebar-title,
html[data-theme="midnight"] .settings-body .settings-row-value,
html[data-theme="midnight"] .settings-body .theme-name,
html[data-theme="midnight"] .settings-body .usage-card-title,
html[data-theme="midnight"] .settings-body .usage-card-value strong{
  color: #f5f5f5;
}
html[data-theme="midnight"] .settings-body .settings-lede,
html[data-theme="midnight"] .settings-body .settings-row-label,
html[data-theme="midnight"] .settings-body .settings-card-head p,
html[data-theme="midnight"] .settings-body .theme-desc,
html[data-theme="midnight"] .settings-body .bp-price,
html[data-theme="midnight"] .settings-body .bp-blurb,
html[data-theme="midnight"] .settings-body .usage-blurb,
html[data-theme="midnight"] .settings-body .uc-of{
  color: #888888;
}
html[data-theme="midnight"] .settings-body .settings-nav-item{ color: #cccccc; }
html[data-theme="midnight"] .settings-body .settings-nav-item:hover,
html[data-theme="midnight"] .settings-body .settings-nav-item.active{
  background: rgba(126,232,106, 0.18);
  color: color-mix(in srgb, var(--accent) 32%, white);
}
html[data-theme="midnight"] .settings-body .settings-row,
html[data-theme="midnight"] .settings-body .settings-table th,
html[data-theme="midnight"] .settings-body .settings-table td,
html[data-theme="midnight"] .settings-body .usage-card,
html[data-theme="midnight"] .settings-body .usage-bar{
  border-color: var(--line);
}
html[data-theme="midnight"] .settings-body .usage-card,
html[data-theme="midnight"] .settings-body .usage-bar{
  background: var(--bg);
}
html[data-theme="midnight"] .settings-body .settings-foot-note,
html[data-theme="midnight"] .settings-body .usage-note-blocked{
  background: var(--bg);
  color: #888888;
}
html[data-theme="midnight"] .settings-body .settings-table td{ color: #f5f5f5; }
html[data-theme="midnight"] .settings-body .settings-btn:hover:not(:disabled){
  border-color: var(--accent-2);
  color: color-mix(in srgb, var(--accent) 32%, white);
}
html[data-theme="midnight"] .settings-body .settings-card-danger{
  border-color: rgba(220, 38, 38, 0.35);
}
html[data-theme="midnight"] .settings-body .settings-btn-danger{
  background: transparent;
  color: #fca5a5;
  border-color: rgba(220, 38, 38, 0.45);
}
html[data-theme="midnight"] .settings-body .settings-btn-danger:hover:not(:disabled){
  background: rgba(220, 38, 38, 0.12);
  color: #fecaca;
}

/* ----- Payment method row (Billing tab) ----- */
.payment-method .pm-loading,
.payment-method .pm-empty{
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
  margin-bottom: 14px;
}
.pm-row{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pm-icon{
  width: 48px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
}
.pm-icon svg{
  width: 100%;
  height: 100%;
  max-height: 32px;
}
.pm-icon svg[viewBox="0 0 24 24"]{
  width: 28px; height: 28px;
}
.pm-meta{
  flex: 1;
  min-width: 0;
}
.pm-primary{
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pm-secondary{
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.pm-actions{
  flex-shrink: 0;
  display: flex;
  gap: 8px;
}

/* Dark + Midnight overrides for the payment method card */
html[data-theme="dark"] .settings-body .pm-row{
  background: var(--bg);
  border-color: var(--line);
}
html[data-theme="dark"] .settings-body .pm-primary{ color: var(--ink); }
html[data-theme="dark"] .settings-body .pm-secondary,
html[data-theme="dark"] .settings-body .pm-loading,
html[data-theme="dark"] .settings-body .pm-empty{ color: var(--ink-3); }
html[data-theme="dark"] .settings-body .pm-icon{ color: var(--ink-3); }

html[data-theme="midnight"] .settings-body .pm-row{
  background: var(--bg);
  border-color: var(--line);
}
html[data-theme="midnight"] .settings-body .pm-primary{ color: #f5f5f5; }
html[data-theme="midnight"] .settings-body .pm-secondary,
html[data-theme="midnight"] .settings-body .pm-loading,
html[data-theme="midnight"] .settings-body .pm-empty{ color: #888; }
html[data-theme="midnight"] .settings-body .pm-icon{ color: #888; }

@media (max-width: 560px){
  .pm-row{ flex-wrap: wrap; }
  .pm-actions{ width: 100%; justify-content: flex-end; }
}

/* =================================================================
   DARK + MIDNIGHT — APP-WIDE COMPONENT OVERRIDES
   ----------------------------------------------------------------
   The :root variable overrides at the top of this file re-skin
   anything that uses var(--xxx). Components below have hardcoded
   colors that need explicit per-theme tuning.
================================================================= */

/* ----- Auth chip + dropdown ----- */
html[data-theme="dark"] .auth-chip,
html[data-theme="midnight"] .auth-chip{
  background: var(--surface-solid);
  color: var(--ink-2);
}
html[data-theme="dark"] .auth-menu,
html[data-theme="midnight"] .auth-menu,
html[data-theme="dark"] .auth-menu-v2,
html[data-theme="midnight"] .auth-menu-v2{
  background: var(--surface-solid);
  border-color: var(--line);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.30);
}
html[data-theme="dark"] .amid-email,
html[data-theme="midnight"] .amid-email{ color: var(--ink); }
html[data-theme="dark"] .auth-menu-divider,
html[data-theme="midnight"] .auth-menu-divider{ background: var(--line); }
html[data-theme="dark"] .auth-menu-v2 .auth-menu-item-icon,
html[data-theme="midnight"] .auth-menu-v2 .auth-menu-item-icon{ color: var(--ink-2); }
html[data-theme="dark"] .auth-menu-v2 .auth-menu-item-icon:hover,
html[data-theme="midnight"] .auth-menu-v2 .auth-menu-item-icon:hover{
  background: var(--accent-soft);
  color: var(--accent-ink);
}
html[data-theme="dark"] .auth-menu-v2 .auth-menu-item-icon:hover .amii-icon,
html[data-theme="midnight"] .auth-menu-v2 .auth-menu-item-icon:hover .amii-icon{ color: var(--accent-ink); }
html[data-theme="dark"] .amii-icon,
html[data-theme="midnight"] .amii-icon{ color: var(--ink-3); }

/* Sign-in button (signed-out state) */
html[data-theme="dark"] .auth-signin,
html[data-theme="midnight"] .auth-signin{
  background: var(--surface-solid);
  color: var(--ink-2);
  border: 1px solid var(--line);
}

/* Tab links inside the platform nav */
html[data-theme="dark"] .platform-nav .tabs a,
html[data-theme="midnight"] .platform-nav .tabs a{ color: var(--ink-2); }
html[data-theme="dark"] .platform-nav .tabs a:hover,
html[data-theme="midnight"] .platform-nav .tabs a:hover{ color: var(--accent-ink); }
html[data-theme="dark"] .platform-nav .brand,
html[data-theme="midnight"] .platform-nav .brand{ color: var(--ink); }
html[data-theme="dark"] .platform-nav .brand-mark,
html[data-theme="midnight"] .platform-nav .brand-mark{
  background: var(--surface-2);
  color: var(--ink-3);
}

/* ----- Cards (the .card variant + .dark variant on top of light) ----- */
html[data-theme="dark"] section.card,
html[data-theme="midnight"] section.card{
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] section.card.dark,
html[data-theme="midnight"] section.card.dark{
  background: linear-gradient(180deg, rgba(126,232,106,0.10) 0%, rgba(126,232,106,0.06) 100%);
  border-color: var(--line-2);
}

/* ----- Generic surfaces using hardcoded rgba(255,255,255,...) ----- */
html[data-theme="dark"] [class*="card"],
html[data-theme="midnight"] [class*="card"]{
  /* leave the color rules alone, just ensure text is readable */
  color: var(--ink);
}

/* ----- Side panel (used in deal analyzers for side-by-side inputs) ----- */
html[data-theme="dark"] .side-panel,
html[data-theme="midnight"] .side-panel{
  background: var(--surface-solid);
  border-color: var(--line);
  color: var(--ink);
}

/* ----- Modal scrims + popovers ----- */
html[data-theme="dark"] .modal,
html[data-theme="midnight"] .modal,
html[data-theme="dark"] .mm-panel,
html[data-theme="midnight"] .mm-panel,
html[data-theme="dark"] .um-card,
html[data-theme="midnight"] .um-card{
  background: var(--surface-solid);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .mm-overlay,
html[data-theme="midnight"] .mm-overlay{
  background: rgba(0, 0, 0, 0.65);
}

/* ----- Forms (inputs / selects / textareas) ----- */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="midnight"] input[type="text"],
html[data-theme="midnight"] input[type="number"],
html[data-theme="midnight"] input[type="email"],
html[data-theme="midnight"] input[type="password"],
html[data-theme="midnight"] input[type="tel"],
html[data-theme="midnight"] input[type="url"],
html[data-theme="midnight"] input[type="search"],
html[data-theme="midnight"] select,
html[data-theme="midnight"] textarea{
  background: var(--surface-solid);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="midnight"] input:focus,
html[data-theme="midnight"] select:focus,
html[data-theme="midnight"] textarea:focus{
  border-color: var(--accent-ink);
  outline-color: var(--accent-ink);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="midnight"] input::placeholder,
html[data-theme="midnight"] textarea::placeholder{
  color: var(--ink-4);
}

/* ----- Tables ----- */
html[data-theme="dark"] table,
html[data-theme="midnight"] table{ color: var(--ink); }
html[data-theme="dark"] th,
html[data-theme="midnight"] th{
  background: var(--surface-2);
  color: var(--ink-2);
  border-color: var(--line);
}
html[data-theme="dark"] td,
html[data-theme="midnight"] td{
  border-color: var(--line);
}

/* ----- Toast ----- */
html[data-theme="dark"] .toast,
html[data-theme="midnight"] .toast{
  background: var(--surface-solid);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* ----- Auth page (sign-in / sign-up forms) ----- */
html[data-theme="dark"] .auth-wrap,
html[data-theme="midnight"] .auth-wrap,
html[data-theme="dark"] .auth-card,
html[data-theme="midnight"] .auth-card{
  background: var(--surface-solid);
  color: var(--ink);
  border-color: var(--line);
}

/* ----- Pricing page cards ----- */
html[data-theme="dark"] .pricing-card,
html[data-theme="midnight"] .pricing-card{
  background: var(--surface-solid);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .pc-feature,
html[data-theme="midnight"] .pc-feature{
  color: var(--ink-2);
}

/* ----- Compare page banner + matrix ----- */
html[data-theme="dark"] .compare-banner,
html[data-theme="midnight"] .compare-banner,
html[data-theme="dark"] .compare-card,
html[data-theme="midnight"] .compare-card,
html[data-theme="dark"] .compare-matrix,
html[data-theme="midnight"] .compare-matrix,
html[data-theme="dark"] .weights-panel,
html[data-theme="midnight"] .weights-panel{
  background: var(--surface-solid);
  border-color: var(--line);
  color: var(--ink);
}

/* ----- Force any explicit white text on accent buttons to stay white ----- */
html[data-theme="dark"] .calc, html[data-theme="midnight"] .calc,
html[data-theme="dark"] .primary, html[data-theme="midnight"] .primary{
  color: var(--on-accent);
}

/* =================================================================
   HOMEPAGE (index.html) — DARK + MIDNIGHT PATCHES
   ----------------------------------------------------------------
   The landing layout has a lot of rgba(255,255,255,X) backgrounds
   that look like floating white blobs on a dark page. These rules
   re-skin them properly without disturbing light mode.
================================================================= */

/* ----- Hero visual stacked cards ----- */
/* The back-most card was a pale lavender ghost — in dark mode it
   shows as an empty light rectangle. Re-skin to a subtle accent
   glow that blends with the stack. (Placeholder for the future
   half-circular scoring-gauge feature we're tracking in the todo.) */
html[data-theme="dark"] .hv-card-back,
html[data-theme="midnight"] .hv-card-back{
  background: linear-gradient(135deg, rgba(126,232,106,0.12), rgba(126,232,106,0.08));
  border: 1px solid rgba(126,232,106,0.18);
  opacity: 1;
}
/* Mid + front cards — proper dark glass surfaces */
html[data-theme="dark"] .hv-card,
html[data-theme="midnight"] .hv-card{
  background: rgba(17, 24, 39, 0.92);
  border: 1px solid var(--line);
  color: var(--ink);
}
html[data-theme="midnight"] .hv-card{
  background: rgba(10, 10, 10, 0.95);
}
html[data-theme="dark"] .hv-card-mid .hv-chip,
html[data-theme="midnight"] .hv-card-mid .hv-chip{
  background: var(--accent-soft);
  color: var(--accent-ink);
}
html[data-theme="dark"] .hv-stress-row,
html[data-theme="midnight"] .hv-stress-row{ color: var(--ink-2); }
/* .hvv-kicker, .hvv-title, .hvv-sub only appear inside .hv-verdict,
   which has a green gradient bg + white text. Earlier overrides made
   them dark/muted on that green bg — unreadable. Keep them white. */
html[data-theme="dark"] .hv-verdict .hvv-kicker,
html[data-theme="midnight"] .hv-verdict .hvv-kicker{ color: var(--on-dark) !important; opacity: 0.88; }
html[data-theme="dark"] .hv-verdict .hvv-title,
html[data-theme="midnight"] .hv-verdict .hvv-title{ color: var(--on-dark) !important; }
html[data-theme="dark"] .hv-verdict .hvv-sub,
html[data-theme="midnight"] .hv-verdict .hvv-sub{ color: var(--on-dark) !important; opacity: 0.94; }
html[data-theme="dark"] .hvs-lbl,
html[data-theme="midnight"] .hvs-lbl{ color: var(--ink-3); }
html[data-theme="dark"] .hvs-val,
html[data-theme="midnight"] .hvs-val{ color: var(--ink); }
html[data-theme="dark"] .hvs-val.pos,
html[data-theme="midnight"] .hvs-val.pos{ color: var(--pos); }

/* ----- Hero CTAs (Start free + See how it works) ----- */
/* The ghost button defaulted to rgba(255,255,255,0.7) — fully white
   blob on dark bg with white-on-gray text that the user flagged.
   Switch to a transparent accent-tinted button with a clear border. */
html[data-theme="dark"] .lh-cta.ghost,
html[data-theme="midnight"] .lh-cta.ghost{
  color: var(--ink);
  background: rgba(126,232,106, 0.08);
  border: 1px solid rgba(126,232,106, 0.35);
  backdrop-filter: blur(8px);
}
html[data-theme="dark"] .lh-cta.ghost:hover,
html[data-theme="midnight"] .lh-cta.ghost:hover{
  background: rgba(126,232,106, 0.18);
  border-color: var(--accent-ink);
  color: var(--ink);
}
/* The primary CTA already uses accent-grad which is dark-friendly,
   but the lift shadow should darken too. */
html[data-theme="dark"] .lh-cta.primary,
html[data-theme="midnight"] .lh-cta.primary{
  box-shadow: 0 14px 30px -10px rgba(126,232,106, 0.65);
}

/* ----- Trust strip ("4 analyzers + portfolio" etc.) ----- */
html[data-theme="dark"] .lh-trust,
html[data-theme="midnight"] .lh-trust{ color: var(--ink-3); }
html[data-theme="dark"] .lh-trust strong,
html[data-theme="midnight"] .lh-trust strong{ color: var(--ink); }

/* ----- "Built for serious underwriters" personas strip ----- */
html[data-theme="dark"] .lp-personas,
html[data-theme="midnight"] .lp-personas{
  background: rgba(17, 24, 39, 0.50);
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}
html[data-theme="midnight"] .lp-personas{
  background: rgba(10, 10, 10, 0.65);
}
html[data-theme="dark"] .lp-personas-label,
html[data-theme="midnight"] .lp-personas-label{ color: var(--ink-3); }
html[data-theme="dark"] .lp-persona-list li,
html[data-theme="midnight"] .lp-persona-list li{ color: var(--ink-2); }

/* ----- Generic section heads ----- */
html[data-theme="dark"] .lp-kicker,
html[data-theme="midnight"] .lp-kicker{ color: var(--accent-ink); }
html[data-theme="dark"] .lp-h2,
html[data-theme="midnight"] .lp-h2{ color: var(--ink); }
html[data-theme="dark"] .lp-h2 em,
html[data-theme="midnight"] .lp-h2 em{ color: var(--accent-ink); }
html[data-theme="dark"] .lp-lede,
html[data-theme="midnight"] .lp-lede{ color: var(--ink-3); }

/* ----- Strategy cards (4 analyzer cards) ----- */
html[data-theme="dark"] .analyzer-card,
html[data-theme="midnight"] .analyzer-card{
  background: var(--surface-solid);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .analyzer-card .ac-desc,
html[data-theme="midnight"] .analyzer-card .ac-desc,
html[data-theme="dark"] .analyzer-card .ac-bullets li,
html[data-theme="midnight"] .analyzer-card .ac-bullets li{
  color: var(--ink-3);
}
html[data-theme="dark"] .analyzer-card .ac-title,
html[data-theme="midnight"] .analyzer-card .ac-title{ color: var(--ink); }
html[data-theme="dark"] .ac-kicker,
html[data-theme="midnight"] .ac-kicker{ color: var(--ink-3); }
/* Keep the green "Available" semantic but bump to brighter values
   that read on a dark card surface. Higher-specificity selector so
   we win over the base .analyzer-card .ac-badge rule above.
   `!important` to defeat any browser-cache stale rule that might
   still be in play. */
html[data-theme="dark"]  .analyzer-card .ac-badge,
html[data-theme="midnight"] .analyzer-card .ac-badge{
  background: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;            /* emerald-300 — extra bright */
  border: 1px solid rgba(52, 211, 153, 0.45);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}
html[data-theme="dark"]  .analyzer-card.coming .ac-badge,
html[data-theme="midnight"] .analyzer-card.coming .ac-badge{
  background: var(--accent-soft) !important;
  color: color-mix(in srgb, var(--accent) 52%, white) !important;            /* indigo-300 */
  border-color: rgba(126,232,106, 0.45);
}
html[data-theme="dark"] .ac-cta,
html[data-theme="midnight"] .ac-cta{ color: var(--accent-ink); }

/* ----- How it works steps ----- */
html[data-theme="dark"] .lp-step,
html[data-theme="midnight"] .lp-step{
  background: var(--surface-solid);
  border-color: var(--line);
}
html[data-theme="dark"] .lp-step .lps-title,
html[data-theme="midnight"] .lp-step .lps-title{ color: var(--ink); }
html[data-theme="dark"] .lp-step .lps-body,
html[data-theme="midnight"] .lp-step .lps-body{ color: var(--ink-3); }

/* ----- Features grid ----- */
html[data-theme="dark"] .lp-features,
html[data-theme="midnight"] .lp-features{
  background: rgba(17, 24, 39, 0.35);
}
html[data-theme="midnight"] .lp-features{
  background: rgba(10, 10, 10, 0.50);
}
html[data-theme="dark"] .lp-feature,
html[data-theme="midnight"] .lp-feature{
  background: var(--surface-solid);
  border-color: var(--line);
}
html[data-theme="dark"] .lp-feature .lpf-title,
html[data-theme="midnight"] .lp-feature .lpf-title{ color: var(--ink); }
html[data-theme="dark"] .lp-feature .lpf-body,
html[data-theme="midnight"] .lp-feature .lpf-body{ color: var(--ink-3); }
html[data-theme="dark"] .lp-feature .lpf-icon,
html[data-theme="midnight"] .lp-feature .lpf-icon{
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* ----- Final CTA section ----- */
html[data-theme="dark"] .lpcta-h,
html[data-theme="midnight"] .lpcta-h{ color: var(--ink); }
html[data-theme="dark"] .lpcta-sub,
html[data-theme="midnight"] .lpcta-sub{ color: var(--ink-3); }

/* ----- Contact section ----- */
html[data-theme="dark"] .lp-contact,
html[data-theme="midnight"] .lp-contact{
  background: rgba(17, 24, 39, 0.40);
}
html[data-theme="midnight"] .lp-contact{
  background: rgba(10, 10, 10, 0.55);
}
html[data-theme="dark"] .lpc-bullets li,
html[data-theme="midnight"] .lpc-bullets li{ color: var(--ink-2); }
html[data-theme="dark"] .lpc-bullet-icon,
html[data-theme="midnight"] .lpc-bullet-icon{ color: var(--pos); }

/* Contact form wrap */
html[data-theme="dark"] .lpc-form-wrap,
html[data-theme="midnight"] .lpc-form-wrap,
html[data-theme="dark"] .contact-form,
html[data-theme="midnight"] .contact-form{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .cf-field label,
html[data-theme="midnight"] .cf-field label{ color: var(--ink-2); }
html[data-theme="dark"] .cf-req,
html[data-theme="midnight"] .cf-req{ color: var(--neg); }
html[data-theme="dark"] .cf-opt,
html[data-theme="midnight"] .cf-opt{ color: var(--ink-4); }
html[data-theme="dark"] .cf-field input,
html[data-theme="dark"] .cf-field select,
html[data-theme="dark"] .cf-field textarea,
html[data-theme="midnight"] .cf-field input,
html[data-theme="midnight"] .cf-field select,
html[data-theme="midnight"] .cf-field textarea{
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .cf-field input::placeholder,
html[data-theme="dark"] .cf-field textarea::placeholder,
html[data-theme="midnight"] .cf-field input::placeholder,
html[data-theme="midnight"] .cf-field textarea::placeholder{
  color: var(--ink-4);
}
/* Send-message button — keep accent gradient, deepen shadow */
html[data-theme="dark"] .cf-submit,
html[data-theme="midnight"] .cf-submit{
  background: var(--brand-fill);
  color: var(--brand-ink);
  box-shadow: 0 14px 30px -10px rgba(126,232,106, 0.65);
}
html[data-theme="dark"] .cf-submit:hover:not(:disabled),
html[data-theme="midnight"] .cf-submit:hover:not(:disabled){
  box-shadow: 0 20px 40px -12px rgba(126,232,106, 0.75);
}

/* ----- Landing footer ----- */
html[data-theme="dark"] .landing-footer,
html[data-theme="midnight"] .landing-footer{
  background: rgba(17, 24, 39, 0.55);
  border-top: 1px solid var(--line);
}
html[data-theme="midnight"] .landing-footer{
  background: rgba(10, 10, 10, 0.75);
}
html[data-theme="dark"] .landing-footer .lpf-brand,
html[data-theme="midnight"] .landing-footer .lpf-brand{ color: var(--ink); }
html[data-theme="dark"] .landing-footer .lpf-brand em,
html[data-theme="midnight"] .landing-footer .lpf-brand em{ color: var(--ink); }
html[data-theme="dark"] .landing-footer .lpf-tag,
html[data-theme="midnight"] .landing-footer .lpf-tag,
html[data-theme="dark"] .landing-footer .lpf-h,
html[data-theme="midnight"] .landing-footer .lpf-h,
html[data-theme="dark"] .landing-footer .lpf-copy,
html[data-theme="midnight"] .landing-footer .lpf-copy{ color: var(--ink-3); }
html[data-theme="dark"] .landing-footer .lpf-link,
html[data-theme="midnight"] .landing-footer .lpf-link,
html[data-theme="dark"] .lpf-social-link,
html[data-theme="midnight"] .lpf-social-link{ color: var(--ink-2); }
html[data-theme="dark"] .landing-footer .lpf-link:hover,
html[data-theme="midnight"] .landing-footer .lpf-link:hover,
html[data-theme="dark"] .lpf-social-link:hover,
html[data-theme="midnight"] .lpf-social-link:hover{ color: var(--accent-ink); }
html[data-theme="dark"] .lpf-legal,
html[data-theme="midnight"] .lpf-legal{ border-top-color: var(--line); }

/* ----- Doc / FAQ pages ----- */
html[data-theme="dark"] .doc-page h1,
html[data-theme="midnight"] .doc-page h1,
html[data-theme="dark"] .doc-page h2,
html[data-theme="midnight"] .doc-page h2{ color: var(--ink); }
html[data-theme="dark"] .doc-page p,
html[data-theme="midnight"] .doc-page p,
html[data-theme="dark"] .doc-page ul,
html[data-theme="midnight"] .doc-page ul,
html[data-theme="dark"] .doc-page .faq-a,
html[data-theme="midnight"] .doc-page .faq-a{ color: var(--ink-2); }
html[data-theme="dark"] .doc-page .doc-lede,
html[data-theme="midnight"] .doc-page .doc-lede{ color: var(--ink-3); }
html[data-theme="dark"] .faq-item,
html[data-theme="midnight"] .faq-item{ border-color: var(--line); }
html[data-theme="dark"] .faq-item summary,
html[data-theme="midnight"] .faq-item summary{ color: var(--ink); }

/* ----- Section frame backgrounds (lp-section base) ----- */
/* Some sections inherit a default white-tint that needs to go in dark.
   This selector hits any lp-section that doesn't have its own bg rule. */
html[data-theme="dark"] .lp-section,
html[data-theme="midnight"] .lp-section{
  background: transparent;
}

/* =================================================================
   HERO STRESS-ROW pastels — dark-mode variants
   ----------------------------------------------------------------
   Light mode: pale pastel bg + dark colored text.
   Dark mode: dark tinted bg + brighter colored text (same hue, bumped).
================================================================= */
html[data-theme="dark"] .hv-stress-row,
html[data-theme="midnight"] .hv-stress-row{
  font-weight: 600;
}
html[data-theme="dark"] .hv-stress-row.good,
html[data-theme="midnight"] .hv-stress-row.good{
  background: rgba(16, 185, 129, 0.14);
  color: var(--pos);       /* emerald-400 */
}
html[data-theme="dark"] .hv-stress-row.ok,
html[data-theme="midnight"] .hv-stress-row.ok{
  background: rgba(251, 191, 36, 0.14);
  color: var(--warn);       /* amber-400 */
}
html[data-theme="dark"] .hv-stress-row.warn,
html[data-theme="midnight"] .hv-stress-row.warn{
  background: rgba(249, 115, 22, 0.16);
  color: #fb923c;       /* orange-400 */
}
html[data-theme="dark"] .hv-stress-row.bad,
html[data-theme="midnight"] .hv-stress-row.bad{
  background: rgba(239, 68, 68, 0.16);
  color: var(--neg);       /* red-400 */
}

/* Front-card verdict pop — keep "Healthy — 12.4% margin" readable */
html[data-theme="dark"] .hv-verdict .hvv-title,
html[data-theme="midnight"] .hv-verdict .hvv-title{
  color: var(--ink);
  font-weight: 700;
}

/* Stat values inside the front card — make sure all 4 read crisp */
html[data-theme="dark"] .hv-stat .hvs-val,
html[data-theme="midnight"] .hv-stat .hvs-val{
  color: var(--ink);
  font-weight: 700;
}
html[data-theme="dark"] .hv-stat .hvs-val.pos,
html[data-theme="midnight"] .hv-stat .hvs-val.pos{
  color: var(--pos);       /* match the good stress row green for consistency */
}
html[data-theme="dark"] .hv-stat .hvs-lbl,
html[data-theme="midnight"] .hv-stat .hvs-lbl{
  color: var(--ink-3);
}

/* Stat row separators — barely-there divider in light, slightly more
   visible in dark so the 4 stats don't blur together visually. */
html[data-theme="dark"] .hv-stat,
html[data-theme="midnight"] .hv-stat{
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .hv-stat:first-child,
html[data-theme="midnight"] .hv-stat:first-child{
  border-top: none;
}

/* Back card placeholder — bump opacity slightly so it reads as
   intentional depth rather than a leftover artifact. */
html[data-theme="dark"] .hv-card-back,
html[data-theme="midnight"] .hv-card-back{
  background: linear-gradient(135deg, rgba(126,232,106,0.18), rgba(126,232,106,0.10));
  border: 1px solid rgba(126,232,106,0.28);
  box-shadow: 0 8px 32px -8px rgba(126,232,106,0.20);
}

/* Sparkline gradient was hardcoded indigo — looks fine on dark too,
   but bump opacity so the curve reads more clearly. */
html[data-theme="dark"] .hv-spark svg path[fill="none"],
html[data-theme="midnight"] .hv-spark svg path[fill="none"]{
  stroke: var(--accent-ink);
}

/* =================================================================
   HERO BACK CARD — Deal Strength gauge preview (future feature)
================================================================= */
.hv-card-back{
  /* Override the tiny default sizing so the gauge has room to render */
  width: 56%;
  min-height: 145px;
  height: auto;
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hv-gauge{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hv-gauge svg{
  width: 100%;
  max-width: 180px;
  height: auto;
}
.hv-gauge-kicker{
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: -4px;
}

/* In light mode, the back card is faint by design — give the gauge
   slightly muted text so it doesn't fight with the front card. */
.hv-card-back{
  opacity: 0.92;
}

/* =================================================================
   HERO FRONT CARD — vivid stat tints matching the middle card
================================================================= */

/* .hv-verdict has a green gradient bg with white text. Do NOT tint
   the title green here — that produces green-on-green and breaks
   readability. Title stays white from the base rules. */

/* Give each stat a subtle tinted background + colored value.
   Alternating emerald (positive metrics) and indigo (neutral metrics)
   so the four stats don't blur into a monochrome block. */
.hv-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hv-stat{
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
}
/* Light-mode tints */
.hv-stat:nth-child(1){ background: rgba(16, 185, 129, 0.08); }
.hv-stat:nth-child(2){ background: rgba(126,232,106, 0.08); }
.hv-stat:nth-child(3){ background: rgba(16, 185, 129, 0.08); }
.hv-stat:nth-child(4){ background: rgba(126,232,106, 0.08); }

.hv-stat:nth-child(1) .hvs-val,
.hv-stat:nth-child(3) .hvs-val{ color: var(--pos-strong); }    /* emerald-700 */
.hv-stat:nth-child(2) .hvs-val,
.hv-stat:nth-child(4) .hvs-val{ color: var(--accent-strong); }    /* indigo-700 */

/* Dark + Midnight tints — same hue at higher saturation + brighter text */
html[data-theme="dark"] .hv-stat:nth-child(1),
html[data-theme="midnight"] .hv-stat:nth-child(1),
html[data-theme="dark"] .hv-stat:nth-child(3),
html[data-theme="midnight"] .hv-stat:nth-child(3){
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.20);
}
html[data-theme="dark"] .hv-stat:nth-child(2),
html[data-theme="midnight"] .hv-stat:nth-child(2),
html[data-theme="dark"] .hv-stat:nth-child(4),
html[data-theme="midnight"] .hv-stat:nth-child(4){
  background: rgba(126,232,106, 0.14);
  border-color: rgba(126,232,106, 0.20);
}

html[data-theme="dark"] .hv-stat:nth-child(1) .hvs-val,
html[data-theme="dark"] .hv-stat:nth-child(3) .hvs-val,
html[data-theme="midnight"] .hv-stat:nth-child(1) .hvs-val,
html[data-theme="midnight"] .hv-stat:nth-child(3) .hvs-val{
  color: var(--pos);           /* emerald-400 */
}
html[data-theme="dark"] .hv-stat:nth-child(2) .hvs-val,
html[data-theme="dark"] .hv-stat:nth-child(4) .hvs-val,
html[data-theme="midnight"] .hv-stat:nth-child(2) .hvs-val,
html[data-theme="midnight"] .hv-stat:nth-child(4) .hvs-val{
  color: color-mix(in srgb, var(--accent) 52%, white);           /* indigo-300 */
}

/* The label text inside each stat — make it pop a touch more */
html[data-theme="dark"] .hv-stat .hvs-lbl,
html[data-theme="midnight"] .hv-stat .hvs-lbl{
  color: rgba(255, 255, 255, 0.70);
  font-weight: 600;
}

/* .hv-verdict .hvv-sub stays white (set above with !important) so
   the sub line reads clearly on the green gradient. */

/* =================================================================
   PRICING PAGE — DARK + MIDNIGHT POLISH
   ----------------------------------------------------------------
   Most of pricing.html uses var(--xxx) so it auto-skins via the
   global overrides at the top of this file. These rules patch the
   handful of rgba() spots that are too faint to read in dark mode.
================================================================= */

/* Featured (Pro) card glow — the indigo overlay was 4% in light,
   barely visible. Bump to 12% in dark so the featured card pops. */
html[data-theme="dark"] .pricing-card.is-featured,
html[data-theme="midnight"] .pricing-card.is-featured{
  background: linear-gradient(180deg, var(--surface-solid) 0%, rgba(126,232,106,0.14) 100%);
  border-color: var(--accent-ink);
  box-shadow: 0 12px 36px -12px rgba(126,232,106,0.50);
}

/* Card hover lift — stronger shadow under dark surfaces */
html[data-theme="dark"] .pricing-card:hover,
html[data-theme="midnight"] .pricing-card:hover{
  border-color: rgba(126,232,106, 0.50);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.55);
}

/* Make the pricing-card solid (it was using --surface which is
   translucent; can look ghosty against the dark bg). */
html[data-theme="dark"] .pricing-card,
html[data-theme="midnight"] .pricing-card{
  background: var(--surface-solid);
}

/* Comparison-table section group headers — the 6% indigo gradient
   disappears on dark.  Bump it. */
html[data-theme="dark"] .pricing-table .ptt-group td,
html[data-theme="midnight"] .pricing-table .ptt-group td{
  background: linear-gradient(90deg, rgba(126,232,106,0.16) 0%, transparent 100%);
  color: var(--accent-ink);
}

/* Table thead surface */
html[data-theme="dark"] .pricing-table thead th,
html[data-theme="midnight"] .pricing-table thead th{
  background: var(--surface-2);
  color: var(--ink);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .pricing-table thead th.is-featured,
html[data-theme="midnight"] .pricing-table thead th.is-featured{
  color: var(--accent-ink);
}
html[data-theme="dark"] .pricing-table tbody td,
html[data-theme="midnight"] .pricing-table tbody td{
  border-bottom-color: var(--line);
  color: var(--ink-2);
}
html[data-theme="dark"] .pricing-table tbody td:not(:first-child),
html[data-theme="midnight"] .pricing-table tbody td:not(:first-child){
  color: var(--ink);
}
html[data-theme="dark"] .pricing-table .ptt-no,
html[data-theme="midnight"] .pricing-table .ptt-no,
html[data-theme="dark"] .pricing-table .ptt-soft,
html[data-theme="midnight"] .pricing-table .ptt-soft{
  color: var(--ink-4);
}

/* Comparison table scroll wrapper - solid background for legibility */
html[data-theme="dark"] .pricing-table-scroll,
html[data-theme="midnight"] .pricing-table-scroll{
  background: var(--surface-solid);
  border-color: var(--line);
}

/* CTA secondary (Investor / Elite "Upgrade" non-primary) — needs a
   visible border + accent text on the dark surface */
html[data-theme="dark"] .pc-cta,
html[data-theme="midnight"] .pc-cta{
  background: transparent;
  color: var(--accent-ink);
  border: 1px solid rgba(126,232,106, 0.40);
}
html[data-theme="dark"] .pc-cta:hover,
html[data-theme="midnight"] .pc-cta:hover{
  background: rgba(126,232,106, 0.12);
  border-color: var(--accent-ink);
}
html[data-theme="dark"] .pc-cta.is-current,
html[data-theme="midnight"] .pc-cta.is-current{
  background: rgba(16, 185, 129, 0.16);
  color: var(--pos);
  border-color: rgba(16, 185, 129, 0.40);
}

/* Toggle pill (Monthly/Annual) — already uses var() but the active
   "save up to 40%" badge has hardcoded white-on-white styles. */
html[data-theme="dark"] .pt-opt.is-active .pt-save,
html[data-theme="midnight"] .pt-opt.is-active .pt-save{
  background: rgba(255, 255, 255, 0.20);
  color: var(--on-accent);
}

/* FAQ open state — accent-soft is fine but the summary text could
   use a slight bump for contrast */
html[data-theme="dark"] .pf-q[open] > summary,
html[data-theme="midnight"] .pf-q[open] > summary{
  background: rgba(126,232,106, 0.14);
  color: var(--accent-ink);
}
html[data-theme="dark"] .pf-q,
html[data-theme="midnight"] .pf-q{
  background: var(--surface-solid);
  border-color: var(--line);
}

/* =================================================================
   ANALYZER PAGES (str / brrr / flip / new-construction)
   DARK + MIDNIGHT PATCHES
   ----------------------------------------------------------------
   These rules cover the shared analyzer chrome: cards, verdict
   banners, stat grids, breakdown tables, scenario panels, etc.
   Most use var(--xxx) so the global overrides handle them; these
   rules patch the spots with hardcoded pastels.
================================================================= */

/* ----- section.card.dark — the warm "cream" variant ----- */
/* This class name is misleading — it's a *light* card with a
   warm tint (#fafaf7), used for "secondary" sections inside an
   analyzer page. Re-skin for dark themes. */
html[data-theme="dark"] section.card.dark,
html[data-theme="midnight"] section.card.dark{
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-2);
}
html[data-theme="dark"] section.card.dark .label,
html[data-theme="dark"] section.card.dark .field-hint,
html[data-theme="midnight"] section.card.dark .label,
html[data-theme="midnight"] section.card.dark .field-hint{
  color: var(--ink-3);
}
html[data-theme="dark"] section.card.dark input,
html[data-theme="midnight"] section.card.dark input{
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line-2);
}

/* ----- Verdict banners (good / bad / warn) ----- */
/* Light mode uses pastel pales; dark mode swaps to deeper tinted
   surfaces with brighter text for legibility. */
html[data-theme="dark"] .verdict,
html[data-theme="midnight"] .verdict{
  background: var(--surface-solid);
  border-color: var(--line);
}
html[data-theme="dark"] .verdict.good,
html[data-theme="midnight"] .verdict.good{
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.30);
  border-top-color: var(--pos);
}
html[data-theme="dark"] .verdict.bad,
html[data-theme="midnight"] .verdict.bad{
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.30);
  border-top-color: var(--neg);
}
html[data-theme="dark"] .verdict.warn,
html[data-theme="midnight"] .verdict.warn{
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.30);
  border-top-color: var(--warn);
}
html[data-theme="dark"] .verdict .stamp,
html[data-theme="midnight"] .verdict .stamp{ color: var(--ink-3); }
html[data-theme="dark"] .verdict h3,
html[data-theme="midnight"] .verdict h3{ color: var(--ink); }

/* ----- Scenario panels (BRRRR refi LTV cards, etc.) ----- */
html[data-theme="dark"] .scenario,
html[data-theme="midnight"] .scenario{
  background: var(--surface-solid);
  border-color: var(--line);
}
html[data-theme="dark"] .scenario.alt,
html[data-theme="midnight"] .scenario.alt{
  background: rgba(126,232,106, 0.12);
  border-color: rgba(126,232,106, 0.30);
}
html[data-theme="dark"] .scenario-name,
html[data-theme="midnight"] .scenario-name{ color: var(--ink); }
html[data-theme="dark"] .scenario-desc,
html[data-theme="midnight"] .scenario-desc{ color: var(--ink-2); }
html[data-theme="dark"] .scenario-tag,
html[data-theme="midnight"] .scenario-tag{ color: var(--ink-3); }
html[data-theme="dark"] .scenario.alt .scenario-tag,
html[data-theme="midnight"] .scenario.alt .scenario-tag{ color: var(--accent-ink); }

/* ----- Stat grid + individual stats ----- */
html[data-theme="dark"] .stat-grid,
html[data-theme="midnight"] .stat-grid{
  background: var(--line);          /* grid lines */
  border-color: var(--line);
}
html[data-theme="dark"] .stat,
html[data-theme="midnight"] .stat{
  background: var(--surface-solid);
}
html[data-theme="dark"] .stat .stat-label,
html[data-theme="midnight"] .stat .stat-label{ color: var(--ink-3); }
html[data-theme="dark"] .stat .stat-val,
html[data-theme="midnight"] .stat .stat-val{ color: var(--ink); }
html[data-theme="dark"] .stat .stat-val.pos,
html[data-theme="midnight"] .stat .stat-val.pos{ color: var(--pos); }
html[data-theme="dark"] .stat .stat-val.neg,
html[data-theme="midnight"] .stat .stat-val.neg{ color: var(--neg); }
html[data-theme="dark"] .stat .stat-sub,
html[data-theme="midnight"] .stat .stat-sub{ color: var(--ink-4); }

/* ----- Breakdown tables ----- */
html[data-theme="dark"] .breakdown,
html[data-theme="midnight"] .breakdown{
  background: var(--surface-solid);
  border-color: var(--line);
}
html[data-theme="dark"] .breakdown h3,
html[data-theme="midnight"] .breakdown h3{
  background: var(--surface-2);
  color: var(--ink);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .breakdown td,
html[data-theme="midnight"] .breakdown td{
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .breakdown td:first-child,
html[data-theme="midnight"] .breakdown td:first-child{
  color: var(--ink-3);
}
html[data-theme="dark"] .breakdown td:last-child,
html[data-theme="midnight"] .breakdown td:last-child{
  color: var(--ink);
}
/* Total row — indigo-tinted summary at the bottom */
html[data-theme="dark"] .breakdown tr.total td,
html[data-theme="midnight"] .breakdown tr.total td{
  background: rgba(126,232,106, 0.14);
  color: var(--ink);
  border-top-color: var(--accent-ink);
}

/* ----- Actions bar (Calculate / Save / Export buttons) ----- */
html[data-theme="dark"] .actions,
html[data-theme="midnight"] .actions{
  background: var(--surface-solid);
  border-color: var(--line);
}
/* button.calc and variants already use var() — auto-skinned.
   But button.calc.export has hardcoded var(--surface) which is
   translucent; make it solid in dark for visibility. */
html[data-theme="dark"] button.calc.export,
html[data-theme="midnight"] button.calc.export{
  background: var(--surface-solid);
  color: var(--ink-2);
  border-color: var(--line-2);
}
html[data-theme="dark"] button.calc.export:hover:not(:disabled),
html[data-theme="midnight"] button.calc.export:hover:not(:disabled){
  background: var(--surface-2);
  border-color: var(--ink-3);
}

/* button.ghost - keep transparent but bump text contrast */
html[data-theme="dark"] button.ghost,
html[data-theme="midnight"] button.ghost{
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line-2);
}
html[data-theme="dark"] button.ghost:hover,
html[data-theme="midnight"] button.ghost:hover{
  color: var(--ink);
  border-color: var(--ink-3);
  background: var(--surface-2);
}

/* ----- Masthead (page header inside analyzers) ----- */
html[data-theme="dark"] .masthead,
html[data-theme="midnight"] .masthead{
  color: var(--ink);
}
html[data-theme="dark"] .kicker,
html[data-theme="midnight"] .kicker{ color: var(--accent-ink); }
html[data-theme="dark"] .tagline,
html[data-theme="midnight"] .tagline{ color: var(--ink-2); }

/* ----- Card header (the title bar at the top of each input card) ----- */
html[data-theme="dark"] .card-header h2,
html[data-theme="midnight"] .card-header h2{ color: var(--ink); }
html[data-theme="dark"] .card-header .chip,
html[data-theme="midnight"] .card-header .chip{
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--ink-3);
}

/* ----- Field labels + hints ----- */
html[data-theme="dark"] .label,
html[data-theme="midnight"] .label{ color: var(--ink-2); }
html[data-theme="dark"] .field-hint,
html[data-theme="midnight"] .field-hint{ color: var(--ink-3); }

/* ----- Input wrap prefix/suffix (e.g. $ in front, % at end) ----- */
html[data-theme="dark"] .input-wrap .prefix,
html[data-theme="dark"] .input-wrap .suffix,
html[data-theme="midnight"] .input-wrap .prefix,
html[data-theme="midnight"] .input-wrap .suffix{
  color: var(--ink-3);
}

/* ----- Notes block (informational asides) ----- */
html[data-theme="dark"] .notes,
html[data-theme="midnight"] .notes{
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-2);
}

/* ----- Lever lists (Equivalent Levers, scenario adjusters) -----
   Each row was using var(--surface) which is translucent — on a
   dark page that made every row blend with the bg. Solid surface +
   stronger border + slight alternating tint = clear rhythm. */
html[data-theme="dark"] .lever-list,
html[data-theme="midnight"] .lever-list{
  background: transparent;       /* let the rows carry the surface */
  border: none;
}
html[data-theme="dark"] .lever-list .lever,
html[data-theme="midnight"] .lever-list .lever{
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  margin-bottom: 8px;
}
/* Uniform row color (user picked the lighter one, no alternation) */
html[data-theme="dark"] .lever-list .lever:hover,
html[data-theme="midnight"] .lever-list .lever:hover{
  border-color: rgba(126,232,106, 0.40);
}
html[data-theme="dark"] .lever .lever-name,
html[data-theme="midnight"] .lever .lever-name,
html[data-theme="dark"] .lever .lever-val,
html[data-theme="midnight"] .lever .lever-val{
  color: var(--ink);
}
html[data-theme="dark"] .lever .lever-bar,
html[data-theme="midnight"] .lever .lever-bar{
  background: var(--bg);
  border: 1px solid var(--line);
}

/* ----- Days grid + day cells (STR seasonality visualizations) ----- */
html[data-theme="dark"] .days-grid,
html[data-theme="midnight"] .days-grid{
  background: var(--surface-solid);
  border-color: var(--line);
}
html[data-theme="dark"] .day-cell,
html[data-theme="midnight"] .day-cell{
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}

/* ----- Section title + subtitle (results-section headings) ----- */
html[data-theme="dark"] .section-title,
html[data-theme="midnight"] .section-title{ color: var(--ink); }
html[data-theme="dark"] .section-title .num,
html[data-theme="midnight"] .section-title .num{ color: var(--accent-ink); }
html[data-theme="dark"] .section-sub,
html[data-theme="midnight"] .section-sub{ color: var(--ink-3); }
html[data-theme="dark"] .section-divider,
html[data-theme="midnight"] .section-divider{ color: var(--line-2); }

/* ----- Side panel (slides in from the right for each feature) ----- */
html[data-theme="dark"] .side-panel,
html[data-theme="midnight"] .side-panel{
  background: var(--surface-solid);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .side-panel .sp-head,
html[data-theme="midnight"] .side-panel .sp-head{
  background: var(--surface-2);
  border-color: var(--line);
}
html[data-theme="dark"] .side-panel .sp-head h3,
html[data-theme="midnight"] .side-panel .sp-head h3{ color: var(--ink); }
html[data-theme="dark"] .side-panel .sp-close,
html[data-theme="midnight"] .side-panel .sp-close{
  color: var(--ink-3);
  background: transparent;
}
html[data-theme="dark"] .side-panel .sp-close:hover,
html[data-theme="midnight"] .side-panel .sp-close:hover{
  color: var(--ink);
  background: var(--surface-2);
}

/* ----- Comps panel (RentCast lookup) ----- */
html[data-theme="dark"] .cmps-summary-row,
html[data-theme="midnight"] .cmps-summary-row{
  background: var(--surface-2);
  border-color: var(--line);
}
html[data-theme="dark"] .cmps-stat strong,
html[data-theme="midnight"] .cmps-stat strong{ color: var(--ink); }
html[data-theme="dark"] .cmps-stat span,
html[data-theme="midnight"] .cmps-stat span{ color: var(--ink-3); }
html[data-theme="dark"] .cmps-tab,
html[data-theme="midnight"] .cmps-tab{ color: var(--ink-3); }
html[data-theme="dark"] .cmps-tab:hover,
html[data-theme="midnight"] .cmps-tab:hover{ color: var(--ink); }
html[data-theme="dark"] .cmps-tab.is-active,
html[data-theme="midnight"] .cmps-tab.is-active{ color: var(--accent-ink); }
html[data-theme="dark"] .cmps-table thead th,
html[data-theme="midnight"] .cmps-table thead th{
  background: var(--surface-2);
  color: var(--ink-2);
  border-color: var(--line);
}
html[data-theme="dark"] .cmps-table tbody td,
html[data-theme="midnight"] .cmps-table tbody td{
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .cmps-table tbody tr:hover td,
html[data-theme="midnight"] .cmps-table tbody tr:hover td{
  background: var(--surface-2);
}

/* =================================================================
   DEAL SCORE GAUGE — half-circle 0..100 strength meter, rendered at
   the top of the combined Analyze Results panel for every analyzer.

   Structure:
     .deal-score
       .ds-header           — property name / address / meta / price
       .ds-body
         .ds-gauge-pane     — 3D-ish animated half-circle SVG
         .ds-map-pane       — live Google Maps preview
       .ds-breakdown        — weighted subscore rows
================================================================= */
.deal-score-section{
  padding: 8px 4px 4px;
}
/* Standard "section card" treatment — same surface bg + border
   as every other card on the page, with a left accent stripe
   that marks this as a hero/headline block. */
.deal-score{
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-2);   /* charcoal hero stripe (was green --accent) */
  border-radius: 10px;
  padding: 22px 24px 26px;
}

/* Use the BE-style .prop-header at the very top of the score section.
   Adds a small meta line for property details (beds/sqft/type).  */
.ph-score{ margin-bottom: 18px; }
.ph-score .ph-meta{
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 6px;
}

/* ----- Body: 2-col grid (left = gauge + breakdown stack, right = map) -----
   align-items: stretch ensures the map pane matches the full height of
   the left column (gauge + breakdown combined). */
.ds-body{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.ds-body-no-map{ grid-template-columns: 1fr; }
.ds-left{
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.ds-gauge-pane{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 0;
}
.ds-gauge{
  width: 100%;
  /* No max-width — let it fill the left column for maximum pixel density */
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 28px rgba(126,232,106, 0.18));
  /* shape-rendering hint helps the arcs stay crisp at any rasterized size */
  shape-rendering: geometricPrecision;
}
.ds-kicker{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-top: 4px;
}

/* ----- Map pane (right column, full height of the left col) ----- */
.ds-map-pane{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ds-map-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding-left: 2px;
}
.ds-map{
  flex: 1;                      /* fills the column height */
  width: 100%;
  min-height: 460px;            /* fallback for short content */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: 0 4px 18px -8px rgba(15,23,42,0.20);
  position: relative;
}
.ds-map-empty{
  height: 100%;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  background: linear-gradient(160deg,
              rgba(238,242,255,0.6) 0%,
              rgba(245,243,255,0.45) 100%);
  border: 1px dashed rgba(126,232,106,0.30);
  border-radius: 12px;
}
.ds-map-empty .dsm-glyph{ font-size: 30px; }
.ds-map-empty .dsm-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.ds-map-empty .dsm-body{
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-3);
  max-width: 320px;
}

@media (max-width: 920px){
  .ds-body{ grid-template-columns: 1fr; }
  .ds-map{ min-height: 280px; }
  .ds-map-empty{ min-height: 240px; }
}

/* ----- Breakdown table under the gauge ----- */
.ds-breakdown{
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.ds-bd-row{
  display: grid;
  grid-template-columns: minmax(110px, 1.2fr) minmax(0, 2fr) 60px 70px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 13px;
}
.ds-bd-name{ font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.ds-bd-sub{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
}
.ds-bd-weight{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: right;
}
.ds-bd-value{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  text-align: right;
  color: var(--ink);
}
.ds-bd-value .ds-bd-max{
  font-size: 10px;
  font-weight: 500;
  opacity: 0.6;
  margin-left: 2px;
}
/* Tier tints on the row backdrop */
.ds-bd-row.ds-bd-good{ background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.22); }
.ds-bd-row.ds-bd-ok  { background: rgba(234,179,8,0.10);  border-color: rgba(234,179,8,0.22); }
.ds-bd-row.ds-bd-warn{ background: rgba(249,115,22,0.10); border-color: rgba(249,115,22,0.25); }
.ds-bd-row.ds-bd-bad { background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.28); }

html[data-theme="dark"] .deal-score,
html[data-theme="midnight"] .deal-score{
  /* Match the cost-table row tone (translucent --surface over the
     side panel's --surface-solid) so the score card aligns visually
     with the cost-breakdown rows that follow it. */
  background:        var(--surface);
  border-color:      var(--line);
  border-left-color: var(--ink-2);   /* charcoal hero stripe (was green --accent-ink) */
}
html[data-theme="dark"] .ds-header,
html[data-theme="midnight"] .ds-header{ border-bottom-color: var(--line); }
html[data-theme="dark"] .dsh-name,
html[data-theme="midnight"] .dsh-name{ color: var(--ink); }
html[data-theme="dark"] .dsh-loc,
html[data-theme="midnight"] .dsh-loc,
html[data-theme="dark"] .dsh-meta,
html[data-theme="midnight"] .dsh-meta{ color: var(--ink-3); }
html[data-theme="dark"] .ds-map,
html[data-theme="midnight"] .ds-map{
  background: var(--surface-2);
  border-color: var(--line);
}
html[data-theme="dark"] .ds-map-empty,
html[data-theme="midnight"] .ds-map-empty{
  background: linear-gradient(160deg,
              rgba(126,232,106,0.10) 0%,
              rgba(126,232,106,0.04) 100%);
  border-color: rgba(126,232,106,0.30);
}
html[data-theme="dark"] .ds-map-empty .dsm-title,
html[data-theme="midnight"] .ds-map-empty .dsm-title{ color: var(--ink); }
html[data-theme="dark"] .ds-map-empty .dsm-body,
html[data-theme="midnight"] .ds-map-empty .dsm-body{ color: var(--ink-3); }
html[data-theme="dark"] .ds-gauge,
html[data-theme="midnight"] .ds-gauge{
  filter: drop-shadow(0 10px 28px rgba(126,232,106, 0.32));
}
html[data-theme="dark"] .ds-bd-row,
html[data-theme="midnight"] .ds-bd-row{
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .ds-bd-row.ds-bd-good,
html[data-theme="midnight"] .ds-bd-row.ds-bd-good{
  background: rgba(16,185,129,0.14);
  border-color: rgba(52,211,153,0.30);
}
html[data-theme="dark"] .ds-bd-row.ds-bd-ok,
html[data-theme="midnight"] .ds-bd-row.ds-bd-ok{
  background: rgba(234,179,8,0.14);
  border-color: rgba(251,191,36,0.30);
}
html[data-theme="dark"] .ds-bd-row.ds-bd-warn,
html[data-theme="midnight"] .ds-bd-row.ds-bd-warn{
  background: rgba(249,115,22,0.16);
  border-color: rgba(251,146,60,0.34);
}
html[data-theme="dark"] .ds-bd-row.ds-bd-bad,
html[data-theme="midnight"] .ds-bd-row.ds-bd-bad{
  background: rgba(239,68,68,0.16);
  border-color: rgba(248,113,113,0.38);
}

/* =================================================================
   BREAK-EVEN KPI ROW — four headline cards replacing the old 5-stat
   grid. Each card is color-tinted by tier (positive / ok / warn /
   negative) so scanning the row gives an immediate read on health.
================================================================= */
.be-kpi-row{
  display: grid;
  /* Columns follow the actual card count (--kpi-cols, default 4) so a row of
     3 cards fills the width evenly instead of leaving an empty 4th slot. */
  grid-template-columns: repeat(var(--kpi-cols, 4), 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 900px){
  .be-kpi-row{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .be-kpi-row{ grid-template-columns: 1fr; }
}
.be-kpi{
  position: relative;
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.be-kpi::before{
  /* Color stripe at the top edge — tier indicator */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--line);
  /* Rounded so it still matches the card corners when the card's overflow
     is opened up for a metric tooltip (below). */
  border-radius: 10px 10px 0 0;
}
/* Metric-definition tooltips: the "?" tooltip renders above the label and
   would be clipped by the card's overflow:hidden — open it up only for cards
   that actually carry a tooltip (the stripe is rounded above so it stays clean). */
.be-kpi:has(.metric-info){ overflow: visible; }
.bek-label .metric-info.mtip{
  width: 14px; height: 14px; font-size: 9px;
  vertical-align: middle; margin-left: 1px;
}
.be-kpi .bek-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.be-kpi .bek-val{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
/* Plain-English explainer line: sits between the value and the
   benchmark sub. Answers "what is this metric?" in one tight sentence
   so the user doesn't have to interpret a label like "Break-Even
   Cushion" cold. */
.be-kpi .bek-explain{
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.be-kpi .bek-sub{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-3);
}

/* Tier tints — applied to the .be-kpi wrapper */
.be-kpi.kpi-pos{ background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.20); }
.be-kpi.kpi-pos::before{ background: var(--pos); }
.be-kpi.kpi-pos .bek-val{ color: var(--pos-strong); }

.be-kpi.kpi-ok{ background: rgba(59,130,246,0.05); border-color: rgba(59,130,246,0.18); }
.be-kpi.kpi-ok::before{ background: var(--accent); }

.be-kpi.kpi-warn{ background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.22); }
.be-kpi.kpi-warn::before{ background: var(--warn); }
.be-kpi.kpi-warn .bek-val{ color: var(--warn-strong); }

.be-kpi.kpi-neg{ background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); }
.be-kpi.kpi-neg::before{ background: var(--neg); }
.be-kpi.kpi-neg .bek-val{ color: var(--neg-strong); }

/* Dark theme tints — same hue, brighter text */
html[data-theme="dark"] .be-kpi.kpi-pos,
html[data-theme="midnight"] .be-kpi.kpi-pos{
  background: rgba(16,185,129,0.14);
  border-color: rgba(52,211,153,0.30);
}
html[data-theme="dark"] .be-kpi.kpi-pos .bek-val,
html[data-theme="midnight"] .be-kpi.kpi-pos .bek-val{ color: #6ee7b7; }
html[data-theme="dark"] .be-kpi.kpi-ok,
html[data-theme="midnight"] .be-kpi.kpi-ok{
  background: rgba(126,232,106,0.10);
  border-color: rgba(126,232,106,0.30);
}
html[data-theme="dark"] .be-kpi.kpi-warn,
html[data-theme="midnight"] .be-kpi.kpi-warn{
  background: rgba(245,158,11,0.14);
  border-color: rgba(251,191,36,0.30);
}
html[data-theme="dark"] .be-kpi.kpi-warn .bek-val,
html[data-theme="midnight"] .be-kpi.kpi-warn .bek-val{ color: #fcd34d; }
html[data-theme="dark"] .be-kpi.kpi-neg,
html[data-theme="midnight"] .be-kpi.kpi-neg{
  background: rgba(239,68,68,0.14);
  border-color: rgba(248,113,113,0.32);
}
html[data-theme="dark"] .be-kpi.kpi-neg .bek-val,
html[data-theme="midnight"] .be-kpi.kpi-neg .bek-val{ color: #fca5a5; }

/* =================================================================
   BREAK-EVEN "Full breakdown" — collapsible <details> hosting the
   capital + P&L tables, scenarios table, and notes. Closed by default.
================================================================= */
.be-details{
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 8px;
}
.be-details[open]{
  border-color: var(--line-2);
}
.be-details-summary{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-family: var(--font-display);
  transition: background 0.15s ease;
}
.be-details-summary::-webkit-details-marker{ display: none; }
.be-details-summary:hover{ background: var(--surface-2); }
.be-details-summary .bds-icon{
  font-family: var(--font-mono);
  color: var(--accent-ink);
  font-weight: 700;
  transition: transform 0.18s ease;
  display: inline-block;
  width: 14px;
  text-align: center;
}
.be-details[open] .be-details-summary .bds-icon{
  transform: rotate(90deg);
}
.be-details-summary .bds-label{
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.be-details-summary .bds-meta{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 500;
  margin-left: auto;
}
.be-details-body{
  padding: 6px 18px 18px;
  border-top: 1px solid var(--line);
}
/* Always-visible year-by-year block (no <details> wrapper) — needs
   its own card chrome since it doesn't inherit from a summary. */
.be-details-body.brrr-yearly-block{
  margin-top: 18px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.brrr-yearly-heading{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.be-details-body .days-grid{
  margin: 12px 0 18px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 780px){
  .be-details-body .days-grid{ grid-template-columns: repeat(2, 1fr); }
}
.be-details-body .grid{ margin-top: 4px; }

html[data-theme="dark"] .be-details,
html[data-theme="midnight"] .be-details{
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .be-details-summary:hover,
html[data-theme="midnight"] .be-details-summary:hover{ background: var(--surface-2); }

/* =================================================================
   CHART ROWS — pair charts side-by-side inside a results-section.
   Used in SA: tornado | levers, then BE curve | heatmap.
================================================================= */
.chart-row{
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}
.chart-row-2col{
  grid-template-columns: 1fr 1fr;
}
.chart-row-3col{
  grid-template-columns: 1fr 1fr 1fr;
}
.chart-row > .chart-wrap{
  margin-bottom: 0;
  min-width: 0;
}
@media (max-width: 1100px){
  .chart-row-2col,
  .chart-row-3col{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =================================================================
   STR WORKSPACE — sticky action rail on the left, inputs on the right.
   The rail stays visible while the user scrolls through the form so
   the primary "Analyze Deal" button is always one click away. Clicking
   it opens the wide combined results panel from the right.
================================================================= */
.workspace{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.action-rail{
  position: sticky;
  top: 88px;                  /* clears the platform nav */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  /* Stay above the side-panel scrim so the rail remains clickable
     when the analysis panel is open. */
  z-index: 95;
}
.action-rail-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.action-rail-group:first-of-type{
  border-top: none;
  padding-top: 0;
}
.action-rail .ar-group-label{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  padding: 0 4px;
  margin-bottom: 2px;
}
.action-rail .ar-btn{
  justify-content: flex-start;
  width: 100%;
  font-size: 13px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.action-rail .ar-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.action-rail .ar-btn .icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.action-rail .ar-btn .icon svg{
  width: 14px;
  height: 14px;
}
.workspace-main{
  min-width: 0;
}
.workspace-main .grid{
  margin-top: 0;
}

@media (max-width: 1080px){
  .workspace{
    grid-template-columns: 1fr;
  }
  .action-rail{
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .action-rail-group{
    border-top: none;
    padding-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 100%;
  }
}

/* ----- Big primary Analyze Deal button in the rail —
   "techy" treatment: tri-stop indigo→violet→cyan gradient with a
   crisp inner highlight ring, monospace sub-label, inline glyph
   to the left of the stacked text, and a subtle scan-shimmer on
   hover. Inspired by terminal/dev-console primary actions. ----- */
button.calc.calc-analyze{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: var(--on-dark);
  font-family: var(--font-display);
  background: linear-gradient(135deg,
              var(--accent) 0%,    /* indigo */
              var(--accent-3) 55%,   /* violet */
              var(--accent-4) 110%); /* cyan tail */
  /* Inner ring + subtle glow */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 8px 24px -10px rgba(126,232,106, 0.65),
    0 0 0 1px rgba(126,232,106, 0.30);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
  overflow: hidden;
  isolation: isolate;
}
/* Scan-shimmer that sweeps left→right on hover */
button.calc.calc-analyze::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
              transparent 38%,
              rgba(255,255,255,0.28) 50%,
              transparent 62%);
  transform: translateX(-110%);
  pointer-events: none;
  transition: transform 0.6s ease;
}
button.calc.calc-analyze:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 14px 32px -10px rgba(126,232,106, 0.80),
    0 0 0 1px rgba(126,232,106, 0.40);
  filter: brightness(1.04);
}
button.calc.calc-analyze:hover:not(:disabled)::after{
  transform: translateX(110%);
}
button.calc.calc-analyze:active:not(:disabled){
  transform: translateY(0);
}
button.calc.calc-analyze:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
/* Glyph (SVG) inside a soft white-tinted square */
button.calc.calc-analyze .ca-glyph{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset;
}
button.calc.calc-analyze .ca-glyph svg{
  width: 18px; height: 18px;
  color: var(--on-accent);
}
button.calc.calc-analyze .ca-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
  min-width: 0;
}
button.calc.calc-analyze .ar-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
button.calc.calc-analyze .ar-sub{
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.84;
  margin-top: 2px;
}
button.calc.calc-analyze.is-running{
  opacity: 0.75;
  cursor: progress;
}

html[data-theme="dark"] .action-rail,
html[data-theme="midnight"] .action-rail{
  background: var(--surface);
  border-color: var(--line);
}

/* ----- Wider side panel for the combined Analysis Results.
   `.side-panel.wide` already exists at min(1180px, 98vw); for the
   stacked four-section view we want even more breathing room. ----- */
.side-panel.wide{
  width: min(1320px, 96vw);
}
/* Stacked combined results inside the panel: keep each inner
   section's title visible (the default .side-panel rule hides them
   because a single-section panel uses the head h3 for the title). */
.side-panel .sp-body #results-all .section-divider,
.side-panel .sp-body #results-all .section-title,
.side-panel .sp-body #results-all .section-sub{
  display: revert;
}
.side-panel .sp-body #results-all > .results-section{
  margin-top: 32px;
}
.side-panel .sp-body #results-all > .results-section:first-child{
  margin-top: 12px;
}

/* DASH-PANEL-EMPTY-CHARTS — when the Copilot opens a specific sub-
   section (e.g. Stress Test), sibling sections get this class so the
   user doesn't see empty/half-rendered chart cards above the one they
   asked for. Cleared when the user runs full Analyze or asks for the
   full results panel. */
#results-all .results-section.is-copilot-hidden{
  display: none !important;
}

/* =================================================================
   STR PROPERTY CARD — full-width section with a left/right split:
   property fields on the left, map preview on the right. The map
   slot is pre-placed in str.html so map.js's ensureMapDom() skips
   its default anchor-after-propType injection.
================================================================= */
.card-split .prop-split-body{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.card-split .prop-split-fields{
  min-width: 0;
}
.card-split .prop-split-map{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.card-split .prop-split-map > .label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 2px 2px;
  font-weight: 600;
}
.card-split .prop-split-map .prop-map{
  flex: 1;
  /* Match the property fields column height; min keeps it usable on tall screens */
  height: auto;
  min-height: 380px;
}
.card-split .prop-split-map .prop-map-status{
  flex-shrink: 0;
}
@media (max-width: 920px){
  .card-split .prop-split-body{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .card-split .prop-split-map .prop-map{ min-height: 260px; }
}

/* ----- Sub-section divider inside a combined card (e.g. Purchase
   & Income card uses one to separate the financing fields from the
   STR income fields). ----- */
.card-subdivider{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: -4px;
}
.card-subdivider::before,
.card-subdivider::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.card-subdivider .subdiv-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
}

/* =================================================================
   CHART HELP TOOLTIP — the `?` icon next to each chart title that
   reveals the description on hover. Replaces the verbose .ch-sub
   block under titles. Reuses the .metric-info tooltip pattern.
================================================================= */
.chart-wrap .ch-title{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ch-help{
  /* Slight visual tweak — bigger touch target than the inline
     .metric-info icons inside inputs. */
  width: 18px;
  height: 18px;
  font-size: 11px;
}

/* =================================================================
   PROJECTION SUMMARY ROW — 4 KPI cards at the top of LTP, sharing the
   .be-kpi tier styling but with a comfortable sub-line for context.
================================================================= */
.proj-summary-row{
  margin-top: 8px;
  margin-bottom: 22px;
}
.proj-summary-row .be-kpi .bek-sub{
  /* Two-line summary text under the value */
  min-height: 32px;
  line-height: 1.45;
}

/* =================================================================
   BRRRR HOLDING-COSTS INLINE READOUT — auto-computed total sitting
   at the bottom of the Cash-Out Refinance card (replaced the
   standalone Holding Costs card so the inputs flow stays tighter).
================================================================= */
.holding-readout-inline{
  margin-top: 8px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.holding-readout-inline .hri-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.holding-readout-inline .hri-label{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.holding-readout-inline .hri-chip{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}
.holding-readout-inline .hri-total{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.holding-readout-inline .hri-breakdown{
  display: flex;
  flex-direction: column;   /* one line per item; $ values right-align in a column */
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.holding-readout-inline .hri-line{
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}
.holding-readout-inline .hri-line .hri-val{ margin-left: auto; }
.holding-readout-inline .hri-sub{
  font-size: 10.5px;
  opacity: 0.75;
}
.holding-readout-inline .hri-val{
  font-weight: 700;
  color: var(--ink);
}
html[data-theme="dark"] .holding-readout-inline,
html[data-theme="midnight"] .holding-readout-inline{
  background: var(--surface);
  border-color: var(--line-2);
}

/* =================================================================
   PORTFOLIO ACQUISITION TABLE — sits inside a collapsible details
   block. Compact header + theme-aware borders, no inline color hacks.
================================================================= */
.port-acq-table th.pat-h{
  padding: 11px 12px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
}
.port-acq-table th.pat-h.pat-divider,
.port-acq-table td.pat-divider{
  border-left: 1px solid var(--line);
}

/* =================================================================
   PROJECTION MILESTONE TABLE — minimal styling, no inline color hacks.
================================================================= */
.proj-milestones-table{
  width: 100%;
  border-collapse: collapse;
}
.proj-milestones-table .pmt-row{
  border-bottom: 1px solid var(--line);
}
.proj-milestones-table .pmt-row:hover{
  background: var(--surface-2);
}
.proj-milestones-table .pmt-row.pmt-payoff{
  background: rgba(245,158,11,0.10);
}
html[data-theme="dark"] .proj-milestones-table .pmt-row.pmt-payoff,
html[data-theme="midnight"] .proj-milestones-table .pmt-row.pmt-payoff{
  background: rgba(251,191,36,0.16);
}
.proj-milestones-table .pmt-cell{
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
}
.proj-milestones-table .pmt-year{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 13px;
  color: var(--ink);
}
.proj-milestones-table .pmt-num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.proj-milestones-table .pmt-strong{ font-weight: 700; }
.proj-milestones-table .pmt-pos{ color: var(--pos-strong); font-weight: 700; }
.proj-milestones-table .pmt-neg{ color: var(--neg-strong); font-weight: 700; }
html[data-theme="dark"] .proj-milestones-table .pmt-pos,
html[data-theme="midnight"] .proj-milestones-table .pmt-pos{ color: #6ee7b7; }
html[data-theme="dark"] .proj-milestones-table .pmt-neg,
html[data-theme="midnight"] .proj-milestones-table .pmt-neg{ color: #fca5a5; }

/* =================================================================
   SA SUMMARY BLOCK — at the top of Sensitivity Analysis, before the
   charts. Frames the takeaway text in a soft accent card so users
   read the conclusions first, then dig into charts for the why.
================================================================= */
.sa-summary{
  margin: 8px 0 22px;
  padding: 18px 22px 20px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-2);
  border-radius: 10px;
}
.sa-summary-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sa-summary-head .sas-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;                /* soft square reads cleaner than a circle */
  background: var(--brand-fill);     /* bright brand green */
  color: var(--brand-ink);           /* black glyph/icon */
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}
.sa-summary-head .sas-icon svg{ width: 15px; height: 15px; display: block; }
.sa-summary-head h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.sa-summary-body{ margin-top: 0; }
.sa-summary-body p{
  margin: 6px 0;
  line-height: 1.55;
  font-size: 13.5px;
}
.sa-summary-body p:first-child{ margin-top: 0; }
.sa-summary-body p:last-child{ margin-bottom: 0; }

/* Variant when the summary body wraps a KPI row instead of text paragraphs.
   Drops the inner kpi-row's margin so it sits flush inside the wrapper. */
.section-summary-kpi .sa-summary-body .be-kpi-row{
  margin: 0;
}

html[data-theme="dark"] .sa-summary,
html[data-theme="midnight"] .sa-summary{
  /* Match the cost-table row tone so the summary box reads as a
     visible card on the side panel (--surface-solid collides with
     the panel bg in both dark themes, leaving the frame invisible). */
  background:        var(--surface);
  border-color:      var(--line);
  border-left-color: var(--ink-2);
}

/* =================================================================
   FINANCING COMPARISON — three compact KPI-style cards (mirrors the
   Summary · Profit Outlook layout) + tightened comparison table.
   Wrapped in a <details> wrapper since the section is opt-in.
================================================================= */
.section-optional-chip{
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Details wrapper — collapsed by default. */
.fin-details{
  margin: 6px 0 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.fin-details > summary.fin-details-summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface-2);
}
.fin-details > summary.fin-details-summary::-webkit-details-marker{ display: none; }
.fin-details[open] > summary.fin-details-summary{
  border-bottom: 1px solid var(--line);
}
.fin-details .fdis-icon{
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
  transition: transform .15s;
}
.fin-details[open] .fdis-icon{ transform: rotate(90deg); }
.fin-details .fdis-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  flex-grow: 1;
}
.fin-details .fdis-meta{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.fin-details-body{ padding: 18px 18px 16px; }

/* The three head-to-head cards. */
.fin-h2h{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 16px;
}
@media (max-width: 720px){
  .fin-h2h{ grid-template-columns: 1fr; }
}
.fin-card{
  position: relative;
  padding: 14px 16px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.fin-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--line);
}
.fin-card.kpi-pos{ background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.22); }
.fin-card.kpi-pos::before{ background: var(--pos); }
.fin-card.kpi-pos .fin-card-val{ color: var(--pos-strong); }
.fin-card.kpi-ok{ background: rgba(59,130,246,0.05); border-color: rgba(59,130,246,0.18); }
.fin-card.kpi-ok::before{ background: var(--accent); }
.fin-card.kpi-neg{ background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.22); }
.fin-card.kpi-neg::before{ background: var(--warn); }
.fin-card.kpi-neg .fin-card-val{ color: var(--warn-strong); }

.fin-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.fin-card-tag{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.fin-card-crown{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--pos-strong);
  background: rgba(16,185,129,0.18);
  border: 1px solid rgba(16,185,129,0.35);
  padding: 2px 8px;
  border-radius: 999px;
}
.fin-card-val{
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.fin-card-sub{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.fin-card-meta{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.03em;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* Winner card — green glow ring (no solid green fill, just border
   accent so the underlying tier tint still reads). */
.fin-card-winner{
  box-shadow:
    0 0 0 1.5px rgba(16,185,129,0.50),
    0 0 18px rgba(16,185,129,0.35),
    0 4px 16px -4px rgba(16,185,129,0.20);
  border-color: rgba(16,185,129,0.55);
}

/* Dark / midnight: brighter pulse for the green glow. */
html[data-theme="dark"] .fin-card-winner,
html[data-theme="midnight"] .fin-card-winner{
  box-shadow:
    0 0 0 1.5px rgba(52,211,153,0.65),
    0 0 22px rgba(52,211,153,0.45),
    0 4px 18px -4px rgba(52,211,153,0.30);
  border-color: rgba(52,211,153,0.65);
}
html[data-theme="dark"] .fin-card-crown,
html[data-theme="midnight"] .fin-card-crown{
  color: #6ee7b7;
  background: rgba(16,185,129,0.22);
  border-color: rgba(52,211,153,0.40);
}
/* Tier tints — brighter in dark themes, matches .be-kpi pattern. */
html[data-theme="dark"] .fin-card.kpi-pos,
html[data-theme="midnight"] .fin-card.kpi-pos{
  background: rgba(16,185,129,0.14); border-color: rgba(52,211,153,0.30);
}
html[data-theme="dark"] .fin-card.kpi-pos .fin-card-val,
html[data-theme="midnight"] .fin-card.kpi-pos .fin-card-val{ color: #6ee7b7; }
html[data-theme="dark"] .fin-card.kpi-ok,
html[data-theme="midnight"] .fin-card.kpi-ok{
  background: rgba(126,232,106,0.10); border-color: rgba(126,232,106,0.30);
}
html[data-theme="dark"] .fin-card.kpi-neg,
html[data-theme="midnight"] .fin-card.kpi-neg{
  background: rgba(245,158,11,0.14); border-color: rgba(251,191,36,0.30);
}
html[data-theme="dark"] .fin-card.kpi-neg .fin-card-val,
html[data-theme="midnight"] .fin-card.kpi-neg .fin-card-val{ color: #fcd34d; }

/* Color-coded ROI row in the comparison table. */
.compare-table .ch-roi-row{
  font-weight: 700;
}
.compare-table .ch-roi-pos{ color: var(--pos-strong); font-weight: 800; }
.compare-table .ch-roi-ok{  color: var(--ink); }
.compare-table .ch-roi-neg{ color: var(--warn-strong); }
html[data-theme="dark"] .compare-table .ch-roi-pos,
html[data-theme="midnight"] .compare-table .ch-roi-pos{ color: #6ee7b7; }
html[data-theme="dark"] .compare-table .ch-roi-neg,
html[data-theme="midnight"] .compare-table .ch-roi-neg{ color: #fcd34d; }

/* =================================================================
   LONG-TERM PROJECTION HEADER — "Initial Cash Deployed" 3-card row.
   Sits between the section sub-text and the mechanics row, giving
   the user the anchor numbers (initial capital, per-flip return,
   reinvest split) before the projection math compounds them.
================================================================= */
.cv-initial{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 6px 0 14px;
}
@media (max-width: 720px){
  .cv-initial{ grid-template-columns: 1fr; }
}
.cv-initial .cv-init-block{
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-2);
  border-radius: 10px;
}
.cv-initial .cvi-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.cv-initial .cvi-val{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 4px;
}
.cv-initial .cvi-sub{
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* Chart card — wraps the canvas with a title + about-this-chart help. */
.cv-chart-card{
  margin: 14px 0;
}
.cv-chart-card .cv-chart-title{
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* =================================================================
   CAPITAL VELOCITY MECHANICS ROW — small pill chain that visualises
   the "Flips Completed" calc: cycle length → cycles/yr × horizon =
   flips. Sits between the section sub-text and the KPI cards so the
   user immediately sees where the headline number comes from.
================================================================= */
.cv-mechanics{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cv-mechanics .cvm-step{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 120px;
}
.cv-mechanics .cvm-k{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.cv-mechanics .cvm-v{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.cv-mechanics .cvm-d{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  font-weight: 500;
}
.cv-mechanics .cvm-op{
  align-self: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-3);
  padding: 0 2px;
}
.cv-mechanics .cvm-result{
  background: var(--accent-soft);
  border-color: rgba(126,232,106,0.30);
}
.cv-mechanics .cvm-result .cvm-v{ color: var(--accent-ink); font-size: 22px; }
html[data-theme="dark"] .cv-mechanics .cvm-result,
html[data-theme="midnight"] .cv-mechanics .cvm-result{
  background: rgba(126,232,106,0.18);
  border-color: rgba(126,232,106,0.40);
}
html[data-theme="dark"] .cv-mechanics .cvm-result .cvm-v,
html[data-theme="midnight"] .cv-mechanics .cvm-result .cvm-v{ color: color-mix(in srgb, var(--accent) 52%, white); }

/* =================================================================
   FLIP PROFIT TABLE — compact 2-col waterfall (label · value) used
   in the Profit Analysis section. Builds on .cost-table for base
   typography but ditches the bar-cell + pct columns. Tier coloring
   on the grand row mirrors the .profit-callout verdict tints so the
   bottom line reads at a glance.
================================================================= */
.flip-profit-table .ci-label{ width: 62%; }
.flip-profit-table .ci-val  { width: 38%; }
/* Negatives in red regardless of theme. */
.flip-profit-table .neg-val{ color: var(--neg-strong); }
html[data-theme="dark"] .flip-profit-table .neg-val,
html[data-theme="midnight"] .flip-profit-table .neg-val{ color: #fca5a5; }

.flip-profit-table .ci-subtotal td{
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-2);
  border-top:    1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.flip-profit-table .ci-grand td{
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 2px solid rgba(126,232,106,0.30);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
}
.flip-profit-table .ci-grand .ci-val{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
}

/* Tier tints on the grand row — match the verdict callout palette
   so the After-Tax Profit takes the same color as the verdict above. */
.flip-profit-table .ci-grand.tier-great td,
.flip-profit-table .ci-grand.tier-good  td{ background: rgba(16,185,129,0.10); border-top-color: rgba(16,185,129,0.30); }
.flip-profit-table .ci-grand.tier-ok    td{ background: rgba(59,130,246,0.10); border-top-color: rgba(59,130,246,0.30); }
.flip-profit-table .ci-grand.tier-warn  td{ background: rgba(245,158,11,0.10); border-top-color: rgba(245,158,11,0.30); }
.flip-profit-table .ci-grand.tier-weak  td{ background: rgba(234,88,12,0.10);  border-top-color: rgba(234,88,12,0.30); }
.flip-profit-table .ci-grand.tier-bad   td{ background: rgba(239,68,68,0.10);  border-top-color: rgba(239,68,68,0.32); }
.flip-profit-table .ci-grand.tier-great .ci-val,
.flip-profit-table .ci-grand.tier-good  .ci-val{ color: var(--pos-strong); }
.flip-profit-table .ci-grand.tier-ok    .ci-val{ color: var(--accent-2); }
.flip-profit-table .ci-grand.tier-warn  .ci-val{ color: var(--warn-strong); }
.flip-profit-table .ci-grand.tier-weak  .ci-val{ color: var(--warn-strong); }
.flip-profit-table .ci-grand.tier-bad   .ci-val{ color: var(--neg-strong); }

/* Dark / midnight: brighter row tints + brighter value text */
html[data-theme="dark"] .flip-profit-table .ci-grand.tier-great td,
html[data-theme="dark"] .flip-profit-table .ci-grand.tier-good  td,
html[data-theme="midnight"] .flip-profit-table .ci-grand.tier-great td,
html[data-theme="midnight"] .flip-profit-table .ci-grand.tier-good  td{
  background: rgba(16,185,129,0.18); border-top-color: rgba(52,211,153,0.40);
}
html[data-theme="dark"] .flip-profit-table .ci-grand.tier-great .ci-val,
html[data-theme="dark"] .flip-profit-table .ci-grand.tier-good  .ci-val,
html[data-theme="midnight"] .flip-profit-table .ci-grand.tier-great .ci-val,
html[data-theme="midnight"] .flip-profit-table .ci-grand.tier-good  .ci-val{ color: #6ee7b7; }

html[data-theme="dark"] .flip-profit-table .ci-grand.tier-ok td,
html[data-theme="midnight"] .flip-profit-table .ci-grand.tier-ok td{
  background: rgba(126,232,106,0.18); border-top-color: rgba(126,232,106,0.40);
}
html[data-theme="dark"] .flip-profit-table .ci-grand.tier-ok .ci-val,
html[data-theme="midnight"] .flip-profit-table .ci-grand.tier-ok .ci-val{ color: color-mix(in srgb, var(--accent) 52%, white); }

html[data-theme="dark"] .flip-profit-table .ci-grand.tier-warn td,
html[data-theme="midnight"] .flip-profit-table .ci-grand.tier-warn td{
  background: rgba(245,158,11,0.18); border-top-color: rgba(251,191,36,0.40);
}
html[data-theme="dark"] .flip-profit-table .ci-grand.tier-warn .ci-val,
html[data-theme="midnight"] .flip-profit-table .ci-grand.tier-warn .ci-val{ color: #fcd34d; }

html[data-theme="dark"] .flip-profit-table .ci-grand.tier-weak td,
html[data-theme="dark"] .flip-profit-table .ci-grand.tier-bad  td,
html[data-theme="midnight"] .flip-profit-table .ci-grand.tier-weak td,
html[data-theme="midnight"] .flip-profit-table .ci-grand.tier-bad  td{
  background: rgba(239,68,68,0.18); border-top-color: rgba(248,113,113,0.40);
}
html[data-theme="dark"] .flip-profit-table .ci-grand.tier-weak .ci-val,
html[data-theme="dark"] .flip-profit-table .ci-grand.tier-bad  .ci-val,
html[data-theme="midnight"] .flip-profit-table .ci-grand.tier-weak .ci-val,
html[data-theme="midnight"] .flip-profit-table .ci-grand.tier-bad  .ci-val{ color: #fca5a5; }

/* =================================================================
   PROFIT CALLOUT — soft-tinted narrative card for Deal Verdict /
   70% Rule Check on the Profit Analysis panel. Uses the same tier
   tint pattern as the .be-kpi summary cards (translucent bg + left
   accent stripe), so the verdict reads as part of the same visual
   system instead of a heavy solid-color banner.
================================================================= */
.profit-callout{
  position: relative;
  margin: 0 0 18px;
  padding: 16px 20px 16px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-2);
  border-radius: 10px;
}
.profit-callout .pc-kicker{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.profit-callout .pc-title{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.25;
}
.profit-callout .pc-sub{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.profit-callout .pc-sub strong{ color: var(--ink); font-weight: 700; }

/* Tier tints — match the .be-kpi palette for cross-component consistency */
.profit-callout.pc-great { background: rgba(5,150,105,0.08);  border-color: rgba(5,150,105,0.22);  border-left-color: var(--pos); }
.profit-callout.pc-good  { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.20); border-left-color: var(--pos); }
.profit-callout.pc-ok    { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.20); border-left-color: var(--accent-ink); }
.profit-callout.pc-warn  { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.22); border-left-color: var(--warn); }
.profit-callout.pc-weak  { background: rgba(234,88,12,0.08);  border-color: rgba(234,88,12,0.25);  border-left-color: #ea580c; }
.profit-callout.pc-bad   { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.25);  border-left-color: var(--neg); }
/* Tier-tinted titles for emphasis */
.profit-callout.pc-great .pc-title,
.profit-callout.pc-good  .pc-title{ color: var(--pos-strong); }
.profit-callout.pc-ok    .pc-title{ color: var(--accent-2); }
.profit-callout.pc-warn  .pc-title{ color: var(--warn-strong); }
.profit-callout.pc-weak  .pc-title,
.profit-callout.pc-bad   .pc-title{ color: var(--neg-strong); }

/* Dark / midnight: brighter tints + brighter title colors */
html[data-theme="dark"] .profit-callout.pc-great,
html[data-theme="midnight"] .profit-callout.pc-great,
html[data-theme="dark"] .profit-callout.pc-good,
html[data-theme="midnight"] .profit-callout.pc-good{
  background: rgba(16,185,129,0.14); border-color: rgba(52,211,153,0.30);
}
html[data-theme="dark"] .profit-callout.pc-great .pc-title,
html[data-theme="midnight"] .profit-callout.pc-great .pc-title,
html[data-theme="dark"] .profit-callout.pc-good .pc-title,
html[data-theme="midnight"] .profit-callout.pc-good .pc-title{ color: #6ee7b7; }
html[data-theme="dark"] .profit-callout.pc-ok,
html[data-theme="midnight"] .profit-callout.pc-ok{
  background: rgba(126,232,106,0.12); border-color: rgba(126,232,106,0.30);
}
html[data-theme="dark"] .profit-callout.pc-ok .pc-title,
html[data-theme="midnight"] .profit-callout.pc-ok .pc-title{ color: color-mix(in srgb, var(--accent) 52%, white); }
html[data-theme="dark"] .profit-callout.pc-warn,
html[data-theme="midnight"] .profit-callout.pc-warn{
  background: rgba(245,158,11,0.14); border-color: rgba(251,191,36,0.30);
}
html[data-theme="dark"] .profit-callout.pc-warn .pc-title,
html[data-theme="midnight"] .profit-callout.pc-warn .pc-title{ color: #fcd34d; }
html[data-theme="dark"] .profit-callout.pc-weak,
html[data-theme="midnight"] .profit-callout.pc-weak,
html[data-theme="dark"] .profit-callout.pc-bad,
html[data-theme="midnight"] .profit-callout.pc-bad{
  background: rgba(239,68,68,0.14); border-color: rgba(248,113,113,0.32);
}
html[data-theme="dark"] .profit-callout.pc-weak .pc-title,
html[data-theme="midnight"] .profit-callout.pc-weak .pc-title,
html[data-theme="dark"] .profit-callout.pc-bad .pc-title,
html[data-theme="midnight"] .profit-callout.pc-bad .pc-title{ color: #fca5a5; }

/* =================================================================
   STRESS-TEST LEGEND — chips above the bar chart, one per scenario.
   Each chip shows the scenario name, the variables that were shocked,
   and a colored swatch matching the bar tier in the chart below.
================================================================= */
.stress-legend{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}
.stress-leg-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
}
.stress-leg-item .slg-swatch{
  width: 10px;
  height: 24px;
  border-radius: 3px;
  flex-shrink: 0;
}
.stress-leg-item .slg-text{ min-width: 0; }
.stress-leg-item .slg-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.stress-leg-item .slg-desc{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Per-tier swatch colors (match bar chart tier fills) */
.stress-leg-good .slg-swatch{ background: var(--pos); }
.stress-leg-ok   .slg-swatch{ background: var(--accent); }
.stress-leg-warn .slg-swatch{ background: var(--warn); }
.stress-leg-bad  .slg-swatch{ background: var(--neg); }

html[data-theme="dark"] .stress-leg-item,
html[data-theme="midnight"] .stress-leg-item{
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .stress-leg-item .slg-name,
html[data-theme="midnight"] .stress-leg-item .slg-name{ color: var(--ink); }

/* =================================================================
   (LEGACY) STRESS-TEST LIST — homepage-inspired row layout for the SA
   "Combined Shock Scenarios" block. Replaces the old bar chart so
   each row reads as: scenario · what was shocked · annual CF.
================================================================= */
.stress-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.stress-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.stress-row:hover{
  transform: translateX(2px);
}
.stress-row .sr-main{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stress-row .sr-name{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.stress-row .sr-desc{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  opacity: 0.78;
  letter-spacing: 0.02em;
}
.stress-row .sr-val{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.stress-row .sr-val .sr-yr{
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 3px;
}

/* Severity tints — light theme */
.stress-row-good{ background: var(--pos-soft); color: var(--pos-strong); border-color: rgba(5, 150, 105, 0.18); }
.stress-row-ok  { background: var(--warn-soft); color: var(--warn-strong); border-color: rgba(217, 119, 6, 0.18); }
.stress-row-warn{ background: #fed7aa; color: #9a3412; border-color: rgba(234, 88, 12, 0.22); }
.stress-row-bad { background: var(--neg-soft); color: var(--neg-strong); border-color: rgba(220, 38, 38, 0.22); }

/* Dark + Midnight tints — same hue family, lifted text for legibility */
html[data-theme="dark"] .stress-row-good,
html[data-theme="midnight"] .stress-row-good{
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.30);
}
html[data-theme="dark"] .stress-row-ok,
html[data-theme="midnight"] .stress-row-ok{
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.32);
}
html[data-theme="dark"] .stress-row-warn,
html[data-theme="midnight"] .stress-row-warn{
  background: rgba(234, 88, 12, 0.18);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.36);
}
html[data-theme="dark"] .stress-row-bad,
html[data-theme="midnight"] .stress-row-bad{
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.40);
}


/* =================================================================
   COMPS OVERLAY (v2) — full-screen panel for BRRRR / FNF / NC.
   Reuses the .strc-overlay / .strc-overlay-card layout from the STR
   overlay. Content classes are .cmpv-* (Comps View v2) so STR /
   property-comps don't collide.
================================================================= */

#compsTitlePill{ margin-left: 8px; font-size: 12px; vertical-align: middle; }
.cmpv-pill{
  display: inline-block;
  padding: 2px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  vertical-align: middle;
}
[data-theme="dark"]  .cmpv-pill,
[data-theme="midnight"] .cmpv-pill{
  background: rgba(255,255,255,0.06);
  color: var(--ink-2);
}

/* ---- Hero tiles: ARV + rent estimates ---- */
.cmpv-hero{
  display: grid;
  /* auto-fit so a single tile (Fix-n-Flip = ARV only) fills the width
     instead of leaving the right half empty; two tiles (BRRRR/NC = ARV +
     Rent) split evenly. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.cmpv-hero-tile{
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
[data-theme="dark"]  .cmpv-hero-tile,
[data-theme="midnight"] .cmpv-hero-tile{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.cmpv-hero-lbl{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 6px;
}
.cmpv-hero-val{
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cmpv-hero-unit{
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 2px;
}
.cmpv-hero-sub{
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
}
.cmpv-hero-apply{
  margin-top: 10px;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-solid);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cmpv-hero-apply:hover{ background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.cmpv-hero-apply.is-applied{ background: var(--pos); color: var(--on-accent); border-color: var(--pos); }

/* Subject-property strip — what the comps/estimates compare against. */
.cmpv-subject{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
/* Label uses the SAME format as the estimate tiles' label (.cmpv-hero-lbl). */
.cmpv-subject-k{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.cmpv-subject-v{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-theme="dark"] .cmpv-subject,
[data-theme="midnight"] .cmpv-subject{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

/* ---- Comp curation: confidence badge, include checkbox, best/outlier ---- */
.cmpv-conf-row{ margin-top: 7px; }
.cmpv-conf{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.cmpv-conf::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cmpv-conf-high{ color: var(--pos, #059669); background: rgba(5,150,105,0.10); border-color: rgba(5,150,105,0.30); }
.cmpv-conf-med{ color: #b45309; background: rgba(180,83,9,0.10); border-color: rgba(180,83,9,0.28); }
.cmpv-conf-low{ color: var(--neg, #dc2626); background: rgba(220,38,38,0.09); border-color: rgba(220,38,38,0.28); }
.cmpv-conf{ cursor: help; }

/* Custom hover tooltip for [data-tip] elements in the comps overlay. */
.cmpv-tip{
  position: fixed;
  z-index: 100000;
  max-width: 280px;
  padding: 9px 12px;
  background: var(--surface-solid, #fff);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
}
.cmpv-tip[hidden]{ display: none; }
[data-theme="dark"] .cmpv-tip,
[data-theme="midnight"] .cmpv-tip{ background: var(--surface-2); border-color: rgba(255,255,255,0.14); }

/* Market Trends unavailable note (rural / low-volume zips). */
.cmpv-trend-empty{
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* Include checkbox column */
.cmps-table-curate th.cmpv-incl-h{
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-align: center;
  width: 38px;
}
.cmpv-incl-cell{ text-align: center; width: 38px; }
.cmpv-incl{
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #2E8B3A);
  cursor: pointer;
  margin: 0;
}
/* Best / outlier badges in the address cell — clean, on-brand chips. */
.cmpv-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 7px;
  padding: 1px 9px 1px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}
.cmpv-badge.is-out{
  color: var(--neg, #dc2626);
  background: transparent;
  border: 1px solid rgba(220,38,38,0.32);
}
/* Top-match marker: just a clear, larger gold star (no pill). */
.cmpv-star-flag{
  color: #f59e0b;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
  margin-left: 7px;
  cursor: help;
}
/* Legend above the comp table explaining the star / outlier markers. */
.cmpv-table-legend{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 18px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.cmpv-leg-item{ display: inline-flex; align-items: center; gap: 6px; }
.cmpv-table-legend .cmpv-star-flag{ margin-left: 0; }
.cmpv-table-legend .cmpv-badge.is-out{ margin-left: 0; }
.cmpv-leg-hint{ color: var(--ink-4); margin-left: auto; }
/* Excluded comp row — greyed, struck value, but still toggleable */
.cmps-table-curate tr.is-excluded{ opacity: 0.5; }
.cmps-table-curate tr.is-excluded td strong{ text-decoration: line-through; text-decoration-color: var(--ink-4); }

/* REIzer Estimate — labeled cross-check chips (median + RentCast AVM)
   under the headline value, plus a "how we got this" disclosure. The
   headline is OUR weighted estimate; these show the comps' plain median
   and RentCast's own AVM so the user can see all three side-by-side. */
/* Alternate reads of the same comps — a clean key→value list, each on its
   own line (so Median / Size-adjusted / RentCast AVM stack and read crisp). */
.cmpv-xc-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.cmpv-xc{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  cursor: help;
}
.cmpv-xc-k{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.cmpv-xc-v{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
[data-theme="dark"] .cmpv-xc-v,
[data-theme="midnight"] .cmpv-xc-v{ color: var(--on-dark, #e6e9ee); }

/* Market Trends — quarterly bar charts (sale price, rent, cashflow yield)
   + REIzer's plain-English read. Reuses .strc-mkt-section / .strc-mkt-card
   for the section frame; the bar/read styles below are comps-overlay-only. */

/* Quarterly bar chart (8 quarters = 24 months) */
.cmpv-qchart{ margin: 2px 0 18px; }
.cmpv-qchart:last-child{ margin-bottom: 0; }
.cmpv-qchart-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.cmpv-qchart-title{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-2);
}
.cmpv-qchart-chg{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}
.cmpv-qchart-chg.is-up{ color: var(--pos, #059669); }
.cmpv-qchart-chg.is-down{ color: var(--neg, #dc2626); }
.cmpv-qbars{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 8px;
  height: 170px;
}
.cmpv-qcol{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}
.cmpv-qval{
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
  white-space: nowrap;
}
.cmpv-qbar{
  flex: none;
  width: 100%;
  max-width: 46px;
  border-radius: 5px 5px 0 0;
  opacity: 1;            /* solid, uniform — no gradient/highlight across bars */
}
.cmpv-qlbl{
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-3);
  margin-top: 7px;
  white-space: nowrap;
}
.cmpv-yield-explain{
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 78ch;
}

/* REIzer's auto-read of the trend (plain-English bullets), shown between
   the price/rent bars and the cashflow-yield divergence chart. */
.cmpv-trend-read{
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cmpv-trend-read-head{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.cmpv-trend-read-title{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-2);            /* charcoal */
}
/* Colored % change inside the read — green up, red down. */
.cmpv-pct-up{ color: var(--pos, #059669); font-weight: 700; }
.cmpv-pct-down{ color: var(--neg, #dc2626); font-weight: 700; }
[data-theme="dark"] .cmpv-trend-read,
[data-theme="midnight"] .cmpv-trend-read{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
/* Lower block: price+rent quarterly bars (left half) + REIzer's read and
   the cashflow-yield chart (right half) — balances the two columns. */
.cmpv-trend-split{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (min-width: 860px){
  /* stretch so the left (price+rent bars) and right (read + yield) columns
     are the SAME height; the charts inside flex-grow to fill. */
  .cmpv-trend-split{ grid-template-columns: 1fr 1fr; align-items: stretch; }
  .cmpv-trend-split-bars{ display: flex; flex-direction: column; gap: 20px; }
  .cmpv-trend-split-bars .cmpv-qchart{ flex: 1; display: flex; flex-direction: column; margin: 0; }
  .cmpv-trend-split-bars .cmpv-qbars{ flex: 1; height: auto; min-height: 140px; }
  .cmpv-trend-split-read > .strc-mkt-card{ flex: 1; display: flex; flex-direction: column; }
  .cmpv-trend-split-read .cmpv-qchart{ flex: 1; display: flex; flex-direction: column; margin: 0; }
  .cmpv-trend-split-read .cmpv-qbars{ flex: 1; height: auto; min-height: 140px; }
}
.cmpv-trend-split-read{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cmpv-trend-split-read .cmpv-trend-read{ margin: 0; }
/* In the narrower split columns, nudge bar value labels down slightly so 8
   quarters stay legible (still readable, not the old tiny 9px). */
.cmpv-trend-split .cmpv-qval{ font-size: 11px; }
.cmpv-trend-split .cmpv-qbars{ gap: 6px; }
.cmpv-trend-split .cmpv-qbar{ max-width: 38px; }

/* Darker, larger line-chart readouts (the STR defaults read too faint). */
#compsTrends .strc-trend-num-lbl{ font-size: 11px; color: var(--ink-3); }
#compsTrends .strc-trend-num-val{ font-size: 13px; color: var(--ink); font-weight: 700; }
#compsTrends .strc-trend-axis span{ font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
#compsTrends .strc-trend-lbl{ color: var(--ink-2); }

/* Restored line-chart hover tooltip — lighter than the STR near-black one. */
#compsTrends .strc-trend-tooltip{
  background: var(--surface-solid, #fff);
  color: var(--ink);
  border: 1px solid var(--line-2);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
#compsTrends .strc-tip-val{ color: var(--ink); }
#compsTrends .strc-tip-hdr{ color: var(--ink-2); }
#compsTrends .strc-tip-key{ color: var(--ink-3); }
[data-theme="dark"] #compsTrends .strc-trend-tooltip,
[data-theme="midnight"] #compsTrends .strc-trend-tooltip{
  background: var(--surface-2);
  border-color: rgba(255,255,255,0.14);
}

/* The line-chart legend reuses the STR comps .strc-spark-legend (solid =
   smoothed, dashed = raw) — see the STR comps section. No bespoke CSS. */

/* Box plots, tabs, filter bar, comp table all reuse the existing
   .strc-distrib / .strc-box-* / .strc-filterbar / .strc-filter /
   .strc-reset / .cmps-table / .cmps-empty styles defined earlier in
   the STR comps section — they were extracted to be reusable.
   The Comps Overlay v2 only needs the deltas below. */

/* Hero "n comps" suffix on the tile label */
.cmpv-hero-n{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 600;
  margin-left: 4px;
}

/* Compact mid-section spacing for tabs + filter bar */
.cmpv-mid{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 12px;
}
.cmpv-tabs{
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  align-self: flex-start;
}
[data-theme="dark"]  .cmpv-tabs,
[data-theme="midnight"] .cmpv-tabs{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.cmpv-tab{
  padding: 7px 16px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cmpv-tab:hover{ color: var(--ink); }
.cmpv-tab.is-active{
  background: var(--surface-solid, #fff);
  color: var(--accent-ink, #2E8B3A);
  box-shadow: 0 1px 3px rgba(17,21,28,0.14);
}
[data-theme="dark"] .cmpv-tab.is-active,
[data-theme="midnight"] .cmpv-tab.is-active{
  background: rgba(255,255,255,0.14);
  color: var(--on-dark);
}
.cmpv-tab-n{
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.cmpv-tab:not(.is-active) .cmpv-tab-n{
  background: var(--surface-solid);
  color: var(--ink-3);
}

/* Use-as-ARV / Use-as-Rent button inside the table row */
.cmpv-row-apply-cell{ text-align: right; }
.cmpv-row-apply{
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.cmpv-row-apply:hover{ background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.cmpv-row-apply.is-applied{ background: var(--pos); color: var(--on-accent); border-color: var(--pos); }

/* Hint under the map when comps were returned without coordinates */
.cmpv-map-hint{
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.30);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-2);
}
.cmpv-map-hint[hidden]{ display: none; }

/* Match heights: left column (hero + box plots) = right map column.
   Match the strc-top-grid contract used by the STR overlay so the
   map fills the available height instead of stretching beyond the
   left column. */
#compsOverlay .strc-top-grid{ align-items: stretch; }
#compsOverlay .strc-top-left{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#compsOverlay .strc-top-right{
  display: flex;
  flex-direction: column;
}
#compsOverlay .strc-map{
  flex: 1;
  min-height: 320px;
}

/* Plain-English insight panel — enclosed bordered card so it reads
   as its own block, not just a tinted strip. Sits below the top
   grid and above the tabs/filters. */
.cmpv-insight{
  margin: 16px 0 0;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
[data-theme="dark"]  .cmpv-insight,
[data-theme="midnight"] .cmpv-insight{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.cmpv-insight-head{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.cmpv-insight-list{
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.cmpv-insight-list li{
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}
.cmpv-insight-list li:last-child{ margin-bottom: 0; }
.cmpv-insight-list li::before{
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-ink);
  font-weight: 700;
}
.cmpv-insight-list strong{ color: var(--ink); font-weight: 700; }
.cmpv-insight-list em{ font-style: italic; color: var(--ink-3); }
.cmpv-ins-good{ color: var(--pos); font-weight: 700; }
.cmpv-ins-ok{   color: var(--ink-2); font-weight: 700; }
.cmpv-ins-warn{ color: var(--neg); font-weight: 700; }

/* =================================================================
   REVIEW PROMPT MODAL (Phase 4 / REVIEWS-1)
   =================================================================*/
.rp-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-modal[hidden] { display: none; }
.rp-scrim {
  position: absolute;
  inset: 0;
  background: rgba(12,15,10,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: rp-fade 0.18s ease;
}
.rp-card {
  position: relative;
  /* SOLID surface — var(--surface) is translucent and let the page
     bleed through the dialog */
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 32px 80px -24px rgba(12,15,10,0.45), 0 0 0 1px rgba(126,232,106,0.08);
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 28px 26px 20px;
  animation: rp-pop 0.18s ease;
  text-align: center;
}
@keyframes rp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-pop  { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rp-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
}
.rp-close:hover { color: var(--ink); background: var(--surface-2); }
.rp-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 8px;
}
.rp-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
}
.rp-sub {
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0 0 16px;
}
.rp-stars {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 16px;
}
.rp-star {
  background: transparent;
  border: 0;
  font-size: 34px;
  line-height: 1;
  color: var(--line-2);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: color 0.1s, transform 0.1s;
}
.rp-star:hover { transform: scale(1.1); }
.rp-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rp-star-on { color: var(--warn); }
.rp-body {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  font-family: var(--font-display);
  font-size: 14px;
  background: var(--surface-2);
  color: var(--ink);
  resize: vertical;
  min-height: 84px;
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.rp-body::placeholder { color: var(--ink-4); }
.rp-body:focus {
  outline: none;
  background: var(--surface-solid);
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(126,232,106,0.16);
}
.rp-public-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
}
.rp-public-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.rp-public-fields input {
  width: 100%;
  font-family: var(--font-display);
  font-size: 13px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.rp-public-fields input::placeholder { color: var(--ink-4); }
.rp-public-fields input:focus {
  outline: none;
  background: var(--surface-solid);
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(126,232,106,0.16);
}
.rp-error {
  background: var(--neg-soft, rgba(239,68,68,0.1));
  color: var(--neg-strong);
  font-family: var(--font-display);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 12px;
  text-align: left;
}
.rp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.rp-skip, .rp-send {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.rp-skip {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-2);
}
.rp-skip:hover { background: var(--surface-2); color: var(--ink); }
.rp-send {
  /* REIzer green — the brand CTA treatment */
  background: var(--brand-fill);
  color: var(--brand-ink);
  box-shadow: 0 10px 24px -12px rgba(126,232,106,0.55);
}
.rp-send:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.rp-send:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.rp-never {
  background: transparent;
  border: 0;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 14px;
  text-decoration: none;
}
.rp-never:hover { color: var(--ink-2); text-decoration: underline; }
.rp-thanks {
  text-align: center;
  padding: 8px 0;
}
.rp-thanks-emoji {
  font-size: 56px;
  margin-bottom: 8px;
}

/* Phones: present as a bottom sheet (the house mobile-dialog pattern) */
@media (max-width: 540px){
  .rp-modal { align-items: flex-end; }
  .rp-card {
    width: 100vw;
    max-width: 100vw;
    max-height: 90dvh;
    border-radius: 18px 18px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 24px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    animation: rp-sheet 0.2s ease;
  }
  @keyframes rp-sheet { from { transform: translateY(40px); opacity: 0.5; } to { transform: translateY(0); opacity: 1; } }
  .rp-foot { flex-wrap: wrap; }
  .rp-foot .rp-send { flex: 1; }
}

/* =================================================================
   PUBLIC TESTIMONIALS (landing + pricing pages)
   ---------------------------------------------------------------
   Renders as its own full-width band with a subtle gradient + soft
   top/bottom dividers so it reads as a discrete "social proof"
   section instead of blending into the surrounding content.
   =================================================================*/
.tst-section {
  /* Sits inside whatever parent container the host page uses
     (main.lp-home on landing, div.wrap on pricing). Its own card-
     like background + accent borders do the visual demarcation.
     NOTE: prefix is `tst-` (testimonials) not `ts-` because `.ts-card`
     is already claimed by the theme-swatch component. */
  margin: 56px 0 0;
  padding: 48px 32px;
  background:
    linear-gradient(180deg, rgba(126,232,106,0.05) 0%, rgba(168,85,247,0.04) 100%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.04),
    0 20px 40px -28px rgba(126,232,106,0.25);
  position: relative;
}
.tst-section::before,
.tst-section::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 32px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: 999px;
  transform: translateX(-50%);
}
.tst-section::before { top: 20px; }
.tst-section::after  { bottom: 20px; }

.tst-wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.tst-heading {
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 8px;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.tst-sub {
  text-align: center;
  color: var(--ink-3);
  font-size: 15px;
  margin: 0 0 36px;
}
.tst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.tst-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 20px;
  margin: 0;
  box-shadow: 0 4px 18px -8px rgba(126,232,106,0.18), 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.15s, box-shadow 0.15s;
}
.tst-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(126,232,106,0.32), 0 1px 3px rgba(0,0,0,0.05);
}
.tst-stars {
  color: var(--warn);
  font-size: 17px;
  letter-spacing: 2px;
  font-family: var(--font-mono);
  display: block;
  margin-bottom: 10px;
}
.tst-stars-off { color: var(--border); }
.tst-body {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}
.tst-body::before { content: '\201C'; margin-right: 2px; }
.tst-body::after  { content: '\201D'; margin-left:  2px; }
.tst-body-empty { color: var(--warn); text-align: center; letter-spacing: 4px; font-style: normal; font-size: 22px; }
.tst-body-empty::before, .tst-body-empty::after { content: ''; }
.tst-cap {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.tst-cap-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.tst-cap-title {
  font-size: 12px;
  color: var(--ink-3);
}

/* Dark / midnight themes — soften the gradient + use darker surface */
[data-theme="dark"] .tst-section,
[data-theme="midnight"] .tst-section {
  background:
    linear-gradient(180deg, rgba(126,232,106,0.08) 0%, rgba(168,85,247,0.05) 100%),
    var(--surface);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.3),
    0 20px 40px -28px rgba(0,0,0,0.5);
}
[data-theme="dark"] .tst-card,
[data-theme="midnight"] .tst-card {
  box-shadow: 0 4px 18px -8px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
}

@media (max-width: 720px) {
  .tst-section { padding: 36px 20px; border-radius: 16px; }
  .tst-heading { font-size: 24px; }
  .tst-sub { font-size: 14px; margin-bottom: 24px; }
  .tst-section::before, .tst-section::after { width: 28px; }
}

/* =================================================================
   SOLUTION PAGE — Worked example + vs Competitors (DP-9 polish)
   =================================================================*/
.sol-example-section { background: rgba(126,232,106, 0.025); }
.sol-example {
  max-width: 1000px;
  margin: 32px auto 0;
}
.sol-example-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 12px 32px -20px rgba(126,232,106,0.25);
}
@media (max-width: 768px) {
  .sol-example-grid { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
}
.sol-example-col-h {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.sol-example-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sol-example-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.sol-example-list li:last-child { border-bottom: 0; }
.se-lbl { color: var(--ink-3); }
.se-val {
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
}
.se-val small {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-4);
  margin-left: 4px;
}
.sol-example-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.se-kpi {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
}
.se-kpi-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.se-kpi-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
}
.se-kpi-accent {
  background: linear-gradient(135deg, rgba(126,232,106,0.08), rgba(126,232,106,0.06));
  border-color: rgba(126,232,106,0.25);
}
.se-kpi-accent .se-kpi-val { color: var(--accent-ink); }

.sol-example-verdict {
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.se-verdict-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.se-verdict-tight {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warn-strong);
}
.sol-example-verdict p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.sol-example-verdict strong { color: var(--ink); }
.se-verdict-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.se-verdict-link:hover { text-decoration: underline; }

/* vs Competitors comparison table */
.sol-vs-section { background: rgba(15, 23, 42, 0.02); }
.sol-vs-table-wrap {
  max-width: 1100px;
  margin: 32px auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow-x: auto;
  box-shadow: 0 8px 24px -16px rgba(126,232,106,0.2);
}
.sol-vs-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.sol-vs-table th,
.sol-vs-table td {
  padding: 13px 16px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.sol-vs-table thead th {
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  position: sticky;
  top: 0;
}
.sol-vs-table th:first-child,
.sol-vs-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
}
.sol-vs-table th.sol-vs-us,
.sol-vs-table td.sol-vs-us {
  background: linear-gradient(135deg, rgba(126,232,106,0.08), rgba(126,232,106,0.06));
  color: var(--accent-2);
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  position: relative;
}
.sol-vs-table thead th.sol-vs-us {
  color: var(--accent-2);
  text-transform: none;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.sol-vs-table td.sol-vs-no {
  color: var(--ink-4);
  font-style: italic;
  font-size: 13px;
}
.sol-vs-table td.sol-vs-partial {
  color: var(--warn);
  font-size: 13px;
}
.sol-vs-table tbody tr:last-child td { border-bottom: 0; }
.sol-vs-table tbody tr:hover td { background: rgba(126,232,106,0.025); }
.sol-vs-table tbody tr:hover td.sol-vs-us {
  background: linear-gradient(135deg, rgba(126,232,106,0.14), rgba(126,232,106,0.1));
}

.sol-vs-disclaimer {
  max-width: 1100px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
  font-style: italic;
}

/* Dark theme */
html[data-theme="dark"] .sol-example-grid,
html[data-theme="midnight"] .sol-example-grid,
html[data-theme="dark"] .sol-vs-table-wrap,
html[data-theme="midnight"] .sol-vs-table-wrap {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 12px 32px -20px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .se-kpi,
html[data-theme="midnight"] .se-kpi {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .sol-vs-table thead th,
html[data-theme="midnight"] .sol-vs-table thead th {
  background: rgba(255,255,255,0.04);
}

/* =================================================================
   SOLUTION PAGE — Output Gallery (replaces text-only feature tiles)
   =================================================================*/
.sol-gallery-section { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(126,232,106,0.04) 100%); }
.sol-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 32px;
}
@media (max-width: 1024px) { .sol-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .sol-gallery { grid-template-columns: 1fr; } }

.sol-gcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sol-gcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(126,232,106,0.35);
}
.sol-gcard-h {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}
.sol-gcard-p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}
.sol-gcard-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: var(--on-accent);
  vertical-align: 1px;
  margin-left: 4px;
}

/* ===== Mockup base ===== */
.sol-gcard-mock {
  position: relative;
  height: 96px;
  background: linear-gradient(135deg, rgba(126,232,106,0.06), rgba(126,232,106,0.04));
  border: 1px solid rgba(126,232,106,0.12);
  border-radius: 10px;
  overflow: hidden;
}

/* ===== Break-even mockup — horizontal bar with markers ===== */
.sol-gmock-break {
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.gmock-axis {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(239,68,68,0.4) 0%, rgba(245,158,11,0.4) 50%, rgba(16,185,129,0.4) 100%);
  transform: translateY(-50%);
}
.gmock-zone { display: none; }
.gmock-marker {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 28px;
  background: var(--ink-2);
  transform: translate(-50%, -50%);
  border-radius: 1.5px;
  z-index: 2;
}
.gmock-target {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface-solid);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(126,232,106,0.3);
  z-index: 3;
}
.gmock-label {
  position: absolute;
  bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  font-family: var(--font-mono);
}
.gmock-label-l { left: 12px; }
.gmock-label-r { right: 12px; color: var(--accent-ink); }

/* ===== Stress test mockup — vertical bars ===== */
.sol-gmock-stress {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 10px 14px 12px;
  gap: 6px;
}
.gmock-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 8px;
}
.gmock-bar-pos { background: linear-gradient(180deg, var(--pos), var(--pos)); }
.gmock-bar-warn { background: linear-gradient(180deg, var(--warn), var(--warn)); }
.gmock-bar-neg { background: linear-gradient(180deg, var(--neg), var(--neg)); }

/* ===== Tornado mockup — horizontal bars stacked ===== */
.sol-gmock-tornado {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px;
  gap: 6px;
}
.gmock-trow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gmock-tlbl {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-3);
  font-family: var(--font-mono);
  width: 28px;
  text-transform: uppercase;
}
.gmock-tbar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
}

/* ===== Heatmap mockup — 4x5 grid ===== */
.sol-gmock-heat {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gmock-heat-grid {
  display: grid;
  grid-template-columns: repeat(5, 12px);
  grid-template-rows: repeat(4, 12px);
  gap: 2px;
}
.gh-c { border-radius: 2px; }
.gh-c-bad    { background: var(--neg); }
.gh-c-warn   { background: var(--warn); }
.gh-c-ok     { background: #facc15; }
.gh-c-strong { background: var(--pos); }

/* ===== 30-year projection mockup — area chart ===== */
.sol-gmock-proj { padding: 8px; }
.gmock-line { width: 100%; height: 100%; }
.gmock-line path { stroke: var(--accent-ink); }
.gmock-fill { fill: url(#gradLine); fill: rgba(126,232,106,0.18); stroke: none; }
.gmock-grid { stroke: rgba(126,232,106,0.18); stroke-width: 0.6; }

/* ===== Comps mockup — list rows ===== */
.sol-gmock-comps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  gap: 4px;
}
.gmock-comp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--ink-3);
  padding: 2px 6px;
  border-radius: 4px;
}
.gmock-comp-row-you {
  background: rgba(126,232,106,0.12);
  color: var(--ink);
  font-weight: 600;
}
.gmock-pin {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
}
.gmock-pin-you { background: var(--accent); box-shadow: 0 0 0 2px rgba(126,232,106,0.3); }
.gmock-comp-name { flex: 1; }
.gmock-comp-val {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ===== PDF mockup — stacked pages ===== */
.sol-gmock-pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.gmock-pdf-page {
  width: 64px;
  height: 80px;
  background: var(--surface-solid);
  border: 1px solid rgba(126,232,106,0.3);
  border-radius: 4px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  position: relative;
  z-index: 2;
}
.gmock-pdf-back {
  position: absolute;
  z-index: 1;
  background: var(--bg);
  margin-left: 14px;
  margin-top: 8px;
}
.gmock-pdf-h {
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: 1px;
  width: 40%;
}
.gmock-pdf-l {
  height: 2.5px;
  background: rgba(126,232,106,0.18);
  border-radius: 1px;
  width: 100%;
}
.gmock-pdf-chart {
  height: 22px;
  background: linear-gradient(90deg, rgba(126,232,106,0.18) 0%, rgba(126,232,106,0.18) 100%);
  border-radius: 2px;
  margin: 4px 0;
  position: relative;
}
.gmock-pdf-chart::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: linear-gradient(180deg, transparent 30%, rgba(126,232,106,0.35) 30%);
  border-radius: 2px;
}

/* ===== White-label mockup ===== */
.sol-gmock-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.gmock-brand-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface-solid);
  border: 1px solid rgba(126,232,106,0.25);
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}
.gmock-brand-logo {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-4));
}
.gmock-brand-name {
  width: 50px;
  height: 6px;
  background: rgba(126,232,106,0.25);
  border-radius: 2px;
}
.gmock-brand-tag {
  font-size: 9.5px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* CTA below gallery */
.sol-gallery-cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* Dark theme */
html[data-theme="dark"] .sol-gcard,
html[data-theme="midnight"] .sol-gcard {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .sol-gcard-mock,
html[data-theme="midnight"] .sol-gcard-mock {
  background: linear-gradient(135deg, rgba(126,232,106,0.1), rgba(126,232,106,0.06));
  border-color: rgba(126,232,106,0.18);
}
html[data-theme="dark"] .gmock-pdf-page,
html[data-theme="midnight"] .gmock-pdf-page {
  background: #1e293b;
  border-color: rgba(126,232,106,0.3);
}
html[data-theme="dark"] .gmock-pdf-back,
html[data-theme="midnight"] .gmock-pdf-back {
  background: var(--surface-2);
}
html[data-theme="dark"] .gmock-brand-card,
html[data-theme="midnight"] .gmock-brand-card {
  background: #1e293b;
}
html[data-theme="dark"] .gmock-marker,
html[data-theme="midnight"] .gmock-marker {
  background: #e2e8f0;
}

/* =================================================================
   SOLUTION GALLERY — canvas-based real Chart.js renders
   (overrides the earlier .sol-gcard-mock placeholder styles)
   =================================================================*/
.sol-gcard-canvas {
  position: relative;
  height: 130px;
  background: linear-gradient(135deg, rgba(126,232,106,0.04), rgba(126,232,106,0.03));
  border: 1px solid rgba(126,232,106,0.08);
  border-radius: 10px;
  padding: 6px 8px;
}
.sol-gcard-canvas canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ===== Market Trends solution page — live map teaser + extras ===== */
/* Plan badges + gold Elite column for the tier table */
.sol-vs-plan {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.02em;
  text-transform: none;
}
.sol-vs-plan-explorer { background: var(--tier-explorer); color: var(--tier-explorer-ink); }
.sol-vs-plan-investor { background: var(--tier-investor); color: var(--tier-investor-ink); }
.sol-vs-plan-pro      { background: var(--tier-pro);      color: var(--tier-pro-ink); }
.sol-vs-plan-elite    { background: var(--tier-elite);    color: var(--tier-elite-ink); }
.sol-vs-table th.sol-vs-elite,
.sol-vs-table td.sol-vs-elite {
  background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(212,175,55,0.07));
  color: #8a6d1a;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
}
.sol-vs-table td.sol-vs-elite .lpf-link { color: #8a6d1a; }
.sol-gcard-map { grid-column: 1 / -1; }
/* Half-width map card (the Chicago ZIP drill-down teaser) */
.sol-gcard-map-half { grid-column: span 2; }
@media (max-width: 540px) { .sol-gcard-map-half { grid-column: 1 / -1; } }
.sol-map-wrap.sol-map-wrap-sm { height: 260px; }
.sol-map-wrap {
  position: relative;
  height: 380px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(126,232,106,0.12);
  background: #eef2ec;
  /* Contain Leaflet's internal z-indexes (panes go up to ~800) so the
     map never paints above the nav's Solutions dropdown. */
  isolation: isolate;
  z-index: 0;
}
@media (max-width: 540px) { .sol-map-wrap { height: 260px; } }
.sol-map { position: absolute; inset: 0; }
.sol-map-cta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 800; /* above Leaflet panes */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 30px 18px 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 60%);
}
.sol-map-cta .arrow { transition: transform .15s ease; }
.sol-map-cta:hover .arrow { transform: translateX(3px); }
.sol-map-cta svg { width: 15px; height: 15px; flex: 0 0 auto; }
.sol-map-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

/* Three-lens color-ramp strips (yield / price / rent) */
.sol-mt-strips {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
  gap: 8px;
  padding: 4px 2px;
}
.sol-mt-strip { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; }
.sol-mt-strip-lbl {
  font-size: 8.5px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  text-align: right;
}
.sol-mt-strip-bar { height: 16px; border-radius: 8px; }

/* Mini detail-panel mock (map → underwrite card) */
.sol-mt-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
}
.sol-mt-detail-head { display: flex; align-items: baseline; gap: 8px; }
.sol-mt-detail-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); }
.sol-mt-detail-rank { font-size: 9px; font-family: var(--font-mono); color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.05em; }
.sol-mt-detail-kpis { display: flex; gap: 14px; }
.sol-mt-detail-kpi b { display: block; font-size: 13px; color: var(--ink); font-family: var(--font-mono); }
.sol-mt-detail-kpi b.sol-mt-yield { color: #1f7a32; }
.sol-mt-detail-kpi span { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-4); }
.sol-mt-detail-link { font-size: 11.5px; font-weight: 600; color: var(--accent-2); }

/* Heatmap variant with axis labels */
.sol-gcard-canvas-heat {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: 1fr 16px;
  gap: 4px;
  padding: 8px;
}
.sol-heat-axis-y {
  grid-column: 1;
  grid-row: 1;
  font-size: 8px;
  font-family: var(--font-mono);
  color: var(--ink-3);
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  line-height: 1.1;
}
.sol-heat-axis-y span {
  font-size: 7.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: flex-end;
  color: var(--ink-4);
}
.sol-heat-grid {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 2px;
}
.sh-c { border-radius: 2px; }
.sh-c-bad    { background: var(--neg); opacity: 0.8; }
.sh-c-warn   { background: var(--warn); opacity: 0.85; }
.sh-c-ok     { background: #facc15; opacity: 0.9; }
.sh-c-strong { background: var(--pos); }
.sol-heat-axis-x {
  grid-column: 2;
  grid-row: 2;
  font-size: 8px;
  font-family: var(--font-mono);
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.sol-heat-axis-x span:nth-child(2) {
  font-size: 7.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Dark theme adjustments */
html[data-theme="dark"] .sol-gcard-canvas,
html[data-theme="midnight"] .sol-gcard-canvas {
  background: linear-gradient(135deg, rgba(126,232,106,0.07), rgba(126,232,106,0.05));
  border-color: rgba(126,232,106,0.12);
}

/* =================================================================
   HOW IT WORKS — 3-step mockups + strategy router cards
   =================================================================*/
.hiw-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}
@media (max-width: 900px) { .hiw-step-grid { grid-template-columns: 1fr; } }

.hiw-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hiw-step-num {
  position: absolute;
  top: -12px;
  left: 22px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: var(--on-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  box-shadow: 0 4px 12px -2px rgba(126,232,106,0.4);
}
.hiw-step-mock {
  background: linear-gradient(135deg, rgba(126,232,106,0.05), rgba(126,232,106,0.04));
  border: 1px solid rgba(126,232,106,0.12);
  border-radius: 12px;
  padding: 16px;
  min-height: 180px;
  margin-top: 4px;
  position: relative;
}
.hiw-step-h {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
}
.hiw-step-p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}

/* Step 1 — form mockup */
.hiw-mock-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.hmf-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hmf-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 60px;
}
.hmf-input {
  flex: 1;
  height: 26px;
  background: var(--surface);
  border: 1px solid rgba(126,232,106,0.18);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink);
  display: flex;
  align-items: center;
}
.hmf-input-val {
  font-weight: 600;
}
.hmf-btn {
  align-self: flex-start;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

/* Step 2 — results panel mockup (mimics the slide-in analyzer panel) */
.hiw-mock-panels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: var(--surface);
  border: 1px solid rgba(126,232,106,0.18);
  overflow: hidden;
}
.hmp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(126,232,106,0.08), rgba(126,232,106,0.06));
  border-bottom: 1px solid rgba(126,232,106,0.12);
}
.hmp-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: var(--on-accent);
}
.hmp-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.hmp-pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.hmp-pill-tight {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warn-strong);
}
.hmp-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 12px;
}
.hmp-kpi {
  text-align: center;
  padding: 6px 4px;
  background: rgba(126,232,106,0.04);
  border-radius: 6px;
  border: 1px solid rgba(126,232,106,0.08);
}
.hmp-kpi-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.hmp-kpi-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}
.hmp-canvas {
  height: 110px;
  background: var(--surface);
  padding: 8px 12px 12px;
  position: relative;
}
.hmp-canvas canvas { width: 100% !important; height: 100% !important; }
[data-theme="dark"] .hiw-mock-panels,
[data-theme="midnight"] .hiw-mock-panels {
  background: #1e293b;
  border-color: rgba(126,232,106,0.3);
}
[data-theme="dark"] .hmp-kpi,
[data-theme="midnight"] .hmp-kpi {
  background: rgba(126,232,106,0.1);
  border-color: rgba(126,232,106,0.2);
}

/* Step 3 — export mockup */
.hiw-mock-export {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-direction: column;
  gap: 10px;
}
.hme-card {
  width: 80px;
  height: 100px;
  background: var(--surface-solid);
  border: 1px solid rgba(126,232,106,0.25);
  border-radius: 5px;
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.15);
  position: relative;
  z-index: 2;
}
.hme-card-back {
  position: absolute;
  z-index: 1;
  background: var(--bg);
  margin-left: 14px;
  margin-top: 6px;
}
.hme-card-h {
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: 1px;
  width: 40%;
}
.hme-card-l {
  height: 2.5px;
  background: rgba(126,232,106,0.22);
  border-radius: 1px;
  width: 100%;
}
.hme-card-chart {
  flex: 1;
  background: linear-gradient(135deg, rgba(126,232,106,0.16), rgba(126,232,106,0.1));
  border-radius: 2px;
  position: relative;
  margin: 4px 0;
}
.hme-card-chart::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: linear-gradient(180deg, transparent 35%, rgba(126,232,106,0.4) 35%);
  border-radius: 1px;
}
.hme-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.hme-btn {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid rgba(126,232,106,0.25);
  color: var(--ink-3);
}
.hme-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: var(--on-accent);
  border-color: transparent;
}

/* =================================================================
   Strategy router cards (5 cards, last one spans full row)
   =================================================================*/
.hiw-strategy { background: linear-gradient(180deg, transparent, rgba(126,232,106,0.025)); }
.hiw-strategy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 980px) { .hiw-strategy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .hiw-strategy-grid { grid-template-columns: 1fr; } }

.hiw-strategy-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.hiw-strategy-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-ink);
  box-shadow: 0 16px 32px -20px rgba(126,232,106,0.4);
}
.hiw-strategy-card-wide {
  grid-column: span 4;
}
@media (max-width: 980px) { .hiw-strategy-card-wide { grid-column: span 2; } }
@media (max-width: 540px) { .hiw-strategy-card-wide { grid-column: span 1; } }

.hsc-icon {
  font-size: 28px;
  line-height: 1;
}
.hsc-h {
  font-size: 17px;
  font-weight: 700;
  margin: 4px 0 0;
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
}
.hsc-p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
  flex: 1;
}
.hsc-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-ink);
}
.hiw-strategy-card:hover .hsc-link { text-decoration: underline; }

/* Tighten the bottom feature grid on how-it-works */
.hiw-features-tight .lp-feature .lpf-body { font-size: 13.5px; line-height: 1.5; }

/* Dark theme */
html[data-theme="dark"] .hiw-step,
html[data-theme="midnight"] .hiw-step,
html[data-theme="dark"] .hiw-strategy-card,
html[data-theme="midnight"] .hiw-strategy-card {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .hiw-step-mock,
html[data-theme="midnight"] .hiw-step-mock {
  background: linear-gradient(135deg, rgba(126,232,106,0.08), rgba(126,232,106,0.05));
  border-color: rgba(126,232,106,0.18);
}
html[data-theme="dark"] .hmf-input,
html[data-theme="midnight"] .hmf-input,
html[data-theme="dark"] .hmp-canvas,
html[data-theme="midnight"] .hmp-canvas,
html[data-theme="dark"] .hme-card,
html[data-theme="midnight"] .hme-card,
html[data-theme="dark"] .hme-btn,
html[data-theme="midnight"] .hme-btn {
  background: #1e293b;
  border-color: rgba(126,232,106,0.3);
}
html[data-theme="dark"] .hme-card-back,
html[data-theme="midnight"] .hme-card-back {
  background: var(--surface-2);
}

/* ===========================================
   FAQ page — categorized layout
   =========================================== */

.faq-page { max-width: 980px; }

.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding-bottom: 6px;
}
.faq-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.7);
  color: var(--ink-2) !important;   /* beat the green .doc-page a link color */
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 1px solid var(--line) !important;
  transition: all 0.15s ease;
}
.faq-chip:hover {
  border-color: var(--ink-2) !important;
  color: var(--ink) !important;
  background: var(--surface-2);
}

.faq-section {
  padding-top: 72px;
  padding-bottom: 72px;
  scroll-margin-top: 80px;
}
.faq-section:nth-of-type(even) {
  background: rgba(255,255,255,0.4);
}
.faq-section .lp-inner {
  max-width: 920px;
}

/* --- Banner header: big numbered counter + heading + accent rule --- */
.faq-section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 28px;
  row-gap: 0;
  align-items: start;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.faq-section-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 80px;
  height: 2px;
  background: var(--ink-2);
  border-radius: 2px;
}
.faq-section-num {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  background: none;
  -webkit-text-fill-color: var(--ink-4);
  color: var(--ink-4);            /* ghosted neutral numerals — no green */
  white-space: nowrap;
  padding-top: 4px;
}
.faq-section-head-text {
  min-width: 0;
}
.faq-section-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.faq-section-h {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 10px 0;
}
.faq-section-sub {
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  max-width: 640px;
}
@media (max-width: 640px) {
  .faq-section-head {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .faq-section-num { font-size: 44px; }
}
.faq-section .faq-list { margin-top: 8px; }

.faq-cta {
  margin: 64px 22px 88px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding: 36px 36px 32px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(126,232,106,0.06) 0%, rgba(126,232,106,0.05) 60%, rgba(63,169,140,0.04) 100%),
    rgba(255,255,255,0.8);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
@media (max-width: 720px) {
  .faq-cta { grid-template-columns: 1fr; padding: 28px; }
}
.faq-cta-h {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px 0;
}
.faq-cta-p {
  font-family: var(--font-display);
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.55;
}
.faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.faq-cta-actions .faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.faq-cta-btn.primary {
  background: var(--brand-fill);
  color: var(--brand-ink);
  box-shadow: 0 4px 14px rgba(126,232,106,0.25);
}
.faq-cta-btn.primary:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--brand-fill), #000 8%);
  box-shadow: 0 6px 20px rgba(126,232,106,0.35);
}
.faq-cta-btn.ghost {
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.faq-cta-btn.ghost:hover {
  border-color: var(--ink-2);
  color: var(--ink);
}

.faq-a code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(126,232,106,0.08);
  color: var(--accent-2);
  border: 1px solid rgba(126,232,106,0.15);
}
.faq-a strong {
  color: var(--ink);
  font-weight: 600;
}
.faq-a ul {
  margin: 8px 0 4px 0;
  padding-left: 22px;
}
.faq-a li {
  margin-bottom: 4px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

html[data-theme="dark"] .faq-chip,
html[data-theme="midnight"] .faq-chip {
  background: rgba(30,41,59,0.6);
  color: var(--ink-2);
}
html[data-theme="dark"] .faq-chip:hover,
html[data-theme="midnight"] .faq-chip:hover {
  background: rgba(126,232,106,0.12);
}
html[data-theme="dark"] .faq-section:nth-of-type(even),
html[data-theme="midnight"] .faq-section:nth-of-type(even) {
  background: rgba(255,255,255,0.02);
}
html[data-theme="dark"] .faq-section-h,
html[data-theme="midnight"] .faq-section-h { color: var(--ink); }
html[data-theme="dark"] .faq-section-sub,
html[data-theme="midnight"] .faq-section-sub { color: var(--ink-3); }
html[data-theme="dark"] .faq-cta,
html[data-theme="midnight"] .faq-cta {
  background:
    linear-gradient(135deg, rgba(126,232,106,0.1) 0%, rgba(126,232,106,0.08) 60%, rgba(63,169,140,0.06) 100%),
    rgba(30,41,59,0.4);
  border-color: rgba(126,232,106,0.25);
}
html[data-theme="dark"] .faq-cta-h,
html[data-theme="midnight"] .faq-cta-h { color: var(--ink); }
html[data-theme="dark"] .faq-cta-p,
html[data-theme="midnight"] .faq-cta-p { color: var(--ink-2); }
html[data-theme="dark"] .faq-cta-btn.ghost,
html[data-theme="midnight"] .faq-cta-btn.ghost {
  background: rgba(30,41,59,0.6);
}

/* ===========================================
   Legal pages (terms / privacy) — minimal, single font
   =========================================== */

.legal-page { max-width: 760px; }

.legal-page .doc-updated {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-3);
  margin: 4px 0 28px;
}

.legal-toc {
  margin: 28px 0 8px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.5);
}
.legal-toc-h {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px 0;
}
.legal-toc ol {
  list-style: decimal inside;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 32px;
}
@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
}
.legal-toc li {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  break-inside: avoid;
  padding-right: 8px;
}
.legal-toc a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 0;
}
.legal-toc a:hover {
  color: var(--accent-2);
  text-decoration: underline;
}

.legal-page h2 {
  scroll-margin-top: 80px;
  margin: 42px 0 14px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.legal-page h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 22px 0 6px;
}
.legal-page p,
.legal-page li {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}
.legal-page ul {
  margin: 8px 0 14px;
  padding-left: 22px;
}
.legal-page li { margin-bottom: 6px; }
.legal-page hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 36px 0 0;
}

.legal-subp {
  margin: 14px 0 4px;
  padding-left: 22px;
}
.legal-subp li {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.legal-subp li strong { color: var(--ink); font-weight: 700; }

html[data-theme="dark"] .legal-toc,
html[data-theme="midnight"] .legal-toc {
  background: rgba(30,41,59,0.4);
  border-color: var(--line);
}
html[data-theme="dark"] .legal-toc-h,
html[data-theme="midnight"] .legal-toc-h { color: var(--ink); }
html[data-theme="dark"] .legal-toc li,
html[data-theme="midnight"] .legal-toc li { color: var(--ink-2); }
html[data-theme="dark"] .legal-toc a,
html[data-theme="midnight"] .legal-toc a { color: var(--ink-2); }
html[data-theme="dark"] .legal-page h2,
html[data-theme="midnight"] .legal-page h2 { color: var(--ink); }
html[data-theme="dark"] .legal-page h3,
html[data-theme="midnight"] .legal-page h3 { color: var(--ink); }
html[data-theme="dark"] .legal-subp li strong,
html[data-theme="midnight"] .legal-subp li strong { color: var(--ink); }

/* =================================================================
   MARKET TRENDS — national investment-yield heatmap (market-trends.html)
================================================================= */
.mh-topnav{
  display: flex;
  gap: 18px;
  margin-left: auto;
  align-items: center;
}
.mh-topnav a{
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
}
.mh-topnav a:hover{ color: var(--ink); }
.mh-topnav a[aria-current="page"]{ color: var(--accent, #2E8B3A); }

.mh-page{
  flex: 1 1 auto;        /* fill the dashboard-shell column + scroll inside it */
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px 28px 40px;
}
/* Embedded in the dashboard iframe — drop our own header + max-width and
   let the map fill the workspace height (the dashboard rail stays visible
   in the parent, so you can switch tabs). */
html.is-embedded .mh-topbar{ display: none !important; }
/* Single-scroll model inside the dashboard iframe. The page fills the
   workspace and does NOT scroll — the map flexes to fill whatever height is
   left below the intro/filter/view chrome, and only the Top-markets panel
   (or leaderboard) scrolls internally beside it. Previously .mh-page scrolled
   (its content ran ~60px taller than the frame because the map's fixed
   `calc(100vh - 200px)` didn't account for the chrome above it) AND .mh-detail
   scrolled, which stacked two page-level scrollbars next to the panel's own. */
html.is-embedded .mh-page{
  max-width: none;
  padding: 16px 22px 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
html.is-embedded .mh-intro{ margin-bottom: 12px; }
html.is-embedded .mh-title{ font-size: 36px; }
html.is-embedded .mh-sub{ font-size: 13.5px; }
html.is-embedded .mh-layout{ flex: 1 1 auto; min-height: 0; }
html.is-embedded .mh-map-wrap{ display: flex; flex-direction: column; min-height: 0; }
html.is-embedded .mh-map{ flex: 1 1 auto; height: auto; min-height: 320px; }
html.is-embedded .mh-scatter-wrap,
html.is-embedded .mh-board-wrap{ min-height: 0; }
/* The scatter/board hosts need a real height FLOOR in the iframe. flex:1 alone
   collapses them to 0 here (the parent height isn't reliably resolved), and the
   SVG is height:100% of that 0 → invisible. The map avoids this via its own
   min-height:320px above; mirror it so scatter + leaderboard don't vanish. */
html.is-embedded .mh-scatter,
html.is-embedded .mh-board{ min-height: 360px; }
html.is-embedded .mh-detail{ max-height: 100%; overflow: auto; }
/* Narrow embedded frame (≤900px, e.g. dashboard on a phone): the layout
   stacks, so the fill-and-clip model no longer fits — fall back to a single
   scrolling page with natural heights. */
@media (max-width: 900px){
  html.is-embedded .mh-page{ overflow-y: auto; display: block; }
  html.is-embedded .mh-map-wrap{ display: block; }
  html.is-embedded .mh-map{ flex: none; height: 460px; }
  html.is-embedded .mh-detail{ max-height: none; overflow: visible; }
}
.mh-intro{ margin-bottom: 18px; }
.mh-title{
  font-family: var(--font-serif, 'Instrument Serif', serif);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 10px;
}
.mh-sub{
  max-width: 70ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
/* Filter bar — narrow the map + Top-in-view list to markets that fit the
   investor's criteria (yield / affordability / rent). */
/* Plan-gated toolbars (below Pro). setControlsEnabled() also sets [disabled]
   on the controls; this makes the state legible and un-clickable even if a
   toolbar ends up visible. */
.mh-filters.is-gated,
.mh-metric.is-gated,
.mh-views.is-gated,
.mh-planbar.is-gated{
  opacity: 0.45;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}
.mh-filters.is-gated *,
.mh-metric.is-gated *,
.mh-views.is-gated *,
.mh-planbar.is-gated *{ cursor: not-allowed !important; }

.mh-filters{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 16px;
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.mh-filters.is-active{
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.mh-filters-lbl{
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mh-filter{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .85rem;
  color: var(--ink-2);
}
.mh-filter > span{ white-space: nowrap; }
.mh-filter select{
  font: inherit;
  font-size: .85rem;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.mh-filter select:focus{ outline: none; border-color: var(--brand); }
.mh-filter-reset{
  font: inherit;
  font-size: .82rem;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.mh-filter-reset:hover{ border-color: var(--ink-2); color: var(--ink); }
.mh-filters-count{
  margin-left: auto;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brand);
}
/* Pro plan bar — one-state picker + Elite upsell. */
.mh-planbar{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 16px;
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--brand-fill, #7EE86A);
  border-radius: 14px;
}
/* The explicit display above overrides the HTML `hidden` attribute, so make
   [hidden] authoritative for these gate elements. */
.mh-planbar[hidden]{ display: none; }
.mh-planbar-badge{
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-fill, #7EE86A);
  color: var(--brand-ink, #0C0F0A);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.mh-planbar-pick{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .85rem; color: var(--ink-2);
}
.mh-planbar-pick select{
  font: inherit; font-size: .85rem;
  padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--ink); cursor: pointer;
}
.mh-planbar-up{
  margin-left: auto;
  font-size: .82rem; font-weight: 700;
  color: var(--brand-ink, #0C0F0A);
  text-decoration: none;
}
.mh-planbar-up:hover{ text-decoration: underline; }
/* Lockout overlay (plans below Pro) — blurs the teaser map behind it. */
.mh-map-wrap.is-locked .mh-map{ filter: blur(6px); pointer-events: none; }

/* Plan-locked Market Trends: blur and disable the ENTIRE page, with the
   shared upgrade modal over the top. The modal is appended to <body>, not
   .mh-page, so it stays sharp and interactive. */
body.mh-plan-locked .mh-page{
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}
.mh-lock{
  position: absolute; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.45);
}
.mh-lock[hidden]{ display: none; }   /* [hidden] must win over display:flex */
.mh-lock-card{
  max-width: 320px; text-align: center;
  padding: 22px 24px;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.16);
}
.mh-lock-card strong{ display: block; font-family: var(--font-display); font-size: 16px; margin-bottom: 6px; }
.mh-lock-card p{ font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }
.mh-lockmsg{ margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2, #f7f8f5); }
.mh-lockmsg strong{ display: block; font-size: 13px; margin-bottom: 4px; }
.mh-lockmsg p{ margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }

/* ===== Phase 4: view switcher + search + scatter + leaderboard ===== */
.mh-views{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.mh-views[hidden]{ display: none; }
.mh-viewtabs{
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.mh-view-btn{
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 15px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2);
  cursor: pointer; line-height: 1.2;
}
.mh-view-btn:hover{ color: var(--ink); }
.mh-view-btn.is-on{ background: var(--brand-fill, #7EE86A); color: var(--brand-ink, #0C0F0A); }
.mh-search{ position: relative; margin-left: auto; min-width: 240px; }
.mh-search input{
  width: 100%;
  font: inherit; font-size: .9rem;
  padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-solid, #fff); color: var(--ink);
}
.mh-search input:focus{ outline: none; border-color: var(--brand-fill, #7EE86A); }
.mh-search-results{
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 550;
  max-height: 280px; overflow-y: auto;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  padding: 4px;
}
.mh-search-results[hidden]{ display: none; }
.mh-sresult{
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: .85rem;
  padding: 7px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.mh-sresult:hover{ background: var(--surface-2, #f7f8f5); }
.mh-sempty{ padding: 8px 10px; font-size: .82rem; color: var(--ink-4); }

.mh-scatter-wrap, .mh-board-wrap{
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 14px;
}
.mh-scatter-wrap[hidden], .mh-board-wrap[hidden]{ display: none; }   /* [hidden] must beat display:flex */
.mh-scatter{ flex: 1; min-height: 420px; }
.mh-scatter-svg{ width: 100%; height: 100%; }
.mh-sweet-q{ fill: var(--brand-fill, #7EE86A); opacity: 0.06; }
.mh-quadline{ stroke: var(--line-2, #cbd5e1); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0.8; }
.mh-quad-lbl{ font-family: var(--font-mono); font-size: 10px; fill: #1f7a32; font-weight: 700; }
.mh-axis{ stroke: var(--line-2, #cbd5e1); stroke-width: 1; }
.mh-tick{ font-family: var(--font-mono); font-size: 10px; fill: var(--ink-4); }
.mh-axis-lbl{ font-family: var(--font-mono); font-size: 11px; fill: var(--ink-3); font-weight: 700; }
.mh-pt{ cursor: pointer; }
.mh-pt-lbl{ font-family: var(--font-mono); font-size: 9px; fill: var(--ink-2); font-weight: 700; }
.mh-pt-halo{ fill: none; stroke: #1f7a32; stroke-width: 1.4; opacity: 0.55; }
.mh-pt.is-dim{ cursor: default; }
.mh-pt:not(.is-dim):hover circle{ stroke-width: 2; }

.mh-board{ flex: 1; overflow-y: auto; }
.mh-btable{ width: 100%; border-collapse: collapse; font-size: 13px; }
.mh-btable th{
  position: sticky; top: 0;
  background: var(--surface-solid, #fff);
  text-align: right;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3);
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  cursor: pointer; white-space: nowrap;
}
.mh-btable th:first-child, .mh-btable th:nth-child(2){ text-align: left; }
.mh-btable th.is-sorted{ color: var(--ink); }
.mh-btable td{ padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.mh-btable td.mh-bnum{ text-align: left; font-family: var(--font-mono); color: var(--ink-4); font-size: 11px; }
.mh-btable td.mh-bname{ text-align: left; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.mh-btable td.mh-bname span{ font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); font-weight: 500; }
.mh-btable td.mh-byield{ font-family: var(--font-mono); font-weight: 800; }
.mh-brow{ cursor: pointer; }
.mh-brow:hover{ background: var(--surface-2, #f7f8f5); }
.mh-brow.is-dim{ opacity: 0.4; }
.mh-brow.is-locked{ opacity: 0.45; }
.mh-brow.is-locked .mh-bname::after{ content: ' 🔒'; font-size: 10px; }
.mh-empty{ padding: 40px; text-align: center; color: var(--ink-4); font-size: 13px; }

/* Flexbox (not grid) so the map ALWAYS takes the remaining width with the
   stats panel fixed beside it — robust inside the dashboard-shell flex column. */
.mh-layout{
  display: flex;
  gap: 18px;
  align-items: stretch;
}
.mh-map-wrap{ position: relative; flex: 1 1 auto; min-width: 0; }
.mh-detail{ flex: 0 0 340px; }
@media (max-width: 900px){
  .mh-layout{ flex-direction: column; }
  .mh-detail{ flex-basis: auto; }
}
.mh-map{
  width: 100%;
  height: 620px;
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface-2);
}
@media (max-width: 700px){ .mh-map{ height: 440px; } }
.mh-map .leaflet-container{ background: var(--surface-2); font-family: var(--font-sans, Inter, sans-serif); }
.mh-error{
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 24px; text-align: center;
  color: var(--ink-3); font-size: 14px;
}
.mh-error code{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }

/* Legend pill over the map */
.mh-legend{
  position: absolute;
  left: 14px; bottom: 30px;
  z-index: 500;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
}
.mh-legend-title{ font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9.5px; }
/* Minimal, premium map credit — only the required OSM data attribution, muted
   and unobtrusive (no "Leaflet" library credit, no boxy control chrome). */
.mh-map .leaflet-control-attribution,
.bt-map .leaflet-control-attribution,
#dhMap .leaflet-control-attribution,
#reiActivityMap .leaflet-control-attribution{
  background: rgba(255,255,255,0.55);
  color: var(--ink-4, #9aa1ab);
  font-family: var(--font-mono);
  font-size: 8.5px;
  line-height: 1.4;
  padding: 1px 6px;
  border-radius: 6px 0 0 0;
  box-shadow: none;
}
.mh-map .leaflet-control-attribution a,
.bt-map .leaflet-control-attribution a,
#dhMap .leaflet-control-attribution a,
#reiActivityMap .leaflet-control-attribution a{ color: var(--ink-3, #6b7280); text-decoration: none; }
.mh-map .leaflet-control-attribution a:hover,
.bt-map .leaflet-control-attribution a:hover,
#dhMap .leaflet-control-attribution a:hover,
#reiActivityMap .leaflet-control-attribution a:hover{ text-decoration: underline; }
/* Metric toggle — segmented control, top-right of the map (clear of the
   zoom control top-left). Recolors the choropleth by yield / price / rent. */
.mh-metric{
  position: absolute;
  top: 12px; right: 12px;
  z-index: 500;
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.mh-metric-btn{
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.2;
}
.mh-metric-btn:hover{ color: var(--ink); }
/* Brand green fill with dark brand ink (same convention as .mh-cta — the
   bare --brand token doesn't exist, which washed the white label out). */
.mh-metric-btn.is-on{ background: var(--brand-fill, #7EE86A); color: var(--brand-ink, #0C0F0A); }
.mh-metric-btn.is-on:hover{ color: var(--brand-ink, #0C0F0A); }
.mh-legend-bar{ width: 90px; height: 9px; border-radius: 6px; border: 1px solid var(--line-2); }
/* Zoom hint pill (top-center of the map) — guides users to ZIP-level. */
.mh-zoomhint{
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  padding: 6px 14px;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  pointer-events: none;
  white-space: nowrap;
}
.mh-meta{
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
}

/* Detail panel */
.mh-detail{
  padding: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 200px;
}
.mh-detail-empty{ display: flex; flex-direction: column; gap: 6px; color: var(--ink-3); }
.mh-detail-empty strong{ color: var(--ink); font-family: var(--font-display); font-size: 15px; }
.mh-detail-empty span{ font-size: 13px; line-height: 1.5; }
.mh-detail-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mh-detail-name{ font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); }
.mh-detail-rank{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }
.mh-detail-yield{
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 10px;
}
.mh-detail-yield span{
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.mh-detail-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mh-detail-grid > div{ display: flex; flex-direction: column; gap: 3px; }
.mh-k{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.mh-v{ font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.mh-cta{
  display: block;
  margin: 14px 0 4px;
  padding: 10px 14px;
  text-align: center;
  background: var(--brand-fill, #7EE86A);
  color: var(--brand-ink, #0C0F0A);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.mh-cta:hover{ filter: brightness(0.96); }
/* STR vs LTR comparison (ZIP detail panel) */
.mh-str-btn{
  display: block;
  width: 100%;
  margin: 14px 0 2px;
  padding: 10px 14px;
  text-align: center;
  background: transparent;
  color: var(--ink);
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.mh-str-btn:hover{ border-color: var(--brand); color: var(--brand); }
.mh-str-cost{ font-weight: 500; color: var(--ink-4); }
.mh-str{
  margin: 14px 0 2px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2, #f7f8f5);
}
.mh-str-title{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
}
.mh-str-src{ font-weight: 600; color: var(--ink-4); text-transform: none; letter-spacing: 0; }
.mh-str-load{ font-size: 12px; color: var(--ink-3); padding: 4px 0; }
.mh-str-cmp{ display: flex; gap: 8px; margin: 10px 0; }
.mh-str-col{
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-solid, #fff);
}
.mh-str-col.is-win{ border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.mh-str-cap{ font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-4); }
.mh-str-yield{ font-family: var(--font-mono); font-size: 18px; font-weight: 800; color: var(--ink); }
.mh-str-sub{ font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.mh-str-verdict{
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line);
}
.mh-str-verdict.is-str{ border-color: var(--brand); }
.mh-str-verdict.is-ltr{ border-color: #4a7fd0; }
.mh-str-note{ margin: 8px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--ink-4); }
.mh-detail-note{
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-4);
}
/* Subnav panels: top-markets ranked list + methodology copy. */
.mh-method{ margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
/* "Top markets in view" — ranked, clickable rows (rank · name + price/rent · yield) */
.mh-rows{ list-style: none; margin: 10px 0 0; padding: 0; }
/* Hot/cold zone section headers in the side panel. */
.mh-zones-head{
  margin: 14px 0 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mh-zones-head.mh-zones-hot{ color: #c0392b; }
.mh-zones-head.mh-zones-cold{ color: #4a7fd0; }
.mh-zones-head + .mh-rows{ margin-top: 4px; }
.mh-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.mh-row:hover{ background: var(--surface-2); }
.mh-row-rank{
  flex: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-4);
  text-align: right;
}
.mh-row-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mh-row-name{
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mh-row-sub{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }
.mh-row-yield{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);          /* always readable — color cue moves to the dot */
}
.mh-row-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid var(--line-2);  /* keeps pale (low-yield) swatches visible */
}
/* ← back link on pinned region/methodology panels */
.mh-back{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.mh-back:hover{ color: var(--ink); border-color: var(--line-2); }
[data-theme="dark"] .mh-map,
[data-theme="midnight"] .mh-map,
[data-theme="dark"] .mh-detail,
[data-theme="midnight"] .mh-detail{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

/* =================================================================
   MOBILE LANDING NAV — burger menu for marketing pages
   .landing-tabs disappear at ≤980px; auth.js already injects a
   .nav-burger that toggles .nav-open on the nav. These rules (last
   in the cascade) surface it on landing pages and lay the collapsed
   tabs out as a column under the dark bar.
================================================================= */
@media (max-width: 980px){
  /* Collapse the tabs. The old `.landing-tabs{display:none}` (0,1,0) rule
     silently LOST to styles.css `.platform-nav ul.tabs{display:flex}`
     (0,2,1) in the 768–980 window — iPad mini portrait showed the full
     tab row on top of the burger. Match its specificity, later in file. */
  .landing-nav ul.tabs{ display: none; }
  /* The burger menu owns Sign out below 980 — never show the bar's copy
     alongside it (it duplicated when the menu was open). */
  body.landing .nav-cta .nav-signout{ display: none; }
  body.landing .nav-burger{
    display: inline-flex;
    width: 40px;
    height: 40px;
    background: transparent;
    border-color: rgba(255,255,255,0.28);
    color: #ffffff;
    grid-area: 1 / 2;   /* explicit cell — the global order:99 must not push it behind the CTA */
    justify-self: end;
    margin-left: 0;
  }
  body.landing .nav-burger:hover{
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.45);
  }
  /* brand · burger (right-aligned in the 1fr track) · CTA — tightened
     spacing across the whole burger range so the bar never overflows */
  body.landing .landing-nav .nav-inner{
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    padding: 12px 18px;
  }
  /* Mobile menu shows its own Sign out entry (injected by landing-nav.js);
     hidden on desktop where the bar's Sign out link is visible. */

  /* Open state: tabs become a full-width column under the bar */
  .landing-nav.nav-open .landing-tabs{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 2px;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px 0 14px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .landing-nav.nav-open .landing-tabs a{
    display: flex;
    width: 100%;
    padding: 12px 10px;
    font-size: 15px;
    min-height: 44px;
    align-items: center;
    border-bottom: none;
  }
  /* Solutions panel flows inline inside the open menu (the absolute /
     opacity dance is a desktop-hover affair) */
  .landing-nav.nav-open .landing-tabs .dropdown{
    display: none;
    position: static;
    min-width: 0;
    margin: 4px 0 6px;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    box-shadow: none;
  }
  .landing-nav.nav-open .landing-tabs .has-dropdown.is-open > .dropdown{
    display: block;
  }
}
/* The mobile menu's Sign out entry is hidden by default (desktop keeps
   the bar link) and only appears inside the open burger menu — a plain
   default + open-state override, so no viewport-width crack can show it
   at the wrong time. */
.landing-tabs .tab-signout{ display: none; }
@media (max-width: 980px){
  .landing-nav.nav-open .landing-tabs .tab-signout{ display: block; }
}

/* Small phones: compact brand + CTA so brand | burger | button fit on
   one row. The bar's "Sign out" link moves into the burger menu. */
@media (max-width: 540px){
  body.landing .landing-nav .brand{ font-size: 20px; gap: 6px; }
  body.landing .landing-nav .brand-icon{ width: 32px; height: 32px; }
  body.landing .landing-nav .brand-icon .cm-roof{ width: 26px; height: 26px; }
  body.landing .nav-btn{ font-size: 12.5px; padding: 8px 12px; }
  body.landing .nav-try-demo{ font-size: 12.5px; padding: 7px 12px; }
}
@media (max-width: 430px){
  body.landing .landing-nav .nav-inner{ padding: 10px 12px; gap: 10px; }
  body.landing .nav-burger{ width: 38px; height: 38px; }
}

/* Section spacing on small phones */
@media (max-width: 540px){
  .lp-cta{ padding: 56px 20px; }
  .landing-footer{ padding: 40px 20px 20px; }
}

/* Safety net: a stray over-wide element must never let the page pan
   sideways. clip (not hidden) — it doesn't create a scroll container,
   so the sticky nav keeps working. */
body.landing{ overflow-x: clip; }

/* =================================================================
   DASHBOARD MOBILE SHELL — phone drawer for the icon rail
   The fixed 64px hover-to-expand rail has no touch story: ≤767px it
   becomes an off-canvas drawer (expanded 240px state, labels always
   on) toggled by #dashBurger in the topbar, over #dashBackdrop.
   dashboard.js owns the body.dash-drawer-open class.
================================================================= */
.dash-burger{
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.28);
  background: transparent;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dash-burger:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.45);
}
.dash-backdrop{
  position: fixed;
  inset: 52px 0 0 0;      /* below the topbar */
  background: rgba(12,15,10,0.45);
  z-index: 1190;          /* under the drawer (1200), over everything else */
}
.dash-backdrop[hidden]{ display: none; }

@media (max-width: 767px){
  .dash-burger{ display: inline-flex; }
  /* Reclaim the rail's 64px — content gets the full viewport width.
     (.has-subnav included: the ≤860 rule re-asserts the 64px margin
     at higher specificity for analyzer views.) */
  .dash-root,
  .dash-root.has-subnav{ margin-left: 0; }
  /* Rail → off-canvas drawer, permanently in its expanded state */
  .dash-sidebar{
    width: 240px;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: none;
  }
  body.dash-drawer-open .dash-sidebar{
    transform: translateX(0);
    box-shadow: 6px 0 24px -10px rgba(15,23,42,0.25);
  }
  /* The full labeled list can be taller than a short phone viewport —
     scroll it INSIDE the drawer so it never slides under the pinned
     user pill. (Desktop keeps overflow:visible for the hover tooltips,
     which don't exist in drawer mode.) */
  .dash-sidebar .dash-nav{ overflow-y: auto; overflow-x: hidden; }
  /* Mirror the :hover/:focus-within expanded rules — labels always on */
  .dash-sidebar .dash-rail-divider{ width: calc(240px - 32px); }
  .dash-sidebar .dash-item{ width: calc(240px - 16px); }
  .dash-sidebar .di-label{ opacity: 1; }
  .dash-sidebar .dash-user-pill{ width: calc(240px - 16px); padding: 0 8px; }
  .dash-sidebar .dash-user-pill .dash-user-text,
  .dash-sidebar .dash-user-pill .dash-user-caret{ opacity: 1; }
  /* User menu can't open to the right of a drawer on a phone — open
     above the pill, inside the drawer's width */
  .dash-user-menu{
    left: 0;
    right: 0;
    width: auto;
    bottom: calc(100% + 8px);
  }

  /* Analyzer tool-actions subnav: the ≤860 grid stacks it ABOVE the
     analyzer as a full column, blocking the whole screen — flatten it
     into one horizontally scrollable chip row instead */
  .dash-subnav{
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dash-subnav::-webkit-scrollbar{ display: none; }
  .dash-subnav-head{ display: none; }   /* the active tool is already evident */
  .dash-subnav-list{
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .dash-subnav-list li{ flex-shrink: 0; }
  .dash-subnav-btn{
    width: auto;
    white-space: nowrap;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-solid);
  }
  .dash-subnav-divider{
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: var(--line);
  }

  /* Demo strip wraps instead of overflowing */
  .dash-demo-strip .db-inner{
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 8px 14px;
  }
}

/* ---- Dashboard content spot-fixes ---- */
/* Safety net (same as body.landing): stray over-wide children must
   never let the main pane pan sideways. clip = no scroll container. */
.dash-main{ overflow-x: clip; }
/* The chart canvas carries an intrinsic px width (Chart.js sets it) —
   never let it widen a grid track past the viewport */
.dh-portfolio-grid > *{ min-width: 0; }
.dh-chart-wrap{ min-width: 0; }
/* Small tablets: 320px KPI column + chart crowd each other */
@media (max-width: 1024px){
  .dh-portfolio-grid{ grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 900px){
  .dh-portfolio-grid{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 540px){
  .dw-grid{ grid-template-columns: 1fr; }
  #dhMap{ height: 280px; }
  .dh-sec-h{ flex-wrap: wrap; gap: 8px; }
}

/* Analyzer results tables (all analyzers share #results-all) scroll
   sideways on phones instead of blowing out the bottom sheet. */
@media (max-width: 767px){
  #results-all table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Deal-score breakdown tiles: the desktop 4-track grid has ~310px of
   fixed minimums and pushed "/100" past the tile edge on phones —
   two-line layout instead: name over sub-value, weight + score right. */
@media (max-width: 767px){
  .ds-bd-row{
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name weight value"
      "sub  weight value";
    gap: 2px 10px;
    padding: 8px 12px;
    font-size: 12.5px;
  }
  .ds-bd-name{ grid-area: name; }
  .ds-bd-sub{ grid-area: sub; font-size: 10.5px; }
  .ds-bd-weight{ grid-area: weight; }
  .ds-bd-value{ grid-area: value; }
}

/* =================================================================
   ANALYZER + FEATURE PAGES — phone chart heights & tuning (phase 3b)
   The non-STR analyzers wrap Chart.js canvases in their own classes
   (nc-/brrr-/pf-) which kept desktop heights on phones. Width already
   self-adapts (Chart.js responsive) — this only right-sizes height.
================================================================= */
@media (max-width: 767px){
  .nc-chart-wrap{ height: 260px; }
  .nc-chart-wrap.nc-chart-wrap-tall{ height: 320px; }
  .brrr-chart-wrap .chart-canvas-wrap{ height: 260px; }
  .brrr-chart-wrap .chart-canvas-wrap.chart-short{ height: 200px; }
  .pf-wealth-chart{ height: 200px; }
}

/* Market Trends app page below small-phone width */
@media (max-width: 540px){
  .mh-map{ height: 360px; }
  .mh-detail-grid{ grid-template-columns: 1fr; }
  .mh-search{ min-width: 0; flex: 1 1 100%; }
  /* Compact legend pill so it stays in the map's bottom-left corner
     without running into the attribution on a narrow map. */
  .mh-legend{
    left: 10px;
    bottom: 40px;   /* clear of the attribution line along the map's bottom edge */
    gap: 5px;
    padding: 5px 9px;
    font-size: 9.5px;
  }
  .mh-legend .mh-legend-title{ font-size: 8px; letter-spacing: 0.05em; }
  .mh-legend .mh-legend-bar{ width: 52px; height: 8px; }
}

/* BRRRR cost-breakdown table on phones: the desktop 4-column row
   (label | bar | $ | %) crushes into slivers. Stack each item —
   label + $ + % on the first line, the bar full-width beneath.
   (Overrides the generic #results-all table scroll-x for this table.) */
@media (max-width: 767px){
  .cost-table{ display: block; overflow: visible; }
  .cost-table tbody{ display: block; }
  .cost-table tr{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "label val pct"
      "bar   bar bar";
    gap: 4px 10px;
    align-items: center;
    padding: 10px 2px;
    border-bottom: 1px solid var(--line);
  }
  .cost-table tr:last-child{ border-bottom: none; }
  .cost-table td{ display: block; width: auto; padding: 0; border-bottom: none; }
  .cost-table .ci-label{ grid-area: label; width: auto; }
  .cost-table .ci-bar-cell{ grid-area: bar; width: 100%; padding: 0; }
  .cost-table .ci-val{ grid-area: val; text-align: right; }
  .cost-table .ci-pct{ grid-area: pct; width: auto; text-align: right; }
  /* Total row: one clean rule above it, not per-cell border fragments */
  .cost-table tr.ci-total{ border-top: 2px solid var(--line-2); margin-top: 2px; }
  .cost-table tr.ci-total td{ border-top: none; }
}

/* Donut with its legend along the BOTTOM (narrow columns — class set by
   brrr.js from the container width): extra height keeps the ring a
   readable size above the stacked legend. Not viewport-scoped: tablets
   whose 2-col layout gives the donut a phone-width column need it too. */
.brrr-cost-donut-canvas.donut-legend-bottom{ min-height: 360px; }

/* Small phones: slimmer segment padding so both labels fit comfortably */
@media (max-width: 430px){
  .seg-opt{ padding: 8px 10px; font-size: 12.5px; }
}

/* Year-by-year / rent-roll results tables (brrr/ltr/mf/nc): on phones
   the columns crushed and wrapped mid-value ("2 / 1" stacking one
   character per line). Keep cells on one line and let the existing
   wrapper scroll sideways instead. */
@media (max-width: 767px){
  .brrr-yearly-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .brrr-yearly-table th,
  .brrr-yearly-table td{ white-space: nowrap; }
}

/* Compare page on phones: the banner is a text | gauge row — at phone
   width the gauge crushed the text into a one-word-per-line sliver.
   Stack instead. */
@media (max-width: 540px){
  .compare-banner{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 18px;
  }
  .compare-banner .cb-title{ font-size: 22px; }
  .compare-banner .cb-gauge{ align-self: center; }
}

/* Compare matrix on phones: the metric column ate ~65% of the width,
   leaving slivers of the deal columns. Pin it (sticky) at a fixed
   width so labels stay put while the deal values scroll beneath. */
@media (max-width: 640px){
  .compare-matrix td.cm-metric,
  .compare-matrix thead th:first-child{
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 132px;
    max-width: 152px;
    white-space: normal;      /* labels may wrap inside their own column */
    background: var(--surface-solid);
    box-shadow: 2px 0 0 var(--line);
  }
  .compare-matrix thead th:first-child{ background: var(--surface-2); }
  .compare-matrix tbody td,
  .compare-matrix thead th{ padding: 10px 10px; }
}

/* Compare actions on phones: three ghost pills squeezed into ovals with
   labels wrapping 2-3 lines. Stack them full width, one line each. */
@media (max-width: 540px){
  .compare-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .compare-actions .ghost{
    justify-content: center;
    white-space: nowrap;
    padding: 11px 16px;
    min-height: 44px;
  }
}

/* Wealth-growth / property panels on phones: the benchmark + range
   toggle pair is ~510px of flex-shrink:0 chips — wider than the
   viewport, so the whole page overflowed and shifted sideways. Stack
   the toggle groups full-width; each scrolls in place if it must. */
@media (max-width: 640px){
  .pp-panel-controls{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex-shrink: 1;
  }
  .pp-range-toggle{
    flex-shrink: 1;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pp-range-toggle::-webkit-scrollbar{ display: none; }
  .pp-range-btn{ white-space: nowrap; flex-shrink: 0; }
}

/* Checkout result actions: two buttons wrapped their labels mid-word
   at phone width — stack them full-width instead. */
@media (max-width: 540px){
  .checkout-result .cr-actions{ flex-direction: column; align-items: stretch; gap: 10px; }
  .checkout-result .cr-actions .calc{ white-space: nowrap; text-align: center; }
}

/* Property page value-update form: the 160px|1fr|auto row is wider
   than a phone — stack the three fields. minmax(0,·): the actions
   cell's two side-by-side buttons carry a ~300px min-content that a
   bare 1fr track would inherit. */
@media (max-width: 540px){
  .pp-value-form{
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .pp-value-form > *{ min-width: 0; }
  .pp-value-form .pp-value-actions{ flex-wrap: wrap; justify-self: stretch; }
  .pp-value-form .pp-value-save,
  .pp-value-form .pp-value-lookup{ flex: 1 1 auto; justify-content: center; }
  /* Log header: tabs + Import/Export CSV don't fit one row — wrap,
     with the CSV buttons flowing under the tabs */
  .pp-log-tabs{ flex-wrap: wrap; row-gap: 8px; }
  .pp-log-tabs .pp-csv{ margin-left: 0; }
}

/* Checkout result CTAs are <a class="calc"> — but .calc button styling
   is element-qualified (button.calc), so the links rendered as bare
   text. Style them as proper buttons: green primary, ghost secondary. */
.checkout-result .cr-actions .calc{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: var(--brand-fill);
  color: var(--brand-ink);
  box-shadow: 0 10px 24px -12px rgba(126,232,106,0.55);
  transition: transform 0.12s ease, filter 0.12s ease, background 0.12s ease;
}
.checkout-result .cr-actions .calc:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.checkout-result .cr-actions .calc.secondary{
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.checkout-result .cr-actions .calc.secondary:hover{ background: var(--surface-2); color: var(--ink); }

/* Settings billing: persistent "cancels on <date>" note */
.bp-cancel-note{
  margin: 10px 0 2px;
  padding: 10px 14px;
  background: var(--warn-soft, rgba(217,119,6,0.08));
  border: 1px solid rgba(217,119,6,0.25);
  border-left: 3px solid var(--warn);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-2);
}
/* The undo action ("Keep <plan>") — without this it inherits the note's
   muted colour and reads as plain text rather than something clickable. */
.bp-cancel-note a{
  display: inline-block;
  margin-left: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--surface-solid);
  border: 1px solid rgba(217,119,6,0.40);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease;
}
.bp-cancel-note a:hover{
  background: var(--surface-2);
  border-color: var(--warn);
}