/* ═══════════════════════════════════════════════════════════════
   OHR POLISH — Premium motion, shadows, typography refinements
   Add <link rel="stylesheet" href="ohr-polish.css"> to every page
   ═══════════════════════════════════════════════════════════════ */

/* ── PREMIUM MOTION & SHADOW TOKENS ── */
:root {
  /* Easing curves */
  --ease-out-smooth:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decel:       cubic-bezier(0, 0, 0.2, 1);

  /* Duration scale */
  --dur-instant: 80ms;
  --dur-fast:   160ms;
  --dur-med:    280ms;
  --dur-slow:   420ms;
  --dur-reveal: 640ms;

  /* Layered, warm shadows (replaces flat single-layer) */
  --shadow-xs:    0 1px 2px rgba(26,26,26,.04);
  --shadow-sm:    0 1px 3px rgba(26,26,26,.05), 0 1px 2px rgba(26,26,26,.03);
  --shadow-md:    0 4px 16px rgba(26,26,26,.06), 0 2px 6px rgba(26,26,26,.04),
                  0 0 0 1px rgba(26,26,26,.02);
  --shadow-lg:    0 16px 40px rgba(26,26,26,.08), 0 6px 12px rgba(26,26,26,.05),
                  0 0 0 1px rgba(26,26,26,.02);
  --shadow-xl:    0 28px 64px rgba(26,26,26,.10), 0 10px 24px rgba(26,26,26,.06),
                  0 0 0 1px rgba(26,26,26,.02);
  --shadow-hover: 0 8px 28px rgba(26,26,26,.09), 0 3px 8px rgba(26,26,26,.05),
                  0 0 0 1px rgba(26,26,26,.02);

  /* Colored shadows for premium elements */
  --shadow-red:   0 8px 28px rgba(193,39,45,.14), 0 2px 8px rgba(193,39,45,.07);
  --shadow-gold:  0 8px 28px rgba(212,168,75,.12), 0 2px 8px rgba(212,168,75,.06);

  /* Premium gradients */
  --gradient-paper-v: linear-gradient(180deg, #FFFFFF 0%, #F4F0E8 100%);
  --gradient-red:     linear-gradient(135deg, #C1272D 0%, #A8212A 100%);
  --gradient-gold:    linear-gradient(135deg, #D4A84B 0%, #B8922E 100%);
  --gradient-dark:    linear-gradient(160deg, #0A0A0A 0%, #181818 60%, #1E1A16 100%);

  /* Safety-net tokens — some dashboard inline styles reference bare
     var(--radius) and var(--ink-ghost); without these they resolve to
     nothing (square corners, inherited color). Defined here so every
     page gets them. */
  --radius: 4px;
  --ink-ghost: #B0ACA4;

  /* Semantic delta palette — the muted up/down/cool/steady/neutral set used
     for deltas, signal dots, and small status marks (standardization Phase 5).
     One definition instead of ~60 scattered literals; identical in both
     themes today, tunable centrally if dark ever needs a contrast lift. */
  --delta-up: #4CAF82;
  --delta-dn: #E07070;
  --delta-cool: #E8A040;
  --delta-steady: #7BAFD4;
  --delta-neu: #C9933A;
}
html[data-theme="dark"] {
  --ink-ghost: #6A675F;
}

/* ── SECTION HEADER BASE — shared .sec-div family ──
   Canonical definition for the section-divider header used on all
   dashboards. Pro and Elite also declare these in-page; :where() keeps
   these rules at zero specificity so any in-page declaration wins.
   Pages without their own copy (the Free dashboard) inherit the
   standard from here. */
:where(.sec-div){display:flex;align-items:center;gap:14px;margin:40px 0 20px;}
:where(.sec-label){font-family:'Source Serif 4',serif;font-size:22px;font-weight:600;letter-spacing:.02em;color:var(--red,#C1272D);flex-shrink:0;}
:where(.sec-line){flex:1;height:1px;background:var(--rule,#E4E0D8);}
:where(.sec-badge){font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;background:rgba(193,39,45,.08);color:var(--red,#C1272D);border:1px solid rgba(193,39,45,.2);flex-shrink:0;border-radius:var(--radius-sm,4px);}
:where(.sec-note){font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint,#666);flex-shrink:0;}
:where(.sec-usage){font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-style:italic;color:var(--ink-lt,#555);line-height:1.5;margin:-8px 0 20px;padding-left:2px;max-width:780px;}
:where(.sec-usage)::before{content:"";display:inline-block;width:14px;height:1px;background:var(--gold,#D4A84B);vertical-align:middle;margin-right:10px;opacity:.7;}

/* ── SHARED CONTROLS — scope reset button + ZIP input ──
   One spec for the "Metro" reset button and the per-section ZIP input
   that ride nearly every dashboard section. Replaces ~20 hand-rolled
   inline variants (standardization Phase 3). Ink fill + token white
   text inverts correctly in dark mode, same as .sal-btn always did.
   --go is the paired red "Go" submit next to a ZIP input (Elite
   Luxury Spec + Rental). */
.ohr-metro-btn{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;background:var(--ink,#1A1A1A);color:var(--white,#FFFFFF);border:none;border-radius:var(--radius-sm,4px);cursor:pointer;flex-shrink:0;transition:background .15s;}
.ohr-metro-btn:hover{background:var(--red,#C1272D);}
.ohr-metro-btn--go{background:var(--red,#C1272D);}
.ohr-metro-btn--go:hover{background:var(--ink,#1A1A1A);}
.ohr-zip-input{font-family:'IBM Plex Mono',monospace;font-size:11px;padding:6px 10px;border:1px solid var(--rule,#CCC8BE);border-radius:var(--radius-sm,4px);background:var(--white,#FFFFFF);color:var(--ink,#1A1A1A);width:110px;}
.ohr-zip-input::placeholder{color:var(--ink-faint,#888);}

/* ── CARD TITLE — one class for the card-title role ──
   Source Serif 16/600 ink (standardization Phase 4). Red stays reserved
   for .sec-label and accent words; card titles are always ink so the
   red-section-label → ink-card-title hierarchy reads in one glance. */
.ohr-card-title{font-family:'Source Serif 4',serif;font-size:16px;font-weight:600;color:var(--ink,#1A1A1A);}

/* ── SITE-WIDE TYPOGRAPHY BASELINE ── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Source Serif 4 optical sizing — uses the built-in opsz axis */
.hero-h1, .sec-h, .bio-h, .final-h, .welcome-h,
.tier-name, .sig-headline, .locked-hd-t, .kpi-hd-t,
.ctx-hd-t, .pc-hd-t, .modal-h, .un-t, .quiz-bubble-text {
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Tighter tracking on large headings */
.hero-h1  { letter-spacing: -0.03em !important; line-height: 1.04 !important; }
.sec-h    { letter-spacing: -0.025em !important; line-height: 1.08 !important; }
.welcome-h { letter-spacing: -0.02em !important; line-height: 1.1 !important; }
.bio-h, .final-h { letter-spacing: -0.025em !important; }

/* Better leading on body copy */
.hero-sub, .sec-sub, .welcome-d, .who-d, .how-d, .un-d, .sig-summary {
  line-height: 1.78 !important;
}

/* Mono labels — refined tracking */
.sec-ey, .hero-eyebrow, .logo-tag, .kpi-l, .sig-period,
.welcome-ey, .cond-ey, .un-ey, .ctx-item-label {
  letter-spacing: 0.20em !important;
}

/* Tabular numerals on all data values */
.kpi-v, .stat-v, .hs-v, .cond-v, .tier-price-amt, .pm-v,
.sb-v, .bc-v, .prop-value-big, .prop-stat-v {
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

/* ── HEADER SCROLL SHADOW ── */
header {
  transition: box-shadow var(--dur-med) var(--ease-out-smooth) !important;
}
header.is-scrolled {
  box-shadow: 0 2px 16px rgba(26,26,26,.06), 0 1px 0 rgba(26,26,26,.04) !important;
}
/* Fix: some pages hardcode white header in dark mode */
html[data-theme="dark"] header {
  background: #000000 !important;
}

/* Dark mode logo — swapped by ohr-motion.js (light↔dark SVG) */

/* ── THEME TOGGLE — Pill switch ── */
.theme-toggle {
  width: 56px !important;
  height: 28px !important;
  border-radius: 14px !important;
  border: 1px solid #BBB7AE !important;
  background: #E8E4DC !important;
  position: relative !important;
  padding: 0 !important;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  overflow: hidden !important;
}
.theme-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}
.theme-toggle .theme-icon {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  transition: opacity 0.3s, color 0.3s;
}
.theme-toggle .theme-icon.sun {
  margin-left: 5px;
  display: block !important;
}
.theme-toggle .theme-icon.moon {
  margin-right: 5px;
  display: block !important;
}
/* Light mode: knob on left covering sun, moon visible on right */
html:not([data-theme="dark"]) .theme-toggle .theme-icon.sun { opacity: 0; }
html:not([data-theme="dark"]) .theme-toggle .theme-icon.moon {
  opacity: 1;
  color: #444 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
  stroke-width: 2px;
}

/* Dark mode: knob slides right covering moon, sun visible on left */
html[data-theme="dark"] .theme-toggle {
  background: #2A2A2A !important;
  border-color: #444 !important;
  color: #D4A84B !important;
}
html[data-theme="dark"] .theme-toggle::after {
  transform: translateX(28px);
  background: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
html[data-theme="dark"] .theme-toggle .theme-icon.sun {
  opacity: 1;
  color: #D4A84B !important;
  filter: drop-shadow(0 0 3px rgba(212,168,75,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.3));
  stroke-width: 2px;
}
html[data-theme="dark"] .theme-toggle .theme-icon.moon { opacity: 0; }

.theme-toggle:hover {
  border-color: var(--ink-lt) !important;
}

/* ── TICKER REFINEMENTS ── */
.ticker {
  background: linear-gradient(90deg, #080808 0%, #0D0D0D 100%) !important;
}
.ticker::before { width: 80px !important; }
.ticker::after  { width: 80px !important; }
.tick-item {
  transition: color var(--dur-fast) var(--ease-out-smooth);
}

/* ── CARD HOVER — MICRO-LIFT ── */
/* Landing cards */
.how-card, .who-card, .proof-card, .price-card, .hero-path,
/* Dashboard cards */
.kpi-block, .context-block, .locked-section,
.personal-card, .prop-detail-card, .prop-cta-row,
/* Membership cards */
.tier, .faq {
  transition:
    box-shadow var(--dur-med) var(--ease-out-smooth),
    transform   var(--dur-med) var(--ease-spring),
    border-color var(--dur-fast) var(--ease-out-smooth) !important;
  will-change: transform, box-shadow;
}

.how-card:hover, .who-card:hover, .proof-card:hover,
.price-card:hover, .hero-path:hover {
  transform: translateY(-4px) translateZ(0) !important;
  box-shadow: var(--shadow-hover) !important;
}

.personal-card:hover, .prop-detail-card:hover {
  transform: translateY(-3px) translateZ(0) !important;
  box-shadow: var(--shadow-hover) !important;
}

.tier:hover {
  transform: translateY(-5px) translateZ(0) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Tier-specific hover glows */
.tier.featured:hover {
  box-shadow:
    0 16px 40px rgba(193,39,45,.12),
    0 6px 12px rgba(193,39,45,.07),
    0 0 0 1px rgba(193,39,45,.08) !important;
}

/* Active press state */
.how-card:active, .who-card:active, .hero-path:active,
.personal-card:active, .tier:active {
  transform: translateY(-1px) scale(0.99) translateZ(0) !important;
  transition-duration: var(--dur-instant) !important;
}

/* ── BUTTON POLISH ── */
/* Red primary buttons — gradient + spring lift */
.hdr-upgrade, .upg-banner-cta, .sig-lock-btn, .un-btn-pro,
.modal-btn-pro, .prop-cta-btn, .quiz-nav-next, .quiz-consult-btn,
.lock-cta.red {
  background: var(--gradient-red) !important;
  transition:
    transform   var(--dur-med) var(--ease-spring),
    box-shadow  var(--dur-med) var(--ease-out-smooth),
    background  var(--dur-fast) var(--ease-out-smooth) !important;
  position: relative;
  overflow: hidden;
}

.hdr-upgrade:hover, .sig-lock-btn:hover, .un-btn-pro:hover,
.modal-btn-pro:hover, .prop-cta-btn:hover, .quiz-nav-next:hover,
.quiz-consult-btn:hover, .lock-cta.red:hover {
  transform: translateY(-2px) translateZ(0) !important;
  box-shadow: var(--shadow-red) !important;
  background: var(--gradient-red) !important;
}

/* Press state */
.hdr-upgrade:active, .sig-lock-btn:active, .un-btn-pro:active,
.prop-cta-btn:active, .quiz-nav-next:active {
  transform: translateY(0) scale(0.985) translateZ(0) !important;
  transition-duration: var(--dur-instant) !important;
}

/* Ripple pseudo-element — JS adds/removes .rippling */
.hdr-upgrade::after, .sig-lock-btn::after, .un-btn-pro::after,
.modal-btn-pro::after, .prop-cta-btn::after, .quiz-nav-next::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.18);
  transform: scale(0);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--ease-out-smooth), opacity 0.45s;
}
.hdr-upgrade.rippling::after, .sig-lock-btn.rippling::after,
.un-btn-pro.rippling::after, .modal-btn-pro.rippling::after,
.prop-cta-btn.rippling::after, .quiz-nav-next.rippling::after {
  transform: scale(2.5);
  opacity: 0;
  transition: transform 0.5s var(--ease-out-smooth), opacity 0.5s;
}

/* ── SCROLL REVEAL SYSTEM ── */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

[data-reveal="up"] {
  transform: translateY(24px);
  transition:
    opacity   var(--dur-reveal) var(--ease-decel),
    transform var(--dur-reveal) var(--ease-out-smooth);
}

[data-reveal="fade"] {
  transition: opacity var(--dur-reveal) var(--ease-decel);
}

[data-reveal="left"] {
  transform: translateX(-20px);
  transition:
    opacity   var(--dur-reveal) var(--ease-out-smooth),
    transform var(--dur-reveal) var(--ease-out-smooth);
}

[data-reveal="right"] {
  transform: translateX(20px);
  transition:
    opacity   var(--dur-reveal) var(--ease-out-smooth),
    transform var(--dur-reveal) var(--ease-out-smooth);
}

[data-reveal="scale"] {
  transform: scale(0.96);
  transition:
    opacity   var(--dur-reveal) var(--ease-out-smooth),
    transform var(--dur-reveal) var(--ease-out-smooth);
}

/* Visible state */
[data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger delays */
[data-delay="1"] { transition-delay:  70ms; }
[data-delay="2"] { transition-delay: 140ms; }
[data-delay="3"] { transition-delay: 210ms; }
[data-delay="4"] { transition-delay: 280ms; }
[data-delay="5"] { transition-delay: 350ms; }
[data-delay="6"] { transition-delay: 430ms; }

/* Legacy .fade-in backward compat (landing page) */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   0.6s var(--ease-decel),
    transform 0.6s var(--ease-out-smooth);
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ── PROGRESS BARS — scroll-triggered ── */
.cond-bar-wrap {
  height: 5px !important;
  border-radius: 3px !important;
}
.cond-bar {
  width: 0 !important;     /* JS sets inline width on scroll entry */
  border-radius: 3px !important;
  transition: width 1.1s var(--ease-out-smooth) 300ms !important;
}
/* Membership sample bars */
.samp-bar-fill {
  transition: width 1.1s var(--ease-out-smooth) 300ms !important;
}

/* ── MODAL ENTRANCE ── */
@keyframes ohrModalEnter {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.modal, .quiz-modal {
  animation: ohrModalEnter var(--dur-slow) var(--ease-out-smooth) both !important;
}

/* ── WELCOME ROW ── */
.welcome {
  background: linear-gradient(180deg, var(--white) 0%, var(--paper-mid) 100%) !important;
}

/* ── GRADIENT ACCENT BARS ── */
.acc-agpro, .tier.featured .tier-accent {
  background: var(--gradient-red) !important;
}
.acc-elite {
  background: var(--gradient-gold) !important;
}

/* ── DARK HERO GRADIENT ── */
.mem-hero, .hero.dark-hero {
  background: var(--gradient-dark) !important;
}

/* ── SITE-WIDE BACKGROUND TEXTURE ── */
/* Radial vignette — content floats in a natural spotlight */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 40%,
    transparent 0%,
    rgba(26, 26, 26, 0.03) 60%,
    rgba(26, 26, 26, 0.07) 100%
  );
  pointer-events: none;
  z-index: 9998;
}

/* ── SECTION GRADIENT SHIFTS ── */
/* Alternate sections breathe between warm cream and cooler white */
.section:nth-child(odd),
.who-section, .bio-section,
.pricing-section {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-mid) 100%);
}
.section:nth-child(even),
.proof-section {
  background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
}

/* Dashboard sections — subtle warm/cool alternation */
.snap-grid       { background: linear-gradient(180deg, transparent 0%, rgba(244,240,232,.3) 100%); border-radius: var(--radius-md, 8px); }
.condition-row   { background: var(--rule, #E8E4DC); }
.context-block   { background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF5 100%); }

/* ── SUBTLE NOISE TEXTURE (light sections) ── */
.proof-section::before, .who-section::before,
.bio-section::before, .stats-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.018;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}
.proof-section > *, .who-section > *,
.bio-section > *, .stats-bar > * {
  position: relative;
  z-index: 1;
}

/* Dark card noise */
.signal-card::before, .upgrade-nudge::before, .modal-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}
.signal-card > *, .upgrade-nudge > *, .modal-hero > * {
  position: relative;
  z-index: 1;
}

/* ── PREMIUM FOCUS RINGS ── */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ═══════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* Vignette — off in dark mode, dark backgrounds provide natural depth */
html[data-theme="dark"] body::before {
  display: none;
}

/* KPI shimmer — softer on dark backgrounds */
html[data-theme="dark"] .kpi::after,
html[data-theme="dark"] .m-card::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
}

/* Gauge glow — stronger on dark for visibility */
html[data-theme="dark"] .sig-gauge.is-filled {
  animation-name: ohrGaugePulseDark;
}
@keyframes ohrGaugePulseDark {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(224,112,112,.18)); }
  50%      { filter: drop-shadow(0 0 24px rgba(224,112,112,.35)); }
}

/* Section gradient shifts — dark variants */
html[data-theme="dark"] .section:nth-child(odd),
html[data-theme="dark"] .who-section,
html[data-theme="dark"] .bio-section,
html[data-theme="dark"] .pricing-section {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
}
html[data-theme="dark"] .section:nth-child(even),
html[data-theme="dark"] .proof-section {
  background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
}

/* Dashboard section backgrounds — dark variants */
html[data-theme="dark"] .snap-grid {
  background: linear-gradient(180deg, transparent 0%, rgba(28,27,26,.3) 100%);
}
html[data-theme="dark"] .context-block {
  background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
}

/* Noise textures — slightly stronger on dark for visibility */
html[data-theme="dark"] .proof-section::before,
html[data-theme="dark"] .who-section::before,
html[data-theme="dark"] .bio-section::before,
html[data-theme="dark"] .stats-bar::before {
  opacity: 0.03;
  mix-blend-mode: overlay;
}

/* Header greeting — boost brightness on dark */
html[data-theme="dark"] .hdr-greeting {
  color: #F2F0EC !important;
}
/* Fix: header plan badge, user, separator hardcoded dark in inline styles */
html[data-theme="dark"] header .hdr-plan {
  color: var(--red) !important;
  background: rgba(193,39,45,.15) !important;
  border-color: rgba(193,39,45,.3) !important;
}
html[data-theme="dark"] header .hdr-user {
  color: #D4D0CA !important;
}
html[data-theme="dark"] header .hdr-sep {
  border-color: rgba(255,255,255,.1) !important;
}
html[data-theme="dark"] header .theme-toggle {
  color: inherit !important;
  border-color: #444 !important;
}

/* Section divider line — brighter gradient on dark */
html[data-theme="dark"] .sec-line {
  background: linear-gradient(90deg, var(--rule) 0%, transparent 100%) !important;
}

/* Card hover shadow — deeper on dark */
html[data-theme="dark"] .kpi:hover,
html[data-theme="dark"] .m-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
}


/* ═══════════════════════════════════════════════════════════════
   HERO ENTRANCE — Staggered, tasteful reveal
   ═══════════════════════════════════════════════════════════════ */

/* Landing hero — staggered entrance */
.hero .hero-eyebrow,
.hero .hero-h1,
.hero .hero-sub,
.hero .hero-paths,
.hero .hero-trust,
.hero .hero-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-decel),
              transform 0.7s var(--ease-out-smooth);
}
.hero.is-entered .hero-eyebrow { opacity: 1; transform: none; transition-delay: 0s; }
.hero.is-entered .hero-h1      { opacity: 1; transform: none; transition-delay: 0.1s; }
.hero.is-entered .hero-sub     { opacity: 1; transform: none; transition-delay: 0.2s; }
.hero.is-entered .hero-paths   { opacity: 1; transform: none; transition-delay: 0.35s; }
.hero.is-entered .hero-trust   { opacity: 1; transform: none; transition-delay: 0.5s; }
.hero.is-entered .hero-card    { opacity: 1; transform: none; transition-delay: 0.25s; }

/* Membership hero — staggered entrance */
.hero .hero-ey,
.hero .hero-rule,
.hero .hero-stats {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-decel),
              transform 0.6s var(--ease-out-smooth);
}
.hero.is-entered .hero-ey    { opacity: 1; transform: none; transition-delay: 0s; }
.hero.is-entered .hero-rule  { opacity: 1; transform: none; transition-delay: 0.15s; }
.hero.is-entered .hero-stats { opacity: 1; transform: none; transition-delay: 0.3s; }

/* Dashboard welcome — NO entrance animation, content must be immediately visible */


/* ═══════════════════════════════════════════════════════════════
   WOW FACTORS — Gauge, Section Dividers, KPI Cards
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. HAUS SIGNAL GAUGE — ALIVE TREATMENT ── */

/* @property for animatable conic-gradient */
@property --gauge-pct {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.sig-gauge-fill {
  --gauge-pct: 0%;
  background: conic-gradient(
    from 0.75turn,
    var(--gauge-color, #E07070) 0%,
    var(--gauge-color, #E07070) var(--gauge-pct),
    transparent var(--gauge-pct)
  ) !important;
  transition: --gauge-pct 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ohrGaugePulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(224,112,112,.12)); }
  50%      { filter: drop-shadow(0 0 20px rgba(224,112,112,.28)); }
}
.sig-gauge.is-filled {
  animation: ohrGaugePulse 12s ease-in-out infinite;
}

@keyframes ohrScorePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.sig-gauge-score.counted {
  animation: ohrScorePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ── 2. SECTION DIVIDERS — ANIMATED LINE DRAW ── */

.sec-line {
  background: linear-gradient(90deg, var(--rule) 0%, transparent 100%) !important;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.sec-div.is-visible .sec-line {
  transform: scaleX(1);
}

/* Staggered entrance — label first, then line, then badge */
.sec-div .sec-label {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s var(--ease-decel),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sec-div.is-visible .sec-label {
  opacity: 1;
  transform: none;
}

.sec-div .sec-badge,
.sec-div .sec-note {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.5s var(--ease-decel) 0.4s,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
.sec-div.is-visible .sec-badge,
.sec-div.is-visible .sec-note {
  opacity: 1;
  transform: none;
}


/* ── 3. KPI CARDS — SHIMMER + HOVER LIFT + ACCENT GROW ── */

/* Shimmer sweep */
@keyframes ohrShimmer {
  0%   { left: -100%; }
  100% { left: 100%; }
}

.kpi, .m-card {
  overflow: hidden;
}

.kpi::after, .m-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60%;
  left: -100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.kpi.shimmer::after, .m-card.shimmer::after {
  animation: ohrShimmer 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Enhanced hover — lift + shadow */
.kpi, .m-card {
  transition: background var(--dur-fast, 160ms) ease,
              transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease !important;
}
.kpi:hover, .m-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;
  z-index: 2;
}

/* Accent bar grows on entry */
.kpi-accent {
  height: 0 !important;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s !important;
}
.kpi.is-entered .kpi-accent {
  height: 100% !important;
}

/* Condition bar upgrade — thicker, rounded, gradient */
.cond-bar-wrap {
  height: 6px !important;
  border-radius: 3px !important;
}
.cond-bar {
  border-radius: 3px !important;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s !important;
}
.cond-bar.up  { background: linear-gradient(90deg, var(--up), #2d9b5a) !important; }
.cond-bar.dn  { background: linear-gradient(90deg, var(--red), #e05555) !important; }
.cond-bar.neu { background: linear-gradient(90deg, var(--neu), #a08430) !important; }

/* BSB balance bar upgrade */
.bsb-bar {
  height: 10px !important;
  border-radius: 5px !important;
}
.bsb-bar-buyer, .bsb-bar-seller {
  transition: flex-basis 1s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER — Branded Signature Moment
   ═══════════════════════════════════════════════════════════════ */

/* Warm gradient background + noise texture */
footer {
  background: linear-gradient(180deg, #1A1A1A 0%, #1E1B17 70%, #211E18 100%) !important;
  border-top: none !important;
  position: relative !important;
}
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}
footer > * {
  position: relative;
  z-index: 1;
}

/* Gradient top accent line (red → gold → transparent) */
footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red) 0%, var(--gold) 35%, transparent 80%);
  z-index: 2;
}

/* Footer link sliding underline */
.ft-col a {
  position: relative !important;
  transition: color var(--dur-med, 280ms) cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.ft-col a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med, 280ms) cubic-bezier(0.16, 1, 0.3, 1);
}
.ft-col a:hover::after {
  transform: scaleX(1);
}
.ft-col a:hover {
  color: rgba(255,255,255,.85) !important;
}

/* Column header gold accent */
.ft-col-h {
  position: relative !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
  letter-spacing: .18em !important;
}
.ft-col-h::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
  opacity: 0.5;
}

/* Copyright line — more weight */
.ft-cp {
  font-size: 11px !important;
  color: rgba(255,255,255,.32) !important;
  letter-spacing: .06em !important;
}
.ft-bot {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding-top: 24px !important;
}

/* Footer dark mode */
html[data-theme="dark"] footer {
  background: linear-gradient(180deg, #0E0E0D 0%, #141311 70%, #171512 100%) !important;
}
/* Dashboard page-footer: matches header — light bg in light mode, dark in dark */
.page-footer {
  background: var(--white) !important;
  border-top: 1px solid var(--rule) !important;
  padding: 24px !important;
  border-radius: var(--radius-md, 8px) !important;
}
.page-footer, .page-footer .pf-left {
  color: var(--ink-lt) !important;
}
.page-footer a {
  color: var(--ink-lt) !important;
}
.page-footer a:hover {
  color: var(--ink) !important;
}
html[data-theme="dark"] .page-footer {
  background: #000000 !important;
  border-top-color: rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] .page-footer,
html[data-theme="dark"] .page-footer .pf-left,
html[data-theme="dark"] .page-footer a {
  color: rgba(255,255,255,.5) !important;
}
html[data-theme="dark"] .page-footer a:hover {
  color: rgba(255,255,255,.8) !important;
}
/* Footer logo: CSS-only light/dark swap using dual images */
.ft-logo-dark { display: none; }
.ft-logo-light { display: block; }
html[data-theme="dark"] .page-footer .ft-logo-dark { display: block; }
html[data-theme="dark"] .page-footer .ft-logo-light { display: none; }
html[data-theme="dark"] footer::after {
  opacity: 0.7;
}


/* ═══════════════════════════════════════════════════════════════
   READABILITY — Contrast & Font Size Fixes
   ═══════════════════════════════════════════════════════════════ */

/* ── LIGHT MODE: faint mono labels need darker color ── */
/* #888 on #FAFAF5 = 3.39:1 — fails WCAG AA for small text (needs 4.5:1) */
/* Fix: darken to #666 = 5.74:1 on #FAFAF5 */
.welcome-meta, .kpi-l, .kpi-c, .cond-ey, .ctx-item-label,
.kpi-hd-s, .sig-period, .ohr-insight-label,
.wb-ey, .w-ey, .welcome-ey, .m-l, .sec-note,
.hero-eyebrow, .stat-l, .proof-attr, .bio-cred-item {
  color: #666 !important;
}
html[data-theme="dark"] .welcome-meta,
html[data-theme="dark"] .kpi-l,
html[data-theme="dark"] .kpi-c,
html[data-theme="dark"] .cond-ey,
html[data-theme="dark"] .ctx-item-label,
html[data-theme="dark"] .kpi-hd-s,
html[data-theme="dark"] .sig-period,
html[data-theme="dark"] .ohr-insight-label,
html[data-theme="dark"] .wb-ey,
html[data-theme="dark"] .w-ey,
html[data-theme="dark"] .welcome-ey,
html[data-theme="dark"] .m-l,
html[data-theme="dark"] .sec-note,
html[data-theme="dark"] .hero-eyebrow,
html[data-theme="dark"] .stat-l,
html[data-theme="dark"] .proof-attr,
html[data-theme="dark"] .bio-cred-item {
  color: #B0ACA6 !important;
}

/* ── DARK MODE: primary text not flipping to light ── */
/* These use var(--ink) which should flip but inline styles may override */
html[data-theme="dark"] .welcome-h,
html[data-theme="dark"] .wb-h,
html[data-theme="dark"] .w-h {
  color: #F2F0EC !important;
  font-weight: 400 !important;
}
html[data-theme="dark"] .welcome-d,
html[data-theme="dark"] .wb-sub,
html[data-theme="dark"] .w-sub {
  color: #D4D0CA !important;
}
html[data-theme="dark"] .kpi-v,
html[data-theme="dark"] .m-v,
html[data-theme="dark"] .cond-v {
  color: #F2F0EC !important;
}
html[data-theme="dark"] .cond-l,
html[data-theme="dark"] .ctx-item-text,
html[data-theme="dark"] .ohr-insight-text {
  color: #D4D0CA !important;
}
html[data-theme="dark"] .bsb-title,
html[data-theme="dark"] .kpi-hd-t,
html[data-theme="dark"] .ctx-hd-t {
  color: #F2F0EC !important;
}

/* ── DARK MODE: Landing page specific text ── */
html[data-theme="dark"] .stat-v,
html[data-theme="dark"] .proof-q {
  color: #F2F0EC !important;
}
html[data-theme="dark"] .how-d,
html[data-theme="dark"] .who-d,
html[data-theme="dark"] .bio-d,
html[data-theme="dark"] .price-desc,
html[data-theme="dark"] .hero-path-d {
  color: #D4D0CA !important;
}

/* ── DARK MODE: Pro/Elite specific text ── */
html[data-theme="dark"] .tp-list,
html[data-theme="dark"] .tp-list li,
html[data-theme="dark"] .changes-item,
html[data-theme="dark"] .talk-text,
html[data-theme="dark"] .ohr-insight {
  color: #D4D0CA !important;
}
/* No !important here: the html[data-theme] prefix already outranks the
   in-page .sec-badge rules, and badges that carry their own inline
   colors (Elite's "County Assessor · Not ARMLS" provenance + grey
   as-of badges) must keep them in dark mode. */
html[data-theme="dark"] .sec-badge {
  color: #E07070;
  background: rgba(224,112,112,.1);
  border-color: rgba(224,112,112,.2);
}
html[data-theme="dark"] .m-v {
  color: #F2F0EC !important;
}
html[data-theme="dark"] .m-c {
  color: #B0ACA6 !important;
}

/* ── Stress Index Traffic Light — no pulse, static glow ── */

/* ── CHART EXPAND MODAL ── */
[data-expandable] {
  cursor: zoom-in;
  transition: box-shadow 0.2s, transform 0.2s !important;
}
[data-expandable]:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
  transform: translateY(-1px);
}
#ohr-expand-modal {
  animation: ohrModalFade 0.2s ease;
}
@keyframes ohrModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
#ohr-expand-content {
  animation: ohrModalScale 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ohrModalScale {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
html[data-theme="dark"] #ohr-expand-content {
  background: var(--white) !important;
}

/* ── DARK MODE: semantic colors need brighter variants ── */
/* Green (#1A6B3A) on dark = 2.68:1 — needs 4.5:1 for small text */
html[data-theme="dark"] .kpi-d.up,
html[data-theme="dark"] .m-d.up {
  color: #4CAF82 !important;
}
html[data-theme="dark"] .kpi-d.dn,
html[data-theme="dark"] .m-d.dn {
  color: #E07070 !important;
}
html[data-theme="dark"] .kpi-d.neu,
html[data-theme="dark"] .m-d.neu {
  color: #C4A84B !important;
}

/* ── DARK MODE: header greeting ── */
html[data-theme="dark"] .hdr-greeting {
  color: #D4D0CA !important;
}

/* ── DARK MODE: dashboard footer text ── */
html[data-theme="dark"] .page-footer,
html[data-theme="dark"] .page-footer .pf-left,
html[data-theme="dark"] .page-footer a.pf-link {
  color: rgba(255,255,255,.55) !important;
}
html[data-theme="dark"] .page-footer a.pf-link:hover {
  color: rgba(255,255,255,.85) !important;
}

/* ── DARK MODE: Stress Index badge text ── */
html[data-theme="dark"] #osi-score {
  color: #4CAF82 !important;
}
html[data-theme="dark"] #osi-label {
  color: #4CAF82 !important;
}
html[data-theme="dark"] #osi-context {
  color: #B0ACA6 !important;
}

/* ── DARK MODE: accent bar colors (brighter for visibility) ── */
html[data-theme="dark"] .acc-up { background: #4CAF82 !important; }
html[data-theme="dark"] .acc-dn { background: #E07070 !important; }
html[data-theme="dark"] .acc-neu { background: #C4A84B !important; }

/* ── FONT SIZE: minimum 11px for any readable text ── */
/* .kpi-c at 10px/300 is too small — bump to 11px */
.kpi-c {
  font-size: 11px !important;
  font-weight: 400 !important;
}


/* ═══════════════════════════════════════════════════════════════
   TICKER — Data Comes Alive
   ═══════════════════════════════════════════════════════════════ */

/* Wider edge fades */
.ticker::before {
  width: 100px !important;
  background: linear-gradient(to right, #080808 30%, transparent) !important;
}
.ticker::after {
  width: 100px !important;
  background: linear-gradient(to left, #0D0D0D 30%, transparent) !important;
}

/* Tick item hover treatment */
.tick-item {
  position: relative !important;
  border-right: none !important;
  transition:
    color var(--dur-fast, 160ms) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--dur-fast, 160ms) cubic-bezier(0.16, 1, 0.3, 1),
    background var(--dur-fast, 160ms) ease !important;
  border-radius: 2px;
}
.ticker:hover .tick-item:hover {
  color: rgba(255,255,255,1) !important;
  transform: scale(1.04);
  background: rgba(255,255,255,.04);
}
.ticker:hover .tick-item:hover .up {
  color: #5BC98E !important;
  filter: drop-shadow(0 0 4px rgba(76,175,130,.3));
}
.ticker:hover .tick-item:hover .dn {
  color: #F08080 !important;
  filter: drop-shadow(0 0 4px rgba(224,112,112,.3));
}

/* Gold dot separators */
.tick-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(212,168,75,.35);
  box-shadow: 0 0 6px rgba(212,168,75,.15);
}

/* Signal and insight pulse */
@keyframes ohrInsightPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.85; }
}
.tick-insight {
  animation: ohrInsightPulse 4s ease-in-out infinite;
}

@keyframes ohrSignalPulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 6px rgba(212,168,75,.25)); }
}
.tick-signal {
  animation: ohrSignalPulse 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tick-insight, .tick-signal { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   CARD BORDERS — Carved, Not Drawn
   ═══════════════════════════════════════════════════════════════ */

/* Standard cards — inset carved border + top highlight */
.kpi-block,
.context-block,
.personal-card {
  border: none !important;
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 1px 0 0 rgba(255,255,255,.04),
    var(--shadow-sm) !important;
}
.kpi-block:hover,
.context-block:hover,
.personal-card:hover {
  box-shadow:
    inset 0 0 0 1px rgba(200,196,188,1),
    inset 0 1px 0 0 rgba(255,255,255,.07),
    var(--shadow-hover) !important;
}

/* Signal card — premium dark carved + red outer ring */
.signal-card {
  border: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(193,39,45,.08),
    var(--shadow-lg) !important;
}

/* BSB card — keeps top accent, sides carved */
.bsb-card {
  border: none !important;
  border-top: 3px solid var(--ink) !important;
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 1px 0 0 rgba(255,255,255,.04),
    var(--shadow-sm) !important;
}

/* KPI grid — gradient right dividers + inset bottom dividers */
.kpi {
  border-right: none !important;
  border-bottom: none !important;
}
.kpi:not(:nth-child(4n))::before {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--rule-lt) 25%, var(--rule-lt) 75%, transparent);
  pointer-events: none;
  z-index: 0;
}
.kpi:nth-child(-n+4) {
  box-shadow: inset 0 -1px 0 0 var(--rule-lt);
}
.kpi:not(:nth-child(4n)):nth-child(-n+4) {
  box-shadow: inset 0 -1px 0 0 var(--rule-lt);
}
/* KPI hover — combine inset bottom with lift shadow */
.kpi:nth-child(-n+4):hover {
  box-shadow: inset 0 -1px 0 0 var(--rule-lt), 0 4px 12px rgba(0,0,0,.06) !important;
}

/* Condition row — gradient background */
.condition-row {
  background: linear-gradient(135deg, var(--rule) 0%, var(--rule-lt) 100%) !important;
}

/* ── SIDEBAR — Apple vitreous glass effect ── */
/* Collapsed: subtle frosted glass always on */
.side-nav {
  background: rgba(255,255,255,.45) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  border-right: 1px solid rgba(255,255,255,.25) !important;
}
/* Expanded: heavier glass */
.side-nav:hover {
  background: rgba(255,255,255,.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  border-right: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 2px 0 24px rgba(0,0,0,.06), 0 0 0 1px rgba(255,255,255,.1) !important;
}

/* Dark mode: darker tinted glass */
html[data-theme="dark"] .side-nav {
  background: rgba(20,20,19,.55) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] .side-nav:hover {
  background: rgba(20,20,19,.7) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 2px 0 24px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Dark mode sidebar — brighter icons and labels */
html[data-theme="dark"] .side-nav-item {
  color: rgba(255,255,255,.55) !important;
}
html[data-theme="dark"] .side-nav-item:hover {
  color: rgba(255,255,255,.95) !important;
}
html[data-theme="dark"] .side-nav-item.active {
  color: var(--red) !important;
}
html[data-theme="dark"] .side-nav-item .nav-label {
  color: rgba(255,255,255,.55) !important;
}
html[data-theme="dark"] .side-nav-item.active .nav-label {
  color: var(--red) !important;
}
html[data-theme="dark"] .side-nav:hover {
  background: rgba(0,0,0,.75) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}

/* Dark mode card borders — faint outer glow */
html[data-theme="dark"] .kpi-block,
html[data-theme="dark"] .context-block,
html[data-theme="dark"] .personal-card {
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 1px 0 0 rgba(255,255,255,.03),
    0 0 12px rgba(0,0,0,.2),
    0 0 0 1px rgba(255,255,255,.03) !important;
}
html[data-theme="dark"] .kpi-block:hover,
html[data-theme="dark"] .context-block:hover,
html[data-theme="dark"] .personal-card:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 0 rgba(255,255,255,.05),
    0 0 20px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.05) !important;
}
html[data-theme="dark"] .signal-card {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(193,39,45,.12),
    0 0 24px rgba(0,0,0,.3) !important;
}
html[data-theme="dark"] .bsb-card {
  box-shadow:
    inset 0 0 0 1px var(--rule),
    0 0 12px rgba(0,0,0,.2) !important;
}


/* ═══════════════════════════════════════════════════════════════
   PUBLIC DASHBOARD — Premium Locked Sections & CTAs
   ═══════════════════════════════════════════════════════════════ */

/* Locked section — carved card with premium depth */
.locked-section {
  border: none !important;
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 1px 0 0 rgba(255,255,255,.04),
    var(--shadow-md) !important;
  transition: box-shadow 0.3s ease;
}
.locked-section:hover {
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 1px 0 0 rgba(255,255,255,.06),
    var(--shadow-lg) !important;
}

/* Lock overlay — frosted glass instead of flat white */
.lock-overlay {
  background: rgba(250,250,245,.75) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.3s;
}
.locked-section:hover .lock-overlay {
  background: rgba(250,250,245,.85) !important;
}

/* Lock icon — larger, animated pulse */
.lock-ic svg {
  width: 32px !important;
  height: 32px !important;
  stroke-width: 1.2 !important;
  color: var(--red);
}
@keyframes ohrLockFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.lock-ic {
  animation: ohrLockFloat 4s ease-in-out infinite;
  margin-bottom: 8px;
}

/* Lock title — bolder */
.lock-t {
  font-family: 'Source Serif 4', serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 6px;
}

/* Lock description */
.lock-d {
  max-width: 380px;
  line-height: 1.65 !important;
}

/* Lock CTA — gradient button with glow */
.lock-cta {
  background: linear-gradient(135deg, #2E6B9E 0%, #245A87 100%) !important;
  box-shadow: 0 4px 14px rgba(46,107,158,.25) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s !important;
  font-weight: 600 !important;
}
.lock-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(46,107,158,.35) !important;
}

/* Locked badge — more premium */
.locked-badge {
  background: rgba(193,39,45,.06) !important;
  color: var(--red) !important;
  border: 1px solid rgba(193,39,45,.15) !important;
  font-weight: 500 !important;
}

/* Blur content — slightly more teaser visible */
.blur-content {
  filter: blur(4px) !important;
  opacity: .55 !important;
}

/* ── CTA Card (right side) — premium treatment ── */
.cta-card {
  background: linear-gradient(135deg, var(--white) 0%, var(--paper-mid) 100%) !important;
}
.cta-card .cta-btn {
  background: var(--gradient-red, linear-gradient(135deg, #C1272D 0%, #A8212A 100%)) !important;
  box-shadow: 0 4px 14px rgba(193,39,45,.2) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s !important;
}
.cta-card .cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(193,39,45,.3) !important;
}
.cta-card .cta-h {
  font-size: 20px !important;
}
.cta-card .cta-ic svg {
  color: var(--red);
}

/* ── Upgrade nudge (bottom CTA strip) — enhanced ── */
.upgrade-nudge {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 0 1px rgba(193,39,45,.08),
    var(--shadow-lg) !important;
}
.upgrade-nudge .un-t {
  font-size: 22px !important;
}
.upgrade-nudge .un-t em {
  color: var(--gold) !important;
}
.upgrade-nudge .un-btn-pro {
  background: var(--gradient-red, linear-gradient(135deg, #C1272D 0%, #A8212A 100%)) !important;
  box-shadow: 0 4px 14px rgba(193,39,45,.25) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s !important;
}
.upgrade-nudge .un-btn-pro:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(193,39,45,.35) !important;
}
.upgrade-nudge .un-btn-ghost:hover {
  border-color: rgba(255,255,255,.35) !important;
  color: rgba(255,255,255,.7) !important;
}

/* ── Dark mode locked sections ── */
html[data-theme="dark"] .lock-overlay {
  background: rgba(20,20,19,.8) !important;
}
html[data-theme="dark"] .locked-section:hover .lock-overlay {
  background: rgba(20,20,19,.88) !important;
}
html[data-theme="dark"] .lock-t {
  color: var(--text, #F2F0EC) !important;
}
html[data-theme="dark"] .locked-badge {
  background: rgba(193,39,45,.1) !important;
  border-color: rgba(193,39,45,.2) !important;
}
html[data-theme="dark"] .cta-card {
  background: linear-gradient(135deg, var(--white) 0%, var(--paper-deep) 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MODERN BROWSER POLISH BUNDLE (2025-04)
   text-wrap balance · @starting-style modals · Popover API
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Smart text wrapping ─────────────────────────────────── */
h1, h2, h3,
.hero-h1, .sec-h, .kpi-hd-t, .kpi-l,
.bio-h, .final-h, .welcome-h,
.hero-path-title, .modal-h, .signal-val {
  text-wrap: balance;
}
p, .hero-sub, .kpi-c, .hero-path-desc, .sec-sub {
  text-wrap: pretty;
}

/* ── 2. @starting-style modal entrances ─────────────────────── */
/* Applies to landing .ohr-modal-overlay and relocate .signup-overlay.
   The .open / .active class triggers the entrance; @starting-style
   defines the from-state so the browser interpolates on first paint. */

.ohr-modal-overlay,
.signup-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s var(--ease-out-smooth, ease-out);
}
.ohr-modal-overlay.open,
.signup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.ohr-modal,
.signup-modal {
  transform: translateY(12px) scale(.98);
  transition: transform .32s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.ohr-modal-overlay.open .ohr-modal,
.signup-overlay.active .signup-modal {
  transform: translateY(0) scale(1);
}
@starting-style {
  .ohr-modal-overlay.open { opacity: 0; }
  .signup-overlay.active { opacity: 0; }
  .ohr-modal-overlay.open .ohr-modal { transform: translateY(12px) scale(.98); }
  .signup-overlay.active .signup-modal { transform: translateY(12px) scale(.98); }
}

/* ── 3. Popover API for KPI definitions ─────────────────────── */
.kpi-l[popovertarget], .m-l[popovertarget] {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  /* Preserve the .kpi-l / .m-l label typography — do NOT reset the font.
     The .kpi-l / .m-l class rules already set IBM Plex Mono / uppercase /
     11px / letter-spacing; those must win over the button UA defaults. */
  color: inherit;
  cursor: help;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: left;
}
.kpi-info-icon {
  opacity: .35;
  flex-shrink: 0;
  transition: opacity .18s var(--ease-out-smooth, ease-out);
  color: currentColor;
}
/* Icon lights up on hover / focus. Each class needs its own pseudo —
   a bare `.kpi-l[popovertarget]` in a selector list matches ALWAYS and
   leaks the rule to every label unconditionally. */
.kpi-l[popovertarget]:hover .kpi-info-icon,
.m-l[popovertarget]:hover .kpi-info-icon,
.kpi-l[popovertarget]:focus-visible .kpi-info-icon,
.m-l[popovertarget]:focus-visible .kpi-info-icon {
  opacity: 1;
}
.kpi-l[popovertarget]:focus-visible,
.m-l[popovertarget]:focus-visible {
  outline: 2px solid var(--red, #C1272D);
  outline-offset: 3px;
  border-radius: 2px;
}

.kpi-popover {
  max-width: 300px;
  margin: 0;
  padding: 14px 16px;
  background: var(--ink, #1A1A1A);
  color: var(--paper, #FAFAF5);
  border: none;
  border-radius: var(--radius-sm, 4px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.15));
  font: 400 13px/1.5 'IBM Plex Sans', system-ui, sans-serif;
  text-wrap: pretty;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity .18s var(--ease-out-smooth, ease-out),
    transform .18s var(--ease-out-smooth, ease-out),
    overlay .18s allow-discrete,
    display .18s allow-discrete;
}
.kpi-popover:popover-open {
  opacity: 1;
  transform: translateY(0);
}
@starting-style {
  .kpi-popover:popover-open {
    opacity: 0;
    transform: translateY(4px);
  }
}
.kpi-popover::backdrop {
  background: transparent;
}
.kpi-popover strong {
  color: var(--gold, #D4A84B);
  font-weight: 600;
}

/* ── Transparency Badges (Verified / Calculated / Estimated) ───
   Per CLAUDE.md: thin or modeled data gets a badge so users know
   what they're looking at. Keep small and understated. */
.badge-calc,
.badge-verified,
.badge-estimated {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: 2px;
  line-height: 1.4;
  border: 1px solid;
}
.badge-verified  { color: var(--up,   #1A6B3A); border-color: rgba(26,107,58,.35); background: rgba(26,107,58,.06); }
.badge-calc      { color: var(--gold, #D4A84B); border-color: rgba(212,168,75,.40); background: rgba(212,168,75,.08); }
.badge-estimated { color: var(--neu,  #7A6520); border-color: rgba(122,101,32,.35); background: rgba(122,101,32,.06); }


/* ═══════════════════════════════════════════════════════════════
   SOURCE CITATIONS — per-KPI microtext
   Every data tile gets a source line: "ARMLS · 30-day rolling · Updated Apr 20".
   Keep it tiny, monospace, muted. It must not compete with the value.
   ═══════════════════════════════════════════════════════════════ */
.kpi-cite,
.chart-cite,
.snap-cite {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink-faint, #888);
  margin-top: 6px;
  display: block;
  opacity: 0.9;
}
.kpi-cite a,
.chart-cite a,
.snap-cite a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(136,136,136,.4);
  transition: color 160ms ease, border-color 160ms ease;
}
.kpi-cite a:hover,
.chart-cite a:hover,
.snap-cite a:hover {
  color: var(--red, #C1272D);
  border-bottom-color: var(--red, #C1272D);
}
.chart-cite {
  margin-top: 8px;
  text-align: right;
  padding: 6px 8px 0;
  border-top: 1px solid var(--rule-lt, #E4E0D8);
}
/* Dark mode — citation text stays legible */
html[data-theme="dark"] .kpi-cite,
html[data-theme="dark"] .chart-cite,
html[data-theme="dark"] .snap-cite {
  color: rgba(255,255,255,.48);
}
html[data-theme="dark"] .kpi-cite a,
html[data-theme="dark"] .chart-cite a,
html[data-theme="dark"] .snap-cite a {
  border-bottom-color: rgba(255,255,255,.24);
}
html[data-theme="dark"] .chart-cite {
  border-top-color: rgba(255,255,255,.08);
}


/* ═══════════════════════════════════════════════════════════════
   DEVELOPMENT PREVIEW BANNER
   Honest signal while ARMLS API is pending. Remove at production launch.
   ═══════════════════════════════════════════════════════════════ */
.dev-banner {
  background: linear-gradient(90deg, rgba(212,168,75,.12) 0%, rgba(212,168,75,.06) 100%);
  border-bottom: 1px solid rgba(212,168,75,.35);
  color: var(--ink, #1A1A1A);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 20px;
  text-align: center;
  position: relative;
  z-index: 95;
}
.dev-banner strong {
  color: var(--gold, #B8922E);
  font-weight: 600;
  margin-right: 8px;
}
.dev-banner .dev-sep {
  color: var(--ink-faint, #888);
  margin: 0 10px;
  letter-spacing: 0;
}
html[data-theme="dark"] .dev-banner {
  background: linear-gradient(90deg, rgba(212,168,75,.10) 0%, rgba(212,168,75,.04) 100%);
  border-bottom-color: rgba(212,168,75,.28);
  color: rgba(255,255,255,.88);
}

/* ═══════════════════════════════════════════════════════════════
   MARKET INSIGHT — the single commentary block (Pro + Elite)
   ═══════════════════════════════════════════════════════════════
   One pattern, one label, one class, on every section of both paid
   dashboards. Supersedes the per-section families that each
   redeclared this identical look (.mc-narrative, .cs-narrative,
   .act-intel-narr, .nvr-narrative, .bsb-narr, .tp-narr,
   .fmix-insights) plus the hand-rolled inline-style copies.

   Rule: exactly ONE .ohr-insight per section. Tool sections — those
   that render the agent's own inputs or produce an artifact rather
   than report a market condition — carry none, by design.

   Per-audience scripted lines do NOT live here; they live in the
   Client Talking Points section, which aggregates a line from each
   contributing section via ohr-insights.js.

   Dark-theme + WCAG overrides for .ohr-insight-label /
   .ohr-insight-text ride the shared rules above (~880/892/925/952)
   alongside the classes they replace.
   ─────────────────────────────────────────────────────────────── */
.ohr-insight{
  margin:0 0 20px;
  padding:16px 20px;
  background:var(--paper-mid);
  border-left:3px solid var(--red);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
/* Inset variant — for blocks that sit INSIDE a card shell (.tp-shell,
   .bsb-shell, .mc-shell, .cs-shell …). The shell has no side padding of
   its own at this level, so the block supplies the 24px gutter. Applying
   this to a block that is NOT in a shell (or omitting it on one that is)
   misaligns the block against the numbers above it. Check each site. */
.ohr-insight--shell{margin:0 24px 20px;}
/* Flush variant — for a block nesting inside a parent that already supplies
   its own 24px padding (Pro Price Tier's .mc-header). */
.ohr-insight--flush{margin:12px 0 0;}
/* Tight variant — sits directly under a stat row inside a panel that already
   has side padding, so it needs a top gap only (Inventory Trend). */
.ohr-insight--tight{margin:10px 0 0;}

/* Subordinate variant — a titled sub-panel reading that is NOT the section's
   Market Insight. A few sections carry a secondary panel with its own labeled
   readout (Price Tier's pre-market "Coming Soon" supply; Elite's per-band and
   per-trend notes). One red-ruled Market Insight per section stays the rule —
   these read as clearly subordinate to it, with a neutral rule and quieter
   type, so the hierarchy is visible instead of looking like two competing
   blocks saying different things. */
.ohr-insight--sub{border-left-color:var(--rule);background:var(--paper);}
.ohr-insight--sub .ohr-insight-label{color:var(--ink-faint);opacity:.85;}
.ohr-insight--sub .ohr-insight-text{font-size:12px;}
.ohr-insight-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:8px;
}
.ohr-insight-text{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:13px;
  color:var(--ink-lt);
  line-height:1.75;
  font-weight:300;
}
.ohr-insight-text strong{color:var(--ink);font-weight:500;}

/* ── Methodology note — deliberately NOT commentary ──────────────
   "How to read this" / "what this tracks and what it doesn't"
   caveats. These are Language Rule 9 disclosures that only make
   sense adjacent to the number they qualify, so they stay on-page —
   but they must not read as a variant of Market Insight. No red
   rule, no uppercase label, quieter type.
   ─────────────────────────────────────────────────────────────── */
.ohr-method-note{
  margin:12px 0 0;
  padding:12px 14px;
  background:var(--paper);
  border:1px solid var(--rule-lt);
  border-radius:var(--radius-sm);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:12px;
  font-style:italic;
  /* NOT --ink-faint. #888 on --paper is 3.39:1 and fails WCAG AA for small
     text — the same trap the contrast fixes further up this file exist to
     correct. #666 is 5.7:1 and still reads quieter than the Market Insight
     body beside it, which is the whole point of the treatment. */
  color:#666;
  line-height:1.6;
}
.ohr-method-note strong{color:var(--ink-lt);font-weight:600;font-style:normal;}
html[data-theme="dark"] .ohr-method-note{color:#A8A49E;}

/* ── TREND CHIP ROW — WoW · MoM · QoQ · YoY under a tile value (2026-09-14) ──
   Promotes the inline spec ZIP Intel's pzTrendRow/zeTrend always emitted into a
   real class, so every section's period-over-period reading is the same object:
   one value, then a row of "LABEL ▲ +2.1%" chips. Colour = Rule 4 via the chip's
   up/dn class (rows without a seller sentiment colour by direction, up green /
   down red); nu (gold) = genuinely flat; na = not covered yet. Tokens only, so
   dark mode inverts for free. An empty row collapses.
   v2 sizing (Bradley 2026-09-14): the first cut ran 9px #888 inline text — too
   small to read and below AA contrast. Chips are now real pills at the tile-label
   scale (11px label / 12px value), label in --ink-lt (5.7:1), with a hairline
   border so the four periods read as four objects instead of one grey line. */
.ohr-trend{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.02em;color:var(--ink-lt,#555);margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 6px;line-height:1.2;}
.ohr-trend:empty{display:none;}
.ohr-trend>span{white-space:nowrap;display:inline-flex;align-items:baseline;gap:6px;padding:4px 9px;border:1px solid var(--rule-lt,#E4E0D8);border-radius:var(--radius-sm,4px);background:var(--paper,#FAFAF5);cursor:default;}
.ohr-trend b{font-size:12px;font-weight:600;white-space:nowrap;font-style:normal;font-variant-numeric:tabular-nums;}
.ohr-trend b.up{color:var(--up,#1A6B3A);}
.ohr-trend b.dn{color:var(--red,#C1272D);}
.ohr-trend b.nu{color:var(--neu,#7A6520);}
.ohr-trend b.na{color:var(--ink-faint,#888);font-weight:400;}
.ohr-trend--center{justify-content:center;}
@media (max-width:640px){.ohr-trend>span{padding:3px 7px;gap:5px;}}
.ohr-tile-arrow{white-space:nowrap;display:inline;}

/* ── SHARED TILE ROW — the .tp-metrics seam-grid spec as one class family ──
   Used by List vs Sales Price and the New Listings totals so a tile row reads
   identically to Pipeline / Buyer Rep. Column count via --ohr-tiles-n. */
.ohr-tiles{display:grid;grid-template-columns:repeat(var(--ohr-tiles-n,4),1fr);gap:1px;background:var(--rule-lt,#EAE6DE);border-top:1px solid var(--rule-lt,#EAE6DE);border-bottom:1px solid var(--rule-lt,#EAE6DE);}
.ohr-tiles[hidden]{display:none;}
.ohr-tile{background:var(--white,#FFFFFF);padding:18px 14px;text-align:center;}
.ohr-tile-v{font-family:'IBM Plex Mono',monospace;font-size:22px;color:var(--ink,#1A1A1A);margin-bottom:3px;line-height:1.15;}
.ohr-tile-v small{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-faint,#888);display:block;margin-top:3px;}
.ohr-tile-l{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint,#888);}
.ohr-tile-s{font-family:'IBM Plex Mono',monospace;font-size:10px;margin-top:3px;color:var(--ink-lt,#555);}
@media (max-width:600px){.ohr-tiles{grid-template-columns:repeat(2,1fr);}}