/* ===========================================
   DESIGN SYSTEM — Editorial Financial Aesthetic
   Inspired by Bloomberg Terminal × Stripe × NYT
   =========================================== */
:root{
  /* P1 (theme rollout): the color palette that USED to live here was dead —
     assets/css/theme.css loads AFTER this file and re-declares :root wholesale,
     overriding every color token below. Verified: all 29 pages that load
     styles.css also load theme.css after it, and the legacy --dark* tokens had
     zero usages. Removed to make theme.css the single source of color truth
     (zero visual change). Only the FONT tokens remain live here. */

  /* Type scale
     --font-display is the product UI face. The APP (dashboard, analyzers,
     portfolio, settings, modals) runs on Inter — neutral, built for UI, and
     far steadier than a grotesque in dense number tables. The marketing
     site keeps Space Grotesk via the body.landing override below, so the
     public pages stay on the locked landing typography.
     Both faces are already in every page's font link — no extra requests. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Product-UI face that NEVER varies by page. --font-display flips to
     Space Grotesk on marketing pages (body.landing), which made shared
     app chrome — the account menu especially — change typeface depending
     on which page you opened it from. Use this for anything that belongs
     to the app but can appear on a marketing page. */
  --font-app: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'Space Mono', 'SF Mono', Menlo, monospace;
  /* Back-compat alias: legacy rules still reference --font-serif.
     theme.css re-declares this as Instrument Serif, which wins (loaded later). */
  --font-serif: var(--font-display);
}

/* Marketing pages (index, pricing, solution-*, about, faq, auth, legal…) all
   carry body.landing — keep them on Space Grotesk per the landing-typography
   decision. Everything without that class is the signed-in app → Inter. */
body.landing{
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
/* Sign-in / sign-up is a product screen wearing the marketing shell — it
   carries body.landing for the page chrome, but the form itself should read
   like the app. Put it back on Inter. */
body.landing.auth-page{
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;   /* P3: larger base size (locked "Large" decision) */
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;   /* iOS: no automatic text inflation */
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

a{ color: inherit; text-decoration: none; }

.wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 32px 96px;
}

/* ===========================================
   PLATFORM NAV — sticky top tab bar
   =========================================== */
nav.platform-nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247,247,245,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line-2);
}
.platform-nav .nav-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.platform-nav .brand{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.035em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.platform-nav .brand .brand-mark{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 7px;
  border-radius: 4px;
  font-weight: 600;
  transform: translateY(-2px);
}
.platform-nav .brand em{ color: var(--accent); font-weight: 700; font-style: normal; }
.platform-nav ul.tabs{
  list-style: none;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.platform-nav ul.tabs a{
  display: inline-block;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  border-radius: 6px;
  transition: background 0.12s ease, color 0.12s ease;
  letter-spacing: 0.005em;
}
.platform-nav ul.tabs a:hover{
  color: var(--ink);
  background: var(--surface-2);
}
.platform-nav ul.tabs a.active{
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

/* ===========================================
   MASTHEAD — restrained editorial header
   =========================================== */
header.masthead{
  border-bottom: 1px solid var(--line-2);
  padding: 0 0 36px;
  margin-bottom: 44px;
}
.kicker{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 14px;
}
h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.02;
  color: var(--ink);
  letter-spacing: -0.035em;
}
h1 .amp{
  color: var(--accent);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.tagline{
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink-3);
  font-size: 15px;
  margin-top: 14px;
  max-width: 640px;
  letter-spacing: -0.01em;
  line-height: 1.55;
}

/* ===========================================
   LAYOUT
   =========================================== */
.grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media(max-width:920px){.grid{grid-template-columns:1fr}}

/* ===========================================
   CARDS — clean, no shadows
   =========================================== */
section.card{
  /* min-width:0 so a grid-item card can shrink below its content's min-width
     — lets inner overflow-x:auto scrollers (e.g. the MF rent-roll table with
     its 640px min-width) scroll internally instead of blowing out the page. */
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 26px;
  transition: border-color 0.15s ease;
}
section.card:hover{
  border-color: var(--line-2);
}
section.card.full{ grid-column: 1 / -1; }
section.card.dark{
  background: #fafaf7;
  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);
  color: var(--ink);
  border-color: var(--line-2);
}

.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
section.card.dark .card-header{ border-color: var(--line); }

.card-header .num{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  background: var(--surface-2);
  padding: 4px 9px;
  border-radius: 4px;
  font-weight: 600;
}
section.card.dark .card-header .num{
  background: var(--surface-2);
}
.card-header h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  flex: 1;
  margin: 0 14px;
  letter-spacing: -0.02em;
  color: inherit;
}
.card-header .chip{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--ink-3);
  font-weight: 500;
}

