/* ============================================================================
   REDATA — shared stylesheet for both sides of the platform.

   The palette below is the ONLY thing that differs between the commercial and
   residential pages. Every colour in the rest of this file resolves through a
   token, so setting `data-side="residential"` on <html> repaints the whole
   site navy without touching a single rule.

   Two families deliberately do NOT flip:
     • --tone-pos / --pos-* (green) and --tone-neg / red literals. Green=good,
       red=bad has to survive the theme swap or the score pills, sentiment
       flags and parse status stop meaning anything.
     • --accent (amber). It reads correctly on both grounds.

   Brand-accent text uses --brand-tint (which DOES flip); positive-status text
   uses --tone-pos (which does not). They happen to share a value on the
   commercial side — that is why the literal #7fe0b4 appeared in both roles
   before this file existed.
   ========================================================================== */

:root,
[data-side="commercial"] {
  /* ink & surfaces */
  --ink: #e8f1ec;
  --muted: #8ea69b;
  --muted-rgb: 142, 166, 155;
  --text-soft: #c4d6cd;
  --line: rgba(150, 190, 172, 0.14);
  --line-rgb: 150, 190, 172;
  --paper: #07120e;
  --paper-rgb: 7, 18, 14;
  --panel: #0f1d18;
  --panel-rgb: 15, 29, 24;
  --panel-2: #0b1813;
  --panel-3: #122620;
  --surface-0: #050d0a;
  --surface-1: #081310;
  --surface-2: #0a1813;
  --surface-3: #0e1f18;
  --surface-4: #14231d;
  --surface-5: #1d2e28;
  --hairline-hi: rgba(255, 255, 255, 0.05);

  /* brand */
  --brand: #1f9d6b;
  --brand-rgb: 31, 157, 107;
  --brand-dark: #137a52;
  --brand-deep-rgb: 26, 107, 80;
  --brand-solid: #158457;
  --brand-solid-dark: #12784e;
  --brand-deep: #0f6142;
  --brand-bright: #36d699;
  --brand-tint: #7fe0b4;
  --brand-tint-rgb: 127, 224, 180;
  --brand-tint-soft: #cdeede;

  /* secondary accents */
  --accent: #d6943f;
  --steel: #2f6c95;
  --steel-rgb: 47, 108, 149;
  --steel-dark: #173249;
  --steel-deep-rgb: 15, 45, 65;
  --steel-deepest: #0d2230;
  --steel-bg: #eaf1f7;

  /* header / footer chrome (light at the top of the page, brand-dark on scroll) */
  --chrome-bg: #fbfcfa;
  --chrome-bg-2: #f0f4f2;
  --chrome-bg-rgb: 247, 248, 244;
  --chrome-bg-scrolled-rgb: 14, 74, 54;
  --chrome-ink: #e8f2ee;
  --chrome-ink-rgb: 232, 242, 238;
  --chrome-ink-dim: #d8e3de;
  --chrome-line: #dfe5e1;
  --chrome-line-rgb: 223, 229, 225;
  --chrome-muted: #62706a;
  --label-muted: #7d968b;

  /* elevation */
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
  --shadow-deep: 0 34px 80px rgba(0, 0, 0, 0.6);

  /* Status tones for text on the dark surfaces. Colours applied inline
     from JS must use these: inline styles bypass the token block, so the
     --brand-dark / #9f342f pair lands at 3.3:1 and 2.5:1 against these
     panels. These read 11.5:1 and 9.2:1. Fixed across both sides. */
  --tone-pos: #7fe0b4;
  --tone-neg: #f0a59c;
  --pos-bg: #edf7f3;
  --pos-bg-2: #d6efe3;
  --pos-line: #c3e6d6;
  --pos-ink: #1a5c3e;

  /* Hero photograph. Part of the palette because it is the one image that
     has to change with the side. */
  --hero-img: url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2200&q=85");
}

[data-side="residential"] {
  /* ink & surfaces */
  --ink: #e6eff8;
  --muted: #8fa3b8;
  --muted-rgb: 143, 163, 184;
  --text-soft: #c2d4e6;
  --line: rgba(150, 180, 215, 0.14);
  --line-rgb: 150, 180, 215;
  --paper: #060f1a;
  --paper-rgb: 6, 15, 26;
  --panel: #0f1c2b;
  --panel-rgb: 15, 28, 43;
  --panel-2: #0b1622;
  --panel-3: #12222f;
  --surface-0: #040b14;
  --surface-1: #071120;
  --surface-2: #0a1826;
  --surface-3: #0e2033;
  --surface-4: #142a3d;
  --surface-5: #1d3549;

  /* brand */
  --brand: #2f7fd6;
  --brand-rgb: 47, 127, 214;
  --brand-dark: #1c5ea8;
  --brand-deep-rgb: 24, 80, 145;
  --brand-solid: #2069b8;
  --brand-solid-dark: #17538f;
  --brand-deep: #1b4f86;
  --brand-bright: #4fa8ff;
  --brand-tint: #8ecbff;
  --brand-tint-rgb: 142, 203, 255;
  --brand-tint-soft: #cfe4ff;

  /* A duller, greyer slate-blue than --brand — enough separation to work as a
     secondary accent while keeping the page unambiguously navy. A teal or
     green-leaning secondary was tried first and washed the hero green, which
     is the one thing this side must not read as. */
  --steel: #4a7fa5;
  --steel-rgb: 74, 127, 165;
  --steel-dark: #16344a;
  --steel-deep-rgb: 18, 40, 72;
  --steel-deepest: #0d1a2e;
  --steel-bg: #eef3f9;

  /* header / footer chrome */
  --chrome-bg: #fafcfe;
  --chrome-bg-2: #f0f4f8;
  --chrome-bg-rgb: 244, 247, 251;
  --chrome-bg-scrolled-rgb: 14, 52, 94;
  --chrome-ink: #e8f0fa;
  --chrome-ink-rgb: 232, 240, 250;
  --chrome-ink-dim: #d8e2ee;
  --chrome-line: #dfe4ea;
  --chrome-line-rgb: 223, 228, 236;
  --chrome-muted: #626d78;
  --label-muted: #7d8fa3;

  --hero-img: url("https://images.unsplash.com/photo-1570129477492-45c003edd2be?auto=format&fit=crop&w=2200&q=85");
}

* {
  box-sizing: border-box;
}

/* The <meta name="color-scheme"> alone was not taking effect — computed
   color-scheme stayed "normal", so the browser painted native select
   popups on their default white while the options inherited the near-white
   --ink, giving white-on-white. This makes the whole native layer dark
   (popups, scrollbars, spinners) and the explicit option rule below is the
   belt-and-braces for engines that ignore it. */
:root {
  color-scheme: dark;
}

option,
optgroup {
  background-color: var(--panel);
  color: var(--ink);
}

