/* Property Outlook — shared components (Bundle 24 v0.2)
   Mockup-grounded ports from `mockups/property-outlook-desktop-user-v3.html`.
   Each block cites its source line range from the mockup for traceability.
*/

/* ═══ TOP BAR (lite — Bundle 24 ships brand+crumb only) ═══
   Mockup lines 59-82. Bundle 24 omits credits pill / share button / avatar
   to scope down — full top bar is a separate concern. */
.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--g200);
  z-index: 40;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 14px;
}
.top-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--g900); }
.top-brand-mark {
  width: 24px; height: 24px;
  background: var(--brand);
  border-radius: 5px;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 11px;
}
.top-brand-label {
  font-size: 11px; color: var(--g500); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; margin-left: 1px;
}
.top-divider { width: 1px; height: 20px; background: var(--g200); margin: 0 2px; }
/* `.top-r` — Bundle 32 right-side cluster on the top bar. Hosts the UserMenu
   avatar dropdown and (Bundle 33) the credits-pill. `.top-crumb` has flex:1
   so it greedy-grabs available space, naturally pushing `.top-r` to the
   right edge — no `margin-left:auto` needed. */
.top-r {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.top-crumb {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; flex: 1;
  font-size: 12px; color: var(--g500);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.top-crumb strong { color: var(--g700); font-weight: 600; font-size: 13px; }
.top-crumb i { width: 12px; height: 12px; color: var(--g300); }

/* ═══ HERO (mockup lines 115-134) ═══ */
.hero {
  background: linear-gradient(135deg, var(--brand-dk) 0%, var(--brand) 55%, #2E5A5B 100%);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  color: #fff;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  background: radial-gradient(circle at 75% 25%, rgba(246, 141, 46, 0.22), transparent 65%);
  pointer-events: none;
}
.hero-meta {
  font: 700 10px var(--f);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.78;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.hero-meta .live { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; opacity: 0.9; }
.hero-meta .live i { width: 11px; height: 11px; }
.hero-syn {
  font-size: 19px;
  line-height: 1.42;
  font-weight: 600;
  letter-spacing: -0.005em;
  max-width: 760px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.hero-syn em { font-style: italic; opacity: 0.95; }
.hero-syn .illus-h { border-bottom: 1.5px dotted rgba(255, 255, 255, 0.45); padding-bottom: 1px; }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
  z-index: 1;
}
.hero-m-l {
  font: 700 9px var(--f);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.72;
  margin-bottom: 5px;
  display: flex; align-items: center; gap: 5px;
}
.hero-band {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: rgba(16, 185, 129, 0.28);
  color: #A7F3D0;
  font: 700 9px var(--f);
  letter-spacing: 0.06em;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.hero-band.proj {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.22);
}
.hero-band i { width: 9px; height: 9px; }
.illus-mini {
  font: 700 8px var(--m);
  color: #FCD34D;
  background: rgba(245, 158, 11, 0.2);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}
.hero-m-v {
  font-family: var(--m);
  font-weight: 700;
  line-height: 1.02;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.hero-m-v.t { font-size: 36px; }
.hero-m-v.e { font-size: 28px; }
.hero-m-v.u { font-size: 30px; }
.hero-m-v .unit {
  font-family: var(--f);
  font-size: 12px;
  font-weight: 500;
  opacity: 0.72;
  letter-spacing: 0;
}
.hero-m-sub { font-size: 11px; margin-top: 4px; opacity: 0.75; line-height: 1.45; }

/* ═══ FACTS STRIP (mockup lines 137-146) ═══ */
.facts {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 24px;
  box-shadow: var(--sh-sm);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 14px 18px;
}
.fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact-k {
  font: 700 9px var(--f);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fact-v {
  font-family: var(--m);
  font-weight: 700;
  font-size: 13px;
  color: var(--g900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fact-v .sub { font-weight: 400; color: var(--g500); font-size: 10px; margin-left: 3px; }
.fact-v .label { font-family: var(--f); color: var(--g600); font-weight: 500; }
.fact-illus {
  font: 700 8px var(--m);
  color: var(--illus);
  background: var(--temp-cold-wash);
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.fact-src {
  display: inline-flex; align-items: center; gap: 2px;
  font: 700 8.5px var(--m);
  padding: 1px 6px;
  border-radius: var(--r-full);
  letter-spacing: 0.02em;
  margin-left: 4px;
  vertical-align: middle;
  background: var(--ok-wash);
  color: var(--ok);
  border: 1px solid rgba(16, 185, 129, 0.22);
}
.fact-src.warn {
  background: var(--temp-cold-wash);
  color: #B45309;
  border-color: rgba(245, 158, 11, 0.2);
}
.fact-src i { width: 9px; height: 9px; stroke-width: 2.5; }

/* ═══ VERIFY-SOURCES DRAWER (mockup lines 149-176) ═══ */
.facts.with-verify { margin-bottom: 0; }
.verify-drawer {
  background: var(--w);
  border: 1px solid var(--g200);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.verify-drawer > summary {
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  background: var(--g50);
  transition: background var(--tb);
  border-top: 1px dashed var(--g200);
}
.verify-drawer > summary:hover { background: var(--g100); }
.verify-drawer[open] > summary {
  border-bottom: 1px solid var(--g200);
  background: var(--brand-wash);
  border-top-style: solid;
}
.verify-drawer-i {
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  background: var(--ok-wash);
  color: var(--ok);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.verify-drawer-i i { width: 13px; height: 13px; }
.verify-drawer-t {
  font: 700 10.5px var(--m);
  color: var(--g900);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.verify-drawer-meta {
  font: 500 12px var(--f);
  color: var(--g600);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.verify-drawer-chev {
  width: 22px; height: 22px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--g400);
  transition: transform var(--tb);
  flex-shrink: 0;
}
.verify-drawer[open] .verify-drawer-chev { transform: rotate(90deg); color: var(--brand); }
.verify-drawer-chev i { width: 13px; height: 13px; }
.verify-drawer-body { padding: 14px 16px; }
.xverify-compact { width: 100%; border-collapse: collapse; font-size: 12px; }
.xverify-compact th {
  padding: 7px 10px;
  text-align: left;
  font: 700 9px var(--m);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--g200);
  background: var(--g50);
}
.xverify-compact th.r { text-align: right; }
.xverify-compact td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--g150);
  vertical-align: middle;
}
.xverify-compact tr:last-child td { border-bottom: none; }
.xverify-compact .field { font-weight: 600; color: var(--g900); font-family: var(--f); }
.xverify-compact .val { font-family: var(--m); font-weight: 600; color: var(--g800); text-align: right; }
.xverify-compact .val.primary { color: var(--brand-dk); font-weight: 700; }
.xv-variance {
  font: 700 10px var(--m);
  padding: 2px 7px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.xv-variance.agree { background: var(--ok-wash); color: var(--ok); }
.xv-variance.minor { background: var(--temp-cold-wash); color: #B45309; }
.xv-variance i { width: 10px; height: 10px; }
.verify-drawer-note {
  font-size: 11.5px;
  color: var(--g600);
  margin-top: 10px;
  line-height: 1.55;
}

/* ═══ ACTS (mockup lines 179-204) ═══ */
.act {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color var(--tb), box-shadow var(--tb);
}
.act:hover { border-color: var(--g300); }
.act[open] { box-shadow: var(--sh-md); border-color: var(--brand-sub); }
.act > summary {
  padding: 18px 22px;
  display: flex; align-items: center; gap: 16px;
  cursor: pointer;
  position: relative;
}
.act[open] > summary { border-bottom: 1px solid var(--g150); padding-bottom: 16px; }
.act-num {
  font: 700 10px var(--m);
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  background: var(--brand-wash);
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.act-q-wrap { flex: 1; min-width: 0; }
.act-q {
  font-size: 16px;
  font-weight: 700;
  color: var(--g900);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 3px;
}
.act-q em {
  font-style: italic;
  color: var(--g500);
  font-weight: 500;
  margin-left: 7px;
  font-size: 13px;
}
.act-lede { font-size: 13px; color: var(--g600); line-height: 1.55; }
.act-lede strong { color: var(--g800); font-weight: 600; }
.act-lede em { font-style: italic; }
.act-chip {
  flex-shrink: 0;
  font: 700 11px var(--m);
  padding: 4px 10px;
  border-radius: var(--r-full);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.act-chip.hot { background: var(--temp-hot-wash); color: var(--temp-hot); }
.act-chip.warm { background: var(--temp-warm-wash); color: #059669; }
.act-chip.cool { background: var(--temp-cool-wash); color: #1D4ED8; }
.act-chip.cold { background: var(--temp-cold-wash); color: #B45309; }
.act-chip.frozen { background: var(--temp-frozen-wash); color: #B91C1C; }
.act-chip.money { background: var(--g100); color: var(--g900); font-family: var(--m); }
.act-chip.stub { background: var(--g100); color: var(--g500); }
.act-chip i { width: 11px; height: 11px; }
.act-chevron {
  width: 28px; height: 28px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--g500);
  background: var(--g100);
  transition: transform var(--tb), background var(--tb);
  flex-shrink: 0;
}
.act[open] .act-chevron {
  transform: rotate(90deg);
  background: var(--brand-wash);
  color: var(--brand);
}
.act-chevron i { width: 14px; height: 14px; }
.act-body { padding: 20px 22px 22px; animation: reveal 0.3s ease; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.act-lead {
  font-size: 14px;
  line-height: 1.7;
  color: var(--g700);
  margin-bottom: 18px;
}
.act-lead strong { color: var(--g900); font-weight: 600; }
.act-lead em { font-style: italic; }
.act-stub {
  padding: 32px 22px;
  text-align: center;
  color: var(--g500);
  font-size: 13px;
  line-height: 1.6;
}
.act-stub strong { color: var(--g700); font-weight: 600; }

/* ═══ EVIDENCE accordion (mockup lines 207-223) ═══ */
.ev-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.ev {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  transition: all var(--tb);
  overflow: hidden;
  background: var(--g50);
}
.ev:hover { border-color: var(--brand-sub); background: var(--brand-wash); }
.ev[open] { border-color: var(--brand-sub); background: var(--brand-wash); }
.ev > summary { padding: 11px 14px; display: flex; align-items: center; gap: 11px; }
.ev-ico {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--w);
  border: 1px solid var(--g200);
  display: grid; place-items: center;
  color: var(--brand);
  flex-shrink: 0;
}
.ev-ico i { width: 13px; height: 13px; }
.ev-title-wrap { flex: 1; min-width: 0; }
.ev-head {
  font: 700 9px var(--m);
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1px;
}
.ev-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g900);
  line-height: 1.4;
}
.ev-title em { font-style: italic; }
.ev-plus {
  width: 22px; height: 22px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--g500);
  background: var(--w);
  transition: transform var(--tb);
  flex-shrink: 0;
}
.ev[open] .ev-plus { transform: rotate(45deg); color: var(--brand); }
.ev-plus i { width: 13px; height: 13px; }
.ev-body {
  padding: 3px 14px 14px 53px;
  font-size: 12px;
  color: var(--g700);
  line-height: 1.6;
}
.ev-body p { margin-bottom: 6px; }
.ev-body .src { font-size: 10px; color: var(--g500); font-style: italic; margin-top: 5px; }

/* ═══ KV grid (mockup lines 226-232) ═══ */
.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 18px;
  padding: 14px 16px;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv-k {
  font: 600 9px var(--m);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kv-v {
  font-size: 12.5px;
  color: var(--g900);
  font-weight: 600;
  line-height: 1.3;
}
.kv-v .sub { font-weight: 400; color: var(--g500); font-size: 11px; margin-left: 3px; }
.kv-v.ok { color: var(--ok); }

/* ═══ NUANCE callout (mockup lines 235-237) ═══ */
.nuance {
  padding: 11px 14px;
  background: var(--info-wash);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-left: 3px solid var(--info);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--g700);
  margin-bottom: 14px;
}
.nuance strong { color: var(--g900); }

/* ═══ DRAWER (mockup lines 239-244) ═══ */
.drawer {
  padding: 11px 0 0;
  margin-top: 14px;
  border-top: 1px dashed var(--g300);
  font-size: 12px;
}
.drawer > summary {
  font: 700 9px var(--m);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 0;
  display: flex; align-items: center; gap: 5px;
}
.drawer > summary::before {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid var(--g400);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform var(--tb);
}
.drawer[open] > summary::before { transform: rotate(90deg); }
.drawer-body {
  padding: 8px 0 3px;
  color: var(--g600);
  line-height: 1.6;
  font-size: 12px;
}
.drawer-body p { margin-bottom: 6px; }

/* ═══ ACT 2 — PRICING (mockup lines 247-260) ═══ */
.pricing {
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.pr-title {
  font: 700 10px var(--m);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.pr-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--g200);
}
.pr-row:last-of-type { border-bottom: none; }
.pr-l { font-size: 12px; color: var(--g700); min-width: 0; }
.pr-l strong { color: var(--g900); font-weight: 700; }
.pr-l span { display: block; font-size: 10px; color: var(--g500); margin-top: 1px; }
.pr-bar {
  height: 6px;
  background: var(--g200);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  min-width: 80px;
}
.pr-bar i {
  display: block;
  height: 100%;
  background: var(--brand-lt);
  border-radius: 3px;
}
.pr-v {
  font-family: var(--m);
  font-weight: 700;
  color: var(--g900);
  font-size: 12.5px;
  min-width: 86px;
  text-align: right;
}
.pr-headroom {
  background: var(--temp-hot-wash);
  border-left: 3px solid var(--temp-hot);
  padding: 9px 12px;
  margin-top: 10px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pr-headroom.amber { background: var(--temp-cold-wash); border-left-color: var(--warn); }
.pr-headroom.amber .pr-headroom-t strong { color: #B45309; }
.pr-headroom.amber .pr-headroom-v { color: #B45309; }
.pr-headroom.red { background: var(--temp-frozen-wash); border-left-color: var(--err); }
.pr-headroom.red .pr-headroom-t strong { color: #B91C1C; }
.pr-headroom.red .pr-headroom-v { color: #B91C1C; }
/* Note: `insufficient_data` band → outlook.js skips the headroom callout
   entirely per Bundle 25 four-question edge case 1; no neutral CSS variant
   needed because the element doesn't render at all in that path. */
.pr-headroom-t { font-size: 12px; color: var(--g700); }
.pr-headroom-t strong { color: var(--temp-hot); font-weight: 700; }
.pr-headroom-v {
  font-family: var(--m);
  font-weight: 700;
  font-size: 15px;
  color: var(--temp-hot);
}

/* ═══ ACT 2 — BELL CURVE (mockup lines 263-272) ═══ */
.bell {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.bell-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}
.bell-t { font-size: 12.5px; font-weight: 600; color: var(--g900); }
.bell-leg {
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: var(--g500);
  flex-wrap: wrap;
}
.bell-leg span { display: flex; align-items: center; gap: 3px; }
.bell-leg i { width: 7px; height: 7px; border-radius: 2px; }
.bell-svg { width: 100%; height: 140px; display: block; }
.bell-pct { font: 700 9px var(--m); fill: var(--g600); }
.bell-axis { font: 500 9px var(--m); fill: var(--g500); }
.bell-src {
  font-size: 10px;
  color: var(--g500);
  font-style: italic;
  margin-top: 7px;
}

/* ═══ ACT 2 — INCOME MATH (mockup lines 275-279) ═══ */
.math {
  background: var(--brand-wash);
  border: 1px solid var(--brand-sub);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-family: var(--m);
  font-size: 15px;
  color: var(--g800);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  line-height: 1.7;
}
.math .t {
  padding: 2px 6px;
  border-radius: 3px;
  cursor: help;
  transition: background var(--tb);
}
.math .t:hover { background: var(--brand-sub); color: var(--brand-dk); }
.math .op { color: var(--g400); font-weight: 400; }
.math .r { color: var(--brand-dk); font-weight: 700; }

/* ═══ ACT 2 — ARCHETYPE CARDS (mockup lines 282-290) ═══ */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.arch {
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.arch-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.arch-t { font-size: 12.5px; font-weight: 700; color: var(--g900); }
.arch-fit {
  font: 700 10px var(--m);
  color: var(--ok);
  background: var(--temp-hot-wash);
  padding: 2px 7px;
  border-radius: var(--r-full);
}
.arch-fit.warm {
  color: #B45309;
  background: var(--temp-cold-wash);
}
.arch-sub {
  font-size: 11px;
  color: var(--g500);
  margin-bottom: 3px;
}
.arch-e {
  font-size: 12px;
  color: var(--g700);
  line-height: 1.55;
}
.arch-e strong { color: var(--g900); }

/* ═══ ACT 3 — Anchors grid + Reality Check panel (Bundle 26)
       Ported verbatim from mockup property-outlook-desktop-user-v3.html:293-310.
       Anchors: side-by-side market-standard numbers (CMA ARV + Traditional LTR).
       Reality: multi-source vetting block inside Act 3 (5-anchor sanity check). ═══ */
.anchors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.anchor {
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: 14px 18px;
}
.anchor-l {
  font: 700 10px var(--m);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
}
.anchor-v {
  font: 700 22px var(--m);
  color: var(--g900);
  line-height: 1.1;
}
.anchor-v .u {
  font-size: 13px;
  color: var(--g500);
  font-weight: 500;
}
.anchor-sub {
  font-size: 11px;
  color: var(--g600);
  margin-top: 6px;
  line-height: 1.5;
}
.reality {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-top: 12px;
}
.reality-h {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--g900);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.reality-h i {
  width: 13px;
  height: 13px;
  color: var(--brand);
}
.reality-r {
  display: grid;
  grid-template-columns: 1.1fr auto 1.5fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--g200);
  font-size: 12px;
  align-items: baseline;
}
.reality-r:last-of-type { border-bottom: none; }
.reality-k { color: var(--g600); }
.reality-v {
  font-family: var(--m);
  font-weight: 700;
  color: var(--g900);
  text-align: right;
}
.reality-n {
  color: var(--g500);
  font-size: 11px;
  font-style: italic;
}
.reality-verdict {
  margin-top: 10px;
  padding: 9px 13px;
  background: var(--temp-hot-wash);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--g700);
  border-left: 3px solid var(--temp-hot);
  line-height: 1.55;
}
.reality-verdict strong { color: var(--temp-hot); font-weight: 700; }
/* Conservative variants per Bundle 26 four-question edge cases 3 + 4
   (anchorsAgree=false → amber; anchorsAgree=null → neutral, no border color). */
.reality-verdict.amber {
  background: var(--warn-wash, rgba(245, 158, 11, .08));
  border-left-color: var(--warn);
}
.reality-verdict.amber strong { color: var(--warn); }
.reality-verdict.neutral {
  background: var(--g50);
  border-left-color: var(--g300);
}
.reality-verdict.neutral strong { color: var(--g700); }

/* ═══ Inline illus tag used in act-lead spans (mockup line 204) ═══ */
.illus-tag {
  display: inline-block;
  font: 700 9px var(--m);
  color: var(--illus);
  background: var(--temp-cold-wash);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: baseline;
}
.act-lead .illus {
  border-bottom: 1.5px dotted var(--illus);
  cursor: help;
  font-style: normal;
  color: inherit;
}

/* ═══ SCAFFOLD STATUS (Bundle 23 — kept for cold-open / no-id route) ═══ */
.scaffold-status {
  max-width: 1020px;
  margin: 32px auto;
  padding: 32px;
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.scaffold-status h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--g900);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.scaffold-status .lead {
  font-size: 14px;
  color: var(--g600);
  margin-bottom: 24px;
}
.scaffold-status section + section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--g150);
}
.scaffold-status h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--g900);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scaffold-status ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.scaffold-status li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
  color: var(--g700);
}
.scaffold-status .status-tag {
  font-family: var(--m);
  font-size: 9px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  font-weight: 700;
}
.scaffold-status .status-tag--shipped { background: var(--ok-wash); color: var(--ok); }
.scaffold-status .status-tag--pending { background: var(--g100); color: var(--g500); }
.scaffold-status .status-tag--deferred { background: var(--temp-cold-wash); color: #B45309; }
.scaffold-status code {
  font-family: var(--m);
  font-size: 0.85em;
  background: var(--g100);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
}

/* ═══ MATRIX — Use Feasibility (Bundle 27) ═══
   Ported verbatim from mockup property-outlook-desktop-user-v3.html:312-343.
   7-row taxonomy per DESIGN_RATIONALE §12 (ratified 2026-04-20). */
.matrix {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: var(--sh-sm);
}
.matrix-head { padding: 16px 22px 14px; border-bottom: 1px solid var(--g150); }
.matrix-t {
  font-size: 17px;
  font-weight: 700;
  color: var(--g900);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.matrix-sub { font-size: 12px; color: var(--g500); line-height: 1.5; }
.matrix-divider {
  padding: 10px 20px;
  border-top: 1px solid var(--g200);
  background: var(--g50);
  font: 700 9.5px var(--m);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mrow { border-bottom: 1px solid var(--g100); transition: background var(--tb); }
.mrow:last-child { border-bottom: none; }
.mrow:hover { background: var(--g50); }
.mrow[open] { background: var(--brand-wash); }
.mrow > summary {
  padding: 11px 22px;
  display: grid;
  grid-template-columns: minmax(180px, 1.8fr) 110px 120px minmax(130px, 1fr) 32px;
  gap: 14px;
  align-items: center;
  font-size: 12.5px;
  cursor: pointer;
  list-style: none;
}
.mrow > summary::-webkit-details-marker { display: none; }
.mrow-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mrow-name strong { color: var(--g900); font-weight: 600; font-size: 12.5px; }
.mrow-name span { font-size: 10.5px; color: var(--g500); }
.mrow-name .primary-tag {
  font: 700 10px var(--f);
  color: var(--ok);
  letter-spacing: 0.06em;
  margin-left: 5px;
  padding: 2px 7px;
  background: var(--ok-wash);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: var(--r-full);
  vertical-align: middle;
}
.feas { display: inline-flex; align-items: center; gap: 5px; font: 700 11.5px var(--f); }
.feas-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.feas.hot .feas-dot { background: var(--temp-hot); }
.feas.hot { color: var(--temp-hot); }
.feas.warm .feas-dot { background: var(--temp-warm); }
.feas.warm { color: #059669; }
.feas.cool .feas-dot { background: var(--temp-cool); }
.feas.cool { color: #1D4ED8; }
.feas.cold .feas-dot { background: var(--temp-cold); }
.feas.cold { color: #B45309; }
.feas.frozen .feas-dot { background: var(--temp-frozen); }
.feas.frozen { color: #B91C1C; }
.feas.na .feas-dot { background: var(--g400); }
.feas.na { color: var(--g500); }
.mrow-income {
  font-family: var(--m);
  font-weight: 600;
  color: var(--g900);
  text-align: right;
  font-size: 12px;
}
.mrow-path { color: var(--g600); font-size: 11.5px; }
.mrow-chev {
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--g400);
  transition: transform var(--tb);
}
.mrow[open] .mrow-chev { transform: rotate(90deg); color: var(--brand); }
.mrow-chev i { width: 13px; height: 13px; }
.mrow-body {
  padding: 0 22px 16px;
  font-size: 12px;
  color: var(--g700);
  line-height: 1.6;
  max-width: 720px;
}
.mrow-mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.mrow-mini .cell {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
.mrow-mini .cl {
  font: 700 9px var(--m);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.mrow-mini .cv { font-size: 11px; color: var(--g800); line-height: 1.5; }

/* ═══ ALTS — Alternatives Nearby (Bundle 27) ═══
   Mockup property-outlook-desktop-user-v3.html:345-360 + L802-813. */
.alts {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin-bottom: 10px;
  box-shadow: var(--sh-sm);
}
.alts-head { margin-bottom: 12px; }
.alts-t {
  font-size: 17px;
  font-weight: 700;
  color: var(--g900);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.alts-desc { font-size: 12.5px; color: var(--g600); line-height: 1.6; max-width: 720px; }
.alts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.alt {
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  transition: all var(--tb);
  text-decoration: none;
  color: inherit;
}
.alt:hover { border-color: var(--brand); background: var(--brand-wash); transform: translateY(-1px); }
.alt-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.alt-zip { font-family: var(--m); font-weight: 700; font-size: 14px; color: var(--g900); }
.alt-delta {
  font: 700 10px var(--m);
  color: var(--ok);
  background: var(--ok-wash);
  padding: 2px 7px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.alt-delta.down { color: #B45309; background: var(--temp-cold-wash); }
.alt-name { font-size: 12px; color: var(--g700); font-weight: 500; }
.alt-meta { font-size: 11px; color: var(--g500); line-height: 1.5; }
.alt-cta {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.alt-cta i { width: 11px; height: 11px; }

/* ═══ COMP — Three-Signal Competition tile (Bundle 27 graceful state — Bundle 21 deferred) ═══
   Mockup property-outlook-desktop-user-v3.html:362-374 + L815-824. */
.comp {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin-bottom: 10px;
  box-shadow: var(--sh-sm);
}
.comp-head { margin-bottom: 12px; }
.comp-t {
  font-size: 17px;
  font-weight: 700;
  color: var(--g900);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.comp-sub { font-size: 12.5px; color: var(--g500); }
.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.comp-tile {
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: 11px 14px;
}
.comp-l {
  font: 700 10px var(--m);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.comp-v {
  font-family: var(--m);
  font-weight: 700;
  font-size: 19px;
  color: var(--g900);
  line-height: 1;
}
.comp-v .u {
  font-family: var(--f);
  font-size: 11px;
  color: var(--g500);
  font-weight: 500;
  margin-left: 3px;
}
.comp-n { font-size: 11px; color: var(--g600); line-height: 1.5; margin-top: 3px; }
.comp-verdict {
  background: var(--temp-hot-wash);
  border-left: 3px solid var(--temp-hot);
  padding: 10px 14px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12.5px;
  color: var(--g700);
  line-height: 1.55;
}
.comp-verdict strong { color: var(--temp-hot); font-weight: 700; }
.comp-pending {
  font-size: 12.5px;
  color: var(--g500);
  font-style: italic;
  padding: 8px 0;
}

/* ═══ PLAYBOOK — Operator action block (Bundle 27) ═══
   Mockup property-outlook-desktop-user-v3.html:376-385 + L826-840. */
.play {
  background: linear-gradient(135deg, rgba(246, 141, 46, 0.06), var(--w));
  border: 1px solid rgba(246, 141, 46, 0.2);
  border-left: 4px solid var(--orange);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin-bottom: 10px;
  box-shadow: var(--sh-sm);
}
.play-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 7px;
  gap: 10px;
  flex-wrap: wrap;
}
.play-t {
  font-size: 16px;
  font-weight: 700;
  color: var(--g900);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.play-t i { width: 17px; height: 17px; color: var(--orange); }
.play-meta {
  font: 700 10px var(--m);
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.play-body { font-size: 13.5px; line-height: 1.75; color: var(--g700); }
.play-body strong { color: var(--g900); font-weight: 600; }
.play-tags { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.play-tag {
  font: 600 10px var(--f);
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--w);
  color: var(--g600);
  border: 1px solid var(--g200);
}

/* ═══ DIVES — Deep-dive footer cards (Bundle 27) ═══
   Mockup property-outlook-desktop-user-v3.html:387-395 + L842-847. */
.dives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.dive {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  padding: 15px 18px;
  cursor: pointer;
  transition: all var(--tb);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--sh-sm);
  min-height: 108px;
  text-decoration: none;
  color: inherit;
}
.dive:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-md); }
.dive-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--g900);
}
.dive-h i { width: 15px; height: 15px; color: var(--brand); }
.dive-d { font-size: 11.5px; color: var(--g600); line-height: 1.55; }
.dive-meta {
  font: 700 10px var(--m);
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.dive-meta i { width: 12px; height: 12px; }

/* ═══ FOOTNOTE — Illus-data ledger callout (Bundle 27) ═══
   Mockup property-outlook-desktop-user-v3.html:397-399 + L849-851. */
.footnote {
  font-size: 11.5px;
  color: var(--g500);
  line-height: 1.6;
  padding: 13px 16px;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  margin-bottom: 20px;
}
.footnote strong { color: var(--g700); }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE (Bundle 28)
   Ports mockup property-outlook-desktop-user-v3.html:423-433 (the original
   12-line @media block authored before Bundles 24-27 surfaces existed) and
   EXTENDS for components shipped post-mockup. Per-component collapse rules
   sourced from the canonical mobile mockup property-outlook-mobile-user-v3.html
   (lines 107-395). Strategy: single 760px breakpoint matching the mockup;
   pragmatic collapse to single-column on multi-column grids; preserve all
   structural component identity (no JS conditional rendering).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {

  /* Document chrome — mockup L423-432 + L107-108 (mobile mockup) */
  .doc { padding: 0 14px; }
  .minimap { display: none; }
  .top-crumb { font-size: 11px; }
  .top-crumb strong { font-size: 12px; }

  /* Hero — mockup L425-428 + L111-131 (mobile mockup hero-stack pattern).
     Bundle 24 uses .hero-grid (3-tile grid); on mobile we collapse to a
     single-column flex stack so each metric reads as title-left value-right.
     Per mobile mockup L119: gap 14px, top-padded by 14px border. */
  .hero { padding: 22px 20px; }
  .hero-syn { font-size: 17px; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .hero-m-v.t { font-size: 32px; }
  .hero-m-v.e { font-size: 24px; }
  .hero-m-v.u { font-size: 27px; }

  /* Facts strip — already uses auto-fit minmax(130px,1fr); naturally
     collapses on narrow widths. No override needed. */

  /* Verify drawer — chevron + icon scale already responsive via flex; no
     mobile-specific override needed beyond inherited tighter padding. */

  /* Acts — Bundle 24 act summary uses single-row grid; mobile mockup L178
     restructures to 3-row grid-template-areas. For v1 we preserve the
     single-row grid but tighten padding + smaller chevron at mobile widths. */
  .act > summary { padding: 14px 14px; gap: 8px; }
  .act-q { font-size: 15px; }
  .act-lede { font-size: 12px; }
  .act-body { padding: 16px 14px 18px; }
  .act-lead { font-size: 13.5px; line-height: 1.65; }

  /* KV grid — Act 1 key-values; collapse tighter via auto-fit min reduction */
  .kv-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    padding: 12px 14px;
  }

  /* Anchors grid (Bundle 26) — mockup mobile L289: flex column for stacking.
     Achieved via single-column grid; preserves the .anchors selector contract. */
  .anchors { grid-template-columns: 1fr; gap: 10px; }
  .anchor { padding: 14px 16px; }

  /* Reality panel rows (Bundle 26) — mockup mobile L300-304:
     grid-template-columns: 1fr auto (drop the 1.5fr sourceNote column);
     .reality-n moves to grid-column 1/-1 to wrap below k+v. */
  .reality { padding: 14px 14px; }
  .reality-r {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    padding: 8px 0;
    font-size: 12.5px;
  }
  .reality-n { grid-column: 1 / -1; line-height: 1.4; }
  .reality-v { white-space: nowrap; }

  /* Matrix rows (Bundle 27) — mockup mobile L317:
     grid-template-areas restructure ("name feas chev" / "path income income").
     This is the most complex mobile collapse — preserves the row's information
     density without horizontal scroll. */
  .matrix-head { padding: 16px 16px 12px; }
  .matrix-divider { padding: 8px 16px; }
  .mrow > summary {
    grid-template-columns: 1fr auto 24px;
    grid-template-areas:
      "name feas chev"
      "path income income";
    gap: 4px 12px;
    padding: 12px 16px;
  }
  .mrow-name { grid-area: name; }
  .feas { grid-area: feas; }
  .mrow-chev { grid-area: chev; }
  .mrow-path {
    grid-area: path;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .mrow-income {
    grid-area: income;
    justify-self: end;
    white-space: nowrap;
  }
  .mrow-body { padding: 0 16px 14px; }
  .mrow-mini { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Alternatives Nearby (Bundle 27) — single column grid; tighter padding */
  .alts { padding: 16px 16px; }
  .alts-grid { grid-template-columns: 1fr; }

  /* Competition tile (Bundle 27) — tighter min-width for tile-grid;
     auto-fit handles 2-col → 1-col fluidly */
  .comp { padding: 16px 16px; }
  .comp-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .comp-v { font-size: 18px; }

  /* Operator Playbook (Bundle 27) — tighter padding only; orange gradient + tags
     already wrap naturally via flex-wrap */
  .play { padding: 16px 16px; }
  .play-body { font-size: 13px; }

  /* Deep-dive footer cards (Bundle 27) — single-column on mobile per mockup
     L384 (flex-direction:column) */
  .dives { grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
  .dive { padding: 14px 16px; }

  /* Footnote — tighter padding only */
  .footnote { padding: 13px 14px; }

  /* Pricing/bell/math (Bundle 25) — Act 2 surfaces. Pricing rows already flex;
     bell-curve SVG preserves aspect ratio. Math row may overflow on very narrow
     widths — allow horizontal scroll as graceful degradation rather than
     restructuring (math is a single visual unit; breaking it loses meaning). */
  .math { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .arch-grid { grid-template-columns: 1fr; }

  /* ─── Bundle 29a — Full Zoning Report mobile collapse ───
     Mockup full-zoning-report-mobile.html:107-260 sources canonical mobile
     sizing. We collapse the desktop layout onto a single column without
     restructuring the JSX (matches Bundle 28 pragmatic-collapse precedent). */
  .rpt-title { font-size: 22px; }
  .lede { padding: 22px 20px; }
  .lede p { font-size: 15px; line-height: 1.65; }
  .sec-h { margin: 26px 0 12px; }
  .sec-h-t { font-size: 17px; }
  .layer-h { padding: 14px 16px; gap: 10px; }
  .layer-num { width: 30px; height: 30px; font-size: 12px; }
  .layer-title { font-size: 14px; }
  .layer-body { padding: 14px 16px; }
  .layer-body p { font-size: 13px; line-height: 1.65; }
  .src-list { grid-template-columns: 1fr; }
  .sjc-reconcile .side { flex-direction: column; gap: 8px; }
  .def { padding: 16px 18px; }
  .def-row { grid-template-columns: 1fr; }
  .enforce-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date kind"
      "desc desc"
      "outcome outcome";
    row-gap: 4px;
  }
  .enforce-date { grid-area: date; }
  .enforce-kind { grid-area: kind; justify-self: end; }
  .enforce-desc { grid-area: desc; }
  .enforce-outcome { grid-area: outcome; }
  .score-row { grid-template-columns: 110px 1fr auto; gap: 10px; font-size: 11.5px; }

  /* ─── Bundle 29b — Full Market Report mobile collapse ───
     Mockup full-market-report-desktop.html:302-314. */
  .chapter { padding: 22px 20px; }
  .ch-h { gap: 10px; }
  .ch-t { font-size: 19px; }
  .ch-lead { font-size: 14px; line-height: 1.65; }
  .ch-body p { font-size: 13px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 12px 14px; }
  .stat-v { font-size: 18px; }
  .bell-full { padding: 14px 16px; }
  .bell-svg-full { height: 180px; }
  .comp-table { font-size: 11.5px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .map-anchor-list { grid-template-columns: 1fr; }
  .index-row { grid-template-columns: 130px 1fr auto; gap: 10px; }
  .signal {
    grid-template-columns: 36px 1fr;
    grid-template-areas:
      "ico body"
      "v   v";
    row-gap: 8px;
  }
  .signal-ico { grid-area: ico; }
  .signal-body { grid-area: body; }
  .signal-v {
    grid-area: v;
    text-align: left;
    padding-left: 50px;
    font-size: 17px;
  }
  .plays { grid-template-columns: 1fr; }

  /* ─── Bundle 29c — Full CMA Report mobile collapse ───
     Mockup full-cma-mobile.html sources canonical mobile sizing. */
  .pid-addr-block { grid-template-columns: 1fr; }
  .pid-body { grid-template-columns: 1fr; gap: 16px; }
  .pid-kv { grid-template-columns: 130px 1fr; }
  .pid-sources { padding: 10px 16px; gap: 8px; }
  .anchors-inline { grid-template-columns: 1fr 1fr; }
  .mkt-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mkt-stat { padding: 12px 14px; }
  .mkt-stat-v { font-size: 17px; }
  .adj-table { font-size: 11.5px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .valuation-caveat { padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERNAL VARIANT (Bundle 28) — `.outlook--internal` body modifier class
   Per DESIGN_RATIONALE §1: internal variant uses ~15-25% compressed prose
   to save vertical space for admin reviewer chrome (property-tab-bar +
   gate-strip + right-side Review panel). Bundle 28 ships the CSS-density
   compression axis only; backend prose-source switching (`act1.leadHtmlInternal`
   etc.) is Phase 3 follow-up requiring schema additions. Admin chrome itself
   lives in `CCL Acquisitions Dashboard/`, not here.
   ═══════════════════════════════════════════════════════════════════════════ */

.outlook--internal .hero-syn { font-size: 16px; line-height: 1.4; }
.outlook--internal .act-lead { line-height: 1.5; font-size: 13px; }
.outlook--internal .act-body { padding: 14px 18px 16px; }
.outlook--internal .nuance { display: none; }
.outlook--internal .minimap { display: none; }
.outlook--internal .matrix-head { padding: 12px 18px 10px; }
.outlook--internal .alts,
.outlook--internal .comp,
.outlook--internal .play { padding: 14px 18px; }
.outlook--internal .footnote { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   EDGE-CASE MODIFIERS (Bundle 30a) — `.outlook--{cold,thin,outside,partial}`
   Per MOCKUP_BRIEF §10. The SAME outlook body adapts to data-availability
   states via root-level modifier classes; render-order changes (Cold's
   Alts-above-Matrix; Outside's Act 1 → NaBlock) live in `outlook.js`
   `renderOutlook`. Component-level swaps (Hero band classes, Earn-range
   variant, ConfidenceIndicators block) live in `Hero` + new components.
   This block only handles VISUAL adaptation of existing component classes.

   Backend wiring (Phase 3):
   - Cold trigger: zoningSummary.temperatureScore <= 3.0 || tempCategory === FROZEN
   - Thin trigger: confidenceScores.market < 0.55 || bellCurve.sampleSize < 10
   - Outside trigger: zoningSummary == null && marketSummary != null
   - Partial trigger: not Cold/Outside, but min(zoning,market,cma).confidence < 0.6
   v1 design QA uses ?case= query param + applyEdgeCaseOverrides synthesis.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero gradient overrides (mockup state-edge-cases.html L98-101) */
.outlook--cold .hero {
  background: linear-gradient(135deg, #3F3F46 0%, #52525B 60%, #71717A 100%);
}
.outlook--cold .hero::before { display: none; }

.outlook--thin .hero {
  background: linear-gradient(135deg, #78350F 0%, #B45309 60%, #F59E0B 100%);
}
.outlook--thin .hero::before { display: none; }

.outlook--outside .hero {
  background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 60%, #3B82F6 100%);
}
.outlook--outside .hero::before { display: none; }

/* Partial keeps default teal hero gradient; band coloring carries the signal. */

/* Hero-band variants (mockup state-edge-cases.html L109-115) */
.hero-band.cold {
  background: rgba(239, 68, 68, 0.25);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.35);
}
.hero-band.frozen {
  background: rgba(239, 68, 68, 0.25);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.35);
}
.hero-band.warn {
  background: rgba(245, 158, 11, 0.25);
  color: #FCD34D;
  border-color: rgba(245, 158, 11, 0.4);
}
.hero-band.hot {
  background: rgba(16, 185, 129, 0.28);
  color: #A7F3D0;
  border-color: rgba(16, 185, 129, 0.42);
}
.hero-band.na {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.22);
}

/* "Pipeline not yet built" textual cell (Outside Can-I metric, mockup L416) */
.hero-m-v.t.na {
  font-family: var(--f);
  font-weight: 600;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.2;
}
/* Earn-range cell (Thin variant) — narrower font when range string present */
.outlook--thin .hero-m-v.e,
.outlook--partial .hero-m-v.e {
  font-size: 22px;
}

/* ─────────────────────────────────────────────────────────────
   CONFIDENCE INDICATORS — Thin + Partial (Bundle 30a)
   Mockup state-edge-cases.html L157-171 (CSS) + L344-351 (markup).
   Sits between FactsStrip and Act 1 when caseKey ∈ {thin, partial}.
   ───────────────────────────────────────────────────────────── */
.confidence-block {
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 16px;
  align-items: center;
}
.confidence-l {
  font-size: 12.5px;
  color: var(--g700);
  line-height: 1.55;
}
.confidence-l strong {
  color: var(--g900);
  font-weight: 600;
}
.confidence-sub {
  display: block;
  color: var(--g500);
  font-size: 10.5px;
  margin-top: 4px;
}
.confidence-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.confidence-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.confidence-bar-key {
  font: 700 9.5px var(--m);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: 48px;
  flex-shrink: 0;
}
.confidence-bar-track {
  flex: 1;
  height: 4px;
  background: var(--g200);
  border-radius: 2px;
  overflow: hidden;
}
.confidence-bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width var(--tb);
}
.confidence-bar-fill.hi  { background: var(--ok); }
.confidence-bar-fill.mid { background: var(--warn); }
.confidence-bar-fill.lo  { background: var(--err); }
.confidence-bar-fill.na  { background: var(--g400); }
.confidence-bar-val {
  font: 700 11px var(--m);
  color: var(--g800);
  min-width: 28px;
  text-align: right;
}

/* ─────────────────────────────────────────────────────────────
   NA BLOCK — Outside variant Act 1 replacement (Bundle 30a)
   Mockup state-edge-cases.html L185-189 (CSS) + L432-440 (markup).
   ───────────────────────────────────────────────────────────── */
.na-block {
  background: var(--g100);
  border: 1px dashed var(--g300);
  border-radius: var(--r-md);
  padding: 22px 24px;
  margin-bottom: 18px;
  text-align: center;
}
.na-block-i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--g200);
  color: var(--g500);
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
}
.na-block-i i {
  width: 16px;
  height: 16px;
}
.na-block-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--g800);
  margin-bottom: 4px;
}
.na-block-d {
  font-size: 12px;
  color: var(--g500);
  line-height: 1.55;
  max-width: 460px;
  margin: 0 auto;
}
.na-block-d em { font-style: italic; }
.na-block-cta {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.na-btn {
  padding: 7px 14px;
  border-radius: var(--r-md);
  font: 600 11.5px var(--f);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--tb);
}
.na-btn i { width: 12px; height: 12px; }
.na-btn.primary {
  background: var(--info);
  color: #fff;
  border-color: var(--info);
}
.na-btn.primary:hover { background: #1D4ED8; }
.na-btn.ghost {
  background: var(--w);
  color: var(--g700);
  border-color: var(--g200);
}
.na-btn.ghost:hover { background: var(--g50); border-color: var(--g300); }
.na-block-prose {
  margin-top: 16px;
  font-size: 13px;
  color: var(--g700);
  line-height: 1.6;
  text-align: left;
}
.na-block-prose strong { color: var(--g900); font-weight: 600; }
.na-block-prose em { font-style: italic; }

/* ─────────────────────────────────────────────────────────────
   MOBILE adjustments for Bundle 30a additions
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .confidence-block {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .na-block {
    padding: 18px 16px;
  }
  .na-block-cta {
    flex-direction: column;
  }
  .na-btn {
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MINIMAP + FAB chrome surfaces (Bundle 30b — closes C7)
   These are page-level chrome (right-rail nav dots + bottom-right action
   cluster) shared across deep-dive and alt-pathway pages. Bundle 28 declared
   2 forward-compat orphan rules (L1292 mobile-hide, L1506 internal-hide);
   those rules' specificity (0,1,0 inside @media + 0,2,0 with .outlook--internal)
   wins over these base rules — confirmed safe.

   Base port: mockups/alternative-pathway-desktop.html L231-246.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Minimap right-rail navigation dots */
.minimap {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 20;
}
.mini-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g300);
  transition: all var(--tb);
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.mini-dot:hover {
  background: var(--brand);
  transform: scale(1.4);
}
.mini-dot.on {
  background: var(--brand);
  width: 9px;
  height: 9px;
}
.mini-dot::after {
  content: attr(data-label);
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--g900);
  color: #fff;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 10.5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tb);
}
.mini-dot:hover::after { opacity: 1; }

/* Mobile-hide minimap — Bundle 30b QC fix-up. The Bundle 28 forward-compat
   orphan rule at L1292 (`@media (max-width:760px) .minimap{display:none}`)
   has the same specificity as the new base `.minimap` rule above (both 0,1,0)
   but is declared EARLIER in source, so the base rule's `display:flex`
   would win at narrow viewport. This block re-establishes the mobile-hide
   intent AFTER the new base rules, matching the FAB precedent at the
   `@media (max-width:640px)` block below. */
@media (max-width: 760px) {
  .minimap { display: none; }
}

/* FAB — floating action cluster */
.fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  display: flex;
  gap: 6px;
  z-index: 30;
  background: var(--w);
  padding: 6px;
  border-radius: var(--r-full);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--g200);
  align-items: center;
}
.fab-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  color: var(--g600);
  transition: background var(--tb), color var(--tb);
  border: none;
  background: transparent;
  cursor: pointer;
}
.fab-btn:hover {
  background: var(--g100);
  color: var(--g900);
}
.fab-btn.primary {
  background: var(--brand);
  color: #fff;
  width: 38px;
  height: 38px;
}
.fab-btn.primary:hover { background: var(--brand-dk); }
.fab-btn i { width: 15px; height: 15px; }
.fab-divider {
  width: 1px;
  height: 18px;
  background: var(--g200);
  margin: 0 2px;
}

/* Mobile-hide FAB to defer to bottom action bar (mockup-mobile pattern); v1.1 polish ships
   the mobile bottom-bar replacement. For 30b ship, hide FAB at <=640px on alt-pathway
   surface — minimap is already hidden by Bundle 28 orphan rule at <=760px. */
@media (max-width: 640px) {
  .fab { display: none; }
}

/* ============================================================================
   AUTH SURFACES (Bundle 32) — login + signup pages, UserMenu top-bar dropdown.
   Login/signup wrap Clerk's hosted <SignIn/> + <SignUp/> components in a
   restraint-pass card matching the billing-dashboard design language (cream
   `--g50` background, brand-teal accent, Inter typography, Lucide icons).
   UserMenu is the avatar dropdown that mounts in the dashboard top-bar
   right-side cluster (replaces the placeholder `<div class="avatar">` from
   the home-dashboard mockup).
   ============================================================================ */

/* --- AUTH PAGE (#/login + #/signup) ---------------------------------------- */

.auth-page {
  min-height: 100vh;
  background: var(--g50);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.auth-brand-mark {
  width: 32px;
  height: 32px;
  background: var(--brand);
  color: #fff;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
}
.auth-brand-text { line-height: 1.15; }
.auth-brand-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--g900);
}
.auth-brand-tag {
  font-size: 11px;
  color: var(--g500);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--g900);
  letter-spacing: -0.01em;
  margin: 0;
}
.auth-sub {
  font-size: 13px;
  color: var(--g600);
  line-height: 1.55;
  margin: 0 0 6px;
}

.auth-error {
  font-size: 12px;
  color: #B91C1C;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
}

/* Container Clerk's mountSignIn/mountSignUp injects into. Min-height keeps
   the card from collapsing during Clerk's own widget hydration delay. */
.auth-clerk-mount {
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.auth-foot {
  font-size: 12.5px;
  color: var(--g500);
  text-align: center;
  padding-top: 6px;
  border-top: 1px dashed var(--g200);
  margin-top: 6px;
}
.auth-foot a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.auth-foot a:hover { text-decoration: underline; }

/* --- USER MENU (top-bar avatar dropdown) ----------------------------------- */
/* Mounts in the existing `.top-r` cluster on every authenticated route.
   Replaces the placeholder `<div class="avatar">JT</div>` from the
   home-dashboard mockup. Trigger is a button (not a div) for keyboard a11y;
   dropdown closes on outside-click + Escape (handled in UserMenu.js). */

.user-menu {
  position: relative;
  display: inline-flex;
}

.user-menu-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-menu-trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.user-menu-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--m);
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  background: #60A5FA;
  object-fit: cover;
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: 10px;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 20px 40px -8px rgba(0, 0, 0, 0.14);
  padding: 4px;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.user-menu-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--g150);
  margin-bottom: 4px;
}
.user-menu-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--g900);
  line-height: 1.3;
}
.user-menu-email {
  font-size: 11.5px;
  color: var(--g500);
  margin-top: 2px;
  font-weight: 500;
  word-break: break-all;
}

.user-menu-item {
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  font: 500 12.5px var(--f);
  color: var(--g700);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-menu-item:hover, .user-menu-item:focus-visible {
  background: var(--g100);
  color: var(--g900);
  outline: none;
}
.user-menu-item i { width: 14px; height: 14px; flex-shrink: 0; }

.user-menu-item-danger {
  color: #B91C1C;
}
.user-menu-item-danger:hover, .user-menu-item-danger:focus-visible {
  background: rgba(239, 68, 68, 0.06);
  color: #991B1B;
}

.user-menu-divider {
  height: 1px;
  background: var(--g150);
  margin: 4px 0;
}

.user-menu-signin {
  font: 600 12px var(--f);
  color: var(--brand);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--g200);
  background: var(--w);
}
.user-menu-signin:hover { background: var(--g50); border-color: var(--g300); }

/* ============================================================================
   BILLING + SUBSCRIPTION SURFACES (Bundle 33)
   Ported from approved mockups:
     mockups/billing-dashboard-desktop.html (4 states · the canonical surface)
     mockups/billing-dashboard-edge-cases-desktop.html (4 edge states)
     mockups/subscription-modal-desktop.html (4 modal states)
   Class names + values match the mockup verbatim so visual-QA against the
   mockup is direct-comparison.
   ============================================================================ */

/* --- BILLING DASHBOARD: structural primitives ------------------------------ */

.bill-page { background: var(--g50); min-height: 100vh; }
.bill-page .doc { max-width: 1080px; margin: 0 auto; padding: 28px 28px 60px; }
.bill-stack { display: flex; flex-direction: column; gap: 14px; }
.bill-card {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.bill-card.danger { border-color: rgba(239,68,68,.35); box-shadow: 0 0 0 3px rgba(239,68,68,.06), 0 1px 3px rgba(0,0,0,.06); }

.dash-header {
  padding: 18px 24px 14px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--g150);
}
.dash-title {
  font-size: 17px; font-weight: 700; color: var(--g900); letter-spacing: -.01em;
  margin-bottom: 3px; display: flex; align-items: center; gap: 8px;
}
.dash-title i { width: 16px; height: 16px; color: var(--brand); }
.dash-title.warn i { color: #B45309; }
.dash-title.err i { color: var(--err); }
.dash-sub { font-size: 12.5px; color: var(--g500); }
.dash-sub strong { color: var(--g800); font-weight: 600; }
.dash-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- STATS BAR (gradient hero strip) --------------------------------------- */

.stats-bar {
  padding: 18px 24px;
  background: linear-gradient(135deg, var(--brand-dk) 0%, var(--brand) 60%, #2E5A5B 100%);
  color: #fff;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  position: relative;
}
.stats-bar.warn { background: linear-gradient(135deg, #7A4A06 0%, #B45309 60%, #92400E 100%); }
.stats-bar.err { background: linear-gradient(135deg, #7F1D1D 0%, #B91C1C 60%, #991B1B 100%); }
.stats-bar.muted { background: linear-gradient(135deg, #27272A 0%, #3F3F46 60%, #52525B 100%); }
.stats-bar.info { background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 60%, #2563EB 100%); }
.stats-item { min-width: 0; position: relative; }
.stats-item + .stats-item::before {
  content: ''; position: absolute; left: -9px; top: 2px; bottom: 2px;
  width: 1px; background: rgba(255,255,255,.12);
}
.stats-l {
  font: 700 9.5px var(--f); text-transform: uppercase; letter-spacing: .1em;
  opacity: .72; margin-bottom: 4px; display: flex; align-items: center; gap: 4px;
}
.stats-l i { width: 11px; height: 11px; }
.stats-v { font-family: var(--m); font-weight: 700; font-size: 24px; line-height: 1.05; letter-spacing: -.01em; }
.stats-v .u { font-family: var(--f); font-size: 12px; font-weight: 500; opacity: .72; margin-left: 3px; }
.stats-v .frac { font-family: var(--m); font-size: 14px; font-weight: 500; opacity: .62; margin-left: 3px; }
.stats-sub { font-size: 10.5px; opacity: .72; margin-top: 3px; line-height: 1.45; }
.bucket-bar {
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.18); margin-top: 6px; overflow: hidden;
}
.bucket-bar i { display: block; height: 100%; background: #fff; border-radius: 2px; }

/* --- STATUS BANNERS inside stats-bar variants ----------------------------- */

.status-banner {
  padding: 11px 24px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.status-banner i { width: 14px; height: 14px; flex-shrink: 0; }
.status-banner.warn { background: rgba(245,158,11,.18); color: #FFD089; }
.status-banner.err { background: rgba(239,68,68,.18); color: #FCA5A5; }
.status-banner.muted { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.status-banner.info { background: rgba(59,130,246,.18); color: #BFDBFE; }
.status-banner .actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.status-banner .sb-btn {
  padding: 5px 11px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px; font: 600 11px var(--f); color: #fff;
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
}
.status-banner .sb-btn:hover { background: rgba(255,255,255,.22); }
.status-banner .sb-btn.primary { background: #fff; color: var(--g900); border-color: #fff; }

/* --- ACTIVITY FEED (urow rows) -------------------------------------------- */

.feed { padding: 14px 24px 18px; }
.urow {
  padding: 10px 12px; border-radius: 8px;
  display: grid; grid-template-columns: auto 1fr auto auto auto;
  gap: 10px 14px; align-items: center; font-size: 12.5px;
  transition: background .2s;
}
.urow:hover { background: var(--g50); }
.urow + .urow { border-top: 1px solid var(--g150); }
.urow-icon {
  width: 30px; height: 30px; border-radius: 6px;
  background: var(--brand-wash); color: var(--brand);
  display: grid; place-items: center; flex-shrink: 0;
}
.urow-icon i { width: 14px; height: 14px; }
.urow-icon.refill { background: var(--ok-wash); color: var(--ok); }
.urow-icon.topup { background: var(--info-wash); color: var(--info); }
.urow-icon.blocked { background: var(--err-wash); color: var(--err); }
.urow-icon.payg { background: var(--warn-wash); color: #B45309; }
.urow-addr { font-weight: 600; color: var(--g900); line-height: 1.3; min-width: 0; }
.urow-addr span { display: block; font: 400 10.5px var(--f); color: var(--g500); margin-top: 1px; }
.urow-bucket {
  font: 600 10px var(--m); text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 9999px;
  background: var(--g100); color: var(--g600); white-space: nowrap;
}
.urow-bucket.reserve { background: var(--info-wash); color: #1D4ED8; }
.urow-bucket.blocked { background: var(--err-wash); color: var(--err); }
.urow-bucket.payg { background: var(--warn-wash); color: #B45309; }
.urow-delta { font-family: var(--m); font-weight: 700; color: var(--g700); white-space: nowrap; font-size: 13px; }
.urow-delta.plus { color: var(--ok); }
.urow-delta.charge { color: #B45309; }
.urow-delta.blocked { color: var(--err); }
.urow-time { font: 500 10.5px var(--m); color: var(--g500); white-space: nowrap; }
.feed-foot {
  padding: 12px 24px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--g150); background: var(--g50);
  font-size: 11.5px; color: var(--g500);
}
.feed-foot a { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.feed-foot a i { width: 12px; height: 12px; }

/* --- TOP-UP PACKS GRID ---------------------------------------------------- */

.packs {
  padding: 18px 24px 22px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.pack {
  background: var(--w); border: 1px solid var(--g200); border-radius: 12px;
  padding: 16px 18px; cursor: pointer;
  transition: all .2s;
  position: relative; display: flex; flex-direction: column; gap: 6px;
}
.pack:hover { border-color: var(--brand-sub); box-shadow: 0 4px 12px -2px rgba(0,0,0,.08); transform: translateY(-1px); }
.pack.popular { border-color: var(--brand); background: linear-gradient(135deg, var(--brand-wash) 0%, transparent 70%); }
.pack.urgent { border-color: rgba(239,68,68,.4); background: linear-gradient(135deg, var(--err-wash) 0%, transparent 70%); }
.pack-tag {
  position: absolute; top: -9px; right: 14px;
  font: 700 9px var(--m); background: var(--brand); color: #fff;
  padding: 3px 8px; border-radius: 9999px;
  text-transform: uppercase; letter-spacing: .08em;
}
.pack-tag.urgent { background: var(--err); }
.pack-name {
  font: 700 11px var(--m); color: var(--g500);
  text-transform: uppercase; letter-spacing: .08em;
  display: flex; align-items: center; gap: 5px;
}
.pack-name i { width: 12px; height: 12px; color: var(--brand); }
.pack-price { font-family: var(--m); font-weight: 700; font-size: 22px; color: var(--g900); letter-spacing: -.01em; line-height: 1; }
.pack-price .u { font-family: var(--f); font-size: 11px; font-weight: 500; color: var(--g500); margin-left: 2px; }
.pack-rate { font-size: 11.5px; color: var(--g600); margin-top: 1px; }
.pack-rate strong { color: var(--g900); font-weight: 600; }
.pack-foot {
  font: 600 10.5px var(--m); color: var(--brand);
  text-transform: uppercase; letter-spacing: .06em;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--g200);
  display: flex; align-items: center; gap: 4px;
}
.pack-foot i { width: 11px; height: 11px; }
.pack.urgent .pack-foot { color: var(--err); }

/* --- PAY-AS-YOU-GO CARD --------------------------------------------------- */

.payg-body {
  padding: 18px 24px 22px;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 22px; align-items: center;
}
.payg-price {
  background: var(--brand-wash); border: 1px solid var(--brand-sub);
  border-radius: 8px; padding: 14px 18px; min-width: 180px;
}
.payg-price.urgent { background: var(--err-wash); border-color: rgba(239,68,68,.3); }
.payg-price.urgent .payg-price-l { color: var(--err); }
.payg-price-l {
  font: 700 10px var(--m); color: var(--brand);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
}
.payg-price-l i { width: 11px; height: 11px; }
.payg-price-v {
  font-family: var(--m); font-weight: 700; font-size: 28px; color: var(--g900);
  letter-spacing: -.02em; line-height: 1;
  display: flex; align-items: baseline; gap: 3px;
}
.payg-price-v .u { font-family: var(--f); font-size: 11px; font-weight: 500; color: var(--g500); }
.payg-price-d { font: 500 11px var(--f); color: var(--g600); margin-top: 6px; line-height: 1.45; }
.payg-context { font-size: 12.5px; color: var(--g700); line-height: 1.6; display: flex; gap: 9px; align-items: flex-start; }
.payg-context i { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.payg-context strong { color: var(--g900); font-weight: 600; }
.payg-cta { padding: 10px 16px; font-weight: 700; flex-shrink: 0; white-space: nowrap; }

/* --- PAYMENT + INVOICES --------------------------------------------------- */

.pay-row {
  padding: 14px 24px; display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--g150);
}
.pay-card { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.pay-icon {
  width: 38px; height: 26px;
  background: linear-gradient(135deg, #1E3A8A, #3B82F6);
  border-radius: 6px;
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
  font: 700 9px var(--m); letter-spacing: .04em;
}
.pay-info { font-size: 13px; color: var(--g900); font-weight: 600; min-width: 0; }
.pay-info span { display: block; font-size: 11.5px; color: var(--g500); font-weight: 500; margin-top: 1px; }

.inv-list { padding: 8px 0 14px; }
.inv-row {
  padding: 9px 24px;
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 14px; align-items: center; font-size: 12.5px;
  transition: background .2s;
}
.inv-row:hover { background: var(--g50); }
.inv-date { font-family: var(--m); font-weight: 600; color: var(--g700); font-size: 11.5px; }
.inv-desc { color: var(--g800); }
.inv-amount { font-family: var(--m); font-weight: 700; color: var(--g900); white-space: nowrap; }
.inv-status {
  font: 600 10px var(--m); text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 9999px;
}
.inv-status.paid { background: var(--ok-wash); color: var(--ok); }
.inv-status.pending { background: var(--warn-wash); color: #B45309; }
.inv-status.failed { background: var(--err-wash); color: var(--err); }
.inv-link {
  color: var(--g400); width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center; transition: all .2s; cursor: pointer;
}
.inv-link:hover { color: var(--brand); background: var(--g100); }
.inv-link i { width: 13px; height: 13px; }

/* --- PREFERENCES DRAWER --------------------------------------------------- */

.prefs { padding: 14px 24px 18px; }
.prefs > summary {
  cursor: pointer; list-style: none;
  padding: 8px 12px; margin: -8px -12px;
  border-radius: 8px;
  font-size: 12.5px; color: var(--g700); font-weight: 600;
  display: flex; align-items: center; gap: 8px; transition: background .2s;
}
.prefs > summary::-webkit-details-marker { display: none; }
.prefs > summary:hover { background: var(--g50); }
.prefs > summary i.chev { width: 13px; height: 13px; color: var(--g400); transition: transform .2s; margin-left: auto; }
.prefs[open] > summary i.chev { transform: rotate(180deg); }
.prefs > summary i.lead { width: 14px; height: 14px; color: var(--brand); }
.prefs-body { padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.pref-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 14px;
  background: var(--g50); border: 1px solid var(--g150); border-radius: 8px;
}
.pref-row.locked { opacity: .65; }
.pref-row .pr-info { flex: 1; min-width: 0; }
.pref-row .pr-t {
  font-size: 12.5px; font-weight: 600; color: var(--g900);
  margin-bottom: 3px; display: flex; align-items: center; gap: 6px;
}
.pref-row .pr-t .badge-sub {
  font: 700 9px var(--m); background: var(--info-wash); color: var(--info);
  padding: 1px 6px; border-radius: 9999px;
  text-transform: uppercase; letter-spacing: .06em;
}
.pref-row .pr-t .badge-sub.lock { background: var(--g200); color: var(--g600); }
.pref-row .pr-d { font-size: 11.5px; color: var(--g600); line-height: 1.55; }
.pref-row .pr-d a { color: var(--brand); font-weight: 600; }

.toggle {
  width: 34px; height: 20px;
  background: var(--g300); border-radius: 10px;
  position: relative; cursor: pointer; flex-shrink: 0;
  transition: background .2s; border: none;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .2s;
}
.toggle.on { background: var(--brand); }
.toggle.on::after { left: 16px; }
.toggle.disabled { background: var(--g200); cursor: not-allowed; opacity: .6; }

/* --- STATE-SPECIFIC HELPERS ----------------------------------------------- */

.upsell { padding: 0 24px 18px; }
.upsell-card {
  background: linear-gradient(135deg, var(--brand-wash) 0%, transparent 60%);
  border: 1px solid var(--brand-sub); border-radius: 12px;
  padding: 16px 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.upsell-info { flex: 1; min-width: 200px; }
.upsell-t {
  font-size: 13.5px; font-weight: 700; color: var(--g900);
  margin-bottom: 3px; display: flex; align-items: center; gap: 6px;
}
.upsell-t i { width: 14px; height: 14px; color: var(--brand); }
.upsell-d { font-size: 12px; color: var(--g700); line-height: 1.55; }
.upsell-d strong { color: var(--g900); font-weight: 600; }
.upsell-cta { display: flex; gap: 6px; flex-shrink: 0; }

.empty-block { padding: 28px 24px; text-align: center; background: var(--g50); border-top: 1px solid var(--g150); }
.empty-block i.lead { width: 32px; height: 32px; color: var(--g300); margin-bottom: 10px; }
.empty-block .et { font-size: 14px; font-weight: 600; color: var(--g700); margin-bottom: 4px; }
.empty-block .ed { font-size: 12px; color: var(--g500); max-width: 380px; margin: 0 auto; line-height: 1.55; }

.how { padding: 18px 24px 22px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.how-card {
  background: var(--g50); border: 1px solid var(--g150); border-radius: 8px;
  padding: 14px 16px; position: relative;
}
.how-card::before {
  content: attr(data-num); position: absolute; top: -10px; left: 14px;
  width: 22px; height: 22px;
  background: var(--brand); color: #fff; border-radius: 50%;
  display: grid; place-items: center; font: 700 11px var(--m);
}
.how-t { font-size: 12.5px; font-weight: 700; color: var(--g900); margin-top: 4px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.how-t i { width: 13px; height: 13px; color: var(--brand); }
.how-d { font-size: 11.5px; color: var(--g600); line-height: 1.6; }
.how-d strong { color: var(--g900); font-weight: 600; }

.pay-empty {
  padding: 18px 24px; display: flex; align-items: center; gap: 14px;
  background: var(--g50); border-bottom: 1px solid var(--g150);
}
.pay-empty-icon {
  width: 42px; height: 42px;
  background: var(--w); border: 1px dashed var(--g300); border-radius: 6px;
  display: grid; place-items: center; color: var(--g400); flex-shrink: 0;
}
.pay-empty-icon i { width: 18px; height: 18px; }
.pay-empty-info { flex: 1; min-width: 0; }
.pay-empty-t { font-size: 13px; font-weight: 600; color: var(--g700); margin-bottom: 2px; }
.pay-empty-d { font-size: 11.5px; color: var(--g500); line-height: 1.5; }

.pending-strip {
  padding: 14px 24px; background: var(--warn-wash);
  border-top: 1px solid rgba(245,158,11,.25);
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: #92400E; flex-wrap: wrap;
}
.pending-strip i { width: 14px; height: 14px; color: #B45309; flex-shrink: 0; }
.pending-strip strong { color: var(--g900); font-weight: 600; }
.pending-strip .actions { margin-left: auto; display: flex; gap: 6px; }

@media (max-width: 760px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stats-item + .stats-item::before { display: none; }
  .packs, .how-grid { grid-template-columns: 1fr; }
  .urow { grid-template-columns: auto 1fr auto; gap: 8px; }
  .urow-bucket, .urow-time { display: none; }
  .payg-body { grid-template-columns: 1fr; gap: 14px; }
  .payg-price { min-width: 0; }
  .bill-page .doc { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================================
   SUBSCRIPTION MODAL (Bundle 33 · #/account/subscription)
   ============================================================================ */

.sub-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 34, 34, .55);
  backdrop-filter: blur(2px);
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.sub-modal {
  background: var(--w);
  border-radius: 20px;
  max-width: 920px; width: 100%; max-height: calc(100vh - 48px);
  box-shadow: 0 25px 80px -20px rgba(0,0,0,.35), 0 8px 32px -8px rgba(0,0,0,.18);
  overflow: auto;
  position: relative;
}

.m-h {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--g150);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.m-h-info { flex: 1; min-width: 200px; }
.m-h-eyebrow { font: 700 10px var(--m); color: var(--brand); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 5px; }
.m-h-t { font-size: 22px; font-weight: 700; color: var(--g900); letter-spacing: -.015em; line-height: 1.2; }
.m-h-d { font-size: 12.5px; color: var(--g600); margin-top: 4px; }
.m-h-d strong { color: var(--g800); font-weight: 600; }

.cycle {
  display: inline-flex; background: var(--g100); border-radius: 9999px;
  padding: 3px; position: relative;
}
.cycle button {
  padding: 7px 16px; font: 600 12px var(--f); color: var(--g600);
  border-radius: 9999px; position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .2s; background: none; border: none; cursor: pointer;
}
.cycle button.on { color: var(--g900); }
.cycle .knob {
  position: absolute; top: 3px; left: 3px;
  height: calc(100% - 6px);
  background: var(--w); border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: all .2s; z-index: 0;
}
.cycle.yearly .knob { left: auto; right: 3px; }
.cycle .save-tag {
  font: 700 9px var(--m); background: var(--ok-wash); color: var(--ok);
  padding: 2px 7px; border-radius: 9999px;
  text-transform: uppercase; letter-spacing: .06em; margin-left: 2px;
}

.m-close {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--g100); color: var(--g600);
  display: grid; place-items: center;
  transition: all .2s; flex-shrink: 0; border: none; cursor: pointer;
}
.m-close:hover { background: var(--g200); color: var(--g900); }
.m-close i { width: 15px; height: 15px; }

.founder {
  padding: 13px 28px;
  background: linear-gradient(90deg, var(--brand-wash) 0%, transparent 100%);
  border-bottom: 1px solid var(--g150);
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--g700);
}
.founder i.spark { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; }
.founder strong { color: var(--g900); font-weight: 700; }
.founder .badge {
  font: 700 9px var(--m); background: var(--brand); color: #fff;
  padding: 2px 7px; border-radius: 9999px;
  text-transform: uppercase; letter-spacing: .08em;
  margin-left: auto; flex-shrink: 0;
}

.plans {
  padding: 24px 28px 14px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.plan {
  background: var(--w); border: 1.5px solid var(--g200); border-radius: 16px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer; transition: all .2s; position: relative;
}
.plan:hover { border-color: var(--brand-sub); box-shadow: 0 4px 12px -2px rgba(0,0,0,.08); transform: translateY(-2px); }
.plan.current { border-color: var(--brand); background: linear-gradient(180deg, var(--brand-wash) 0%, transparent 30%); }
.plan.current:hover { transform: none; }
.plan.featured { border-color: var(--g900); position: relative; }
.plan-tag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font: 700 9px var(--m); background: var(--g900); color: #fff;
  padding: 3px 10px; border-radius: 9999px;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.plan-tag.brand { background: var(--brand); }
.plan-name {
  font-size: 13px; font-weight: 700; color: var(--g900); letter-spacing: -.005em;
  display: flex; align-items: center; gap: 6px;
}
.plan-name i { width: 14px; height: 14px; color: var(--brand); }
.plan-desc { font-size: 11.5px; color: var(--g500); line-height: 1.5; }
.plan-price-row { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.plan-price { font-family: var(--m); font-weight: 700; font-size: 30px; color: var(--g900); letter-spacing: -.02em; line-height: 1; }
.plan-price-u { font-family: var(--f); font-size: 12px; font-weight: 500; color: var(--g500); }
.plan-yearly-meta {
  font: 600 10.5px var(--m); color: var(--g500);
  text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: 4px; margin-top: 1px;
}
.plan-yearly-meta i { width: 11px; height: 11px; color: var(--ok); }
.plan-stat {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 12.5px; color: var(--g700);
  padding-top: 10px; border-top: 1px solid var(--g150); margin-top: 4px;
}
.plan-stat strong { font-family: var(--m); font-weight: 700; color: var(--g900); font-size: 13px; }
.plan-stat-rate { font: 600 10.5px var(--m); color: var(--g500); margin-left: auto; }
.plan-features { padding-top: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--g700); line-height: 1.5; }
.plan-feat { display: flex; align-items: flex-start; gap: 7px; }
.plan-feat i { width: 13px; height: 13px; color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.plan-feat.no i { color: var(--g300); }
.plan-feat.no { color: var(--g500); }
.plan-feat.soon i { color: var(--info); }
.plan-feat.soon { color: var(--g600); }
.plan-feat.soon .badge-soon {
  font: 700 8.5px var(--m); background: var(--info-wash); color: var(--info);
  padding: 1px 6px; border-radius: 9999px;
  text-transform: uppercase; letter-spacing: .06em; margin-left: 2px;
}
.plan-feat strong { color: var(--g900); font-weight: 600; }
.plan-cta {
  margin-top: 10px; padding: 9px 14px; border-radius: 8px;
  font: 700 12px var(--f); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all .2s; border: 1px solid transparent; cursor: pointer;
}
.plan-cta i { width: 13px; height: 13px; }
.plan-cta.upgrade { background: var(--brand); color: #fff; }
.plan-cta.upgrade:hover { background: var(--brand-dk); }
.plan-cta.downgrade { background: var(--w); color: var(--g700); border-color: var(--g300); }
.plan-cta.downgrade:hover { background: var(--g50); }
.plan-cta.current { background: var(--g100); color: var(--g600); cursor: default; font-weight: 600; }

.ent {
  margin: 0 28px 18px; padding: 16px 20px;
  background: linear-gradient(135deg, var(--g900) 0%, #1f3838 100%);
  border-radius: 12px;
  display: flex; align-items: center; gap: 18px;
  color: rgba(255,255,255,.92); flex-wrap: wrap;
}
.ent-info { flex: 1; min-width: 240px; }
.ent-name { font-size: 13px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.ent-name i { width: 14px; height: 14px; color: var(--brand-lt); }
.ent-d { font-size: 11.5px; color: rgba(255,255,255,.72); line-height: 1.55; }
.ent-d strong { color: #fff; font-weight: 600; }
.ent-cta {
  padding: 9px 16px; background: var(--w); color: var(--g900);
  border-radius: 8px; font: 700 12px var(--f);
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  transition: all .2s; cursor: pointer; text-decoration: none;
}
.ent-cta:hover { background: var(--g100); }
.ent-cta i { width: 13px; height: 13px; }

.m-foot {
  padding: 14px 28px; border-top: 1px solid var(--g150);
  background: var(--g50);
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--g500); flex-wrap: wrap;
}
.m-foot a { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.m-foot a i { width: 12px; height: 12px; }
.m-foot .right { margin-left: auto; display: flex; gap: 14px; }
.m-foot button.cancel-link {
  color: var(--g500); font-size: 12px; background: none; border: none;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.m-foot button.cancel-link:hover { color: var(--err); }

/* --- Modal confirm-view (upgrade / cancel confirm) ------------------------ */

.confirm { padding: 24px 28px 18px; }
.confirm-back {
  font: 600 11.5px var(--f); color: var(--g500);
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 16px; cursor: pointer; transition: color .2s;
  background: none; border: none; padding: 0;
}
.confirm-back:hover { color: var(--brand); }
.confirm-back i { width: 13px; height: 13px; }

.confirm-summary {
  background: var(--g50); border: 1px solid var(--g150); border-radius: 12px;
  padding: 20px 22px; margin-bottom: 18px;
}
.confirm-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--g200);
  font-size: 13px;
}
.confirm-row:last-child { border-bottom: none; }
.confirm-row .label { font: 600 11px var(--m); color: var(--g500); text-transform: uppercase; letter-spacing: .06em; }
.confirm-row .value { font-weight: 600; color: var(--g900); text-align: right; }
.confirm-row .value .meta { display: block; font-size: 11px; font-weight: 500; color: var(--g500); margin-top: 2px; }
.confirm-row .value strong { font-family: var(--m); font-weight: 700; color: var(--g900); }
.confirm-row.charge { margin-top: 10px; padding-top: 14px; border-top: 2px solid var(--g300); border-bottom: none; font-size: 14px; }
.confirm-row.charge .value { font-family: var(--m); font-weight: 700; font-size: 18px; color: var(--g900); }
.confirm-row.charge .value strong { color: var(--ok); }

.confirm-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.cp { padding: 14px 16px; border-radius: 12px; border: 1px solid; background: var(--w); }
.cp.stays { border-color: rgba(16,185,129,.25); background: var(--ok-wash); }
.cp.goes { border-color: rgba(239,68,68,.25); background: var(--err-wash); }
.cp-h { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.cp.stays .cp-h { color: #047857; }
.cp.goes .cp-h { color: #B91C1C; }
.cp-h i { width: 14px; height: 14px; }
.cp ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--g700); line-height: 1.5; padding: 0; margin: 0; }
.cp li { display: flex; align-items: flex-start; gap: 7px; }
.cp li i { width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; }
.cp.stays li i { color: var(--ok); }
.cp.goes li i { color: var(--err); }
.cp li strong { color: var(--g900); font-weight: 600; }

.confirm-actions {
  padding: 16px 28px 22px;
  border-top: 1px solid var(--g150);
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; background: var(--g50);
}
.confirm-actions-info { font-size: 11.5px; color: var(--g500); display: flex; align-items: center; gap: 6px; }
.confirm-actions-info i { width: 13px; height: 13px; }
.confirm-actions-buttons { display: flex; gap: 8px; margin-left: auto; }

/* Cancel-flow specific */
.cancel-h { padding: 24px 28px 0; }
.cancel-effect {
  margin: 18px 28px 18px; padding: 14px 18px;
  background: var(--warn-wash); border: 1px solid rgba(245,158,11,.25);
  border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: #92400E; flex-wrap: wrap;
}
.cancel-effect i { width: 14px; height: 14px; color: #B45309; }
.cancel-effect strong { color: var(--g900); font-weight: 600; }

@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr; gap: 10px; }
  .confirm-panels { grid-template-columns: 1fr; }
  .sub-modal-backdrop { padding: 12px; }
  .m-h, .founder, .plans, .ent, .m-foot, .confirm, .confirm-actions { padding-left: 18px; padding-right: 18px; }
}