/* ===========================================
   FORM FIELDS
   =========================================== */
.fields{
  display: grid;
  /* minmax(0,1fr) (not 1fr) so a wide child — e.g. a long-option <select>
     like Multifamily's "Property class" — can't force the track past the
     viewport and clip fields off the right edge on mobile. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 18px;
}
.fields.tri{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }

.field{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.span-2{ grid-column: span 2; }
.field.span-3{ grid-column: 1/-1; }

/* Phones: single column so no field (or wide select like MF's Property class)
   is cramped, overlapped, or clipped. Must come AFTER the .field.span-2/3
   base rules above — equal specificity, so source order decides: collapsing
   the spans here stops `grid-column: span 2/3` from spawning a phantom
   implicit column that splits plain fields into a broken 0px + real pair. */
@media(max-width:600px){
  .fields, .fields.tri{ grid-template-columns: 1fr; }
  .field.span-2, .field.span-3{ grid-column: auto; }
}

.label{
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.label .req{ color: var(--ink-4); font-size: 9px; }

.input-wrap{ position: relative; display: flex; align-items: center; }
.input-wrap .prefix,
.input-wrap .suffix{
  position: absolute;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-4);
  pointer-events: none;
  font-weight: 500;
}
.input-wrap .prefix{ left: 12px; }
.input-wrap .suffix{ right: 12px; }
.input-wrap.has-prefix input{ padding-left: 26px; }
.input-wrap.has-suffix input{ padding-right: 36px; }

input[type="number"], input[type="text"]{
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]{
  font-family: var(--font-sans);
  font-size: 14px;
}
input:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input[type=number]{ -moz-appearance: textfield; }

.field-hint{
  font-size: 11.5px;
  color: var(--ink-4);
  font-family: var(--font-sans);
  line-height: 1.45;
}

/* ===========================================
   BUTTONS
   =========================================== */
.actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 36px 0;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  /* Lift above the side-panel scrim (z-index 90) so users can click
     SA / Projection / Portfolio / PDF / Save without first closing
     the currently-open results panel. */
  position: relative;
  z-index: 95;
}
button.calc{
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
button.calc:hover:not(:disabled){
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.18);
}
button.calc:active:not(:disabled){ transform: translateY(0); }
button.calc:disabled{ opacity: 0.35; cursor: not-allowed; }

button.calc.secondary{
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
}
button.calc.secondary:hover:not(:disabled){
  background: var(--accent-soft);
  box-shadow: 0 4px 12px rgba(37,99,235,0.12);
}

button.calc.tertiary{
  background: var(--pos);
  color: var(--on-accent);
}
button.calc.tertiary:hover:not(:disabled){
  background: #036649;
  box-shadow: 0 4px 12px rgba(4,120,87,0.18);
}

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

button.ghost{
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  padding: 12px 18px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.12s ease;
}
button.ghost:hover{ color: var(--ink); border-color: var(--ink-3); }
button .icon{ font-size: 14px; line-height: 1; opacity: 0.85; }

/* ===========================================
   RESULT SECTIONS
   =========================================== */
.results-section{ display: none; margin-top: 56px; }
.results-section.show{ display: block; animation: rise 0.4s ease both; }
@keyframes rise{
  from{ opacity: 0; transform: translateY(12px); }
  to  { opacity: 1; transform: translateY(0); }
}

.section-divider{
  text-align: center;
  color: var(--line-2);
  font-size: 11px;
  margin: 36px 0 28px;
  letter-spacing: 0.6em;
}
.section-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
/* Brand-green section marker before the title (echoes the REIzer logo). */
.section-title .sec-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--brand-fill);
  color: var(--brand-ink);
  vertical-align: middle;
  margin-right: 12px;
  position: relative;
  top: -3px;
}
.section-title .sec-icon svg{ width: 17px; height: 17px; display: block; }
.section-title .num{
  color: var(--accent);
  font-weight: 700;
  margin-right: 4px;
}
.section-sub{
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink-3);
  margin-bottom: 28px;
  font-size: 14.5px;
  letter-spacing: -0.005em;
}