/* Available to assistive tech, absent from the visual layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html {
  /* Guard against any stray horizontal overflow (full-bleed carousel,
     injected widgets, etc.). On the root scroller this does not affect the
     sticky header, which sticks to the viewport. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

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

button,
input,
select {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 18px clamp(20px, 5vw, 72px);
  background: rgba(var(--chrome-bg-rgb), 0.92);
  border-bottom: 1px solid rgba(var(--chrome-line-rgb), 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.site-header.scrolled {
  background: rgba(var(--chrome-bg-scrolled-rgb), 0.97);
  border-bottom-color: rgba(var(--brand-deep-rgb), 0.4);
  box-shadow: 0 4px 24px rgba(var(--paper-rgb), 0.18);
}

.site-header.scrolled .brand,
.site-header.scrolled .nav-links,
.site-header.scrolled .nav-links a {
  color: var(--chrome-ink);
}

.site-header.scrolled .btn-secondary {
  color: var(--chrome-ink);
  border-color: rgba(var(--chrome-ink-rgb), 0.35);
  background: rgba(255,255,255,0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: white;
  background: var(--brand);
  border-radius: 8px;
  font-size: 0.9rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--muted);
  font-size: 0.95rem;
}

.nav-links a:hover {
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  color: #fff;
  background: var(--brand);
}

.btn-primary:hover {
  background: var(--brand-dark);
}

.btn-secondary {
  color: var(--ink);
  background: #fff;
  border-color: var(--line);
}

.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  display: grid;
  align-items: end;
  padding: clamp(40px, 7vw, 96px) clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(var(--panel-rgb), 0.94) 0%, rgba(var(--steel-deep-rgb), 0.82) 50%, rgba(var(--panel-rgb), 0.55) 100%),
    var(--hero-img) center / cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, rgba(var(--chrome-bg-rgb), 0.98));
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  padding-bottom: 56px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--text-soft);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--accent);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 720px;
  margin-bottom: 20px;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.hero-copy {
  max-width: 650px;
  margin-bottom: 30px;
  color: var(--text-soft);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}

.hero .btn-secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.36);
}

.signal-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 680px;
}

.signal {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(var(--paper-rgb), 0.48);
  backdrop-filter: blur(12px);
}

.signal strong {
  display: block;
  margin-bottom: 3px;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

.signal span {
  color: var(--text-soft);
  font-size: 0.84rem;
  line-height: 1.35;
}

main {
  position: relative;
  z-index: 2;
}

.section {
  padding: clamp(64px, 9vw, 112px) clamp(20px, 5vw, 72px);
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  max-width: 1160px;
  margin: 0 auto 30px;
}

.section-header h2 {
  max-width: 680px;
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.section-header p {
  max-width: 440px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.6;
}

.workflow {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: stretch;
}

.analysis-panel {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.deal-title strong {
  display: block;
  margin-bottom: 3px;
  font-size: 1.05rem;
}

.deal-title span {
  color: var(--muted);
  font-size: 0.9rem;
}

.score {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  color: #fff;
  background: conic-gradient(var(--brand) 81%, var(--chrome-line) 0);
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 800;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.metric {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--chrome-bg);
}

.metric span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.metric strong {
  font-size: 1.35rem;
}

.underwriting-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.underwriting-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.underwriting-list strong {
  color: var(--ink);
}

.capability-list {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 14px;
  height: 100%;
}

.capability {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.capability h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.capability p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

.overview-panel h3 {
  margin-bottom: 6px;
  font-size: 1.15rem;
}

.overview-panel > p {
  margin-bottom: 18px;
  color: var(--muted);
  line-height: 1.6;
}

.how-it-works {
  display: grid;
  gap: 14px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: how-step;
}

.how-it-works li {
  position: relative;
  padding-left: 44px;
  counter-increment: how-step;
  color: var(--muted);
  line-height: 1.5;
}

.how-it-works li::before {
  content: counter(how-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--brand);
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 800;
}

.how-it-works li strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
}

.about-block {
  max-width: 1160px;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  align-items: center;
  padding: 30px 34px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hairline-hi);
}

.about-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 32px;
  border-right: 1px solid var(--line);
}

.about-eyebrow {
  color: var(--brand);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-name {
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1.2;
}

.about-role {
  color: var(--muted);
  font-size: 0.92rem;
}

.about-bio {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 1.02rem;
}

.about-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
}

.about-contact a {
  color: var(--brand);
  text-decoration: none;
}

.about-contact a:hover {
  text-decoration: underline;
}

.asset-types {
  background: #fff;
  border-block: 1px solid var(--line);
}

.type-grid {
  max-width: none;
  margin: -12px 0;
  padding: 12px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.type-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: type-scroll 60s linear infinite;
}

.type-grid:hover .type-track {
  animation-play-state: paused;
}

@keyframes type-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 7px)); }
}

.type-card {
  flex: 0 0 280px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .type-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.type-card span {
  width: fit-content;
  padding: 7px 10px;
  color: var(--brand-dark);
  background: var(--pos-bg);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.type-card h3 {
  margin-bottom: 0;
  font-size: 1.35rem;
}

.model-section {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: stretch;
  min-width: 0;
}

.model-copy {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  min-width: 0;
}

.model-copy h2 {
  margin-bottom: 18px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
}

.model-copy p {
  color: var(--muted);
  line-height: 1.65;
}

.model-form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.form-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.results-zone {
  margin-top: 4px;
  padding: 24px;
  background: var(--paper);
  border-radius: 8px;
  border: 1px solid var(--line);
}

.advanced-toggle {
  margin: 18px 0 0;
}

.advanced-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  transition: border-color 0.2s ease, color 0.2s ease;
  width: 100%;
  justify-content: space-between;
}

.advanced-toggle-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.advanced-toggle-btn[aria-expanded="true"] {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.advanced-chevron {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.advanced-toggle-btn[aria-expanded="true"] .advanced-chevron {
  transform: rotate(180deg);
}

.advanced-subline {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

.advanced-panel {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.advanced-note {
  margin: 16px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.5;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.loopnet-import-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.loopnet-import-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.loopnet-import-hint {
  font-size: 0.78rem;
  color: var(--muted);
}

.loopnet-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--paper-rgb), 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 20px;
}

.loopnet-modal-overlay[hidden] {
  display: none;
}

.loopnet-modal {
  width: 100%;
  max-width: 620px;
  background: var(--panel);
  border-radius: 12px;
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.loopnet-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
}

.loopnet-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.loopnet-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.loopnet-modal-close:hover {
  background: var(--paper);
  color: var(--ink);
}

.loopnet-instructions {
  margin: 0;
  padding: 16px 24px 12px 40px;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.7;
  border-bottom: 1px solid var(--line);
}

.loopnet-instructions kbd {
  display: inline-block;
  padding: 1px 6px;
  font-size: 0.78rem;
  font-family: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
}

.loopnet-paste-area {
  width: 100%;
  padding: 16px 24px;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
  border: none;
  outline: none;
  resize: vertical;
  min-height: 180px;
  line-height: 1.55;
}

.loopnet-paste-area:focus {
  background: var(--chrome-bg-2);
}

/* Two rows: the progress bar spans the full width above, the status
   line and buttons share the row below. */
.loopnet-modal-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.loopnet-modal-actions {
  display: flex;
  gap: 10px;
}

.loopnet-parse-status {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.loopnet-parse-status.success {
  color: var(--brand-dark);
}

.loopnet-parse-status.error {
  color: #9f342f;
}

/* ---------- Parse progress ----------
   The endpoint answers once with no progress events, so the bar is
   paced rather than measured: it eases toward a ceiling and only
   reaches 100% when the real response lands. */
.loopnet-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
}

.loopnet-progress[hidden] {
  display: none;
}

.loopnet-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--calc-surface-hi);
  overflow: hidden;
}

.loopnet-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--steel));
  transition: width 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 300ms ease;
}

/* A failed parse leaves the bar where it stopped rather than running it
   to 100% — the status line beside it carries the reason. */
.loopnet-progress.is-stalled .loopnet-progress-fill {
  opacity: 0.35;
  filter: grayscale(1);
}

.loopnet-progress-stage {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--calc-label);
  min-height: 1em;
}

@media (prefers-reduced-motion: reduce) {
  .loopnet-progress-fill { transition: none; }
}

.loopnet-field-highlight {
  animation: loopnetPulse 1.4s ease;
}

@keyframes loopnetPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--brand-deep-rgb), 0.45); }
  50%  { box-shadow: 0 0 0 6px rgba(var(--brand-deep-rgb), 0.0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--brand-deep-rgb), 0); }
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

input,
select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--chrome-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-deep-rgb), 0.12);
}

.estimate {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.estimate div {
  padding: 14px;
  background: var(--paper);
  border-radius: 8px;
}

.estimate span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.estimate strong {
  font-size: 1.15rem;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px clamp(20px, 5vw, 72px);
  color: var(--chrome-ink-dim);
  background: var(--surface-4);
}

.site-footer p {
  margin: 0;
}

.site-footer p:nth-child(2) {
  text-align: center;
}

.privacy-btn {
  background: none;
  border: 1px solid rgba(var(--chrome-line-rgb), 0.35);
  color: var(--chrome-ink-dim);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  transition: background 0.15s;
}

.privacy-btn:hover {
  background: rgba(var(--chrome-line-rgb), 0.1);
}

.footer-legal {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.privacy-modal--wide {
  max-width: 600px;
}

.privacy-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--paper-rgb), 0.55);
  backdrop-filter: blur(4px);
  padding: 20px;
}

.privacy-overlay[hidden] { display: none; }

.privacy-modal {
  width: 100%;
  max-width: 700px;
  max-height: 80vh;
  background: var(--panel);
  border-radius: 12px;
  box-shadow: var(--shadow-deep);
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--brand);
}

.privacy-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.privacy-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}

.privacy-modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--muted);
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
}

.privacy-modal-close:hover { color: var(--ink); }

.privacy-modal-body {
  overflow-y: auto;
  padding: 24px;
  line-height: 1.7;
  color: var(--ink);
  font-size: 0.88rem;
}

.privacy-modal-body h4 {
  margin: 24px 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
}

.privacy-modal-body h4:first-child { margin-top: 0; }

.privacy-modal-body p { margin: 0 0 12px; }

.privacy-modal-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.privacy-modal-body a {
  color: var(--brand);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .privacy-modal { max-height: 90vh; }
}

.status-bar {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

.fetch-comps-btn {
  margin-bottom: 18px;
}

.cap-rate-comparison {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 20px 0 8px;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}

.cap-rate-item {
  flex: 1;
}

.cap-rate-item span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cap-rate-item strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
}

.cap-rate-arrow {
  font-size: 1.4rem;
  color: var(--muted);
  flex-shrink: 0;
}

.results-tier-label {
  margin: 24px 0 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.sensitivity-section {
  min-width: 0;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.sensitivity-section .results-tier-label {
  margin-top: 28px;
}

.sensitivity-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.sensitivity-subline {
  margin: 2px 0 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}

.sensitivity-label {
  display: grid;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

.sensitivity-label select {
  min-width: 180px;
}

.sensitivity-cap-note {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}

.sensitivity-table-wrap {
  width: 100%;
  min-width: 0;
  position: relative;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.sensitivity-table-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(var(--chrome-bg-rgb), 0.85));
  pointer-events: none;
  border-radius: 0 8px 8px 0;
}

@media (min-width: 900px) {
  .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .estimate {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .secondary-estimate {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cap-rate-item strong {
    font-size: 2.2rem;
  }

  #dealScoreOutput {
    font-size: 5.5rem;
  }

  #dealVerdictOutput {
    font-size: 1.05rem;
    margin-bottom: 4px;
  }

  .score-breakdown.is-active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
  }

  .sensitivity-table-wrap::after {
    display: none;
  }

  .form-section-label:first-of-type {
    font-size: 0.84rem;
    color: var(--brand-dark);
  }
}

.sensitivity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.sensitivity-table thead tr {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.sensitivity-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.sensitivity-table td {
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  white-space: nowrap;
}

.sensitivity-table tbody tr:first-child td {
  border-top: none;
}

.sensitivity-table tr.is-current {
  background: var(--pos-bg);
  font-weight: 700;
}

.sensitivity-table tr.is-current td {
  color: var(--brand-dark);
}

.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
}

.score-pill.strong {
  background: var(--pos-bg);
  color: var(--brand-dark);
}

.score-pill.caution {
  background: #fdf3e3;
  color: #7a4f0d;
}

.score-pill.weak {
  background: #fdecea;
  color: #7f1d1d;
}

/* Hide nav links before the header (brand + nav + actions) runs out of one-line room.
   Guest state needs ~1137px, signed-in (Account) state needs ~1168px, so hide below 1200px. */
@media (max-width: 1200px) {
  .nav-links {
    display: none;
  }
}

@media (max-width: 900px) {
  .workflow,
  .model-section {
    grid-template-columns: 1fr;
  }

  .about-block {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }

  .about-intro {
    padding-right: 0;
    padding-bottom: 20px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  #model {
    padding-right: clamp(16px, 3vw, 24px);
    padding-left: clamp(16px, 3vw, 24px);
  }

  .type-grid {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
    max-width: 1160px;
    margin: 0 auto;
  }

  .type-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    width: auto;
    animation: none;
  }

  .type-card {
    flex: none;
    width: auto;
  }

  .type-card[aria-hidden="true"] {
    display: none;
  }

  .section-header {
    display: block;
  }

  .section-header h2 {
    margin-bottom: 14px;
  }

}

@media (max-width: 640px) {
  .site-header {
    align-items: flex-start;
  }

  .header-actions .btn-secondary {
    display: none;
  }

  .hero {
    min-height: 760px;
    background-position: 62% center;
  }

  .signal-row,
  .metric-grid,
  .form-grid,
  .advanced-grid,
  .estimate,
  .type-track {
    grid-template-columns: 1fr;
  }

  .site-footer {
    display: block;
  }

  .site-footer p + p {
    margin-top: 10px;
  }

  .sensitivity-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sensitivity-label {
    text-align: left;
  }

  .loopnet-import-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .loopnet-import-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .loopnet-modal-footer {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .loopnet-modal-actions {
    flex-direction: column;
  }

  .loopnet-modal-actions .btn {
    width: 100%;
  }

  .model-form {
    padding: 22px 16px;
  }

  .cap-rate-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .cap-rate-arrow {
    display: none;
  }

  .export-btn-group {
    flex-direction: column;
  }

  .export-btn-group .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(2.6rem, 10vw, 4rem);
  }
}

.form-section-label {
  margin: 20px 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.form-section-label-note {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 400;
}

.deal-score-result {
  width: 100%;
  min-width: 0;
  margin-top: 24px;
  padding: 24px;
  border: 2px solid var(--line);
  border-radius: 8px;
  text-align: center;
  transition: border-color 0.3s ease;
}

.deal-score-result > span {
  display: block;
  margin-bottom: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.deal-score-result strong {
  display: block;
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.deal-score-result p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.ai-score-delta {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--brand-dark);
  font-weight: 700;
  line-height: 1.4;
}

.score-breakdown {
  display: none;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.score-breakdown.is-active {
  display: grid;
  gap: 14px;
}

.score-breakdown-row {
  display: grid;
  gap: 8px;
}

.score-breakdown-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.score-breakdown-value {
  color: var(--ink);
  white-space: nowrap;
}

.score-breakdown-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.score-breakdown-fill {
  height: 100%;
  border-radius: inherit;
}

.score-breakdown-rationale {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.secondary-estimate {
  display: grid;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric-note {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 400;
}

.export-btn {
  margin-top: 20px;
  width: 100%;
}

.export-btn-group {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  body * {
    visibility: hidden;
  }

  #model,
  #model * {
    visibility: visible;
  }

  #model {
    position: absolute;
    inset: 0;
    padding: 40px;
  }

  .export-btn {
    display: none;
  }

  .model-copy h2::before {
    content: "REDATA — Deal Analysis Summary";
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chrome-muted);
    margin-bottom: 8px;
  }

  .form-grid {
    display: none;
  }

  .form-section-label {
    display: none;
  }

  .results-tier-label {
    display: block;
  }

  .cap-rate-comparison {
    border: 1px solid var(--chrome-line);
  }

  .sensitivity-table-wrap {
    overflow: visible;
  }

  .sensitivity-section {
    margin-top: 20px;
    padding-top: 16px;
  }

  .sensitivity-table {
    font-size: 0.78rem;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

.metric:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 16px rgba(var(--brand-deep-rgb), 0.1);
  transform: translateY(-2px);
  transition: all 0.22s ease;
}

.type-card:hover {
  border-color: var(--steel);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(var(--steel-deep-rgb), 0.12);
  transition: all 0.25s ease;
}

.capability:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 22px rgba(var(--brand-deep-rgb), 0.1);
  transform: translateY(-2px);
  transition: all 0.22s ease;
}

.metric, .type-card, .capability {
  transition: all 0.22s ease;
}

.deal-score-result {
  background: linear-gradient(135deg, var(--chrome-bg) 0%, var(--steel-bg) 100%);
}

.analysis-panel {
  border-top: 3px solid var(--brand);
}

.model-form {
  border-top: 3px solid var(--steel);
}

.sensitivity-table tr.is-current {
  background: linear-gradient(90deg, var(--chrome-ink), var(--steel-bg));
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-content {
  animation: fadeSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.signal {
  transition: background 0.22s ease, border-color 0.22s ease;
}

.signal:hover {
  background: rgba(var(--brand-deep-rgb), 0.22);
  border-color: rgba(255,255,255,0.5);
}

.ai-intel-section {
  margin-top: 18px;
}

.ai-intel-trigger-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--chrome-bg), var(--steel-bg));
}

.ai-intel-trigger-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ai-intel-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--steel));
  font-weight: 800;
  flex: 0 0 auto;
}

.ai-intel-label {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.2;
}

.ai-intel-sublabel {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.ai-intel-run-btn {
  flex: 0 0 auto;
}

.ai-intel-panel {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  animation: aiIntelFadeIn 0.35s ease;
}

.ai-intel-panel[hidden] {
  display: none;
}

.ai-intel-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.ai-intel-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
}

.ai-intel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border: 1px solid rgba(var(--brand-deep-rgb), 0.18);
  border-radius: 999px;
  background: var(--pos-bg);
  color: var(--brand-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-intel-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Was 34px — under the comfortable touch target, and the odd one out
     next to .btn at 42px. */
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.ai-intel-close-btn:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
  background: var(--chrome-bg);
}

.ai-intel-body {
  display: grid;
  gap: 12px;
}

.ai-intel-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 600;
}

.ai-intel-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(var(--brand-deep-rgb), 0.16);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: aiSpin 0.7s linear infinite;
  flex: 0 0 auto;
}

@keyframes aiSpin {
  to { transform: rotate(360deg); }
}

/* ---------- AI Insights skeleton ----------
   Mirrors the shape renderResult() produces — six .ai-intel-metric
   cards, three flags, a thesis block and the footer — so the panel
   does not reflow when the real payload lands. Skeleton cards reuse
   the real classes, so padding, radius and the brand left-rule stay
   in sync automatically. */
.ai-skel-line {
  --h: 11px;
  height: var(--h);
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--calc-surface) 0%,
    var(--calc-surface-hi) 50%,
    var(--calc-surface) 100%
  );
  background-size: 200% 100%;
  animation: aiSkelShimmer 1.4s ease-in-out infinite;
}

/* Heights are tuned so a skeleton card measures within a few px of the
   card that replaces it (label 15px, value 21px, each note row 30px
   including the grid gap) — the panel settles instead of jumping. */
.ai-skel-line--label { --h: 13px; width: 42%; }
.ai-skel-line--value { --h: 18px; width: 64%; margin-bottom: 2px; }
/* Notes start at the third child of the card (label, value, then notes);
   ragged widths keep the block from reading as a solid slab. */
.ai-skel-line--note  { --h: 12px; margin: 6px 0; }
.ai-skel-card > .ai-skel-line--note:nth-child(4) { width: 92%; }
.ai-skel-card > .ai-skel-line--note:nth-child(5) { width: 78%; }
.ai-skel-card > .ai-skel-line--note:nth-child(6) { width: 64%; }

/* Staggered so the six cards read as one surface loading rather than
   six separate widgets pulsing in lockstep. */
.ai-skel-card:nth-child(2) .ai-skel-line { animation-delay: 0.08s; }
.ai-skel-card:nth-child(3) .ai-skel-line { animation-delay: 0.16s; }
.ai-skel-card:nth-child(4) .ai-skel-line { animation-delay: 0.24s; }
.ai-skel-card:nth-child(5) .ai-skel-line { animation-delay: 0.32s; }
.ai-skel-card:nth-child(6) .ai-skel-line { animation-delay: 0.40s; }

/* The skeleton wrapper repeats .ai-intel-body's own grid so the four
   groups space exactly as the real content does. */
.ai-skel {
  display: grid;
  gap: 12px;
}