/* ===========================================
   VERDICT BANNER
   =========================================== */
.verdict{
  text-align: center;
  padding: 36px 28px;
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 28px;
  border-radius: 10px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
}
.verdict.good{
  background: #f0fdf4;
  border-color: #bbf7d0;
  border-top-color: var(--pos);
}
.verdict.bad{
  background: #fef2f2;
  border-color: #fecaca;
  border-top-color: var(--neg);
}
.verdict.warn{
  background: #fffbeb;
  border-color: #fde68a;
  border-top-color: var(--warn);
}
.verdict .stamp{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
  font-weight: 600;
}
.verdict h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.verdict h3 .num{
  font-weight: 700;
  color: var(--accent);
}
.verdict.good h3 .num{ color: var(--pos); }
.verdict.bad  h3 .num{ color: var(--neg); }
.verdict.warn h3 .num{ color: var(--warn); }
.verdict .reason{
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink-2);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

/* ===========================================
   PROPERTY HEADER
   =========================================== */
.prop-header{
  background: var(--surface);
  color: var(--ink);
  padding: 22px 26px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  border-left: 3px solid var(--ink-2);   /* charcoal hero stripe (was green --accent) */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.prop-header .ph-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.prop-header .ph-loc{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  font-weight: 500;
}
.prop-header .ph-price{
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ===========================================
   SCENARIO EXPLAINER CARDS
   =========================================== */
.scenarios{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
@media(max-width: 720px){ .scenarios{ grid-template-columns: 1fr; } }
.scenario{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 22px;
  border-top: 3px solid var(--ink-3);
}
.scenario.alt{
  border-top-color: var(--accent);
  background: #fafbff;
}
.scenario-tag{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.scenario.alt .scenario-tag{ color: var(--accent); }
.scenario-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.025em;
}
.scenario-desc{
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 10px;
}
.scenario-desc em{ color: var(--ink); font-weight: 600; font-style: normal; }
.scenario-meta{
  font-size: 12.5px;
  color: var(--ink-3);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.scenario-meta strong{ color: var(--ink); font-weight: 600; }

/* ===========================================
   STAT GRID
   =========================================== */
.stat-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
@media(max-width:780px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{
  background: var(--surface);
  padding: 22px 24px;
}
.stat .stat-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
  font-weight: 600;
}
.stat .stat-val{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.stat .stat-val.pos{ color: var(--pos); }
.stat .stat-val.neg{ color: var(--neg); }
.stat .stat-sub{
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 4px;
}

/* ===========================================
   BREAKDOWN TABLES
   =========================================== */
.breakdown{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 22px;
}
.breakdown h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.breakdown h3::before{
  content: "";
  width: 4px;
  height: 16px;
  background: var(--accent);
  border-radius: 2px;
}
.breakdown table{ width: 100%; border-collapse: collapse; }
.breakdown td{
  padding: 11px 22px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}
.breakdown tr:last-child td{ border-bottom: none; }
.breakdown td:first-child{
  font-family: var(--font-sans);
  color: var(--ink-3);
  font-weight: 500;
}
.breakdown td:last-child{
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}
.breakdown tr.total td{
  background: #f0f4ff;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  border-top: 2px solid var(--accent);
}
.breakdown tr.total td:first-child{ color: var(--ink); }
.breakdown tr.subtotal td{
  background: var(--surface-2);
  font-weight: 600;
}
.breakdown tr.flag-good td:last-child{ color: var(--pos); }
.breakdown tr.flag-bad td:last-child{ color: var(--neg); }

/* ===========================================
   DAYS GRID
   =========================================== */
.days-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 22px;
}
.day-cell{
  background: var(--surface);
  padding: 18px 22px;
  text-align: center;
}
.day-cell .lbl{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
  font-weight: 600;
}
.day-cell .val{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.day-cell .sub{
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-4);
  margin-top: 4px;
}

/* ===========================================
   CHARTS
   =========================================== */
.chart-wrap{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 22px 22px;
  margin-bottom: 20px;
  page-break-inside: avoid;
}
.chart-wrap .ch-title{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.chart-wrap .ch-sub{
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-3);
  margin-bottom: 14px;
  line-height: 1.5;
}
.chart-wrap .canvas-container{
  position: relative;
  width: 100%;
  height: 380px;
}
.chart-wrap.tall .canvas-container{ height: 560px; }

/* ===========================================
   OCCUPANCY TABLE
   =========================================== */
.occ-table table{ width: 100%; border-collapse: collapse; }
.occ-table th{
  background: var(--surface-2);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 14px;
  text-align: right;
  font-weight: 600;
  border-bottom: 1px solid var(--line-2);
}
.occ-table th:first-child{ text-align: left; }
.occ-table td{
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.occ-table td:first-child{
  text-align: left;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.occ-table tr.highlight{ background: var(--accent-soft); }
.occ-table tr.be-row{ background: var(--surface-2); font-weight: 700; }
.occ-table .pos{ color: var(--pos); font-weight: 700; }
.occ-table .neg{ color: var(--neg); font-weight: 700; }

/* ===========================================
   NOTES
   =========================================== */
.notes{
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-2);   /* charcoal stripe (was green --accent) */
  border-radius: 8px;
  padding: 20px 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.65;
}
.notes strong{ color: var(--ink); font-weight: 600; }
.notes p{ margin-bottom: 10px; }
.notes p:last-child{ margin-bottom: 0; }

/* ===========================================
   LEVERS LIST
   =========================================== */
.lever-list{ margin-top: 8px; }
.lever-list .lever{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: 6px;
  border-radius: 6px;
}
.lever .lever-name{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  min-width: 140px;
}
.lever .lever-bar{
  flex: 1;
  height: 14px;
  background: var(--surface-2);
  border-radius: 7px;
  overflow: hidden;
}
.lever .lever-fill{
  height: 100%;
  background: var(--accent);
  border-radius: 7px;
}
.lever .lever-val{
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  min-width: 100px;
  text-align: right;
  font-size: 12.5px;
}

/* ===========================================
   FOOTER
   =========================================== */
footer{
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}
footer em{
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

/* Consistent analyzer footer: REIzer wordmark + copyright + legal links.
   Inherits the base footer{} chrome (top border, centered, mono meta row). */
.app-footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 40px;
}
.app-footer .af-brand{
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink-2);
}
.app-footer .af-meta{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
}
.app-footer .af-meta a{
  color: var(--ink-4);
  text-decoration: none;
  transition: color 0.15s ease;
}
.app-footer .af-meta a:hover{ color: var(--accent); }

/* ===========================================
   HOMEPAGE — analyzer selector cards
   =========================================== */
.home-hero{
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 44px;
}
.home-hero h1{
  font-size: clamp(44px, 6vw, 72px);
  max-width: 920px;
}
.home-hero .tagline{
  font-size: 16px;
  max-width: 720px;
  margin-top: 18px;
}

.analyzer-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media(max-width:840px){ .analyzer-grid{ grid-template-columns: 1fr; } }

.analyzer-card{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 28px 24px;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.analyzer-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  opacity: 0.85;
}
.analyzer-card.coming::before{ background: var(--ink-3); opacity: 0.5; }
.analyzer-card:hover{
  border-color: var(--line-2);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(10,10,10,0.06);
}
.analyzer-card .ac-kicker{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.analyzer-card .ac-badge{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
}
.analyzer-card.coming .ac-badge{
  color: var(--warn);
  background: var(--warn-soft);
}
.analyzer-card h3.ac-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 12px;
}
.analyzer-card h3.ac-title em{ color: var(--accent); font-weight: 700; font-style: normal; }
.analyzer-card .ac-desc{
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 16px;
}
.analyzer-card ul.ac-bullets{
  list-style: none;
  margin-bottom: 22px;
}
.analyzer-card ul.ac-bullets li{
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-3);
  padding: 5px 0 5px 18px;
  position: relative;
  line-height: 1.5;
}
.analyzer-card ul.ac-bullets li::before{
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}
.analyzer-card.coming ul.ac-bullets li::before{ color: var(--warn); }
.analyzer-card .ac-cta{
  margin-top: auto;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.005em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.analyzer-card .ac-cta .arrow{
  transition: transform 0.18s ease;
  display: inline-block;
}
.analyzer-card:hover .ac-cta .arrow{ transform: translateX(4px); }
.analyzer-card.coming .ac-cta{ color: var(--ink-4); }

/* ===========================================
   COMING-SOON PLACEHOLDER PAGE
   =========================================== */
.coming-soon{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 56px 48px;
  margin-top: 24px;
  border-top: 4px solid var(--warn);
}
.coming-soon .cs-stamp{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warn);
  background: var(--warn-soft);
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 18px;
}
.coming-soon h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 14px;
  color: var(--ink);
}
.coming-soon h2 em{ color: var(--accent); font-weight: 700; font-style: normal; }
.coming-soon .cs-lede{
  font-family: var(--font-sans);
  color: var(--ink-3);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 720px;
  margin-bottom: 32px;
}
.coming-soon .cs-section{
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.coming-soon .cs-section h4{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 14px;
}
.coming-soon .cs-section ul{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
}
@media(max-width:720px){ .coming-soon .cs-section ul{ grid-template-columns: 1fr; } }
.coming-soon .cs-section li{
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-2);
  padding: 6px 0 6px 20px;
  position: relative;
  line-height: 1.55;
}
.coming-soon .cs-section li::before{
  content: "▸";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--accent);
  font-size: 10px;
}
.coming-soon .cs-section li strong{ color: var(--ink); font-weight: 600; }
.coming-soon .cs-back{
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
}
.coming-soon .cs-back:hover{ color: var(--accent-2); }

/* Address picker modal — gates the Analyze button until geocoded (map.js) */
.addr-modal-overlay{
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(2px);
  animation: addrFade .12s ease;
}
@keyframes addrFade{ from{ opacity: 0; } to{ opacity: 1; } }
.addr-modal{
  width: 100%; max-width: 460px;
  background: var(--surface, #fff);
  border: 1px solid rgba(10,10,10,0.10);
  border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(10,10,10,0.45);
  overflow: hidden;
}
.addr-modal-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid rgba(10,10,10,0.08);
}
.addr-modal-head h3{
  margin: 0; font-family: var(--font-sans);
  font-size: 16px; font-weight: 700; color: var(--ink, #0a0a0a);
}
.addr-modal-x{
  border: 0; background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-2, #6b7280);
  padding: 2px 6px; border-radius: 6px;
}
.addr-modal-x:hover{ background: rgba(10,10,10,0.06); color: var(--ink, #0a0a0a); }
.addr-modal-body{ padding: 16px 18px 18px; font-family: var(--font-sans); }
.addr-modal-note{ margin: 0 0 12px; font-size: 14px; color: var(--ink-2, #4b5563); }
.addr-modal-note.addr-modal-warn{ color: var(--warn); font-weight: 700; }
.addr-modal-sub{ margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2, #4b5563); }
.addr-modal-loading{ margin: 0; font-size: 14px; color: var(--ink-2, #6b7280); }
.addr-modal-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.addr-modal-pick{
  width: 100%; display: flex; align-items: flex-start; gap: 10px;
  text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(10,10,10,0.12);
  background: var(--surface, #fff);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--ink, #0a0a0a);
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.addr-modal-pick:hover{
  border-color: var(--accent, #16a34a);
  background: var(--accent-soft, rgba(22,163,74,0.07));
  transform: translateY(-1px);
}
.addr-modal-pin{ flex: none; }
.addr-modal-actions{ display: flex; justify-content: flex-end; }
.addr-modal-ok{
  border: 0; cursor: pointer; padding: 10px 16px; border-radius: 9px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  color: #fff; background: var(--accent, #16a34a);
}
.addr-modal-ok:hover{ filter: brightness(0.95); }

/* PDF print adjustments */
@media print{
  button{ display: none !important; }
  .actions{ display: none !important; }
  nav.platform-nav{ display: none !important; }
}

/* Mobile: results-panel charts — desktop heights are too tall for a
   phone bottom sheet. The tornado keeps its full height (stacked-row
   layout needs it). */
@media (max-width: 767px){
  .chart-wrap{ padding: 14px 12px 16px; }
  .chart-wrap .canvas-container{ height: 280px; }
  .chart-wrap.tall .canvas-container{ height: 400px; }
  .chart-wrap.tall .canvas-container:has(#tornadoChart){ height: 560px; }
}