.ai-skel-flag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.ai-skel-flag-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.ai-skel-thesis {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.ai-skel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.ai-skel-footer .ai-skel-line:first-child { width: 58%; }
.ai-skel-footer .ai-skel-line:last-child  { --h: 34px; width: 92px; flex: 0 0 auto; border-radius: 8px; }

@keyframes aiSkelShimmer {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

/* The shimmer is decoration, not information — a flat fill reads the
   same when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .ai-skel-line,
  .ai-skel-flag-icon {
    animation: none;
    background: var(--calc-surface);
  }
}

.ai-intel-error {
  padding: 12px 14px;
  border: 1px solid #e6c8c3;
  border-radius: 8px;
  background: #fdf3f2;
  color: #5c1f1a;
  line-height: 1.5;
}

.ai-intel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ai-intel-metric {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  background: var(--paper);
}

.ai-intel-metric-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-intel-metric-value {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}

.ai-intel-metric-note {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.6;
  opacity: 0.82;
}

.ai-intel-flags {
  display: grid;
  gap: 10px;
}

.ai-intel-flag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  line-height: 1.45;
}

.ai-intel-flag-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.ai-intel-flag.bullish {
  background: var(--pos-bg);
  border-color: var(--pos-line);
  color: var(--pos-ink);
}

.ai-intel-flag.bullish .ai-intel-flag-icon {
  background: var(--pos-bg-2);
  color: var(--pos-ink);
}

.ai-intel-flag.neutral {
  background: #f7f7ed;
  border-color: #e6e4c3;
  color: #4d4a1a;
}

.ai-intel-flag.neutral .ai-intel-flag-icon {
  background: #efedd0;
  color: #4d4a1a;
}

.ai-intel-flag.bearish {
  background: #fdf3f2;
  border-color: #e6c8c3;
  color: #5c1f1a;
}

.ai-intel-flag.bearish .ai-intel-flag-icon {
  background: #f3ddd8;
  color: #5c1f1a;
}

/* The AI's score delta and its rationale — a headline number that was
   falling through to unstyled body text. Reads as a callout above the
   modules, in the same voice as .ai-score-delta on the score card. */
.ai-intel-score-adjustment {
  padding: 12px 14px;
  border: 1px solid rgba(var(--brand-rgb), 0.3);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  background: rgba(var(--brand-rgb), 0.12);
  color: var(--tone-pos);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.5;
}

/* A downgrade must not arrive dressed in the same green as an upgrade. */
.ai-intel-score-adjustment.is-negative {
  border-color: rgba(200, 80, 70, 0.3);
  border-left-color: #c85046;
  background: rgba(200, 80, 70, 0.12);
  color: var(--tone-neg);
}

.ai-intel-thesis {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  line-height: 1.55;
}

.ai-intel-thesis-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-intel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.ai-intel-disclaimer {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.ai-intel-refresh-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Regenerate fires an extra AI call, so it is Pro-only. Free users still
   see the button — the tag says why, and the click routes to the upgrade
   modal rather than silently doing nothing. */
.ai-intel-pro-tag {
  display: none;
  padding: 2px 7px;
  border: 1px solid rgba(191, 138, 61, 0.32);
  border-radius: 999px;
  background: rgba(224, 164, 88, 0.16);
  color: #8a5e1c;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ai-intel-refresh-btn.is-pro-locked .ai-intel-pro-tag {
  display: inline-flex;
}

@keyframes aiIntelFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   DARK THEME OVERRIDE BLOCK
   "Institutional intelligence terminal" — deep forest-green /
   charcoal base, petrol-blue undertones, emerald accents.
   All selectors below are copied EXACTLY from above; later
   source order wins at equal specificity, so these override
   the original light-mode declarations without renaming or
   deleting any class, id, or rule.
   ============================================================ */

/* Headings — Inter Tight for a sharper display feel */
h1, h2, .deal-title strong {
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}

/* Base page surface — layered dark gradient */
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(var(--brand-rgb), 0.10), transparent 60%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--paper) 45%, var(--surface-0) 100%);
  color: var(--ink);
}

/* Header — dark glass */
.site-header {
  background: rgba(var(--paper-rgb), 0.7);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--hairline-hi) inset;
}

.site-header .brand,
.site-header .nav-links,
.site-header .nav-links a,
.site-header .btn-secondary {
  color: var(--ink);
}

.site-header .nav-links {
  color: var(--muted);
}

.site-header .nav-links a:hover {
  color: var(--ink);
}

.site-header .btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: var(--ink);
}

.site-header.scrolled {
  background: rgba(var(--paper-rgb), 0.86);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.site-header.scrolled .brand,
.site-header.scrolled .nav-links,
.site-header.scrolled .nav-links a {
  color: var(--ink);
}

.site-header.scrolled .btn-secondary {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.05);
}

/* Buttons */
/* White on --brand is only 3.45:1, so the gradient's light stop is pulled
   down to var(--brand-solid) (4.70:1) — the darker stop already passed. The hover
   used to brighten to var(--brand-bright), which made the label *less* readable at
   the moment of interaction; it now deepens instead, and .btn:hover's
   translateY already carries the "this is live" signal. */
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-solid), var(--brand-dark));
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-solid-dark), var(--brand-deep));
}

.btn-secondary {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* Guest gating — AI buttons locked until a free account is created */
.btn.guest-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.guest-lock-hint {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: middle;
}

/* Hero — richer dark overlay, fades to dark base */
.hero {
  background:
    linear-gradient(135deg, rgba(var(--panel-rgb), 0.96) 0%, rgba(var(--steel-deep-rgb), 0.86) 50%, rgba(var(--paper-rgb), 0.7) 100%),
    var(--hero-img) center / cover;
}

.hero::after {
  background: linear-gradient(180deg, transparent, var(--paper) 98%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(640px 420px at 18% 78%, rgba(var(--brand-rgb), 0.22), transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.eyebrow {
  color: var(--brand-tint-soft);
}

.hero-copy {
  color: var(--text-soft);
}

.signal {
  border: 1px solid var(--line);
  background: rgba(var(--paper-rgb), 0.55);
}

.signal span {
  color: var(--text-soft);
}

.signal:hover {
  background: rgba(var(--brand-rgb), 0.16);
  border-color: rgba(var(--brand-tint-rgb), 0.4);
}

/* Section copy */
.section-header p,
.model-copy p,
.capability p {
  color: var(--muted);
}

/* Analysis panel / model form — elevated dark cards */
.analysis-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hairline-hi);
}

.panel-top {
  border-bottom: 1px solid var(--line);
}

.deal-title span {
  color: var(--muted);
}

/* Score donut — dark track */
.score {
  background: conic-gradient(var(--brand) 81%, var(--surface-5) 0);
}

/* Metrics */
.metric {
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.metric span {
  color: var(--muted);
}

.metric strong {
  color: var(--ink);
}

.metric:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.underwriting-list li {
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.underwriting-list strong {
  color: var(--ink);
}

/* Capability cards */
.capability {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--hairline-hi);
}

.capability:hover {
  border-color: var(--brand);
  box-shadow: inset 0 1px 0 var(--hairline-hi);
}

/* Asset types section */
.asset-types {
  background: var(--surface-1);
  border-block: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 80px);
}

.type-card {
  background-color: var(--panel);
  background-image:
    linear-gradient(160deg, rgba(var(--paper-rgb), 0.92) 0%, rgba(var(--paper-rgb), 0.82) 55%, rgba(var(--steel-deep-rgb), 0.74) 100%),
    var(--card-img);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--hairline-hi);
}

/* These pills sit on rotating property photos. At 14% alpha the chip was
   leaning entirely on the card's overlay, so a bright photo could drop the
   label to ~4:1. An opaque-enough chip makes the label legible over any
   image (6.6:1 worst case) while keeping the green tint. */
.type-card span {
  color: var(--brand-tint);
  background: rgba(var(--panel-rgb), 0.86);
}

.type-card:hover {
  border-color: var(--steel);
  box-shadow: 0 0 0 1px rgba(var(--steel-rgb), 0.25);
  transform: translateY(-3px);
}

/* Model form */
.model-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--steel);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hairline-hi);
}

.results-zone {
  background: var(--panel-2);
  border: 1px solid var(--line);
}

/* Advanced toggle / panel */
.advanced-toggle-btn {
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}

.advanced-toggle-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.advanced-toggle-btn[aria-expanded="true"] {
  border-color: var(--brand);
  color: var(--brand-tint);
}

.advanced-panel {
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.advanced-note {
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* LoopNet modal */
.loopnet-modal-overlay {
  background: rgba(var(--paper-rgb), 0.65);
}

.loopnet-modal {
  background: var(--panel);
  box-shadow: var(--shadow-deep), inset 0 1px 0 var(--hairline-hi);
}

.loopnet-modal-header {
  border-bottom: 1px solid var(--line);
}

.loopnet-modal-close {
  color: var(--muted);
}

.loopnet-modal-close:hover {
  background: var(--panel-3);
  color: var(--ink);
}

.loopnet-instructions {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.loopnet-instructions kbd {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
}

.loopnet-paste-area {
  color: var(--ink);
  background: var(--panel-2);
}

.loopnet-paste-area:focus {
  background: var(--panel-3);
}

.loopnet-modal-footer {
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.loopnet-parse-status {
  color: var(--muted);
}

.loopnet-parse-status.success {
  color: var(--tone-pos);
}

.loopnet-parse-status.error {
  color: #f0a59c;
}

/* Inputs */
label {
  color: var(--muted);
}

input,
select {
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
}

input:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand);
}

/* Estimate blocks */
.estimate {
  border-top: 1px solid var(--line);
}

.estimate div {
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.estimate span {
  color: var(--muted);
}

.estimate strong {
  color: var(--ink);
}

/* Footer */
.site-footer {
  color: var(--text-soft);
  background: var(--surface-1);
  border-top: 1px solid var(--line);
}

.privacy-btn {
  border: 1px solid var(--line);
  color: var(--text-soft);
}

.privacy-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Privacy modal */
.privacy-overlay {
  background: rgba(var(--paper-rgb), 0.65);
}

.privacy-modal {
  background: var(--panel);
  box-shadow: var(--shadow-deep), inset 0 1px 0 var(--hairline-hi);
  border-top: 3px solid var(--brand);
}

.privacy-modal-header {
  border-bottom: 1px solid var(--line);
}

.privacy-modal-header h3 {
  color: var(--ink);
}

.privacy-modal-close {
  color: var(--muted);
}

.privacy-modal-close:hover { color: var(--ink); }

.privacy-modal-body {
  color: var(--ink);
}

.privacy-modal-body h4 {
  color: var(--brand-tint);
}

.privacy-modal-body a {
  color: var(--brand-tint);
}

/* Cap rate comparison */
.cap-rate-comparison {
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.cap-rate-item span {
  color: var(--muted);
}

.cap-rate-item strong {
  color: var(--ink);
}

.cap-rate-arrow {
  color: var(--muted);
}

.results-tier-label {
  color: var(--muted);
}

/* Sensitivity table */
.sensitivity-section {
  border-top: 1px solid var(--line);
}

.sensitivity-subline,
.sensitivity-label,
.sensitivity-cap-note {
  color: var(--muted);
}

.sensitivity-table-wrap {
  border: 1px solid var(--line);
}

.sensitivity-table-wrap::after {
  background: linear-gradient(to right, transparent, rgba(var(--paper-rgb), 0.9));
}

.sensitivity-table thead tr {
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.sensitivity-table th {
  color: var(--muted);
}

.sensitivity-table td {
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.sensitivity-table tr.is-current {
  background: linear-gradient(90deg, rgba(var(--brand-rgb), 0.18), rgba(var(--steel-rgb), 0.12));
  font-weight: 700;
}

.sensitivity-table tr.is-current td {
  color: var(--brand-tint);
}

/* Score pills */
.score-pill.strong {
  background: rgba(var(--brand-rgb), 0.16);
  color: var(--tone-pos);
}

.score-pill.caution {
  background: rgba(214, 148, 63, 0.16);
  color: #f0c486;
}

.score-pill.weak {
  background: rgba(200, 80, 70, 0.16);
  color: #f0a59c;
}

/* Form section labels */
.form-section-label,
.form-section-label-note {
  color: var(--muted);
}

@media (min-width: 900px) {
  .form-section-label:first-of-type {
    color: var(--brand-tint);
  }
}

/* Deal score result */
.deal-score-result {
  background: linear-gradient(135deg, var(--surface-3) 0%, var(--steel-deepest) 100%);
  border: 2px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hairline-hi);
}

.deal-score-result > span {
  color: var(--muted);
}

.deal-score-result strong {
  color: var(--brand-bright);
}

#dealScoreOutput {
  color: var(--brand-bright);
}

.deal-score-result p {
  color: var(--muted);
}

.ai-score-delta {
  color: var(--tone-pos);
}

/* Score breakdown */
.score-breakdown {
  border-top: 1px solid var(--line);
}

.score-breakdown-top,
.score-breakdown-rationale {
  color: var(--muted);
}

.score-breakdown-value {
  color: var(--ink);
}

.score-breakdown-track {
  background: var(--line);
}

.secondary-estimate {
  border-top: 1px solid var(--line);
}

.metric-note {
  color: var(--muted);
}

/* AI Intel */
.ai-intel-trigger-bar {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--surface-3), var(--steel-deepest));
}

/* Same deepened green as .btn-primary — the ✦ is white, and --brand's
   end of the sweep only reached 3.45:1. */
.ai-intel-icon {
  background: linear-gradient(135deg, var(--brand-solid), var(--steel));
  color: #fff;
}

.ai-intel-label {
  color: var(--ink);
}

.ai-intel-sublabel {
  color: var(--muted);
}

.ai-intel-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hairline-hi);
}

.ai-intel-panel-header {
  border-bottom: 1px solid var(--line);
}

.ai-intel-panel-title {
  color: var(--ink);
}

.ai-intel-badge {
  border: 1px solid rgba(var(--brand-rgb), 0.3);
  background: rgba(var(--brand-rgb), 0.14);
  color: var(--brand-tint);
}

.ai-intel-close-btn {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
}

.ai-intel-pro-tag {
  border: 1px solid rgba(224, 164, 88, 0.34);
  background: rgba(224, 164, 88, 0.16);
  color: var(--accent);
}

.ai-intel-close-btn:hover {
  border-color: var(--brand);
  color: var(--brand-tint);
  background: var(--panel-3);
}

.ai-intel-loading {
  color: var(--muted);
}

.ai-intel-spinner {
  border: 2px solid rgba(var(--brand-rgb), 0.2);
  border-top-color: var(--brand);
}

.ai-intel-error {
  border: 1px solid rgba(200, 80, 70, 0.35);
  background: rgba(200, 80, 70, 0.1);
  color: #f0a59c;
}

.ai-intel-metric {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  background: var(--panel-2);
}

.ai-intel-metric-label {
  color: var(--muted);
}

.ai-intel-metric-value {
  color: var(--ink);
}

.ai-intel-metric-note {
  color: var(--text-soft);
  opacity: 0.9;
}

.ai-intel-flag.bullish {
  background: rgba(var(--brand-rgb), 0.16);
  border-color: rgba(var(--brand-rgb), 0.3);
  color: var(--tone-pos);
}

.ai-intel-flag.bullish .ai-intel-flag-icon {
  background: rgba(var(--brand-rgb), 0.28);
  color: var(--tone-pos);
}

.ai-intel-flag.neutral {
  background: rgba(214, 148, 63, 0.16);
  border-color: rgba(214, 148, 63, 0.3);
  color: #f0c486;
}

.ai-intel-flag.neutral .ai-intel-flag-icon {
  background: rgba(214, 148, 63, 0.28);
  color: #f0c486;
}

.ai-intel-flag.bearish {
  background: rgba(200, 80, 70, 0.16);
  border-color: rgba(200, 80, 70, 0.3);
  color: #f0a59c;
}

.ai-intel-flag.bearish .ai-intel-flag-icon {
  background: rgba(200, 80, 70, 0.28);
  color: #f0a59c;
}

.ai-intel-thesis {
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.ai-intel-thesis-label {
  color: var(--muted);
}

.ai-intel-disclaimer {
  color: var(--muted);
}

/* Tabular numerals for all numeric display elements */
.metric strong,
.estimate strong,
.cap-rate-item strong,
.deal-score-result strong,
.sensitivity-table td,
.ai-intel-metric-value,
.signal strong,
.score {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ===== Mobile header fix: keep every action (incl. Sign in) reachable ===== */
@media (max-width: 760px) {
  .site-header {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px clamp(14px, 4vw, 22px);
  }
  .header-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  .rdu-account {
    flex-wrap: wrap;
    gap: 8px;
  }
  .header-actions .btn,
  .header-actions .rdu-plans-btn,
  .header-actions .rdu-quota-pill {
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.8rem;
  }
}
@media (max-width: 640px) {
  #rduAuthBtn { display: inline-flex !important; }
  .header-actions > a.btn-secondary { display: none; }
}
html { background: var(--paper); }
@media (max-width: 640px) {
  .ai-intel-trigger-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .ai-intel-trigger-left { width: 100%; }
  .ai-intel-run-btn { width: 100%; }
}
body { background-color: var(--paper); }

/* ============================================================
   CALCULATOR REFINEMENT BLOCK
   Scoped to the #model deal calculator. Appended last so it
   wins on source order at equal specificity, matching the
   convention of the dark-theme block above.

   Goals: one card instead of cards-in-cards-in-cards, a real
   hierarchy between headline and supporting metrics, a calmer
   label voice, and a mobile layout that reads in pairs rather
   than one endless column.
   ============================================================ */

/* Shared tokens. These start life here for the calculator but are
   applied page-wide below so every section shares one radius scale,
   one rule colour, and one label voice. */
:root {
  --calc-radius-lg: 16px;
  --calc-radius-md: 10px;
  --calc-radius-sm: 8px;
  --calc-gap: 14px;
  --calc-rule: rgba(var(--line-rgb), 0.13);
  --calc-rule-soft: rgba(var(--line-rgb), 0.07);
  /* Nudged up from the card-era values: these surfaces now sit on the
     page background rather than on --panel, so they need a little
     more separation to read as controls and data. */
  --calc-surface: rgba(255, 255, 255, 0.032);
  --calc-surface-hi: rgba(255, 255, 255, 0.058);
  --calc-label: var(--label-muted);
  --measure: 1160px;
}

/* ============================================================
   PAGE PASS — the same system applied outside the calculator
   ============================================================ */

/* ---------- Display type ---------- */
h2, h3 {
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  text-wrap: balance;
}

.section-header h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
}

.section-header p {
  max-width: 42ch;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--calc-label);
  text-wrap: pretty;
}

.section-header {
  max-width: var(--measure);
  margin-bottom: 38px;
}

/* ---------- Hero ---------- */
.hero h1 {
  letter-spacing: -0.04em;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.hero-copy {
  max-width: 54ch;
  line-height: 1.6;
  text-wrap: pretty;
}

.signal {
  padding: 16px 18px;
  border-radius: var(--calc-radius-md);
  border-color: var(--calc-rule);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.signal:hover {
  transform: translateY(-2px);
}

.signal strong {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.signal span {
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ---------- Panels and cards ---------- */
/* .type-grid is deliberately NOT in this list. The asset-class carousel is
   full-bleed — it runs the whole section width so the edge mask has room to
   fade — and its own max-width is set with the carousel rules above, where
   the responsive override at 900px can still reach it. */
.workflow,
.about-block {
  max-width: var(--measure);
}

/* The 3px accent bar across the top of a card is the most common
   generated-UI tell on this page; the surface carries it instead. */
.analysis-panel {
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--calc-rule);
  border-top: 1px solid var(--calc-rule);
  border-radius: var(--calc-radius-lg);
  background:
    radial-gradient(800px 320px at 8% -10%, rgba(var(--brand-rgb), 0.06), transparent 62%),
    var(--panel);
  box-shadow: 0 1px 0 var(--hairline-hi) inset, 0 18px 44px -24px rgba(var(--paper-rgb), 0.85);
}

.capability {
  padding: 22px 24px;
  border: 1px solid var(--calc-rule-soft);
  border-radius: var(--calc-radius-md);
  background: var(--calc-surface);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.capability:hover {
  border-color: var(--calc-rule);
  background: var(--calc-surface-hi);
  transform: translateY(-2px);
}

.capability h3 {
  font-size: 1rem;
  letter-spacing: -0.012em;
}

.capability p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--calc-label);
  text-wrap: pretty;
}

.overview-panel h3 {
  font-size: 1.12rem;
  letter-spacing: -0.015em;
}

.overview-panel > p,
.how-it-works li,
.about-bio {
  color: var(--calc-label);
  text-wrap: pretty;
}

.how-it-works li {
  font-size: 0.9rem;
  line-height: 1.55;
}

.how-it-works strong {
  letter-spacing: -0.01em;
}

.about-block {
  border-radius: var(--calc-radius-lg);
  border-color: var(--calc-rule);
}

.about-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.type-card {
  border-radius: var(--calc-radius-md);
}

.type-card h3 {
  letter-spacing: -0.015em;
}

.metric {
  border-radius: var(--calc-radius-md);
  border-color: var(--calc-rule-soft);
  background: var(--calc-surface);
}

.metric span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--calc-label);
}

.metric strong {
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* ---------- Controls, page-wide ---------- */
.btn {
  border-radius: var(--calc-radius-sm);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.btn:active {
  transform: translateY(1px);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid rgba(var(--brand-tint-rgb), 0.55);
  outline-offset: 2px;
}

.brand-mark {
  border-radius: var(--calc-radius-sm);
  /* Same white-on---brand pairing as .btn-primary (3.45:1). A logotype is
     exempt from the contrast rule, but the mark is set in the UI typeface
     and reads as text, so it takes the same deepened fill. */
  background: var(--brand-solid);
}

.site-footer {
  border-top: 1px solid var(--calc-rule);
}

.privacy-btn {
  border-radius: var(--calc-radius-sm);
  border-color: var(--calc-rule);
  transition: background 0.18s ease, border-color 0.18s ease;
}

/* Current section indicator in the nav */
.nav-links a {
  position: relative;
  padding-bottom: 3px;
  transition: color 0.18s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--brand-tint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.nav-links a:hover,
.nav-links a.is-current {
  color: var(--ink);
}

.nav-links a:hover::after,
.nav-links a.is-current::after {
  transform: scaleX(1);
}

/* ============================================================
   CALCULATOR
   ============================================================ */

/* ---------- Section intro: same measure and alignment as the
     other section headers, so the calculator reads as part of
     the page rather than a widget dropped onto it. ---------- */
.model-section {
  max-width: var(--measure);
  gap: 0;
}

.model-copy {
  max-width: var(--measure);
  margin: 0 auto 38px;
  text-align: left;
}

.model-copy h2 {
  margin-bottom: 0;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
}

.model-copy p {
  max-width: 42ch;
  margin-bottom: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- No container. The form sits on the page and is held
     together by rules and rhythm rather than a card. ---------- */
.model-form {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ---------- Import bar ---------- */
.loopnet-import-bar {
  align-items: center;
  gap: 12px 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--calc-rule);
}

.loopnet-import-actions {
  flex-wrap: wrap;
  gap: 10px 14px;
  min-width: 0;
}

.loopnet-import-hint {
  min-width: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--calc-label);
  white-space: normal;
}

/* ---------- Field grid ---------- */
.form-grid {
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 16px var(--calc-gap);
  margin-bottom: 0;
}

#model .form-grid > label,
#model .advanced-grid > label,
#model .address-fields > label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--calc-label);
}

.field-opt {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.72;
}

#model input,
#model select {
  min-height: 44px;
  padding: 0 13px;
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--calc-surface);
  border: 1px solid var(--calc-rule);
  border-radius: var(--calc-radius-sm);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#model input::placeholder {
  color: rgba(var(--muted-rgb), 0.55);
  font-weight: 400;
  letter-spacing: 0;
}

#model input:hover,
#model select:hover {
  border-color: rgba(var(--line-rgb), 0.26);
  background: var(--calc-surface-hi);
}

#model input:focus,
#model select:focus {
  border-color: rgba(var(--brand-rgb), 0.85);
  background: var(--calc-surface-hi);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16);
}

#model input:focus-visible,
#model select:focus-visible,
#model button:focus-visible {
  outline: 2px solid rgba(var(--brand-tint-rgb), 0.55);
  outline-offset: 2px;
}

/* ---------- Optional address group ---------- */
.address-block {
  margin-top: 20px;
  padding: 18px;
  border: 1px dashed var(--calc-rule);
  border-radius: var(--calc-radius-md);
  background: rgba(255, 255, 255, 0.012);
}

.address-block-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 14px;
}

#model .address-block-head .form-section-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--brand-tint);
}

#model .address-block-head .form-section-label-note {
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--calc-label);
}

.address-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--calc-gap);
}

#model .fetch-comps-btn {
  margin-bottom: 0;
  min-height: 44px;
  white-space: nowrap;
  border-radius: var(--calc-radius-sm);
}

#model .address-block .status-bar {
  margin: 12px 0 0;
  font-size: 0.76rem;
  font-weight: 500;
}

/* The guest-lock hint is injected as a sibling of the button, so in
   the address grid it would otherwise claim its own column cell. */
.address-fields .guest-lock-hint {
  grid-column: 1 / -1;
  margin-left: 0;
  text-align: right;
}

#model .guest-lock-hint {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--calc-label);
}

#model .address-block .status-bar:empty {
  display: none;
}

/* ---------- Advanced disclosure ---------- */
.advanced-toggle {
  margin-top: 22px;
}

.advanced-toggle-btn {
  padding: 12px 16px;
  border-radius: var(--calc-radius-md);
  border-color: var(--calc-rule);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  background: var(--calc-surface);
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.advanced-toggle-btn:hover {
  background: var(--calc-surface-hi);
  border-color: rgba(var(--brand-rgb), 0.45);
  color: var(--brand-tint);
}

.advanced-toggle-btn:active {
  transform: translateY(1px);
}

.advanced-subline {
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--calc-label);
}

.advanced-panel {
  margin-top: 14px;
  padding: 20px;
  border-radius: var(--calc-radius-md);
  border-color: var(--calc-rule);
  background: rgba(255, 255, 255, 0.014);
}

.advanced-grid {
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 16px var(--calc-gap);
}

.advanced-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--calc-rule-soft);
  font-size: 0.76rem;
  color: var(--calc-label);
}

/* ---------- Results region: open, not another box ---------- */
.results-zone {
  margin-top: 30px;
  padding: 26px 0 0;
  border: 0;
  border-top: 1px solid var(--calc-rule);
  border-radius: 0;
  background: none;
}

.results-head {
  margin-bottom: 20px;
}

.results-head h3 {
  margin: 0;
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.results-head p {
  margin: 5px 0 0;
  font-size: 0.82rem;
  color: var(--calc-label);
}

/* Tier labels read as dividers, not more shouting */
.results-tier-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 12px;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--calc-label);
}

.results-tier-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--calc-rule-soft);
}

.tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 30px 0 12px;
}

.tier-head .results-tier-label {
  margin: 0;
  flex: 1;
  min-width: 160px;
}

.tier-head-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--calc-label);
  white-space: nowrap;
}

#model .tier-head-control input {
  width: 96px;
  min-height: 38px;
  padding: 0 11px;
  font-size: 0.88rem;
  text-align: right;
}

/* ---------- Cap rate story ---------- */
.cap-rate-comparison {
  gap: clamp(16px, 3vw, 40px);
  margin: 0 0 4px;
  padding: 22px clamp(18px, 3vw, 30px);
  border: 1px solid var(--calc-rule);
  border-radius: var(--calc-radius-md);
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb), 0.07), rgba(var(--steel-rgb), 0.05));
}

.cap-rate-item span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--calc-label);
}

.cap-rate-item strong {
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.cap-rate-arrow {
  font-size: 1.1rem;
  color: rgba(var(--muted-rgb), 0.5);
}

/* ---------- Metric cards ---------- */
.estimate {
  gap: var(--calc-gap);
  padding-top: 0;
  border-top: 0;
}

.estimate div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--calc-rule-soft);
  border-radius: var(--calc-radius-md);
  background: var(--calc-surface);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.estimate div:hover {
  border-color: var(--calc-rule);
  background: var(--calc-surface-hi);
}

.estimate span {
  margin-bottom: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--calc-label);
}

.estimate strong {
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Headline tier outranks the supporting tiers */
.estimate:not(.secondary-estimate) div {
  padding: 20px;
  border-color: var(--calc-rule);
  background: var(--calc-surface-hi);
}

.estimate:not(.secondary-estimate) strong {
  font-size: clamp(1.6rem, 2.8vw, 2.05rem);
}

.secondary-estimate {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.secondary-estimate strong {
  font-size: 1.12rem;
}

.metric-note {
  margin-top: 1px;
  font-size: 0.71rem;
  line-height: 1.4;
  color: var(--calc-label);
}

#model .status-bar {
  margin: 12px 0 0;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--calc-label);
}

/* ---------- AI intelligence bar ---------- */
.ai-intel-section {
  margin-top: 30px;
}

.ai-intel-trigger-bar {
  padding: 16px 18px;
  border-radius: var(--calc-radius-md);
}

/* ---------- Deal score ---------- */
/* --score-tone is set by updateScoreDisplay(); the card tints toward it
   instead of wearing a full-strength accent outline. */
.deal-score-result {
  --score-tone: rgba(var(--line-rgb), 0.3);
  position: relative;
  margin-top: 30px;
  padding: 30px 26px;
  border: 1px solid color-mix(in srgb, var(--score-tone) 34%, transparent);
  border-radius: var(--calc-radius-lg);
  background:
    radial-gradient(620px 200px at 50% 0%, color-mix(in srgb, var(--score-tone) 11%, transparent), transparent 70%),
    linear-gradient(135deg, var(--surface-3) 0%, var(--steel-deepest) 100%);
  box-shadow: 0 1px 0 var(--hairline-hi) inset, 0 18px 40px -26px rgba(var(--paper-rgb), 0.9);
}

/* A hairline of the score tone across the top edge — enough signal
   without ringing the whole card in amber or red. */
.deal-score-result::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--score-tone), transparent);
  opacity: 0.85;
}

.deal-score-result > span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--calc-label);
}

.deal-score-result strong {
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.045em;
}

#model #dealVerdictOutput {
  max-width: 46ch;
  margin-inline: auto;
  line-height: 1.5;
  text-wrap: pretty;
}

.score-breakdown {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--calc-rule);
}

.score-breakdown-top {
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--calc-label);
}

.score-breakdown-value {
  font-variant-numeric: tabular-nums;
}

.score-breakdown-track {
  height: 6px;
  background: rgba(var(--line-rgb), 0.12);
}

.score-breakdown-rationale {
  font-size: 0.79rem;
  line-height: 1.45;
  text-wrap: pretty;
}

/* ---------- Exports ---------- */
.export-btn-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

#model .export-btn-group .btn {
  width: 100%;
  min-height: 46px;
  margin-top: 0;
  border-radius: var(--calc-radius-sm);
}

#model .export-btn-group .btn:active {
  transform: translateY(1px);
}

/* ---------- Sensitivity ---------- */
.sensitivity-section {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--calc-rule);
}

.sensitivity-header {
  align-items: flex-end;
  gap: 14px 24px;
}

#model .sensitivity-section .results-tier-label {
  margin: 0;
}

.sensitivity-subline {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--calc-label);
}

.sensitivity-label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--calc-label);
}

.sensitivity-table-wrap {
  border-radius: var(--calc-radius-md);
  border-color: var(--calc-rule);
}

.sensitivity-table th {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--calc-label);
}

.sensitivity-table td {
  font-variant-numeric: tabular-nums;
}

.sensitivity-table tbody tr {
  transition: background 0.15s ease;
}

.sensitivity-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

/* ---------- Desktop column counts (re-declared: this block
     is later in source order than the earlier media query) ---------- */
@media (min-width: 900px) {
  .form-grid,
  .advanced-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .estimate {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .secondary-estimate {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #model .form-section-label:first-of-type {
    font-size: 0.72rem;
    color: var(--brand-tint);
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 899px) {
  .address-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #model .fetch-comps-btn {
    grid-column: 1 / -1;
  }
}

/* ---------- Mobile: pairs, not an endless column ---------- */
@media (max-width: 640px) {
  /* Inputs stay full width — easier to hit, and placeholders like
     "Leave blank to estimate" survive. The results below go 2-up,
     which is where the endless scroll actually came from. */
  .form-grid,
  .advanced-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .address-fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .estimate,
  .secondary-estimate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .estimate div,
  .estimate:not(.secondary-estimate) div {
    padding: 13px 14px;
  }

  .estimate:not(.secondary-estimate) strong {
    font-size: 1.45rem;
  }

  .secondary-estimate strong {
    font-size: 1.02rem;
  }

  .estimate span {
    font-size: 0.64rem;
    letter-spacing: 0.07em;
  }

  .metric-note {
    font-size: 0.68rem;
  }

  .cap-rate-comparison {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 14px;
    padding: 18px 16px;
  }

  /* Labels wrap to different line counts at this width; reserving two
     lines keeps both figures sitting on the same baseline. */
  .cap-rate-item span {
    min-height: 2.5em;
  }

  .cap-rate-item strong {
    font-size: 1.6rem;
  }

  /* An odd number of metrics would leave a half-width orphan on the
     last row — let it take the full width instead. */
  .estimate > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .results-zone {
    margin-top: 24px;
    padding-top: 22px;
  }

  .results-tier-label,
  .tier-head {
    margin-top: 24px;
  }

  /* Side by side, the label and its control collide at this width. */
  .tier-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .tier-head .results-tier-label {
    min-width: 0;
  }

  .tier-head-control {
    justify-content: space-between;
    width: 100%;
  }

  #model .tier-head-control input {
    width: 110px;
  }

  .loopnet-import-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .loopnet-import-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #model .loopnet-import-bar .btn {
    width: 100%;
  }

  .loopnet-import-hint {
    text-align: center;
  }

  .export-btn-group {
    grid-template-columns: 1fr;
  }

  .deal-score-result {
    padding: 24px 18px;
  }

  .sensitivity-header {
    align-items: stretch;
  }

  #model .sensitivity-label select {
    width: 100%;
  }
}

/* Very narrow phones only (below iPhone SE's 375) — metric pairs
   would clip, so fall back to a single column. */
@media (max-width: 340px) {
  .estimate,
  .secondary-estimate,
  .cap-rate-comparison {
    grid-template-columns: 1fr;
  }
}

/* Address block is an input, not a result — hide it in print
   alongside .form-grid (see the print rules above). */
@media print {
  .address-block,
  .tier-head-control,
  .results-head p {
    display: none;
  }
}

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

/* ============================================================
   METRIC EXPLAINER — click any result box for what it means,
   how it is calculated, and how to read the number.
   ============================================================ */

[data-metric] {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The ⓘ rides directly beside the value it explains. Cornering it in the
   box put it nowhere near the number — on the wide, centred cap-rate items
   it drifted to the far edge and read as unrelated furniture. Anchoring it
   to the <strong> keeps badge and figure together at every box width.
   It is decorative — the whole box is the hit target — so it stays out of
   the a11y tree. */
[data-metric] > strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* .estimate div is a flex column, which blockifies this to `flex` and
     stretches it the full card width — the badge would then sit far from
     the figure again. Shrink-wrapping pins it to the number. No effect on
     the cap-rate items, whose parent is not a flex container. */
  align-self: flex-start;
}

[data-metric] > strong::after {
  content: "i";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--calc-rule);
  border-radius: 50%;
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  /* Fixed rem units and a reset tracking: the badge must stay the same
     15px dot beside a 1.1rem figure and a 2.4rem one alike, and must not
     inherit the display face's negative letter-spacing. */
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: var(--calc-label);
  opacity: 0.55;
  transition: opacity 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  pointer-events: none;
}

[data-metric]:hover > strong::after,
[data-metric].is-explained > strong::after {
  opacity: 1;
  color: var(--brand-tint);
  border-color: rgba(var(--brand-tint-rgb), 0.45);
}

[data-metric]:focus-visible {
  outline: 2px solid rgba(var(--brand-tint-rgb), 0.65);
  outline-offset: 2px;
}

[data-metric].is-explained {
  border-color: rgba(var(--brand-tint-rgb), 0.4);
}

/* The breakdown inside the score card is its own reading surface —
   it must not inherit the card's pointer affordance. */
.deal-score-result .score-breakdown {
  cursor: default;
}

/* A real modal scrim at both sizes: it dims and blurs the page behind the
   explanation and is the click-anywhere dismiss target. */
.metric-pop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(var(--paper-rgb), 0.55);
  backdrop-filter: blur(3px);
}

.metric-pop-backdrop[hidden],
.metric-pop[hidden] {
  display: none;
}

/* Centred modal, never anchored to the box. A fixed position means the
   explanation lands in the same place every time regardless of which
   metric was clicked or where the page happens to be scrolled. */
.metric-pop {
  position: fixed;
  z-index: 200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 48px));
  max-height: min(82vh, 760px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--calc-rule);
  border-top: 3px solid var(--brand);
  border-radius: var(--calc-radius-lg);
  background: var(--surface-3);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  animation: metric-pop-in 0.16s ease-out;
}

@keyframes metric-pop-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.975); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Drag handle only reads as one in the mobile bottom-sheet form. */
.metric-pop-grab { display: none; }

.metric-pop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 15px 24px;
  border-bottom: 1px solid var(--calc-rule-soft);
  flex-shrink: 0;
}

.metric-pop-head h4 {
  margin: 0;
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.metric-pop-close {
  flex-shrink: 0;
  margin: -6px -6px 0 0;
  padding: 7px 9px;
  border: none;
  border-radius: 6px;
  background: none;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--calc-label);
  cursor: pointer;
}

.metric-pop-close:hover { color: var(--ink); }

.metric-pop-body {
  overflow-y: auto;
  padding: 20px 24px 24px;
  -webkit-overflow-scrolling: touch;
}

.metric-pop-def {
  margin: 0 0 20px;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--text-soft);
  text-wrap: pretty;
}

.metric-pop-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--calc-label);
}

.metric-pop-formula {
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid var(--calc-rule-soft);
  border-radius: var(--calc-radius-sm);
  background: var(--calc-surface);
}

.metric-pop-formula p {
  margin: 0;
  font-size: 0.91rem;
  line-height: 1.6;
  color: var(--text-soft);
}

/* Its sibling .metric-pop-formula carries a rule and the group had none,
   so the "What good looks like" kicker sat flush against the block above. */
.metric-pop-bands {
  display: grid;
  gap: 2px;
}

.metric-pop-band {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--calc-rule-soft);
}

.metric-pop-band > span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.55;
}

.metric-pop-band p {
  margin: 0;
  font-size: 0.91rem;
  line-height: 1.6;
  color: var(--text-soft);
  text-wrap: pretty;
}

.metric-pop-band--ideal > span   { color: var(--tone-pos); }
.metric-pop-band--average > span { color: #f0c486; }
.metric-pop-band--poor > span    { color: #f0a59c; }

/* Bottom sheet on phones — thumb-reachable rather than centred. The
   transform reset is what undoes the desktop centring above. */
@media (max-width: 640px) {
  .metric-pop {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-height: 82vh;
    border: none;
    border-top: 3px solid var(--brand);
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: metric-sheet-in 0.2s ease-out;
  }

  @keyframes metric-sheet-in {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  .metric-pop-grab {
    display: block;
    width: 36px;
    height: 4px;
    margin: 9px auto 1px;
    border-radius: 999px;
    background: var(--calc-rule);
  }

  .metric-pop-head {
    padding: 14px 16px 12px 20px;
  }

  .metric-pop-head h4 {
    font-size: 1.12rem;
  }

  .metric-pop-body {
    padding: 18px 20px 22px;
  }

  .metric-pop-close {
    padding: 8px 10px;
    margin: -6px -6px 0 0;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .metric-pop { animation: none; }
}

/* The badge is an on-screen affordance; a printed or exported analysis
   should not carry stray "i" marks in every metric corner. */
@media print {
  [data-metric]::after,
  .metric-pop,
  .metric-pop-backdrop {
    display: none !important;
  }
}

/* ============================================================================
   SIDE SWITCH — commercial ⇄ residential
   ----------------------------------------------------------------------------
   Lives in the header of both calculator pages so the landing page is never
   the only route between the two sides. Which pill reads as active is decided
   entirely in CSS off [data-side] on <html>; the markup is identical on both
   pages and needs no JS.
   ========================================================================== */

.side-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--paper-rgb), 0.55);
}

.side-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition: color 0.2s ease, background 0.2s ease;
}

/* Hovering the side you are NOT on previews that side's accent, so the switch
   telegraphs the colour change before you commit to the navigation. These two
   are deliberately literal: they name the *other* palette, which by definition
   is not the one resolving on this page. */
.side-switch a[data-target="commercial"]:hover { color: #7fe0b4; }
.side-switch a[data-target="residential"]:hover { color: #8ecbff; }

[data-side="commercial"] .side-switch a[data-target="commercial"],
[data-side="residential"] .side-switch a[data-target="residential"] {
  background: var(--brand-solid);
  color: #fff;
  cursor: default;
}

[data-side="commercial"] .side-switch a[data-target="commercial"]:hover,
[data-side="residential"] .side-switch a[data-target="residential"]:hover {
  color: #fff;
}

.footer-sides {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}

.footer-sides a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s ease;
}

.footer-sides a:hover {
  color: var(--brand-tint);
}

.footer-sides a[aria-current="page"] {
  color: var(--brand-tint);
  cursor: default;
}

@media (max-width: 900px) {
  .side-switch {
    order: -1;
  }
}

@media (max-width: 640px) {
  .side-switch a {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.76rem;
  }
}

/* ============================================================================
   LANDING PAGE
   ----------------------------------------------------------------------------
   Neutral slate shell (data-side="landing") holding two choice cards. Each card
   carries its own data-side, so the whole commercial/residential palette
   cascades into it — the cards are literally previews of the pages they open,
   with no separate accent plumbing.
   ========================================================================== */

[data-side="landing"] {
  --ink: #e9eef3;
  --muted: #94a3af;
  --muted-rgb: 148, 163, 175;
  --text-soft: #c6d2db;
  --line: rgba(170, 190, 205, 0.14);
  --line-rgb: 170, 190, 205;
  --paper: #080c10;
  --paper-rgb: 8, 12, 16;
  --panel: #111820;
  --panel-rgb: 17, 24, 32;
  --panel-2: #0d141b;
  --panel-3: #151f28;
  --surface-0: #05080b;
  --surface-1: #0a1015;
  --surface-2: #0d141b;
  --surface-3: #121a22;
  --surface-4: #18222b;
  --surface-5: #223039;
  --brand: #5b8ea8;
  --brand-rgb: 91, 142, 168;
  --brand-dark: #3d6c85;
  --brand-deep-rgb: 45, 82, 100;
  --brand-solid: #3f7089;
  --brand-tint: #a9cddd;
  --brand-tint-rgb: 169, 205, 221;
  --chrome-bg-scrolled-rgb: 12, 22, 30;
}

.chooser {
  min-height: calc(100dvh - 84px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(32px, 6vw, 64px);
  padding: clamp(48px, 9vw, 112px) clamp(20px, 5vw, 72px) clamp(56px, 8vw, 96px);
}

.chooser-head {
  max-width: 720px;
}

.chooser-head h1 {
  margin: 12px 0 16px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

.chooser-head p {
  margin: 0;
  max-width: 58ch;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.6;
}

.chooser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
}

/* Each card renders in its own side's palette — every token below resolves
   against the data-side on the card itself, not the page. */
.chooser-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(var(--brand-rgb), 0.14), rgba(var(--paper-rgb), 0.4) 62%),
    var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.chooser-card:hover,
.chooser-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(var(--brand-rgb), 0.55);
  box-shadow: var(--shadow-deep);
}

.chooser-card:focus-visible {
  outline: 2px solid var(--brand-tint);
  outline-offset: 3px;
}

.chooser-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-tint);
}

.chooser-card-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.18);
}

.chooser-card h2 {
  margin: 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.chooser-card > p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

.chooser-feats {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.chooser-feats li {
  position: relative;
  padding-left: 20px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink);
}

.chooser-feats li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--brand-tint);
  font-weight: 800;
}

.chooser-cta {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--brand-tint);
}

.chooser-cta span:last-child {
  transition: transform 0.24s ease;
}

.chooser-card:hover .chooser-cta span:last-child {
  transform: translateX(5px);
}

.chooser-note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.6;
}

.chooser-note a {
  color: var(--brand-tint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .chooser-card,
  .chooser-cta span:last-child {
    transition: none;
  }
  .chooser-card:hover {
    transform: none;
  }
}

/* ============================================================================
   RESIDENTIAL — comparable sales panel
   ----------------------------------------------------------------------------
   Residential only. Scoped under [data-side="residential"] so nothing here can
   reach the commercial page, which has no equivalent surface.

   These comps come out of the pasted listing rather than a curated feed, so
   the provenance tag and the caveat line are part of the component itself —
   the reader should not have to hover anything to learn where the number came
   from or what it does not account for.
   ========================================================================== */

[data-side="residential"] .comps-panel {
  margin: 26px 0 0;
  padding: 20px clamp(16px, 2.5vw, 24px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(var(--brand-rgb), 0.07), rgba(var(--paper-rgb), 0.25) 70%),
    var(--panel-2);
  box-shadow: 0 1px 0 var(--hairline-hi) inset;
}

[data-side="residential"] .comps-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 14px;
}

[data-side="residential"] .comps-panel-head .results-tier-label {
  margin: 0;
}

[data-side="residential"] .comps-source-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-tint);
  padding: 3px 9px;
  border: 1px solid rgba(var(--brand-tint-rgb), 0.35);
  border-radius: 999px;
  background: rgba(var(--brand-rgb), 0.12);
}

[data-side="residential"] .comps-panel-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

/* The explicit display above outranks the user-agent [hidden] rule, so the
   attribute needs restating at this specificity or the empty stat row stays
   on screen behind the no-comps message. */
[data-side="residential"] .comps-panel-stats[hidden] {
  display: none;
}

[data-side="residential"] .comps-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--calc-rule, var(--line));
  border-radius: 10px;
  background: var(--calc-surface, rgba(255, 255, 255, 0.032));
}

[data-side="residential"] .comps-stat span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-muted);
}

[data-side="residential"] .comps-stat strong {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

[data-side="residential"] .comps-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

[data-side="residential"] .comps-badges:empty {
  margin-top: 0;
}

[data-side="residential"] .comp-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
}

/* Same-building comps are the high-confidence tier, so they carry the positive
   tone rather than the brand tone — this is a quality signal, not chrome. */
[data-side="residential"] .comp-badge--building {
  color: var(--tone-pos);
  border-color: rgba(var(--brand-tint-rgb), 0.3);
  background: rgba(31, 157, 107, 0.14);
}

[data-side="residential"] .comp-badge--nearby {
  color: var(--brand-tint);
  border-color: rgba(var(--brand-tint-rgb), 0.28);
  background: rgba(var(--brand-rgb), 0.14);
}

[data-side="residential"] .comp-badge--dropped {
  color: var(--muted);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.03);
}

[data-side="residential"] .comps-note,
[data-side="residential"] .comps-empty {
  margin: 14px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}

[data-side="residential"] .comps-empty {
  color: var(--text-soft);
}

@media (max-width: 640px) {
  [data-side="residential"] .comps-panel-stats {
    grid-template-columns: 1fr;
  }
}