:root {
  --sbr-navy: #0b1d3a;
  --sbr-teal: #0fa68e;
  --sbr-teal-dark: #0d8f7a;
  --sbr-teal-light: #e6f9f5;
  --sbr-gold: #d4a843;
  --sbr-gold-light: #fff8e7;
  --sbr-amber: #d87a16;
  --sbr-bg: #f5f3ef;
  --sbr-white: #ffffff;
  --sbr-text: #1a1a1a;
  --sbr-text-muted: #5a6472;
  --sbr-text-secondary: #5a6472;
  --sbr-border: #e2ddd5;
  --sbr-shadow: 0 12px 35px rgba(11, 29, 58, 0.08);
  --radius: 14px;
  --teal-lt: var(--sbr-teal-light);
  --gold-lt: var(--sbr-gold-light);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  background: var(--sbr-bg);
  color: var(--sbr-text);
  line-height: 1.6;
}

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

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

.container {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

/* Logged-in dashboards (buyer, owner, broker) only — see dashboard.php.
   Wider container gives CRM-style two-column layouts (.broker-crm-layout,
   .bkd-shell) and dense stat grids more room, so long listing titles don't
   wrap onto 3-4 lines like they did at the standard 1200px width. Every
   public marketing/marketplace page keeps the normal .container width
   untouched. */
.container-wide-dashboard {
  width: min(1440px, calc(100% - 32px));
}

/* Businesses/Properties search results (search.php) — same 1440px cap as the
   dashboard's wide container above, just under its own name since this one
   isn't dashboard-only. The 3-card grid + 320px broker rail have room to
   breathe at 1200px, but on a wide monitor left that much cream margin on
   both sides that the page read as narrower than it needed to be. */
.container-wide {
  width: min(1440px, calc(100% - 32px));
}

.main-shell {
  min-height: calc(100vh - 220px);
}

.section-space {
  padding: 36px 0;
}

.narrow-section {
  max-width: 720px;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sbr-teal);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 10px;
  font-family: "Playfair Display", serif;
  color: var(--sbr-navy);
}

p {
  margin: 0 0 12px;
}

.muted,
.helper-text,
.footer-copy {
  color: var(--sbr-text-muted);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-inner,
.footer-bottom,
.section-heading,
.table-head,
.map-panel-header,
.listing-card-top,
.result-head,
.broker-card-top,
.summary-row,
.hero-actions,
.wizard-footer,
.price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.nav-inner {
  padding: 10px 0;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Groups .main-nav + .nav-actions into one flex item so .nav-inner's
   space-between only ever has 2 things to place — the group and the logo —
   which is what lets the logo swap to the opposite end (Frontend CMS >
   Header & Footer > Header Logo Placement) via plain DOM order instead of
   fragile per-child `order:` juggling across 3+ space-between siblings.
   flex:1 makes the group itself absorb the row's remaining width so its own
   internal space-between still pins .main-nav left / .nav-actions right
   exactly like today, regardless of which side the logo is on. */
.nav-links-actions-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 14px;
  min-width: 0;
}

.main-nav a:hover,
.text-link:hover {
  color: var(--sbr-teal);
}

.nav-shell {
  background: var(--sbr-navy);
  border-bottom: 2px solid var(--sbr-teal);
  box-shadow: 0 8px 28px rgba(11, 29, 58, 0.15);
}

.logo {
  font-family: "Playfair Display", serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--sbr-white);
  letter-spacing: -0.04em;
}

.logo span {
  color: var(--sbr-teal);
}

/* Admin-controlled alternates to the default Playfair Display wordmark above
   — see Frontend CMS > Header & Footer > Header Logo. .logo-style-default
   needs no rule of its own, it's just the plain .logo styling untouched. */
.logo.logo-style-bold {
  font-family: "DM Sans", sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.logo.logo-style-minimal {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Footer-only placement control for the same logo — see Frontend CMS >
   Header & Footer > Footer Logo Placement. Top-left (default) needs no rule
   here — the top/bottom half is handled by layout.php swapping the logo/
   summary render order, this only ever adds the right-aligned alternate. */
.footer-brand-block.align-right {
  text-align: right;
}

.main-nav a {
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
}

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

/* Hidden by default (desktop) — the mobile media query below both reveals
   this and gives .main-nav somewhere to open into, since .main-nav itself
   is set to display: none under 680px with no other way to reach it. */
.nav-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--sbr-white);
  font-size: 18px;
  cursor: pointer;
}

.nav-mobile-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  min-height: 44px;
  padding: 11px 16px;
  cursor: pointer;
  transition: 0.2s ease;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

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

.btn-sm {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: var(--sbr-teal);
  color: var(--sbr-white);
}

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

.btn-secondary {
  background: var(--sbr-navy);
  color: var(--sbr-white);
}

.btn-secondary:hover {
  background: #13254a;
}

.btn-ghost {
  background: var(--sbr-white);
  color: var(--sbr-navy);
  border-color: var(--sbr-border);
}

.btn-gold {
  background: var(--sbr-gold);
  color: var(--sbr-white);
}

/* Header notification bell — sits next to Logout for every signed-in role
   (see .nav-actions in layout.php) and links to that role's Activity &
   Alerts panel. The dot's ping loop is a permanent "there's something to
   check here" cue rather than a live unread count: the real count is only
   computed on the dashboard page itself (it depends on CRM/listing/
   promotion data), too costly to recompute on every single page load. */
.nav-alert-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sbr-white);
  color: var(--sbr-navy);
  border: 1px solid var(--sbr-border);
  font-size: 16px;
  transition: 0.2s ease;
}

.nav-alert-bell:hover {
  transform: translateY(-1px);
  color: var(--sbr-teal-dark);
}

.nav-alert-bell::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sbr-amber);
  box-shadow: 0 0 0 rgba(216, 122, 22, 0.55);
  animation: navAlertBellPing 2s ease-out infinite;
}

@keyframes navAlertBellPing {
  0% { box-shadow: 0 0 0 0 rgba(216, 122, 22, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(216, 122, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 122, 22, 0); }
}

.btn-purple {
  background: #5b21b6;
  color: var(--sbr-white);
}

.btn-purple:hover {
  background: #4c1d95;
}

.card,
.listing-card,
.result-card,
.broker-card,
.pricing-card,
.metric-card,
.sidebar-card,
.auth-card,
.install-card,
.install-intro {
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  border-radius: var(--radius);
  box-shadow: var(--sbr-shadow);
}

/* Floating toast stack — deliberately position:fixed, not in the document
   flow, so a confirmation is always visible the instant an action completes
   no matter how far down the page the user was scrolled (a static in-flow
   banner at the top of <main> was too easy to miss/scroll past). Takes zero
   layout space when empty, so it can render unconditionally (see layout.php)
   without leaving a gap. */
.flash-stack {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  width: min(540px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

@keyframes flash-in {
  0% { opacity: 0; transform: translateY(-28px) scale(0.94); }
  60% { opacity: 1; transform: translateY(4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes flash-progress {
  from { width: 100%; }
  to { width: 0%; }
}

.flash {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 42px 16px 18px;
  border-radius: 12px;
  box-shadow: 0 18px 40px -10px rgba(11, 29, 58, 0.4), 0 4px 12px rgba(11, 29, 58, 0.15);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  animation: flash-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The countdown bar only makes sense on an actual toast (auto-dismissed by
   autoDismissFlashes() after 4s) — #stripe-payment-errors on the checkout
   page reuses .flash/.flash-error for its inline card-decline message but
   isn't inside .flash-stack and is never auto-dismissed, so it stays a plain
   static banner instead of showing a countdown that never actually fires. */
.flash-stack .flash::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  animation: flash-progress 4s linear forwards;
}

.flash i {
  flex-shrink: 0;
  font-size: 20px;
}

.flash-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flash-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

.flash-success {
  background: linear-gradient(135deg, var(--sbr-teal) 0%, var(--sbr-teal-dark) 100%);
}

.flash-error {
  background: linear-gradient(135deg, #e0574a 0%, #a8382f 100%);
}

/* Admin-authored site-wide banners (see app/Views/layout.php + AdminController's
   announcement actions). Sits in normal flow above the header, full-width and
   stacked (not floating/fixed like .flash-stack) since these are persistent
   messaging, not transient toasts — and large/high-contrast text since this
   marketplace skews toward an older, less tech-fluent audience. */
.announcement-bar-stack {
  display: flex;
  flex-direction: column;
}

.announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 44px 14px 20px;
  position: relative;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.announcement-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1100px;
}

.announcement-bar i {
  font-size: 18px;
  flex-shrink: 0;
}

.announcement-bar-view {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.announcement-bar-view:hover {
  background: rgba(255, 255, 255, 0.15);
}

.announcement-bar.is-promo .announcement-bar-view {
  border-color: rgba(0, 0, 0, 0.35);
}

.announcement-bar.is-promo .announcement-bar-view:hover {
  background: rgba(0, 0, 0, 0.1);
}

.announcement-bar-cta {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.announcement-bar-cta:hover {
  background: rgba(255, 255, 255, 0.35);
}

.announcement-bar-close-form {
  margin: 0;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.announcement-bar-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcement-bar-close-form .announcement-bar-close {
  position: static;
  transform: none;
}

.announcement-bar-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

.announcement-bar.is-info {
  background: linear-gradient(135deg, var(--sbr-navy) 0%, #16305c 100%);
}

.announcement-bar.is-success {
  background: linear-gradient(135deg, var(--sbr-teal) 0%, var(--sbr-teal-dark) 100%);
}

.announcement-bar.is-warning {
  background: linear-gradient(135deg, var(--sbr-amber) 0%, #a85c0f 100%);
}

.announcement-bar.is-urgent {
  background: linear-gradient(135deg, #e0574a 0%, #a8382f 100%);
}

.announcement-bar.is-promo {
  background: linear-gradient(135deg, var(--sbr-gold) 0%, #b3841f 100%);
  color: #2a1f00;
}

.announcement-bar.is-promo .announcement-bar-cta,
.announcement-bar.is-promo .announcement-bar-close {
  background: rgba(0, 0, 0, 0.12);
  color: #2a1f00;
}

.announcement-bar.is-promo .announcement-bar-cta:hover,
.announcement-bar.is-promo .announcement-bar-close:hover {
  background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 640px) {
  .announcement-bar {
    padding: 12px 40px 12px 14px;
    font-size: 13px;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge.is-teal {
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
}

.badge.is-gold {
  background: var(--sbr-gold-light);
  color: #896515;
}

.badge.is-amber {
  background: #fff4e8;
  color: var(--sbr-amber);
}

.badge.is-navy {
  background: rgba(11, 29, 58, 0.08);
  color: var(--sbr-navy);
}

.badge.is-muted {
  background: #f0ede7;
  color: var(--sbr-text-muted);
}

.badge.is-red {
  background: #fff0ed;
  color: #a8382f;
}

.hero {
  padding: 56px 0 36px;
  background:
    radial-gradient(circle at top right, rgba(15, 166, 142, 0.2), transparent 32%),
    linear-gradient(180deg, #0b1d3a, #10264c);
  color: var(--sbr-white);
}

.hero h1,
.hero h2,
.hero p,
.hero .eyebrow {
  color: var(--sbr-white);
}

.hero-grid,
.dashboard-grid,
.search-layout,
.detail-layout,
.auth-shell,
.install-shell {
  display: grid;
  gap: 24px;
}

.hero-grid {
  grid-template-columns: 1.2fr 0.95fr;
  align-items: center;
}

.hero-copy {
  max-width: 620px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.78);
}

.search-card,
.auth-card,
.install-card,
.content-card,
.form-card,
.inquiry-card,
.summary-card,
.wizard-panel,
.wizard-sidebar {
  padding: 24px;
}

.search-tabs,
.tab-switch,
.billing-toggle {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.search-tab,
.tab-btn,
.billing-btn,
.wizard-step {
  border: 1px solid var(--sbr-border);
  border-radius: 12px;
  background: var(--sbr-bg);
  color: var(--sbr-text-muted);
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.search-tab.is-active,
.tab-btn.is-active,
.billing-btn.is-active,
.wizard-step.is-active {
  background: var(--sbr-navy);
  border-color: var(--sbr-navy);
  color: var(--sbr-white);
}

.search-form-panel.is-hidden,
.pricing-panel,
.wizard-panel,
.property-only {
  display: none;
}

.business-only {
  display: grid;
}

.pricing-panel.is-active,
.wizard-panel.is-active {
  display: block;
}

.field {
  display: grid;
  gap: 8px;
}

.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.field-label-row .text-link {
  font-size: 12.5px;
  font-weight: 700;
}

.field span {
  font-size: 13px;
  font-weight: 700;
  color: var(--sbr-navy);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1.5px solid var(--sbr-border);
  border-radius: 10px;
  background: #fcfbf9;
  padding: 12px 14px;
  color: var(--sbr-text);
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sbr-teal);
  box-shadow: 0 0 0 4px rgba(15, 166, 142, 0.12);
}

.password-input-wrap {
  position: relative;
}

.password-input-wrap input {
  width: 100%;
  padding-right: 44px;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sbr-text-muted);
  font-size: 14px;
  cursor: pointer;
}

.password-toggle-btn:hover {
  color: var(--sbr-navy);
  background: var(--sbr-bg);
}

.password-strength-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.password-strength-meter span {
  height: 4px;
  border-radius: 999px;
  background: var(--sbr-border);
  transition: background-color 0.2s ease;
}

.password-strength-meter[data-strength="1"] span:nth-child(-n + 1) {
  background: #d64545;
}

.password-strength-meter[data-strength="2"] span:nth-child(-n + 2) {
  background: var(--sbr-gold);
}

.password-strength-meter[data-strength="3"] span:nth-child(-n + 3) {
  background: var(--sbr-teal);
}

.password-strength-meter[data-strength="4"] span:nth-child(-n + 4) {
  background: #2f9e44;
}

/* Checkout's payment-method radio list (checkout.php) used to reuse .field
   with an inline "flex-direction:row" override — .field is display:grid, and
   flex-direction has no effect on a grid container, so the radio input and
   its label text stacked on separate implicit grid rows instead of sitting
   side by side. The outer list still stacks via .stack-md; this only fixes
   the row layout within each individual option. */
.payment-method-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.payment-method-option input[type="radio"] {
  flex-shrink: 0;
}
.payment-method-option span {
  font-size: 13px;
  font-weight: 700;
  color: var(--sbr-navy);
}

.plan-locked-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1.5px solid var(--sbr-border);
  border-radius: 10px;
  background: var(--sbr-bg);
  padding: 12px 14px;
}

.plan-locked-display strong {
  color: var(--sbr-navy);
  margin-right: 8px;
}

.plan-locked-display > div > span {
  color: var(--sbr-teal);
  font-weight: 700;
  font-size: 13px;
}

.plan-locked-note {
  font-size: 11.5px;
  color: var(--sbr-text-muted);
  white-space: nowrap;
}

.grid-2,
.grid-3,
.grid-4,
.listing-grid,
.broker-grid,
.pricing-grid,
.three-up,
.plan-type-grid,
.chip-check-grid,
.stats-row {
  display: grid;
  gap: 16px;
}

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

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

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

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

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

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

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

.metric-card {
  padding: 20px;
}

.metric-card-link {
  display: block;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.metric-card-link:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 166, 142, 0.3);
  box-shadow: 0 18px 36px rgba(11, 29, 58, 0.12);
}

.metric-card span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--sbr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.metric-card strong {
  font-size: 28px;
  color: var(--sbr-navy);
}

.top-stats {
  margin-top: -28px;
  position: relative;
  z-index: 2;
}

.section-heading h2,
.section-heading h1 {
  margin-bottom: 4px;
}

.listing-card,
.result-card {
  overflow: hidden;
}

.listing-card img,
.result-card img,
.map-result-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.listing-card img.is-nda-locked {
  filter: blur(16px) saturate(0.7);
  transform: scale(1.08);
}

.listing-card-body,
.result-card-body,
.broker-card-body {
  padding: 18px;
}

.listing-card-top strong,
.price-highlight,
.price-figure {
  font-size: 24px;
  color: var(--sbr-teal);
}

.price-figure {
  display: inline-block;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.price-figure.is-updating {
  opacity: 0;
  transform: translateY(-6px) scale(0.94);
}

.price-line span {
  color: var(--sbr-text-muted);
}

.chip-row,
.broker-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
}

.chip-gold {
  background: var(--sbr-gold-light);
  color: #896515;
}

.text-link {
  font-weight: 700;
  color: var(--sbr-teal);
}

.promo-band {
  margin: 22px 0 10px;
  padding: 54px 0;
  background: var(--sbr-navy);
  color: rgba(255, 255, 255, 0.78);
}

.promo-band h2,
.promo-band h3,
.promo-band .eyebrow {
  color: var(--sbr-white);
}

.promo-band-inner {
  display: grid;
  gap: 24px;
}

.icon-card {
  padding: 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
}

.icon-card strong {
  display: inline-flex;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sbr-teal);
  color: var(--sbr-white);
}

.cta-panel {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 42px;
  padding: 30px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(11, 29, 58, 0.95), rgba(15, 166, 142, 0.95));
  color: var(--sbr-white);
}

.cta-panel h2,
.cta-panel .eyebrow {
  color: var(--sbr-white);
}

.page-hero {
  padding-top: 34px;
}

.compact-hero {
  padding-bottom: 12px;
}

.search-layout {
  grid-template-columns: 280px 1fr 280px;
  align-items: start;
  padding-bottom: 40px;
}

.sidebar-card {
  padding: 18px;
}

.result-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  margin-bottom: 18px;
}

.broker-list-row,
.list-row,
.admin-user-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.broker-avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.broker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.broker-avatar.small {
  width: 42px;
  height: 42px;
}

.sidebar-cta {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--sbr-border);
}

.map-page {
  display: grid;
  grid-template-columns: 380px 1fr;
  min-height: calc(100vh - 160px);
}

.map-list-panel {
  padding: 20px;
  overflow: auto;
  background: var(--sbr-white);
  border-right: 1px solid var(--sbr-border);
}

.map-canvas {
  min-height: 640px;
}

.map-result-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--sbr-bg);
}

.map-result-card img {
  height: 90px;
  border-radius: 10px;
}

.detail-layout {
  grid-template-columns: 1.5fr 0.8fr;
  align-items: start;
  padding-top: 32px;
  padding-bottom: 40px;
}

.gallery-hero img {
  width: 100%;
  border-radius: 16px;
  height: 460px;
  object-fit: cover;
}

.thumb-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.thumb-row img {
  height: 110px;
  border-radius: 10px;
  object-fit: cover;
}

.detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.detail-stats article {
  padding: 16px;
  border-radius: 12px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
}

.detail-stats span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sbr-text-muted);
}

.detail-stats strong {
  color: var(--sbr-navy);
}

.content-card,
.summary-card {
  margin-bottom: 16px;
}

.bullet-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.bullet-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}

.bullet-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sbr-teal);
  font-weight: 700;
}

.premium-card .bullet-list li::before {
  color: var(--sbr-amber);
}

.summary-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--sbr-border);
}

.summary-row:last-child {
  border-bottom: 0;
}

.plan-change-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fdf1e2;
  border: 1px solid var(--sbr-amber);
  color: #8a5312;
  font-size: 13.5px;
  line-height: 1.5;
}

.plan-change-warning strong {
  color: #8a5312;
}

.auth-shell {
  grid-template-columns: 1fr 520px;
  min-height: calc(100vh - 200px);
  padding: 40px 24px 60px;
  align-items: center;
}

.auth-side {
  padding: 32px;
  border-radius: 24px;
  background: linear-gradient(145deg, var(--sbr-navy), #18315d);
  color: var(--sbr-white);
}

.auth-side h1,
.auth-side .eyebrow,
.auth-side p {
  color: var(--sbr-white);
}

.auth-card.wide {
  max-width: 640px;
}

.metric-stack {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.center-card {
  text-align: center;
}

.checkbox-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.wizard-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
}

.admin-saas-page {
  padding-bottom: 24px;
}

.admin-shell {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  align-items: start;
}

.admin-sidebar {
  position: sticky;
  top: 120px;
  padding: 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(15, 166, 142, 0.18), transparent 26%),
    linear-gradient(180deg, #10264c, #0b1d3a);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 44px rgba(11, 29, 58, 0.18);
}

.admin-sidebar h2,
.admin-sidebar .eyebrow,
.admin-sidebar p {
  color: rgba(255, 255, 255, 0.92);
}

.admin-sidebar-top {
  display: grid;
  gap: 8px;
}

.admin-sidebar-top h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.admin-sidebar-top p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.6;
}

.admin-nav-group {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.admin-nav-group-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44);
}

.admin-nav {
  display: grid;
  gap: 8px;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 700;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.admin-nav-link i {
  width: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.56);
}

.admin-nav-link.is-active,
.admin-nav-link:hover {
  color: var(--sbr-white);
  background: rgba(15, 166, 142, 0.16);
  border-color: rgba(15, 166, 142, 0.34);
  transform: translateX(2px);
}

.admin-nav-link.is-active i,
.admin-nav-link:hover i {
  color: var(--sbr-teal);
}

.admin-main {
  display: grid;
  gap: 18px;
}

.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 22px 24px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(15, 166, 142, 0.22), transparent 28%),
    radial-gradient(circle at bottom left, rgba(212, 168, 67, 0.1), transparent 24%),
    linear-gradient(135deg, #0b1d3a, #18315d);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 46px rgba(11, 29, 58, 0.16);
}

.admin-hero-copy {
  display: grid;
  gap: 10px;
  align-content: start;
}

.admin-hero h1,
.admin-hero .eyebrow,
.admin-hero p {
  color: rgba(255, 255, 255, 0.96);
}

.admin-hero h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.08;
}

.admin-hero p {
  margin: 0;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.admin-hero-workspace {
  display: inline-grid;
  gap: 4px;
  min-width: 160px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-hero-workspace span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-hero-workspace strong {
  color: #fff;
  font-size: 18px;
}

.admin-metrics-grid {
  gap: 14px;
}

.admin-metric-card {
  display: grid;
  gap: 4px;
  min-height: 104px;
  border-top: 3px solid var(--sbr-teal);
  box-shadow: 0 16px 28px rgba(11, 29, 58, 0.07);
}

.admin-metric-card:nth-child(2n) {
  border-top-color: var(--sbr-gold);
}

.admin-metric-card:nth-child(3n) {
  border-top-color: var(--sbr-navy);
}

.admin-metric-card small {
  color: var(--sbr-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.admin-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-quick-link {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background: #faf8f4;
  border: 1px solid var(--sbr-border);
}

.admin-quick-link strong {
  color: var(--sbr-navy);
}

.admin-quick-link span {
  color: var(--sbr-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.admin-module-shell {
  display: grid;
}

.admin-module-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.admin-module-header h3 {
  margin: 6px 0 0;
}

.admin-module-header p {
  margin: 10px 0 0;
  max-width: 760px;
}

.admin-module-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-module-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--sbr-border);
  color: var(--sbr-text-secondary);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.admin-module-tab.is-active,
.admin-module-tab:hover {
  border-color: rgba(15, 166, 142, 0.24);
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
}

.admin-module-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 20px;
  align-items: start;
}

.admin-module-grid-wide {
  grid-template-columns: 1fr;
}

.admin-module-row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid rgba(11, 29, 58, 0.08);
}

.admin-module-row:first-child {
  padding-top: 0;
}

.admin-module-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.admin-menu-group {
  display: grid;
  gap: 12px;
}

.admin-menu-group h4 {
  margin: 0;
  color: var(--sbr-navy);
}

.card-subtle {
  padding: 16px;
  border-radius: 16px;
  background: #faf8f4;
  border: 1px solid var(--sbr-border);
}

.admin-menu-item {
  display: grid;
  gap: 12px;
}

.admin-table td,
.admin-table th {
  vertical-align: top;
}

.admin-table td p.muted {
  margin: 4px 0 0;
}

.admin-table-person {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.admin-table-person p {
  margin: 4px 0 0;
  color: var(--sbr-text-secondary);
}

.admin-table-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.admin-table-details {
  position: relative;
}

.admin-table-details summary {
  list-style: none;
  cursor: pointer;
}

.admin-table-details summary::-webkit-details-marker {
  display: none;
}

.admin-table-edit-form {
  margin-top: 12px;
  padding: 16px;
  border-radius: 14px;
  background: #faf8f4;
  border: 1px solid var(--sbr-border);
}

.admin-user-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 18px;
  border-radius: 16px;
  background: #faf8f4;
  border: 1px solid var(--sbr-border);
}

.admin-user-summary {
  display: flex;
  gap: 14px;
}

.ops-list-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px;
  border-radius: 16px;
  background: #faf8f4;
  border: 1px solid var(--sbr-border);
}

.status-stack {
  display: grid;
  gap: 8px;
  justify-items: end;
  text-align: right;
}

.card-link {
  font-weight: 700;
  color: var(--sbr-teal-dark);
}

.detail-columns {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
}

.insight-card {
  padding: 18px;
  border-radius: 16px;
  background: #faf8f4;
  border: 1px solid var(--sbr-border);
}

.detail-list {
  display: grid;
  gap: 2px;
}

.auth-topbar {
  height: 60px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sbr-navy);
  border-bottom: 2px solid var(--sbr-teal);
}

.auth-topbar-links {
  display: flex;
  gap: 20px;
}

.auth-topbar-links a {
  color: rgba(255, 255, 255, 0.66);
}

.login-v3-wrap {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.login-v3-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(960px, 100%);
  background: var(--sbr-white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(11, 29, 58, 0.15);
}

.login-v3-brand {
  padding: 48px 42px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at top right, rgba(15, 166, 142, 0.16), transparent 32%),
    radial-gradient(circle at bottom left, rgba(212, 168, 67, 0.1), transparent 28%),
    linear-gradient(180deg, #0b1d3a, #132950);
  color: rgba(255, 255, 255, 0.88);
}

.login-v3-brand h1,
.login-v3-brand p {
  color: rgba(255, 255, 255, 0.92);
}

.login-brand-logo {
  font-family: "Playfair Display", serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--sbr-white);
}

.login-brand-logo span {
  color: var(--sbr-gold);
}

.login-brand-tag {
  margin-top: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
}

.login-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.login-pill {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
}

.login-pill-teal {
  background: rgba(15, 166, 142, 0.18);
  border-color: rgba(15, 166, 142, 0.34);
}

.login-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.login-stat-card {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.login-stat-card strong {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 24px;
  color: var(--sbr-gold);
}

.login-stat-card span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.login-v3-form {
  padding: 48px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-v3-head p a {
  color: var(--sbr-teal);
  font-weight: 700;
}

.login-form-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.login-socials {
  display: flex;
  gap: 12px;
}

.login-helper-card {
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  background: #faf8f4;
  border: 1px solid var(--sbr-border);
}

.home-v3-hero {
  padding: 54px 0 62px;
  background:
    radial-gradient(circle at top right, rgba(15, 166, 142, 0.15), transparent 30%),
    linear-gradient(180deg, #0b1d3a, #12264b);
}

.home-v3-hero-inner {
  display: grid;
  grid-template-columns: 1fr 540px;
  gap: 28px;
  align-items: center;
}

.home-v3-copy h1 {
  font-size: 48px;
  color: var(--sbr-white);
  line-height: 1.14;
}

.home-v3-copy h1 em,
.home-v3-copy p em {
  color: var(--sbr-teal);
  font-style: normal;
}

.home-v3-copy p {
  max-width: 620px;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.82);
}

.home-v3-search {
  padding: 28px 24px;
  border-radius: 16px;
  background: var(--sbr-white);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.home-search-title {
  margin-bottom: 12px;
  text-align: center;
  font-weight: 700;
  color: var(--sbr-navy);
}

.search-input-row-v3 {
  display: flex;
  gap: 10px;
  margin: 14px 0;
}

.search-input-row-v3 input {
  flex: 1;
  border: 1.5px solid var(--sbr-border);
  border-radius: 10px;
  padding: 12px 14px;
}

.home-quick-filters {
  display: flex;
  gap: 8px;
}

.home-quick-filters select {
  flex: 1;
  border: 1.5px solid var(--sbr-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}

.home-v3-stats {
  margin-top: -24px;
  position: relative;
  z-index: 2;
}

.listing-card-rich .listing-card-image-wrap {
  position: relative;
}

.listing-card-rich .listing-card-image-wrap .badge {
  position: absolute;
  top: 12px;
  left: 12px;
}

.listing-card-rich .second-gen-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--sbr-navy);
  color: var(--sbr-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
  padding-top: 14px;
  border-top: 1px solid var(--sbr-border);
}

.home-metric-row span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--sbr-text-muted);
  letter-spacing: 0.06em;
}

.home-metric-row strong {
  color: var(--sbr-navy);
}

.home-v3-dark-band {
  padding: 54px 0;
  background: var(--sbr-navy);
}

.home-v3-dark-band h2,
.home-v3-dark-band h3,
.home-v3-dark-band p {
  color: var(--sbr-white);
}

.muted-light {
  color: rgba(255, 255, 255, 0.6) !important;
}

.broker-card-dark {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.09);
}

.broker-card-dark .broker-meta,
.broker-card-dark .broker-stats span,
.broker-card-dark .broker-card-body p {
  color: rgba(255, 255, 255, 0.74);
}

.broker-card-dark h3 {
  color: var(--sbr-white);
}

.home-v3-why {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.why-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 24px;
  font-weight: 700;
}

.why-icon.teal {
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
}

.why-icon.navy {
  background: #e8edf4;
  color: var(--sbr-navy);
}

.why-icon.gold {
  background: var(--sbr-gold-light);
  color: #896515;
}

.home-v3-how {
  padding: 60px 0;
  background: linear-gradient(180deg, #0b1d3a, #10264c);
  text-align: center;
}

.home-v3-how h2,
.home-v3-how p {
  color: var(--sbr-white);
}

.dashboard-layout-v3 {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}

.welcome-bar-v3 {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
  padding: 20px 24px;
  border-radius: 14px;
  background: var(--sbr-navy);
}

.dashboard-stat-row {
  margin-bottom: 22px;
}

.dashboard-tabs-v3 {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.stat-card {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  box-shadow: var(--sbr-shadow);
  border-top: 3px solid var(--sbr-teal);
}

.stat-card.gold {
  border-top-color: var(--sbr-gold);
}

.stat-card.navy {
  border-top-color: var(--sbr-navy);
}

.stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sbr-text-muted);
  margin-bottom: 6px;
}

.stat-number {
  font-family: "Playfair Display", serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--sbr-navy);
  line-height: 1;
  margin-bottom: 5px;
}

.stat-number.teal {
  color: var(--sbr-teal);
}

.stat-number.gold {
  color: var(--sbr-gold);
}

.stat-change {
  font-size: 11.5px;
  font-weight: 600;
}

.stat-change.up {
  color: #1a7a50;
}

.stat-change.flat {
  color: var(--sbr-text-muted);
}

.wb-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sbr-teal);
  margin-bottom: 3px;
}

.wb-name {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--sbr-white);
}

.wb-sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

.analytics-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.an-box {
  padding: 12px 14px;
  border: 1px solid var(--sbr-border);
  border-radius: 10px;
  background: #f9f8f5;
}

.an-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sbr-text-muted);
  margin-bottom: 5px;
}

.an-value {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--sbr-navy);
  line-height: 1.2;
}

.an-value.teal {
  color: var(--sbr-teal);
}

.an-note {
  font-size: 11.5px;
  color: var(--sbr-text-muted);
  margin-top: 4px;
}

.an-note.good {
  color: #1a7a50;
}

.wizard-sidebar {
  display: grid;
  align-content: start;
  gap: 12px;
  position: sticky;
  top: 120px;
}

.wizard-main {
  display: grid;
  gap: 16px;
}

.wizard-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.wizard-step {
  justify-content: flex-start;
}

.type-option,
.chip-check {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--sbr-border);
  background: #faf8f4;
}

.type-option input,
.chip-check input {
  width: auto;
}

.plan-type-grid,
.chip-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.table-card {
  padding: 22px;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--sbr-border);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--sbr-text-muted);
  letter-spacing: 0.08em;
}

.stack-sm,
.stack-md,
.stack-lg {
  display: grid;
  gap: 10px;
}

.stack-lg {
  gap: 18px;
}

.align-right {
  justify-items: end;
}

/* Uploaded payment-proof documents — checkout.php's "Order pending
   confirmation" card, the Billing tab, and the admin transaction detail
   view all list files the same way. */
.proof-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  width: 100%;
}

.proof-doc-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.proof-doc-list i {
  color: var(--sbr-text-muted);
  width: 16px;
  text-align: center;
}

.proof-doc-list .proof-doc-meta {
  color: var(--sbr-text-muted);
  font-size: 12px;
}

/* Native file inputs render a plain OS-styled "Browse..." button with no way
   to theme it via normal properties — ::file-selector-button is the one hook
   that does, widely supported (Chrome/Edge/Safari, Firefox 82+) without
   needing a JS-driven fake-input wrapper. Shared with admin.css's copy for
   the admin transaction detail view's own upload field. */
.pretty-file-input input[type="file"] {
  display: block;
  width: 100%;
  font-size: 13px;
  color: var(--sbr-text-muted);
}

.pretty-file-input input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--sbr-border);
  background: var(--sbr-white);
  color: var(--sbr-navy);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pretty-file-input input[type="file"]::file-selector-button:hover {
  border-color: var(--sbr-teal);
  color: var(--sbr-teal);
  background: var(--sbr-teal-light);
}

/* Billing tab's per-row "Upload proof" <details> panel (dashboard.php). Was
   .stack-sm (display:grid) — a grid's implicit column stretches every item
   to its own full width by default, so the Upload button rendered as a huge
   dark bar the same width as the 320px cap, way oversized next to the file
   input above it, and on a narrow table cell that combination was enough to
   push the row past its wrapper and force horizontal scrolling. Flex with no
   stretch/grow keeps every child at its own natural size instead. */
.proof-upload-panel {
  margin-top: 10px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.proof-upload-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
}

.inline-form,
.admin-mini-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-user-actions {
  display: grid;
  gap: 10px;
}

.admin-section-grid,
.admin-detail-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.admin-record-page {
  display: grid;
  gap: 24px;
}

.admin-record-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 24px 26px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(15, 166, 142, 0.08), transparent 26%),
    linear-gradient(180deg, #fff, #fbfaf7);
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-shadow: 0 18px 34px rgba(11, 29, 58, 0.06);
}

.admin-record-header h3 {
  margin: 8px 0 6px;
}

.admin-record-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  align-items: start;
}

.admin-kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 20px;
}

.admin-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-filter-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-shadow: 0 12px 22px rgba(11, 29, 58, 0.05);
}

.admin-filter-toolbar .field {
  min-width: 180px;
}

.admin-context-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 18px;
}

.admin-context-metrics .metric-card {
  padding: 14px 16px;
  align-content: start;
}

.admin-context-metrics .metric-card strong {
  order: 1;
  font-size: 28px;
  line-height: 1;
}

.admin-context-metrics .metric-card span {
  order: 2;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.3;
}

.admin-table td:last-child,
.admin-table th:last-child {
  text-align: right;
}

.admin-table td:last-child .action-menu {
  display: inline-block;
}

.admin-action-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.summary-row-link,
.chip-link,
.insight-card-link {
  color: inherit;
}

.summary-row-link {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.summary-row-link:hover {
  background: rgba(15, 166, 142, 0.05);
  border-color: rgba(15, 166, 142, 0.18);
  transform: translateY(-1px);
}

.chip-link:hover {
  border-color: rgba(11, 29, 58, 0.16);
}

.insight-card-link {
  display: grid;
  gap: 8px;
}

.action-menu {
  position: relative;
}

.action-menu[open] {
  z-index: 30;
}

.action-menu-toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sbr-border);
  border-radius: 12px;
  background: #fcfbf8;
  color: var(--sbr-navy);
  font-weight: 800;
  cursor: pointer;
}

.action-menu-toggle::-webkit-details-marker {
  display: none;
}

/* Positioned absolute by default (matches the <details> disclosure it starts
   inside), but the dropdown is re-anchored to position:fixed via JS the instant
   it opens — using the trigger's live on-screen coordinates — so it always
   escapes any ancestor that clips overflow instead of being cut off by it. */
.action-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  padding: 8px;
  border: 1px solid var(--sbr-border);
  border-radius: 14px;
  background: var(--sbr-white);
  box-shadow: 0 16px 40px rgba(11, 29, 58, 0.18), 0 2px 8px rgba(11, 29, 58, 0.08);
  max-height: min(70vh, 420px);
  overflow-y: auto;
  z-index: 9999;
}

.action-menu-right .action-menu-list {
  right: 0;
}

.action-menu-list a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--sbr-text);
}

.action-menu-list a + a {
  margin-top: 2px;
}

.action-menu-list a:hover {
  background: #f4f1eb;
}

.action-menu-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px 4px 2px;
  border-top: 1px solid var(--sbr-border);
}

.action-menu-form select {
  flex: 1;
  min-width: 0;
  height: 38px;
  margin-bottom: 0;
}

.action-menu-form .btn {
  flex-shrink: 0;
}

.action-menu-form:has(button.danger) {
  display: block;
  padding: 6px 4px 2px;
}

.action-menu-list button.danger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: #a8382f;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.action-menu-list button.danger:hover {
  background: #fff0ed;
}

.admin-record-actions {
  display: grid;
  gap: 12px;
}

.admin-mini-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-related-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-tag-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sbr-border);
  border-radius: 14px;
  background: #faf8f4;
}

.admin-plan-card {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--sbr-border);
  border-radius: 14px;
  background: #faf8f4;
}

.admin-menu-builder {
  margin-bottom: 24px;
}

.content-page-shell {
  padding: 32px;
}

.content-card {
  padding: 22px;
  border-radius: 20px;
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-shadow: 0 16px 28px rgba(11, 29, 58, 0.05);
}

.table-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.table-head h3 {
  margin: 0 0 6px;
  font-size: 24px;
}

.table-head p {
  margin: 0;
  color: var(--sbr-text-secondary);
  line-height: 1.6;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sbr-border);
}

.summary-row span {
  color: var(--sbr-text-secondary);
  line-height: 1.5;
}

.summary-row strong,
.summary-row em,
.summary-row a {
  color: var(--sbr-navy);
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.insight-card {
  padding: 20px;
  border-radius: 18px;
  background: #faf8f4;
  border: 1px solid var(--sbr-border);
}

.insight-card h4 {
  margin: 0 0 14px;
  font-size: 17px;
}

.admin-user-card,
.ops-list-card {
  padding: 20px;
  border-radius: 18px;
  background: #faf8f4;
  border: 1px solid var(--sbr-border);
}

.admin-user-card strong,
.ops-list-card strong {
  color: var(--sbr-navy);
  font-size: 16px;
}

.admin-user-card p,
.ops-list-card p {
  margin: 6px 0 0;
  color: var(--sbr-text-secondary);
}

.content-page-body {
  color: var(--sbr-text);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.content-page-body h2,
.content-page-body h3 {
  color: var(--sbr-navy);
  margin-top: 24px;
}

.content-page-body p,
.content-page-body li {
  color: var(--sbr-text-secondary);
}

.content-page-body ul,
.content-page-body ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

/* ---------- Resources hub (resources.php + content.php's resource-article
   branch) — every banner is generated CSS, not an uploaded image, so it's
   guaranteed to stay on the platform's own navy/teal/gold palette and needs
   no asset management. Category alone picks the accent via cat-* below. */
.resource-list {
  display: grid;
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}

.resource-card {
  display: flex;
  gap: 24px;
  padding: 12px;
  border-radius: 18px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  box-shadow: var(--sbr-shadow);
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(11, 29, 58, 0.12);
}

.resource-card-banner,
.resource-article-banner {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #09172d 0%, #123260 55%, #0b1d3a 100%);
}

.resource-card-banner {
  width: 220px;
  min-height: 150px;
  border-radius: 14px;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

/* Real photo (see resources.php / content.php) sits at the bottom of the
   stack; the ::before wash on top of it is what keeps the platform's own
   navy/teal/gold palette — and the white icon/badge/title above it —
   legible no matter how bright or busy the underlying photo is. */
.resource-banner-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-card-banner::before,
.resource-article-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(160deg, rgba(9, 23, 45, 0.88) 0%, rgba(18, 50, 96, 0.72) 55%, rgba(11, 29, 58, 0.88) 100%),
    radial-gradient(circle at 85% 15%, rgba(212, 168, 67, 0.3), transparent 46%),
    radial-gradient(circle at 12% 92%, rgba(15, 166, 142, 0.3), transparent 46%);
}

.resource-card-banner.cat-buyers::before,
.resource-article-banner.cat-buyers::before {
  background:
    linear-gradient(160deg, rgba(9, 23, 45, 0.88) 0%, rgba(18, 50, 96, 0.72) 55%, rgba(11, 29, 58, 0.88) 100%),
    radial-gradient(circle at 85% 15%, rgba(15, 166, 142, 0.42), transparent 48%),
    radial-gradient(circle at 12% 92%, rgba(15, 166, 142, 0.2), transparent 48%);
}

.resource-card-banner.cat-sellers::before,
.resource-article-banner.cat-sellers::before {
  background:
    linear-gradient(160deg, rgba(9, 23, 45, 0.88) 0%, rgba(18, 50, 96, 0.72) 55%, rgba(11, 29, 58, 0.88) 100%),
    radial-gradient(circle at 85% 15%, rgba(212, 168, 67, 0.46), transparent 48%),
    radial-gradient(circle at 12% 92%, rgba(212, 168, 67, 0.2), transparent 48%);
}

.resource-card-banner.cat-brokers::before,
.resource-article-banner.cat-brokers::before {
  background:
    linear-gradient(160deg, rgba(9, 35, 35, 0.88) 0%, rgba(14, 66, 63, 0.74) 55%, rgba(11, 29, 58, 0.88) 100%),
    radial-gradient(circle at 85% 15%, rgba(212, 168, 67, 0.28), transparent 48%);
}

.resource-card-banner > i {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  font-size: 46px;
  color: rgba(255, 255, 255, 0.22);
}

.resource-card-category {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
  color: var(--sbr-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.resource-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 12px 8px 0;
  min-width: 0;
}

.resource-card-date {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sbr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.resource-card-body h3 {
  margin: 6px 0 6px;
  font-size: 1.15rem;
  color: var(--sbr-navy);
}

.resource-card-body p {
  margin: 0;
  color: var(--sbr-text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
}

.resource-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--sbr-teal);
  font-weight: 700;
  font-size: 13px;
}

.resource-article-banner {
  padding: 48px 0 32px;
  margin-bottom: 0;
}

.resource-article-banner .container {
  position: relative;
  z-index: 2;
}

.resource-article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 700;
}

.resource-article-back:hover {
  color: var(--sbr-white);
}

.resource-article-banner h1 {
  margin: 14px 0 10px;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  color: var(--sbr-white);
}

.resource-article-date {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  font-weight: 600;
}

.resource-article-shell {
  max-width: 780px;
  margin: -28px auto 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {
  .resource-card {
    flex-direction: column;
  }

  .resource-card-banner {
    width: 100%;
  }
}

.install-body {
  background: linear-gradient(180deg, #f5f3ef, #eae5dd);
}

.install-shell {
  grid-template-columns: 1fr 1.1fr;
  width: min(1180px, calc(100% - 32px));
  margin: 42px auto;
}

.install-intro {
  padding: 34px;
  background: linear-gradient(160deg, var(--sbr-navy), #15305a);
  color: var(--sbr-white);
}

.install-intro h1,
.install-intro p,
.install-intro .eyebrow {
  color: var(--sbr-white);
}

.install-bullets {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.mini-card {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.mini-card strong {
  display: block;
  margin-bottom: 6px;
}

.install-note {
  color: var(--sbr-text-muted);
}

.pricing-card {
  padding: 24px;
}

.premium-card {
  border-color: var(--sbr-gold);
}

.pricing-audience {
  margin-bottom: 18px;
}

.billing-toggle {
  margin-bottom: 20px;
}

.premium-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--sbr-text-muted);
  margin: 4px 0 16px;
  cursor: pointer;
}

.premium-toggle-row input {
  margin-top: 2px;
  accent-color: var(--sbr-gold);
  cursor: pointer;
}

.pricing-standalone {
  margin-top: 32px;
  padding: 22px 26px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  border-radius: var(--radius);
  box-shadow: var(--sbr-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.pricing-standalone-copy {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.pricing-standalone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-size: 17px;
}

.pricing-standalone-copy h3 {
  margin-bottom: 4px;
}

.pricing-standalone-copy p {
  color: var(--sbr-text-muted);
  margin: 0;
}

/* Pricing page (pricing.php) — a bold, colorful card treatment scoped to this
   page's own panel ids (#pricing-owner/#pricing-broker/#pricing-premium) so
   none of it bleeds into the Owner/Broker Program pages, which already have
   their own tuned .owner-plans-grid/.broker-plans-grid card styles. Each card
   gets a solid-color header block (not just a thin accent border) — one
   accent color per audience tab: teal for Owner, navy for Broker, gold for
   Premium Broker — with the "-pro" plan in each tab scaled up as the
   recommended pick. */
.pricing-hero-band {
  padding-bottom: 8px;
  background: linear-gradient(90deg, rgba(15, 166, 142, 0.45), rgba(15, 166, 142, 0.28) 65%, rgba(11, 29, 58, 0.22));
}

.pricing-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--sbr-white);
  border: 2px solid var(--sbr-teal);
  color: var(--sbr-teal);
  font-size: 20px;
  box-shadow: var(--sbr-shadow);
}

.pricing-audience .tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 15px;
}

#pricing-owner .pricing-grid,
#pricing-broker .pricing-grid,
#pricing-premium .pricing-grid {
  padding-top: 10px;
}

#pricing-owner .pricing-card,
#pricing-broker .pricing-card,
#pricing-premium .pricing-card {
  position: relative;
  padding: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#pricing-owner .pricing-card:hover,
#pricing-broker .pricing-card:hover,
#pricing-premium .pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(11, 29, 58, 0.22);
}

#pricing-owner .pricing-card:hover { border-color: var(--sbr-teal); }
#pricing-broker .pricing-card:hover { border-color: var(--sbr-navy); }
#pricing-premium .pricing-card:hover { border-color: var(--sbr-gold); }

#pricing-owner .pricing-card.pricing-plan-highlight,
#pricing-broker .pricing-card.pricing-plan-highlight,
#pricing-premium .pricing-card.pricing-plan-highlight {
  transform: scale(1.02);
  z-index: 1;
}

#pricing-owner .pricing-card.pricing-plan-highlight:hover,
#pricing-broker .pricing-card.pricing-plan-highlight:hover,
#pricing-premium .pricing-card.pricing-plan-highlight:hover {
  transform: scale(1.02) translateY(-8px);
}

#pricing-owner .pricing-card.pricing-plan-highlight {
  border-color: var(--sbr-teal);
  box-shadow: 0 26px 55px rgba(15, 166, 142, 0.35);
}

#pricing-broker .pricing-card.pricing-plan-highlight {
  border-color: var(--sbr-navy);
  box-shadow: 0 26px 55px rgba(11, 29, 58, 0.32);
}

#pricing-premium .pricing-card.pricing-plan-highlight {
  border-color: var(--sbr-gold);
  box-shadow: 0 26px 55px rgba(212, 168, 67, 0.4);
}

.pricing-plan-ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  color: var(--sbr-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 6px 16px rgba(11, 29, 58, 0.25);
}

#pricing-owner .pricing-plan-ribbon { background: var(--sbr-teal-dark); }
#pricing-broker .pricing-plan-ribbon { background: #13254a; }
#pricing-premium .pricing-plan-ribbon { background: #b6871f; }

.pricing-plan-header {
  padding: 20px 20px 14px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  color: var(--sbr-white);
}

.pricing-plan-header h3 {
  margin: 6px 0 10px;
  font-size: 1.1rem;
  color: var(--sbr-white);
}

.pricing-plan-header .badge {
  background: rgba(255, 255, 255, 0.22);
  color: var(--sbr-white);
}

.pricing-plan-header .price-line span {
  color: rgba(255, 255, 255, 0.8);
}

#pricing-owner .pricing-plan-header { background: linear-gradient(135deg, var(--sbr-teal), var(--sbr-teal-dark)); }
#pricing-broker .pricing-plan-header { background: linear-gradient(135deg, #13254a, var(--sbr-navy)); }
#pricing-premium .pricing-plan-header { background: linear-gradient(135deg, var(--sbr-gold), #b6871f); }

#pricing-owner .price-figure,
#pricing-broker .price-figure,
#pricing-premium .price-figure {
  font-size: 30px;
  color: var(--sbr-white);
}

.pricing-plan-body {
  padding: 16px 20px 20px;
}

.pricing-plan-body > p {
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--sbr-border);
  color: var(--sbr-text-muted);
  font-size: 0.82rem;
}

.pricing-plan-checklist li {
  padding-left: 24px;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.pricing-plan-checklist li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 15px;
}

#pricing-owner .pricing-plan-checklist li::before { color: var(--sbr-teal); }
#pricing-broker .pricing-plan-checklist li::before { color: var(--sbr-navy); }
#pricing-premium .pricing-plan-checklist li::before { color: var(--sbr-gold); }

#pricing-owner .pricing-card .btn.btn-primary {
  background: var(--sbr-teal);
  border-color: var(--sbr-teal);
  color: var(--sbr-white);
}
#pricing-owner .pricing-card .btn.btn-primary:hover { background: var(--sbr-teal-dark); }

#pricing-broker .pricing-card .btn.btn-primary {
  background: var(--sbr-navy);
  border-color: var(--sbr-navy);
  color: var(--sbr-white);
}
#pricing-broker .pricing-card .btn.btn-primary:hover { background: #13254a; }

#pricing-premium .pricing-card .btn.btn-primary {
  background: var(--sbr-gold);
  border-color: var(--sbr-gold);
  color: var(--sbr-white);
}
#pricing-premium .pricing-card .btn.btn-primary:hover { background: #b6871f; }

#pricing-owner .pricing-card.pricing-plan-highlight .btn.btn-primary,
#pricing-broker .pricing-card.pricing-plan-highlight .btn.btn-primary,
#pricing-premium .pricing-card.pricing-plan-highlight .btn.btn-primary {
  min-height: 50px;
  font-size: 15px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 22px;
  padding: 42px 0 26px;
}

.site-footer {
  margin-top: 44px;
  background: var(--sbr-navy);
  color: rgba(255, 255, 255, 0.72);
}

.site-footer h4,
.site-footer a,
.site-footer p,
.site-footer .logo {
  color: rgba(255, 255, 255, 0.86);
}

.site-footer a {
  display: block;
  margin-bottom: 8px;
}

.footer-bottom {
  padding: 18px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
}

.impersonation-banner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: linear-gradient(90deg, var(--sbr-navy) 0%, #1a2f52 100%);
  color: #fff;
}

.impersonation-banner-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.impersonation-banner-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.impersonation-banner-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.impersonation-banner-text strong {
  font-size: 13.5px;
  font-weight: 700;
}

.impersonation-banner-reason {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
  max-width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.impersonation-banner-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sbr-gold);
  background: rgba(255, 255, 255, .08);
  padding: 5px 10px;
  border-radius: 999px;
}

.impersonation-request-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: var(--sbr-gold-light);
  border-bottom: 1px solid var(--sbr-gold);
}

.impersonation-request-banner-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--sbr-amber);
  flex-shrink: 0;
}

.impersonation-request-banner-body {
  flex: 1;
  min-width: 220px;
}

.impersonation-request-banner-body strong {
  font-size: 13.5px;
  color: var(--sbr-navy);
  display: block;
  margin-bottom: 2px;
}

.impersonation-request-banner-body p {
  font-size: 12.5px;
  color: var(--sbr-text);
  margin: 0 0 3px;
}

.impersonation-request-banner-meta {
  font-size: 11px;
  color: var(--sbr-text-muted);
}

.impersonation-request-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.home-v3-hero {
  padding: 42px 0 18px;
}

.home-v3-hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: stretch;
}

.home-v3-copy,
.home-v3-search,
.login-v3-brand,
.login-v3-form,
.signup-v3-side,
.signup-v3-form {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  box-shadow: var(--sbr-shadow);
}

.home-v3-copy {
  padding: 48px;
  background:
    radial-gradient(circle at top right, rgba(15, 166, 142, 0.18), transparent 38%),
    linear-gradient(145deg, #09172d 0%, #123260 100%);
  color: rgba(255, 255, 255, 0.88);
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-v3-copy h1 {
  font-size: clamp(2.6rem, 4vw, 4.8rem);
  line-height: 0.95;
  color: var(--sbr-white);
  margin-bottom: 20px;
}

.home-v3-copy h1 em {
  color: var(--sbr-gold);
  font-style: normal;
}

.home-v3-copy p {
  margin: 0;
  max-width: 560px;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.76);
}

.home-v3-search {
  padding: 28px;
  background: linear-gradient(180deg, #f9f7f1 0%, #ffffff 100%);
}

.home-search-title {
  margin-bottom: 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sbr-text-muted);
}

.search-input-row-v3,
.home-quick-filters,
.login-socials,
.login-form-meta,
.auth-topbar,
.auth-topbar-links {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-input-row-v3 {
  margin-top: 16px;
}

.search-input-row-v3 input,
.home-quick-filters select {
  flex: 1;
}

.home-quick-filters {
  margin-top: 12px;
}

.home-v3-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 10px;
}

.listing-card-rich .listing-card-body {
  display: grid;
  gap: 14px;
}

.listing-card-image-wrap {
  position: relative;
}

.listing-card-image-wrap img {
  width: 100%;
  height: 265px;
  object-fit: cover;
}

.home-metric-row,
.analytics-summary,
.login-stat-grid,
.signup-side-stats {
  display: grid;
  gap: 14px;
}

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

.home-metric-row div,
.login-stat-card,
.signup-side-stat {
  padding: 14px;
  border-radius: 16px;
  background: #f8f6f2;
  border: 1px solid var(--sbr-border);
}

.home-metric-row span,
.login-stat-card span,
.signup-side-stat span {
  display: block;
  font-size: 0.8rem;
  color: var(--sbr-text-muted);
}

.home-metric-row strong,
.login-stat-card strong,
.signup-side-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 1.25rem;
  color: var(--sbr-navy);
}

.home-v3-dark-band {
  padding: 44px 0;
  margin: 12px 0;
  background:
    radial-gradient(circle at top left, rgba(212, 168, 67, 0.12), transparent 34%),
    linear-gradient(160deg, #0b1d3a 0%, #10284d 100%);
}

.broker-card-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.84);
}

.broker-card-dark h3,
.broker-card-dark p,
.broker-card-dark .broker-meta {
  color: inherit;
}

.muted-light {
  color: rgba(255, 255, 255, 0.72);
}

.home-v3-why {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.why-card {
  padding: 24px;
  border-radius: 20px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  box-shadow: var(--sbr-shadow);
}

.why-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 16px;
  font-size: 1.2rem;
  font-weight: 700;
}

.why-icon.teal {
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
}

.why-icon.navy {
  background: #e8edf4;
  color: var(--sbr-navy);
}

.why-icon.gold {
  background: var(--sbr-gold-light);
  color: #8a6916;
}

.home-v3-how {
  padding: 48px 0 56px;
  text-align: center;
}

.auth-topbar {
  width: min(1200px, calc(100% - 32px));
  margin: 26px auto 0;
  justify-content: space-between;
}

.auth-topbar-links a {
  color: var(--sbr-text-muted);
  font-weight: 600;
}

.login-v3-wrap,
.signup-v3-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}

.signup-v3-logo {
  display: block;
  margin-bottom: 28px;
}

.login-v3-shell,
.signup-v3-shell {
  width: min(1800px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;
  gap: 22px;
}

.login-v3-brand,
.signup-v3-side {
  padding: 40px;
  background:
    radial-gradient(circle at top left, rgba(212, 168, 67, 0.16), transparent 28%),
    linear-gradient(145deg, #09172d 0%, #123260 100%);
  color: rgba(255, 255, 255, 0.86);
}

.brand-photo-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #09172d;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 12% 18%, 88% 82%, center, center;
  background-size: auto, auto, cover, cover;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(212, 168, 67, 0.24), transparent 32%),
    radial-gradient(circle at 88% 82%, rgba(15, 166, 142, 0.2), transparent 36%),
    linear-gradient(160deg, rgba(9, 23, 45, 0.66) 0%, rgba(18, 50, 96, 0.56) 55%, rgba(13, 36, 68, 0.7) 100%),
    url("https://www.brummellmagazine.co.uk/wp-content/uploads/2022/06/ChottoMatte_Header-1.jpg");
  padding: 56px 16px;
}

.brand-photo-hero .onboarding-card,
.brand-photo-hero .auth-status-card {
  border: none;
  box-shadow: 0 30px 70px rgba(9, 23, 45, 0.4);
}

.login-brand-logo {
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 3vw, 3.5rem);
  font-weight: 800;
  color: var(--sbr-white);
}

.login-brand-logo span {
  color: var(--sbr-teal);
}

.login-brand-logo sup {
  font-size: 0.9rem;
  top: -1.2em;
}

.login-brand-tag {
  margin-top: 6px;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.login-v3-brand h1,
.signup-v3-side h1 {
  margin-top: 26px;
  font-size: clamp(2.2rem, 3vw, 3.5rem);
  line-height: 1.02;
  color: var(--sbr-white);
}

.login-v3-brand p,
.signup-v3-side p {
  color: rgba(255, 255, 255, 0.76);
}

.login-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.login-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.84rem;
  font-weight: 600;
}

.login-pill-teal {
  background: rgba(15, 166, 142, 0.18);
  color: #baf0e6;
}

.login-stat-grid,
.signup-side-stats {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.login-stat-card,
.signup-side-stat {
  flex: 0 1 calc(50% - 7px);
}

.login-stat-card,
.signup-side-stat {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}

.login-stat-card strong,
.signup-side-stat strong {
  color: var(--sbr-white);
}

.login-stat-card span,
.signup-side-stat span {
  color: rgba(255, 255, 255, 0.7);
}

.signup-side-stats {
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.signup-side-stat {
  flex: 1 1 0;
  padding: 0 20px;
  background: none;
  border: none;
  border-radius: 0;
}

.signup-side-stat:first-child {
  padding-left: 0;
}

.signup-side-stat + .signup-side-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.signup-side-stat strong {
  font-size: 1.7rem;
}

.login-v3-form,
.signup-v3-form {
  padding: 34px;
  background: linear-gradient(180deg, #fbfaf6 0%, #ffffff 100%);
}

.login-v3-head h2 {
  margin-bottom: 6px;
}

.login-v3-head p {
  color: var(--sbr-text-muted);
}

.login-v3-head a {
  color: var(--sbr-teal-dark);
  font-weight: 700;
}

.login-divider {
  position: relative;
  margin: 18px 0;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sbr-text-muted);
}

.login-divider::before,
.login-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 74px);
  height: 1px;
  background: var(--sbr-border);
}

.login-divider::before {
  left: 0;
}

.login-divider::after {
  right: 0;
}

.login-helper-card,
.signup-side-note {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--sbr-border);
}

.login-helper-card {
  background: #f7f4ee;
}

.signup-side-note {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}

.signup-side-note p {
  margin-bottom: 0;
}

.account-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.account-type-card {
  display: block;
}

.account-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.account-type-body {
  display: block;
  height: 100%;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--sbr-border);
  background: #faf8f3;
  transition: 0.2s ease;
  cursor: pointer;
}

.account-type-card input:checked + .account-type-body {
  border-color: var(--sbr-teal);
  background: var(--sbr-teal-light);
  box-shadow: 0 12px 24px rgba(15, 166, 142, 0.12);
}

.account-type-card.premium input:checked + .account-type-body {
  border-color: var(--sbr-gold);
  background: var(--sbr-gold-light);
  box-shadow: 0 12px 24px rgba(212, 168, 67, 0.16);
}

.account-type-title,
.account-type-copy,
.account-type-meta {
  display: block;
}

.plan-picker {
  margin: -4px 0 4px;
}

.plan-picker-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--sbr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.plan-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.plan-pick-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--sbr-border);
  background: #faf8f3;
  cursor: pointer;
  transition: 0.15s ease;
}

.plan-pick-card:hover {
  border-color: var(--sbr-teal-bd);
}

.plan-pick-card.is-selected {
  border-color: var(--sbr-teal);
  background: var(--sbr-teal-light);
  box-shadow: 0 8px 18px rgba(15, 166, 142, 0.12);
}

.plan-pick-card.is-premium.is-selected {
  border-color: var(--sbr-gold);
  background: var(--sbr-gold-light);
  box-shadow: 0 8px 18px rgba(212, 168, 67, 0.16);
}

.plan-pick-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-pick-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sbr-teal-dark);
  background: var(--sbr-teal-light);
  padding: 2px 8px;
  border-radius: 20px;
}

.plan-pick-card.is-premium .plan-pick-badge {
  color: var(--sbr-amber);
  background: var(--sbr-gold-light);
}

.plan-pick-name {
  font-weight: 700;
  color: var(--sbr-navy);
  font-size: 14px;
}

.plan-pick-price {
  font-weight: 700;
  color: var(--sbr-teal);
  font-size: 13px;
}

.plan-pick-quota {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sbr-text-muted);
  margin-bottom: 2px;
}

.plan-pick-features {
  list-style: none;
  margin: 4px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--sbr-border);
  display: grid;
  gap: 4px;
}

.plan-pick-features li {
  position: relative;
  padding-left: 16px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--sbr-text);
}

.plan-pick-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sbr-teal);
  font-weight: 700;
}

.plan-pick-card.is-premium .plan-pick-features li::before {
  color: var(--sbr-amber);
}

.plan-pick-standalone {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1.5px dashed var(--sbr-border);
  border-radius: 12px;
  cursor: pointer;
  transition: 0.15s ease;
}

.plan-pick-standalone:hover {
  border-color: var(--sbr-teal-bd);
}

.plan-pick-standalone.is-selected {
  border-style: solid;
  border-color: var(--sbr-teal);
  background: var(--sbr-teal-light);
}

.plan-pick-standalone input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-pick-standalone strong {
  display: block;
  color: var(--sbr-navy);
  font-size: 13px;
  margin-bottom: 2px;
}

.plan-pick-standalone p {
  font-size: 11.5px;
  color: var(--sbr-text-muted);
  margin: 0;
}

.account-type-title {
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--sbr-navy);
}

.account-type-copy {
  color: var(--sbr-text);
}

.account-type-meta {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sbr-text-muted);
}

.member-dashboard-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
  font-family: "Inter", "DM Sans", sans-serif;
}

.member-dashboard-shell h1,
.member-dashboard-shell h2,
.member-dashboard-shell h3,
.member-dashboard-shell h4 {
  font-family: "Inter", "DM Sans", sans-serif;
}

.member-dashboard-main,
.member-dashboard-side {
  display: grid;
  gap: 16px;
}

/* Section titles / body copy — shared typography scale for the owner dashboard.
   Also applied under .bkd-main: the broker dashboard's overview now renders
   this exact same partial (overview-performance.php) but sits inside its own
   .bkd-shell wrapper instead of .member-dashboard-shell, so without this the
   .card-title/.card-header/.card-subtitle/.content-card markup it shares
   would fall back to unstyled defaults there — the un-bolded, unspaced titles
   this is fixing. Scoped to the specific classes the partial actually uses
   (not a blanket ".bkd-main p, span") so it can't bleed into the rest of the
   broker dashboard's own bkd-* typography. */
.member-dashboard-shell .card-header,
.bkd-main .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--sbr-border);
}

/* Colored header band — bleeds out to the card's own edges (the content-card
   padding it's undoing is 18px in this scope) so the tint reaches the rounded
   corners instead of sitting as an inset strip. */
.member-dashboard-shell .card-header.has-band,
.bkd-main .card-header.has-band {
  margin: -18px -18px 14px;
  padding: 18px 18px 14px;
  border-radius: 12px 12px 0 0;
}

.card-header.has-band.is-purple { background: #ede9fe; }
.card-header.has-band.is-gold { background: var(--sbr-gold-light); }
.card-header.has-band.is-teal { background: var(--sbr-teal-light); }

.member-dashboard-shell .card-title,
.bkd-main .card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--sbr-navy);
  line-height: 1.3;
}

.member-dashboard-shell .card-subtitle,
.bkd-main .card-subtitle {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--sbr-text-muted);
}

.member-dashboard-shell .card-body,
.member-dashboard-shell p,
.member-dashboard-shell span,
.member-dashboard-shell .summary-row,
.member-dashboard-shell .chip,
.bkd-main .card-body,
.bkd-main .summary-row,
.bkd-main .chip {
  font-size: 14px;
}

.member-dashboard-shell .content-card,
.bkd-main .content-card {
  padding: 18px;
  border-radius: 12px;
}

.dashboard-hero-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 22px;
  border-radius: 12px;
  background:
    radial-gradient(circle at top right, rgba(212, 168, 67, 0.16), transparent 22%),
    radial-gradient(circle at bottom left, rgba(15, 166, 142, 0.12), transparent 26%),
    linear-gradient(145deg, #0b1d3a 0%, #13315b 100%);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 20px rgba(11, 29, 58, 0.1);
}

.dashboard-hero-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dashboard-role-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dashboard-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-role-badge.premium {
  background: rgba(212, 168, 67, 0.18);
  color: #ffe4a1;
}

.dashboard-role-badge.verified {
  background: rgba(15, 166, 142, 0.18);
  color: #b6fff0;
}

.dashboard-hero-panel h1 {
  margin: 0;
  font-family: "Inter", "DM Sans", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sbr-white);
}

.dashboard-hero-panel p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.dashboard-hero-metrics {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-hero-metric {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.dashboard-hero-metric span {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

.dashboard-hero-metric strong {
  font-family: "Inter", "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sbr-white);
}

.dashboard-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.dashboard-hero-actions .btn {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 10px;
}

.member-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Buyer's overview has exactly 4 stat cards — 3 columns leaves the 4th
   stranded alone on its own row, so it gets its own column count instead
   of sharing the 3-up default meant for the 6-card owner/broker version. */
.member-stat-grid.four-col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.member-stat-card {
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  box-shadow: 0 4px 14px rgba(11, 29, 58, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.member-stat-card-link,
.member-mini-card-link {
  color: inherit;
}

.member-stat-card-link:hover,
.member-mini-card-link:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 166, 142, 0.24);
  box-shadow: 0 12px 26px rgba(11, 29, 58, 0.1);
}

.member-stat-card.alt-gold {
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
}

.member-stat-card.alt-navy {
  background: linear-gradient(180deg, #edf2f8 0%, #ffffff 100%);
}

.member-stat-card span {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--sbr-text-muted);
}

.member-stat-card strong {
  display: block;
  margin-top: 8px;
  font-family: "Inter", "DM Sans", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--sbr-navy);
}

.member-stat-card p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--sbr-text-muted);
}

.dashboard-tabbar {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 18px;
  padding: 5px;
  border-radius: 10px;
  background: #eee9df;
  overflow-x: auto;
}

/* Every dashboard tab bar (buyer, owner, broker) — tabs used to be forced to
   equal width (flex: 1), which wasted space on short labels ("Billing",
   "Profile") while squeezing the longest one ("Announcements") into an
   ellipsis. Natural (flex: 0 0 auto) sizing plus justify-content:
   space-between on the bar above still spreads tabs out edge to edge, but
   each only takes the width its own label needs — letting a 9-tab bar (the
   most any role has) fit on one row without shrinking type size further. */
.dashboard-tabbar .dashboard-tab {
  flex: 0 0 auto;
}

.dashboard-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--sbr-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.dashboard-tab.is-active {
  background: var(--sbr-white);
  color: var(--sbr-navy);
  box-shadow: 0 4px 12px rgba(11, 29, 58, 0.08);
}

/* Same amber the header's .nav-alert-bell ping uses — one consistent
   "something needs your attention" color across the dashboard. */
.dashboard-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sbr-amber);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}

.dashboard-panel-grid {
  display: grid;
  gap: 16px;
}

.dashboard-panel-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.member-mini-card {
  padding: 12px 14px;
  border: 1px solid var(--sbr-border);
  border-radius: 10px;
  background: #faf8f4;
}

.member-mini-card span {
  display: block;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--sbr-text-muted);
}

.member-mini-card strong {
  display: block;
  margin-top: 4px;
  font-family: "Inter", "DM Sans", sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--sbr-navy);
}

.member-mini-card p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--sbr-text-muted);
}

/* Lead Pipeline's stat row always renders exactly 5 cards (Open Leads,
   Qualified, Locked, Active Deals, Won) — the shared .member-mini-grid
   rule above is a plain repeat(2, 1fr), which every other spot using this
   class (2, 3, or 4 cards) fills evenly, but 5 into 2 columns leaves the
   5th card alone on its own row with an empty gap beside it. Scoped to
   this one instance via .is-five-up rather than changing the shared rule
   itself, since that would misshape the other card counts. */
.member-mini-grid.is-five-up {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.member-mini-grid.is-five-up .member-mini-card strong {
  font-size: 18px;
}

@media (max-width: 1024px) {
  /* 5 columns get too cramped once the sidebar/queue layout below this
     stops stacking — fall back to a 6-unit base grid where the first 3
     cards span 2 units each (filling row 1) and the last 2 span 3 units
     each (filling row 2), instead of guessing a wrap point from content
     width the way flex-wrap would. */
  .member-mini-grid.is-five-up {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .member-mini-grid.is-five-up > .member-mini-card:nth-child(-n+3) {
    grid-column: span 2;
  }

  .member-mini-grid.is-five-up > .member-mini-card:nth-child(n+4) {
    grid-column: span 3;
  }
}

@media (max-width: 680px) {
  .member-mini-grid.is-five-up {
    grid-template-columns: 1fr;
  }

  /* Matches the :nth-child(...) compound selectors from the 1024px tier
     above specificity-for-specificity — a plain ">.member-mini-card"
     selector here would lose the cascade tie-break to those more specific
     rules even though max-width:680px is also true, leaving cards spanning
     2/3 of a grid that only actually has 1 column. */
  .member-mini-grid.is-five-up > .member-mini-card:nth-child(-n+3),
  .member-mini-grid.is-five-up > .member-mini-card:nth-child(n+4) {
    grid-column: span 1;
  }
}

.dashboard-list-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--sbr-border);
}

.dashboard-list-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.dashboard-list-row strong {
  font-size: 14px;
  font-weight: 600;
}

.dashboard-list-row p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--sbr-text-muted);
}

.dashboard-list-meta {
  display: grid;
  gap: 6px;
  justify-items: end;
  text-align: right;
  font-size: 13px;
  color: var(--sbr-text-muted);
}

.dashboard-table-wrap {
  overflow-x: auto;
}

.member-dashboard-shell .stack-lg {
  gap: 10px;
}

.member-dashboard-shell .summary-row {
  padding: 8px 0;
}

.member-dashboard-shell .chip-row {
  margin-top: 4px;
}

/* Lightweight inline analytics charts (no JS dependency) */
.dash-chart-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--sbr-text-muted);
}

.dash-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-chart-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.dash-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  height: 128px;
  padding: 0 2px;
}

.dash-bar-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
}

.dash-bar-pair {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100%;
}

.dash-bar {
  width: 12px;
  border-radius: 4px 4px 0 0;
  min-height: 3px;
}

.dash-bar.views {
  background: var(--sbr-teal);
}

.dash-bar.inquiries {
  background: var(--sbr-gold);
}

.dash-bar.status-active { background: var(--sbr-teal); }
.dash-bar.status-pending { background: var(--sbr-gold); }
.dash-bar.status-under_contract { background: var(--sbr-amber); }
.dash-bar.status-sold { background: var(--sbr-navy); }
.dash-bar.status-draft { background: #c7c2b8; }
.dash-bar.status-paused { background: #d99a5b; }

.dash-bar-group span {
  margin-top: 8px;
  max-width: 100%;
  font-size: 11px;
  color: var(--sbr-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-sm {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 12px;
}

.action-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--sbr-border);
  border-radius: 12px;
  background: #f7f4ee;
  color: var(--sbr-navy);
  font-weight: 700;
  cursor: pointer;
}

.action-chip.danger {
  color: #ab3f33;
}

.dashboard-layout-v3 > *,
.admin-shell > *,
.admin-section-grid > *,
.admin-detail-grid > *,
.detail-columns > *,
.card,
.content-card,
.admin-main > * {
  min-width: 0;
}

.dashboard-stat-row {
  margin-bottom: 18px;
}

.stat-card {
  padding: 20px;
  border-radius: 20px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  box-shadow: var(--sbr-shadow);
}

.stat-card.gold {
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
}

.stat-card.navy {
  background: linear-gradient(180deg, #edf2f8 0%, #ffffff 100%);
}

.stat-label {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sbr-text-muted);
}

.stat-number {
  margin-top: 10px;
  font-family: "Playfair Display", serif;
  font-size: 2.25rem;
  color: var(--sbr-navy);
}

.stat-number.teal {
  color: var(--sbr-teal-dark);
}

.stat-number.gold {
  color: #9b6b10;
}

.stat-change {
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--sbr-text-muted);
}

.stat-change.up {
  color: var(--sbr-teal-dark);
}

.stat-change.flat {
  color: #8d6e27;
}

.dashboard-tabs-v3 {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px;
  border-radius: 18px;
  background: #eee9df;
  overflow-x: auto;
}

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

.an-box {
  padding: 18px;
  border-radius: 18px;
  background: #faf8f4;
  border: 1px solid var(--sbr-border);
}

.an-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sbr-text-muted);
}

.an-value {
  margin-top: 8px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--sbr-navy);
}

.an-value.teal,
.an-note.good {
  color: var(--sbr-teal-dark);
}

.an-note {
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--sbr-text-muted);
}

.result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.favorite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 9px 14px;
  border: 1px solid var(--sbr-border);
  border-radius: 999px;
  background: #f7f4ee;
  color: var(--sbr-navy);
  font-weight: 700;
  cursor: pointer;
}

.favorite-btn.is-active {
  border-color: var(--sbr-gold);
  background: var(--sbr-gold-light);
  color: #785610;
}

.listing-media-upload-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.2rem;
  border: 1px dashed rgba(11, 29, 58, 0.18);
  border-radius: 18px;
  background: #f8fbff;
  margin-bottom: 1rem;
}

.listing-media-upload-copy strong {
  display: block;
  color: var(--sbr-navy);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.listing-media-upload-copy p {
  margin: 0;
  color: var(--sbr-text-secondary);
  max-width: 640px;
}

.listing-media-upload-button {
  position: relative;
  overflow: hidden;
}

.listing-media-upload-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.listing-media-library {
  display: grid;
  gap: 1rem;
}

.listing-media-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(11, 29, 58, 0.1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(11, 29, 58, 0.05);
}

.listing-media-preview {
  flex: 0 0 168px;
  width: 168px;
}

.listing-media-preview img {
  display: block;
  width: 168px;
  min-width: 168px;
  height: 118px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(11, 29, 58, 0.08);
  background: #eef3f8;
}

.listing-media-fields {
  display: grid;
  gap: 0.9rem;
  flex: 1 1 auto;
  min-width: 0;
}

.listing-media-fields-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 0.2rem;
}

.listing-media-fields-top strong {
  display: block;
  color: var(--sbr-navy);
  font-size: 1rem;
  line-height: 1.3;
  word-break: break-word;
}

.listing-media-fields-top small {
  color: var(--sbr-text-muted);
  display: block;
  margin-top: 0.2rem;
}

.listing-media-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.listing-media-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  color: var(--sbr-navy);
  padding: 0.78rem 1rem;
  border: 1px solid rgba(11, 29, 58, 0.12);
  border-radius: 14px;
  background: #f8fbff;
}

.listing-media-primary input {
  width: auto;
}

.listing-media-meta-grid {
  align-items: end;
  gap: 1rem;
}

.listing-media-row-actions .btn.btn-sm {
  padding: 0.78rem 1rem;
  border-radius: 14px;
  font-weight: 700;
}

.listing-table {
  width: 100%;
  border-collapse: collapse;
}

.listing-table th,
.listing-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--sbr-border);
  text-align: left;
  vertical-align: top;
}

.listing-table th {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sbr-text-muted);
}

.listing-table tbody tr:hover {
  background: #fbfaf7;
}

.listing-table .center,
.listing-table .lt-views,
.listing-table .lt-inq {
  text-align: center;
}

.listing-table .right,
.listing-table .actions-col {
  text-align: right;
}

.lt-name {
  font-weight: 700;
  color: var(--sbr-navy);
}

.lt-meta {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--sbr-text-muted);
}

.dashboard-action-stack {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.dashboard-action-stack.align-left {
  justify-items: start;
}

.dashboard-link-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.inline-form select {
  min-width: 150px;
}

.link-btn,
.edit-btn,
.reply-btn,
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.link-btn:hover,
.edit-btn:hover,
.reply-btn:hover,
.pc-btn:hover {
  transform: translateY(-1px);
}

.edit-btn {
  background: var(--sbr-navy);
  color: var(--sbr-white);
  box-shadow: 0 10px 24px rgba(11, 29, 58, 0.16);
}

.reply-btn {
  background: var(--sbr-gold);
  color: #5d4310;
  box-shadow: 0 10px 24px rgba(212, 168, 67, 0.22);
}

.link-btn {
  min-height: auto;
  padding: 0;
  background: transparent;
  color: var(--sbr-teal-dark);
  box-shadow: none;
}

.link-btn.danger {
  color: #ab3f33;
}

.dashboard-inquiry-card,
.campaign-card,
.profile-card,
.member-profile-panel {
  border: 1px solid var(--sbr-border);
  border-radius: 22px;
  background: var(--sbr-white);
  box-shadow: var(--sbr-shadow);
}

.dashboard-inquiry-card,
.campaign-card {
  padding: 22px;
}

.dashboard-note-form textarea {
  width: 100%;
  min-height: 86px;
  padding: 12px 14px;
  border: 1px solid var(--sbr-border);
  border-radius: 14px;
  resize: vertical;
  background: #fff;
}

.dashboard-inquiry-card .inline-form {
  flex-wrap: wrap;
}

.dashboard-inquiry-card .inline-form select,
.dashboard-inquiry-card .inline-form input[type="datetime-local"],
.dashboard-inquiry-card .inline-form input[type="number"] {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--sbr-border);
  border-radius: 12px;
  background: #fff;
}

.summary-row-top {
  align-items: start;
}

.inquiry-note-body {
  margin: 6px 0 14px;
  line-height: 1.6;
}

.broker-crm-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.65fr) minmax(0, 2.35fr);
  gap: 32px;
  align-items: start;
}

/* Buyer dashboard's Sent Inquiries queue, as a trial (see .container-wide-dashboard
   above) — a bit more width than the broker/owner queue so listing titles like
   "3,200 SQFT Fully Equipped Restaurant Space – Downtown Seattle" don't wrap
   onto 6-7 lines, with the conversation panel narrowed slightly to make room. */
.buyer-crm-layout {
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 2.15fr);
}

.crm-queue-panel {
  display: grid;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--sbr-border);
  border-radius: 18px;
  background: #fcfbf8;
  min-width: 0;
}

/* The header row (title + "N total" chip) is a shared .summary-row flex
   layout; without min-width:0 on its text side, a long description can
   refuse to wrap and push the chip past the card edge. Scoped to the
   queue panel only so the shared .summary-row class elsewhere is untouched. */
.crm-queue-panel .summary-row-top > div {
  min-width: 0;
}

.crm-queue-panel .summary-row-top .chip {
  flex-shrink: 0;
  white-space: nowrap;
}

.crm-queue-list {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.crm-queue-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
}

.crm-queue-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--sbr-border);
  background: var(--sbr-white);
  color: var(--sbr-navy);
  font-size: 13px;
  cursor: pointer;
  transition: 0.15s ease;
}

.crm-queue-page-btn:hover:not(:disabled) {
  border-color: rgba(15, 166, 142, 0.3);
  color: var(--sbr-teal-dark);
}

.crm-queue-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.crm-queue-page-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sbr-text-secondary);
}

.crm-queue-item {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--sbr-border);
  border-radius: 16px;
  background: var(--sbr-white);
  color: inherit;
  min-width: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.crm-queue-item:hover,
.crm-queue-item.is-active {
  transform: translateY(-1px);
  border-color: rgba(15, 166, 142, 0.2);
  box-shadow: 0 10px 26px rgba(11, 29, 58, 0.07);
}

.crm-queue-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.crm-queue-top strong {
  min-width: 0;
  overflow-wrap: break-word;
}

.crm-queue-top .badge {
  flex-shrink: 0;
  white-space: nowrap;
}

.crm-queue-meta,
.crm-queue-time {
  font-size: 0.88rem;
  color: var(--sbr-text-muted);
  overflow-wrap: break-word;
}

.crm-queue-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-queue-chip-row .chip {
  background: #f3f1ec;
  color: var(--sbr-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.crm-message-center {
  border: 1px solid var(--sbr-border);
  border-radius: 20px;
  background: var(--sbr-white);
  box-shadow: 0 16px 40px rgba(11, 29, 58, 0.06);
  overflow: hidden;
}

.crm-message-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--sbr-border);
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
}

.crm-eyebrow {
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sbr-teal-dark);
}

.crm-message-head h3 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: var(--sbr-navy);
}

.crm-message-head p {
  margin: 6px 0 0;
  font-size: 0.94rem;
  font-weight: 400;
  color: var(--sbr-text-muted);
}

.crm-message-head-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

.crm-message-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.crm-thread-panel {
  display: grid;
  gap: 18px;
  padding: 20px;
  border-bottom: 1px solid var(--sbr-border);
}

.crm-section {
  display: grid;
  gap: 12px;
}

.crm-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sbr-text-muted);
}

/* The buyer-inquiry bubble's own inline label is redundant once it sits
   directly under the "Buyer Inquiry" section title above it. */
.crm-section > .crm-message-bubble.buyer > .crm-message-label {
  display: none;
}

.crm-contact-strip {
  display: grid;
  /* auto-fit instead of a fixed repeat(3, ...): when the lead is locked
     and Email/Phone are hidden, "Listing" is the only item left — a fixed
     3-track grid would still confine it to one third of the row's width
     (or one half at the tablet breakpoint below), wrapping its title into
     a cramped, ragged column for no reason. auto-fit lets however many
     items are actually present share the full width evenly. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.crm-contact-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
}

.crm-contact-item strong,
.crm-message-bubble strong {
  display: block;
  color: var(--sbr-navy);
}

.crm-contact-item span:last-child {
  color: var(--sbr-text-muted);
  word-break: break-word;
}

.crm-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 166, 142, 0.1);
  color: var(--sbr-teal-dark);
  font-size: 0.95rem;
  font-weight: 700;
}

.crm-thread-stream {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.crm-message-bubble {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--sbr-border);
  box-shadow: 0 6px 16px rgba(11, 29, 58, 0.04);
}

.crm-message-bubble.buyer {
  background: #fffdf8;
  border-color: rgba(15, 166, 142, 0.14);
}

.crm-message-bubble.broker {
  background: #f9fafc;
  border-color: var(--sbr-border);
}

.crm-message-bubble p,
.crm-message-meta {
  margin: 0;
}

.crm-message-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sbr-text-muted);
}

.crm-message-meta {
  font-size: 0.85rem;
  color: var(--sbr-text-muted);
}

.crm-compose-form {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 16px;
  background: #faf8f4;
  border: 1px solid var(--sbr-border);
}

.crm-compose-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 16px;
  border: 1px solid var(--sbr-border);
  border-radius: 14px;
  resize: vertical;
  background: var(--sbr-white);
}

.crm-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.crm-context-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
  background: #faf8f4;
}

.crm-context-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--sbr-border);
  border-radius: 16px;
  background: var(--sbr-white);
  box-shadow: 0 6px 16px rgba(11, 29, 58, 0.04);
}

.crm-context-card.span-full {
  grid-column: 1 / -1;
}

.crm-context-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--sbr-navy);
}

/* The <form> wrapping Follow-Up/Deal Progress/the submit button has no
   display of its own by default (plain block), so those three sat flush
   against each other with 0px between them — only their own borders made
   it look like there was a gap. This is what actually spaces them out. */
.crm-deal-controls-form {
  display: grid;
  gap: 14px;
}

/* 1a: visually separates Deal Controls' "Follow-Up" and "Deal Progress"
   groups from each other and from the card title, without touching the
   single-form/single-submit behavior underneath. */
.crm-context-subsection {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--sbr-border);
  border-radius: 12px;
  background: #faf8f4;
}

.crm-context-subtitle {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sbr-text-muted);
}

/* 1b: one-line explanation under a Deal Controls field, sitting right
   below its input inside the same .field grid — kept small/muted so it
   reads as a caption, not a second label competing with the field name. */
.field-hint {
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--sbr-text-muted);
}

/* Single unified "this lead is locked" banner (dashboard.php's Messaging
   Center) — replaces four separate, weaker restatements of the same fact
   that used to be scattered across the contact strip, the Confidentiality
   & NDA card, Deal Controls, and Inquiry Overview. Amber like
   .plan-change-warning since it's the same "action needed before you can
   proceed" register, not a plain informational card. */
.crm-unlock-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  /* .crm-message-center itself has no padding — .crm-message-head and
     .crm-thread-panel each carry their own 28px instead, so without a
     matching horizontal margin here this banner (sitting between the two)
     would span edge-to-edge and look glued to the card's sides. Top margin
     clears .crm-message-head's own border-bottom divider by the same
     amount, instead of sitting flush against it. */
  margin: 20px 28px;
  border-radius: 16px;
  background: #fdf1e2;
  border: 1px solid var(--sbr-amber);
}

.crm-unlock-banner-body {
  flex: 1;
  display: grid;
  gap: 4px;
}

/* Icon sits inline with the "This lead is locked" text (not as its own
   flex sibling) so there's no way for the two to end up on separate lines
   independently of each other when space gets tight — only the whole body
   block and the button can ever wrap relative to one another. */
.crm-unlock-banner-body strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a5312;
  font-size: 1rem;
}

.crm-unlock-banner-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.crm-unlock-banner-body p {
  margin: 0;
  color: #8a5312;
  font-size: 13.5px;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .crm-unlock-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .crm-unlock-banner form {
    align-self: flex-start;
  }
}

.crm-detail-list {
  display: grid;
  gap: 10px;
}

.crm-detail-list > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.crm-detail-list span {
  color: var(--sbr-text-muted);
}

.crm-detail-list strong {
  text-align: right;
  color: var(--sbr-navy);
}

.crm-listing-summary {
  display: grid;
  gap: 10px;
}

.crm-listing-summary p {
  margin: 0;
  color: var(--sbr-text-muted);
}

.nda-card {
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
}

.crm-nda-status-pending { color: var(--sbr-amber, #b8860b); }
.crm-nda-status-approved { color: var(--sbr-teal); }
.crm-nda-status-declined { color: #a8382f; }

.crm-nda-doc-links {
  display: flex;
  gap: 16px;
}

.crm-notes-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 12px;
}

.crm-notes-tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--sbr-border);
  background: #fff;
  color: var(--sbr-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.crm-notes-tab.is-active {
  background: var(--sbr-navy);
  border-color: var(--sbr-navy);
  color: #fff;
}

.crm-nda-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.crm-nda-actions form {
  flex: 1;
}

.crm-nda-actions button {
  width: 100%;
}

.crm-empty-state {
  display: grid;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
}

.profile-card,
.member-profile-panel {
  position: relative;
  padding: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(212, 168, 67, 0.15), transparent 25%),
    linear-gradient(180deg, #ffffff 0%, #f8f5ef 100%);
}

.member-profile-panel {
  padding: 16px;
  border-radius: 12px;
  font-family: "Inter", "DM Sans", sans-serif;
}

.top-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--sbr-gold-light);
  color: #8f6912;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pc-avatar {
  display: inline-flex;
  width: 76px;
  height: 76px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, var(--sbr-navy), #17355f);
  color: var(--sbr-white);
  font-size: 1.4rem;
  font-weight: 700;
  box-shadow: 0 16px 30px rgba(11, 29, 58, 0.18);
  flex-shrink: 0;
}

.pc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-name {
  margin-top: 16px;
  font-family: "Playfair Display", serif;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--sbr-navy);
}

.profile-menu {
  position: relative;
  margin-top: 10px;
}

.profile-menu[open] {
  z-index: 5;
}

.profile-menu-trigger {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

.member-profile-panel .profile-menu-trigger {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
}

.member-profile-panel .pc-avatar {
  width: 52px;
  height: 52px;
  font-size: 1rem;
}

.profile-menu-trigger::-webkit-details-marker {
  display: none;
}

.profile-menu-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-menu-copy .pc-name {
  margin-top: 0;
  font-size: 1.35rem;
}

.member-profile-panel .profile-menu-copy .pc-name {
  font-family: "Inter", "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.profile-menu-copy .pc-firm {
  margin-top: 0;
}

.member-profile-panel .profile-menu-copy .pc-firm {
  font-size: 13px;
}

.profile-menu-caret {
  color: var(--sbr-text-muted);
  font-size: 0.9rem;
}

.profile-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  min-width: 220px;
  padding: 10px;
  border: 1px solid var(--sbr-border);
  border-radius: 16px;
  background: var(--sbr-white);
  box-shadow: 0 22px 44px rgba(11, 29, 58, 0.14);
}

.profile-menu-panel a {
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--sbr-text);
  font-size: 13px;
}

.profile-menu-panel a:hover {
  background: #f4f1eb;
}

/* Compact "Account Settings" accordion — the broker sidebar's replacement
   for what used to be a single flat "Edit Public Profile" button. Deliberately
   scoped to just the two items that link (Edit Public Profile, Change
   Password); it's not a general-purpose account menu. */
.account-settings-menu {
  margin-top: 12px;
  border: 1px solid var(--sbr-border);
  border-radius: 12px;
  overflow: hidden;
}

.account-settings-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  list-style: none;
}

.account-settings-trigger::-webkit-details-marker {
  display: none;
}

.account-settings-caret {
  margin-left: auto;
  font-size: 12px;
  transition: transform 0.2s ease;
}

.account-settings-menu[open] .account-settings-caret {
  transform: rotate(180deg);
}

.account-settings-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--sbr-border);
  background: var(--sbr-bg);
  color: var(--sbr-text);
  font-size: 13px;
}

.account-settings-panel a:hover {
  background: #eeece5;
}

.account-settings-panel a i {
  width: 16px;
  color: var(--sbr-text-muted);
  text-align: center;
}

.pc-firm {
  margin-top: 6px;
  color: var(--sbr-text-muted);
}

.pc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.member-profile-panel .pc-stats {
  gap: 8px;
  margin-top: 14px;
}

.pcs {
  padding: 14px 10px;
  border-radius: 16px;
  background: rgba(11, 29, 58, 0.04);
  text-align: center;
}

.member-profile-panel .pcs {
  padding: 8px 6px;
  border-radius: 10px;
}

.pcs-n {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--sbr-navy);
}

.member-profile-panel .pcs-n {
  font-family: "Inter", "DM Sans", sans-serif;
  font-size: 18px;
}

.pcs-l {
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--sbr-text-muted);
}

.pc-btn,
.member-plan-chip {
  width: 100%;
  margin-top: 18px;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
}

.member-plan-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

.sc-head {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sbr-navy);
}

/* "Activity & Alerts" header, with room for the "X new" badge on the same
   line instead of it needing its own row. */
.sc-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sc-new-badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--sbr-teal-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.sc-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--sbr-border);
}

.sc-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.sc-ic {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--sbr-navy);
}

.sc-ic svg {
  width: 18px;
  height: 18px;
}

.sc-lbl {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sbr-navy);
}

.sc-desc,
.sc-arr,
.al-time,
.cc-listing,
.budget-text,
.promo-meta {
  color: var(--sbr-text-muted);
}

.sc-desc {
  font-size: 12.5px;
}

.sc-arr {
  font-size: 1.1rem;
}

/* Toast-card look: one self-contained rounded/tinted card per alert
   (gradient wash fading from the severity color to white, matching the
   error/warning/success/info reference cards) instead of a flat list of
   rows divided by border-top lines. */
.alert-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 40px 14px 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  border: 1px solid var(--sbr-border);
  background: var(--sbr-white);
}

.alert-item:last-child {
  margin-bottom: 0;
}

.alert-item.severity-warn {
  background: linear-gradient(135deg, #fdf1e2 0%, var(--sbr-white) 70%);
  border-color: #f3ddb8;
}

.alert-item.severity-info {
  background: linear-gradient(135deg, var(--sbr-teal-light) 0%, var(--sbr-white) 70%);
  border-color: #bfe6df;
}

.alert-item.severity-tip {
  background: linear-gradient(135deg, #e6f7ec 0%, var(--sbr-white) 70%);
  border-color: #bfe8cc;
}

.alert-item-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* Icon sits on a solid severity-colored circle with a white glyph (the
   reference design), rather than a colored glyph on a tinted circle —
   reads more clearly against the now-tinted card background behind it. */
.al-ic {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sbr-navy);
  color: #fff;
  font-weight: 700;
}

.al-ic svg {
  width: 15px;
  height: 15px;
}

.al-ic.info {
  background: var(--sbr-teal-dark);
}

.al-ic.warn {
  background: var(--sbr-amber);
}

.al-ic.tip {
  background: #1f9d53;
}

.alert-item-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.al-new-pill {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sbr-teal-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.alert-item-dismiss {
  border: 0;
  background: transparent;
  color: var(--sbr-text-muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 4px;
}

.alert-item-dismiss:hover {
  color: var(--sbr-navy);
}

.al-text {
  font-size: 13px;
  line-height: 1.4;
}

.al-time {
  margin-top: 4px;
  font-size: 11.5px;
}

.cc-head,
.promo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cc-name,
.promo-name {
  font-weight: 700;
  color: var(--sbr-navy);
}

.cc-status,
.promo-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cc-live,
.ps-live {
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
}

.cc-paused,
.ps-paused {
  background: #f1ede7;
  color: var(--sbr-text-muted);
}

/* PROMOTION NEGOTIATION — a distinct, clearly-labeled thread inside the
   campaign card, separate from the admin_message line above it, so a
   back-and-forth on price never reads as just another campaign stat. */
.cc-nego {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #5b21b6;
  background: #ede9fe;
}

.cc-nego-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sbr-navy);
  margin-bottom: 8px;
}

.cc-nego-turn {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--sbr-gold-light);
  color: #896515;
}

.cc-nego-turn.is-waiting {
  background: #ddd6fe;
  color: #5b21b6;
}

.cc-nego-entry {
  padding: 7px 0;
  border-top: 1px solid rgba(91, 33, 182, 0.15);
}

.cc-nego-entry:first-of-type {
  border-top: 0;
}

.cc-nego-entry-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}

.cc-nego-entry-hd strong {
  color: var(--sbr-navy);
}

.cc-nego-entry-hd time {
  margin-left: auto;
  color: var(--sbr-text-muted);
  font-size: 10.5px;
}

.cc-nego-msg {
  margin-top: 3px;
  font-size: 12px;
  color: var(--sbr-text-muted);
  line-height: 1.5;
}

.cc-nego-actions {
  margin-top: 10px;
}

.cc-nego-actions textarea {
  width: 100%;
  border-radius: 8px;
  border: 1.5px solid var(--sbr-border);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
}

.cc-nego-actions input[type="number"] {
  border-radius: 8px;
  border: 1.5px solid var(--sbr-border);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  width: 100%;
}

.budget-bar {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.budget-track {
  height: 10px;
  border-radius: 999px;
  background: #ece7dd;
  overflow: hidden;
}

.budget-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sbr-gold), var(--sbr-teal));
}

.budget-text {
  font-size: 0.9rem;
  font-weight: 700;
}

.promo-row {
  padding: 14px 0;
  border-top: 1px solid var(--sbr-border);
}

.promo-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.campaign-card.compact {
  padding: 18px;
}

.promo-info {
  display: grid;
  gap: 4px;
}

.promo-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.promo-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.promo-thumb.is-property {
  background: var(--sbr-gold-light);
}

.promo-thumb.is-business {
  background: var(--sbr-teal-light);
}

.promo-meta {
  font-size: 0.9rem;
}

/* A "View this section" link from the admin Frontend CMS lands here with a
   #section-xxx hash — bindAdminPreviewHighlight() in app.js toggles these two
   classes on the matching [data-admin-preview-target] section so the admin can
   see exactly which block they were just editing. Normal visitors never hit
   these classes since nothing else sets that hash. Same fix as #activity-alerts
   below: without scroll-margin-top, the browser's own anchor-jump lines the
   target's top edge up with the viewport's top edge, which tucks it right
   under the sticky .site-header (see position:sticky above) — landing the
   admin looking at content that starts partway INTO the section instead of
   at its actual top. */
[data-admin-preview-target] {
  scroll-margin-top: 90px;
}
@keyframes admPreviewBlink {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--sbr-teal); }
  50% { box-shadow: inset 0 0 0 3px rgba(15, 166, 142, 0.25); }
}
[data-admin-preview-target].is-admin-preview-highlight {
  box-shadow: inset 0 0 0 3px var(--sbr-teal);
  animation: admPreviewBlink 0.6s ease-in-out infinite;
}
[data-admin-preview-target].is-admin-preview-highlight.is-fading {
  animation: none;
  box-shadow: inset 0 0 0 3px rgba(15, 166, 142, 0);
  transition: box-shadow 1.5s ease;
}

/* Every "View this section" target traced right along its own edge (the
   INSET ring above) instead of reading as a distinct frame — indistinguishable
   from the target's own border/background edge, especially on anything that
   isn't a small, padded card. Every target below switches to this OUTSET
   outline instead, sized in two tiers by how much clear space actually
   surrounds it: cramped/adjacent-neighbor targets get a small offset so the
   frame doesn't bleed into whatever sits next to them, everything else gets
   a generous one so the frame is unmistakably a frame. Add new targets to
   whichever selector list below matches their situation — never leave one on
   the bare INSET rule at the top of this file. */
@keyframes admPreviewBlinkOutset {
  0%, 100% { outline-color: var(--sbr-teal); }
  50% { outline-color: rgba(15, 166, 142, 0.25); }
}

/* Generous tier: full-width/standalone targets with clear space around them —
   the header nav row, the whole footer grid, every homepage section
   (Hero/Business/Property/Broker/CTA/Why Us/Trust Row, via [id^="section-"]),
   and a CMS content page's body. */
#site-header[data-admin-preview-target].is-admin-preview-highlight,
#site-footer[data-admin-preview-target].is-admin-preview-highlight,
#content-page-shell[data-admin-preview-target].is-admin-preview-highlight,
[id^="section-"][data-admin-preview-target].is-admin-preview-highlight {
  box-shadow: none;
  outline: 3px solid var(--sbr-teal);
  outline-offset: 6px;
  border-radius: 10px;
  animation: admPreviewBlinkOutset 0.6s ease-in-out infinite;
}
#site-header[data-admin-preview-target].is-admin-preview-highlight.is-fading,
#site-footer[data-admin-preview-target].is-admin-preview-highlight.is-fading,
#content-page-shell[data-admin-preview-target].is-admin-preview-highlight.is-fading,
[id^="section-"][data-admin-preview-target].is-admin-preview-highlight.is-fading {
  animation: none;
  outline-color: rgba(15, 166, 142, 0);
  transition: outline-color 1.5s ease;
}

/* Compact tier: targets with little breathing room before they'd bump into a
   sibling — #nav-actions (buttons sit flush against its own edges) and the
   footer's Marketplace/Company columns (only 22px apart — see .footer-grid
   above — so even the generous tier's smaller offset would nearly touch
   across the gap). */
#nav-actions[data-admin-preview-target].is-admin-preview-highlight,
#site-footer-marketplace[data-admin-preview-target].is-admin-preview-highlight,
#site-footer-company[data-admin-preview-target].is-admin-preview-highlight {
  box-shadow: none;
  outline: 3px solid var(--sbr-teal);
  outline-offset: 4px;
  border-radius: 8px;
  animation: admPreviewBlinkOutset 0.6s ease-in-out infinite;
}
#nav-actions[data-admin-preview-target].is-admin-preview-highlight.is-fading,
#site-footer-marketplace[data-admin-preview-target].is-admin-preview-highlight.is-fading,
#site-footer-company[data-admin-preview-target].is-admin-preview-highlight.is-fading {
  animation: none;
  outline-color: rgba(15, 166, 142, 0);
  transition: outline-color 1.5s ease;
}

/* Taxonomy's filter-control targets (Category/Cuisine/Property Type/
   Condition/Quick Filters/Broker Specialty — see market-filters.php,
   map.php, home.php, brokers.php). The default tier's INSET ring sat flush
   against these fields' own rounded selects with no radius of its own,
   reading as a jagged/broken corner where the two didn't line up. Same
   outset mechanism as the compact tier above instead, radius matched to the
   12px-rounded selects/pills it wraps, small enough offset that it doesn't
   reach into the 12px gap to the next field over. */
[id^="filter-"][data-admin-preview-target].is-admin-preview-highlight {
  box-shadow: none;
  outline: 3px solid var(--sbr-teal);
  outline-offset: 3px;
  border-radius: 10px;
  animation: admPreviewBlinkOutset 0.6s ease-in-out infinite;
}
[id^="filter-"][data-admin-preview-target].is-admin-preview-highlight.is-fading {
  animation: none;
  outline-color: rgba(15, 166, 142, 0);
  transition: outline-color 1.5s ease;
}

/* The header notification bell (.nav-alert-bell in layout.php) lands here with
   a #activity-alerts hash — bindAlertsHighlight() in app.js toggles these two
   classes on the panel so the user can see exactly what the bell pointed to,
   same blink-then-fade mechanic as the admin CMS preview highlight above,
   just its own amber color so it reads as "look here" rather than "you're
   editing this". Offset scroll so the sticky header never covers it. */
#activity-alerts {
  scroll-margin-top: 90px;
}
@keyframes alertsPanelBlink {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--sbr-amber); }
  50% { box-shadow: inset 0 0 0 3px rgba(216, 122, 22, 0.2); }
}
[data-alerts-highlight-target].is-alerts-highlight {
  box-shadow: inset 0 0 0 3px var(--sbr-amber);
  animation: alertsPanelBlink 0.6s ease-in-out infinite;
}
[data-alerts-highlight-target].is-alerts-highlight.is-fading {
  animation: none;
  box-shadow: inset 0 0 0 3px rgba(216, 122, 22, 0);
  transition: box-shadow 1.5s ease;
}

.market-home-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 84px;
  background: url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1600&q=80") center/cover no-repeat;
}

.market-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at top right, rgba(15, 166, 142, 0.28), transparent 32%),
    linear-gradient(180deg, rgba(11, 29, 58, 0.9) 0%, rgba(17, 42, 80, 0.85) 55%, rgba(9, 20, 40, 0.92) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.market-home-hero::after {
  content: "";
  position: absolute;
  inset: auto auto -120px -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(212, 168, 67, 0.08);
  z-index: 0;
}

.market-home-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 28px;
}

.market-home-copy {
  max-width: 760px;
  text-align: center;
  justify-self: center;
}

.market-home-copy h1 {
  font-size: clamp(2.5rem, 5vw, 4.1rem);
  line-height: 1.02;
  color: var(--sbr-white);
}

.market-home-copy p {
  max-width: 700px;
  margin: 14px auto 0;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.78);
}

.market-home-hero .eyebrow,
.market-broker-band .eyebrow,
.market-home-cta .eyebrow,
.market-results-hero .eyebrow {
  color: rgba(255, 255, 255, 0.74);
}

.market-search-panel {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 26px 54px rgba(5, 15, 30, 0.2);
}

.market-search-panel-head {
  text-align: center;
  margin-bottom: 14px;
}

.market-search-panel-head h2 {
  margin-bottom: 6px;
}

.market-search-tabs {
  justify-content: center;
  margin-bottom: 12px;
}

.market-search-form {
  display: grid;
  gap: 12px;
}

.market-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.market-search-input,
.market-filter-pill {
  display: grid;
  gap: 7px;
}

.market-search-input span,
.market-filter-pill span {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sbr-text-muted);
}

.market-search-input input,
.market-search-input select,
.market-filter-pill select {
  width: 100%;
  border: 1.5px solid var(--sbr-border);
  border-radius: 12px;
  background: #fcfbf8;
  padding: 13px 14px;
  color: var(--sbr-text);
}

.market-filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.market-home-stats {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: -38px;
  position: relative;
  z-index: 2;
}

.market-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 30px 32px;
  margin: 48px auto 56px;
  background: var(--sbr-white);
  border-radius: var(--radius);
  box-shadow: var(--sbr-shadow);
}

.market-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1;
  min-width: 200px;
  padding: 0 24px;
  position: relative;
  font-size: 17px;
  font-weight: 700;
  color: var(--sbr-navy);
}

.market-trust-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  background: var(--sbr-border);
}

.market-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal);
  font-size: 22px;
}

.market-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.market-section-head .eyebrow {
  font-size: 13px;
  letter-spacing: 0.1em;
}

.market-section-head h2 {
  font-size: 2rem;
  line-height: 1.25;
}

.market-section-head p {
  max-width: 620px;
  font-size: 1.1rem;
  line-height: 1.65;
  color: #454e5c;
}

.market-section-head-dark h2,
.market-section-head-dark p {
  color: var(--sbr-white);
}

.market-section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.market-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: var(--sbr-bg);
  border: 1px solid var(--sbr-border);
}

.market-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--sbr-text-muted);
  cursor: pointer;
  transition: 0.2s ease;
}

.market-view-toggle-btn:hover {
  color: var(--sbr-navy);
}

.market-view-toggle-btn.is-active {
  background: var(--sbr-white);
  color: var(--sbr-navy);
  box-shadow: var(--sbr-shadow);
}

.market-card-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.market-card-grid.is-list-view {
  grid-template-columns: 1fr;
}

.market-card-grid.is-list-view .market-card {
  display: flex;
  align-items: stretch;
}

.market-card-grid.is-list-view .market-card-media {
  width: 280px;
  flex-shrink: 0;
}

.market-card-grid.is-list-view .market-card-media img {
  height: 100%;
}

.market-card-grid.is-list-view .market-card-body {
  flex: 1;
}

@media (max-width: 720px) {
  .market-card-grid.is-list-view .market-card {
    flex-direction: column;
  }

  .market-card-grid.is-list-view .market-card-media {
    width: 100%;
  }

  .market-card-grid.is-list-view .market-card-media img {
    height: 220px;
  }
}

.market-card {
  overflow: hidden;
  border-radius: 18px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  box-shadow: var(--sbr-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Shared by every .market-card on the site (homepage's featured grid and
   this search grid alike) — a static grid of cards reads as a database
   dump, one that lifts and its photo eases in on hover reads as curated
   inventory. */
.market-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 48px rgba(11, 29, 58, 0.14);
}

.market-card-media {
  position: relative;
  display: block;
  overflow: hidden;
}

.market-card-media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.market-card-media.is-nda-locked img {
  filter: blur(16px) saturate(0.7);
  transform: scale(1.08);
}

.market-card:hover .market-card-media.is-nda-locked img {
  transform: scale(1.08);
}

.market-card-nda-badge {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  background: rgba(11, 29, 58, 0.3);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.market-card:hover .market-card-media img {
  transform: scale(1.07);
}

.market-card-media .badge,
.market-result-media .badge {
  position: absolute;
  top: 14px;
  left: 14px;
  box-shadow: 0 6px 16px rgba(11, 29, 58, 0.18);
}

.market-second-gen {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(11, 29, 58, 0.9);
  color: var(--sbr-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.market-card-body,
.market-result-body {
  display: grid;
  gap: 16px;
  padding: 22px;
}

/* Search grid only (not the homepage, which shares .market-card) — sized
   down so the 6-card grid's total height lines up with the broker rail
   next to it instead of running noticeably longer. */
[data-search-grid] .market-card-media img {
  height: 160px;
}

[data-search-grid] .market-card-body {
  gap: 12px;
  padding: 18px;
}

.market-card-head,
.market-result-head {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  align-items: flex-start;
}

.market-card-head > div:first-child,
.market-result-head > div:first-child {
  min-width: 0;
  flex: 1;
}

.market-card-head h3,
.market-result-head h3 {
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.market-card-location {
  margin: 0;
  color: var(--sbr-text-muted);
  font-size: 0.95rem;
}

.market-card-price {
  flex-shrink: 0;
  max-width: 55%;
  text-align: right;
}

.market-card-price span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sbr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.market-card-price strong {
  display: block;
  font-size: 1.55rem;
  color: var(--sbr-teal);
  overflow-wrap: break-word;
  word-break: break-word;
}

.market-card-summary,
.market-broker-summary {
  color: var(--sbr-text-muted);
}

.market-card-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px 0;
  border-top: 1px solid var(--sbr-border);
  border-bottom: 1px solid var(--sbr-border);
}

.market-result-card .market-card-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.market-card-metrics span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--sbr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.market-card-metrics strong {
  color: var(--sbr-navy);
  font-size: 1.05rem;
}

.market-chip-row,
.market-card-badges,
.market-broker-stats,
.market-results-top-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.market-chip {
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-size: 13px;
  font-weight: 700;
}

.market-chip-gold,
.market-mini-badge-gold {
  background: var(--sbr-gold-light);
  color: #896515;
}

.market-chip-navy {
  background: #e8edf4;
  color: var(--sbr-navy);
}

.market-infra-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.market-infra-chip,
.market-mini-badge {
  padding: 6px 10px;
  border-radius: 10px;
  background: #f4f1eb;
  color: var(--sbr-text-muted);
  font-size: 13px;
  font-weight: 700;
}

.market-card-foot,
.market-result-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.market-card-link {
  color: var(--sbr-teal);
  font-weight: 700;
}

.market-card-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

.market-card-fav .favorite-btn {
  width: 38px;
  height: 38px;
  min-width: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-shadow: 0 6px 14px rgba(11, 29, 58, 0.16);
  color: var(--sbr-text-secondary);
  transition: transform 0.2s ease;
}

.market-card-fav .favorite-btn:hover {
  transform: scale(1.08);
}

.market-card-fav .favorite-btn.is-active {
  color: var(--sbr-teal);
}

/* Broker credit — the last element in the card by design (search.php places
   it after .market-card-foot), so whoever's responsible for the listing is
   the final thing you see before moving to the next card. */
.market-card-broker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--sbr-border);
  color: inherit;
  text-decoration: none;
}

.market-card-broker .broker-avatar {
  box-shadow: 0 0 0 3px var(--sbr-teal-light);
}

.market-card-broker strong {
  display: block;
  font-size: 14.5px;
  color: var(--sbr-navy);
  transition: color 0.15s ease;
}

.market-card-broker span {
  display: block;
  font-size: 13px;
  color: var(--sbr-text-secondary);
}

.market-card-broker:hover strong {
  color: var(--sbr-teal-dark);
}

/* "Show N More" — reveals the next batch of [data-search-card][hidden]
   nodes that are already rendered server-side (see bindShowMore() in
   app.js); no second page load, no backend pagination to build for what's
   currently a small marketplace catalog. */
.market-show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.market-show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--sbr-border);
  border-radius: 999px;
  background: var(--sbr-white);
  color: var(--sbr-navy);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sbr-shadow);
  transition: 0.2s ease;
}

.market-show-more-btn:hover {
  transform: translateY(-2px);
  border-color: var(--sbr-teal);
  color: var(--sbr-teal-dark);
}

.market-show-more-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-size: 11px;
  transition: transform 0.2s ease;
}

.market-show-more-btn:hover i {
  transform: translateY(2px);
}

.market-broker-band {
  padding: 56px 0;
  background: linear-gradient(180deg, #0b1d3a 0%, #112a50 100%);
}

.market-broker-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.market-broker-card {
  display: grid;
  gap: 16px;
  align-items: start;
  grid-template-columns: auto 1fr;
  padding: 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.market-broker-card .broker-avatar {
  width: 62px;
  height: 62px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--sbr-white);
}

.market-broker-head {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
}

.market-broker-head h3,
.market-broker-meta,
.market-broker-summary,
.market-broker-stats span {
  color: rgba(255, 255, 255, 0.84);
}

.market-broker-meta {
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.market-broker-stats span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
}

.market-broker-view-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--sbr-teal);
  font-size: 13px;
  font-weight: 700;
}

.market-broker-view-more i {
  font-size: 11px;
}

.market-why-head {
  max-width: 620px;
  margin: 0 auto 40px;
  text-align: center;
}

.market-why-accent {
  display: inline-block;
  width: 40px;
  height: 3px;
  margin-bottom: 16px;
  border-radius: 3px;
  background: var(--sbr-teal);
}

.market-why-head h2 {
  font-size: 2.1rem;
}

.market-why-head h2 .why-highlight {
  color: var(--sbr-teal);
}

.market-why-head p {
  margin: 0;
  color: var(--sbr-text-muted);
  font-size: 1.05rem;
}

.market-why-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.market-why-card {
  padding: 32px 24px;
  border-radius: 18px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  box-shadow: var(--sbr-shadow);
  text-align: center;
}

.market-why-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 2px solid var(--sbr-teal);
  color: var(--sbr-teal);
  font-size: 24px;
}

.market-why-card h3 {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.market-why-card h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--sbr-teal);
}

.market-testimonials {
  text-align: center;
}

.testimonial-viewport {
  overflow: hidden;
  width: 100%;
  padding: 0 16px;
}

.testimonial-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s ease;
}

.testimonial-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #e4eafb 0%, #eceef2 100%);
  border: 1px solid rgba(91, 107, 166, 0.18);
  box-shadow: var(--sbr-shadow);
  text-align: left;
  display: flex;
  flex-direction: column;
}

.testimonial-card-body {
  padding: 32px 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.testimonial-card h3 {
  font-size: 1.05rem;
  color: var(--sbr-navy);
}

.testimonial-card p {
  margin: 0;
  color: var(--sbr-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  flex: 1;
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  background: linear-gradient(135deg, var(--sbr-navy) 0%, #3d4658 100%);
}

.testimonial-person strong {
  display: block;
  color: var(--sbr-white);
  font-size: 14px;
}

.testimonial-person span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12.5px;
}

@media (max-width: 980px) {
  .testimonial-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 640px) {
  .testimonial-card {
    flex-basis: 100%;
  }
}

.market-home-cta {
  padding: 72px 0;
  background: linear-gradient(180deg, #0b1d3a 0%, #112a50 100%);
}

.market-home-cta-inner {
  display: grid;
  gap: 44px;
}

.market-home-cta-copy {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.market-home-cta-copy h2 {
  color: var(--sbr-white);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}

.market-home-cta-copy h2 .cta-highlight {
  color: var(--sbr-teal);
}

.market-home-cta-copy p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
}

.market-step-grid {
  position: relative;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 820px;
  margin: 0 auto;
}

/* The connecting line between step icons — spans center-to-center of the
   first and last icon (each icon column is 1/3 wide, so its center sits at
   1/6 and 5/6 of the row) and sits behind them (z-index 0 vs. 1), so it reads
   as a single line threading through all 3 circles like a timeline. The
   .market-step-grid max-width above pulls the 3 circles closer together;
   this is thicker and darker than the first pass, which was nearly invisible. */
.market-step-grid::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 16.6667%;
  right: 16.6667%;
  height: 3px;
  background: rgba(15, 166, 142, 0.5);
  z-index: 0;
}

.market-step-card {
  position: relative;
  z-index: 1;
  padding: 0 12px;
  text-align: center;
}

.market-step-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--sbr-white);
  border: 3px solid rgba(15, 166, 142, 0.45);
  color: var(--sbr-teal);
  font-size: 27px;
}

.market-step-num {
  position: absolute;
  right: -4px;
  bottom: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--sbr-white);
  background: var(--sbr-teal);
  color: var(--sbr-white);
  font-size: 11px;
  font-weight: 700;
}

.market-step-card h3 {
  color: var(--sbr-white);
  margin-bottom: 6px;
}

.market-step-card p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
}

.market-home-cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.market-cta-btn-wide {
  padding: 16px 44px;
  border-radius: 999px;
  font-size: 1rem;
}

/* Same photo + dark-navy-blur treatment as .market-home-hero (the site's
   main hero) instead of the light teal wash this used to sit on — brings
   this hero in line with the other photo heroes on the platform rather than
   being the one exception. The photo itself is set inline in search.php
   (business vs property, so each type shows its own image) — only the
   overlay/typography live here. */
.market-results-hero {
  position: relative;
  overflow: hidden;
  padding: 52px 0 40px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.market-results-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at top right, rgba(15, 166, 142, 0.22), transparent 32%),
    linear-gradient(180deg, rgba(11, 29, 58, 0.9) 0%, rgba(17, 42, 80, 0.86) 55%, rgba(9, 20, 40, 0.92) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.market-results-hero-inner {
  position: relative;
  z-index: 1;
}

.market-results-hero h1 {
  color: var(--sbr-white);
}

.market-results-hero-inner p {
  color: rgba(255, 255, 255, 0.82);
}

/* Breathing room before the filter bar — it used to sit right against the
   hero's own bottom padding with nothing distinguishing "hero" from
   "filters" as separate sections. */
.market-filter-bar-section {
  margin-top: 28px;
}

.market-results-hero-inner,
.market-results-head,
.market-filter-toolbar-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.market-results-top-actions {
  justify-content: flex-end;
}

.market-filter-toolbar {
  padding: 20px 0 10px;
}

.market-active-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.market-filter-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.market-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px 7px 12px;
  border-radius: 999px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  color: var(--sbr-text-muted);
  font-size: 12px;
  font-weight: 700;
}

/* Each active-filter chip removes just itself (see removeUrl in search.php,
   built as the full filter set minus this one key) rather than forcing a
   "Clear all" round trip to reapply everything else — the standard
   affordance on every reference marketplace this page was compared against. */
.market-active-filter-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(11, 29, 58, 0.08);
  color: var(--sbr-navy);
  font-size: 9px;
  transition: 0.15s ease;
}

.market-active-filter-remove:hover {
  background: var(--sbr-navy);
  color: #fff;
}

/* The Sort control that replaced the old duplicate horizontal search bar —
   auto-submits on change (see onchange="this.form.submit()" in search.php),
   carrying the other active filters along as hidden inputs so changing sort
   never resets them. */
.market-toolbar-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}

.market-toolbar-sort span {
  font-size: 12px;
  font-weight: 700;
  color: var(--sbr-text-secondary);
  white-space: nowrap;
}

.market-toolbar-sort .market-inline-select {
  min-width: 168px;
}

/* Filters moved out of this shell entirely — into their own full-width
   horizontal bar above (.market-filter-bar) — so it's just results next to
   the broker rail now, not three competing columns. The rail is sized wide
   enough (320px) that it doesn't read as a narrow afterthought with dead
   air around it. */
.market-results-shell {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

/* No longer sticky/internally-scrolling — the rail used to stay pinned in
   place with its own scrollbar while the results column scrolled past it,
   which read as two independent scroll areas on one page. Now it's a plain
   block that scrolls with everything else, one scroll for the whole page. */

.market-sidebar-head {
  margin-bottom: 18px;
}

/* Lines "Featured Brokers" up with "Restaurant Businesses/Properties" next
   to it — that h2 sits below a small eyebrow label ("N matching listings")
   this heading has no equivalent of, so without this offset "Featured
   Brokers" sat visibly higher than the title it's next to. */
.market-results-rail .market-sidebar-head {
  padding-top: 34px;
}

.market-sidebar-head h3 {
  margin-bottom: 4px;
  font-size: 22px;
}

.market-filter-form {
  display: grid;
  gap: 14px;
}

.market-check-group {
  display: grid;
  gap: 8px;
}

.market-check-group > span {
  font-size: 13px;
  font-weight: 700;
  color: var(--sbr-navy);
}

.market-check-group label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--sbr-text-muted);
}

.market-filter-actions {
  display: grid;
  gap: 10px;
}

.market-results-main {
  display: grid;
  gap: 18px;
}

.market-inline-form,
.market-result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.market-results-list {
  display: grid;
  gap: 18px;
}

.market-map-hero {
  padding-bottom: 20px;
}

.market-map-shell {
  display: grid;
  grid-template-columns: 280px 360px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.market-map-results-panel,
.market-map-canvas-wrap {
  display: grid;
  gap: 18px;
}

.market-map-results-panel {
  min-height: calc(100vh - 220px);
}

.market-map-results-head,
.market-map-canvas-head,
.market-map-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.market-map-results-list {
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 320px);
  overflow: auto;
  padding-right: 6px;
}

.market-map-result-card {
  margin-bottom: 0;
  border: 1px solid var(--sbr-border);
  border-radius: 16px;
  background: var(--sbr-white);
  box-shadow: var(--sbr-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.market-map-result-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(11, 29, 58, 0.12);
}

.market-map-result-card p,
.market-map-result-card span {
  margin: 0;
}

.market-map-result-card > div {
  display: grid;
  gap: 10px;
}

.market-map-canvas-wrap {
  position: sticky;
  top: 104px;
}

.market-map-canvas-head {
  padding: 0 4px;
}

.market-map-canvas-head h3 {
  margin-bottom: 4px;
}

.market-map-canvas-wrap .map-canvas {
  min-height: calc(100vh - 220px);
  border-radius: 20px;
  border: 1px solid var(--sbr-border);
  box-shadow: var(--sbr-shadow);
}

.market-result-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  border-radius: 18px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  box-shadow: var(--sbr-shadow);
}

.market-result-media {
  position: relative;
  display: block;
}

.market-result-media img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

.market-rail-brokers {
  display: grid;
  gap: 12px;
}

/* Each broker is now its own bordered/shadowed block (reuses the base .card
   look — see the "card" class alongside "market-rail-broker" in search.php)
   instead of one row in a flat, divided menu-style list — matching how the
   listing cards next to it already present as individual blocks, and with
   room to breathe now the rail is 320px instead of 280px. */
.market-rail-broker {
  padding: 19px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.market-rail-broker:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(11, 29, 58, 0.12);
}

.market-rail-broker p,
.market-rail-broker span {
  margin: 0;
  color: var(--sbr-text-muted);
  font-size: 13px;
}

.market-rail-broker-link-v6 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  color: inherit;
  text-decoration: none;
}

/* Bigger photo + name/firm/bio block than the compact version this replaced
   — these three cards are the whole rail's content now that the CTA is the
   only other thing below them, so each one carries more visual weight. */
.market-rail-broker-link-v6 .broker-avatar {
  width: 68px;
  height: 68px;
}

.market-rail-broker-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.market-rail-broker-name-row strong {
  font-size: 16px;
}

.market-rail-broker p.market-rail-broker-bio {
  margin-top: 8px;
  line-height: 1.6;
  color: var(--sbr-text-secondary);
}

/* Photo gets a soft ring, name shifts teal on hover — signals the whole
   block is one clickable unit, not just the avatar. */
.market-rail-broker .broker-avatar {
  box-shadow: 0 0 0 3px var(--sbr-teal-light);
}

.market-rail-broker-link-v6:hover strong {
  color: var(--sbr-teal-dark);
}

.market-rail-broker-link-v6 .text-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.market-rail-broker-link-v6 .text-link::after {
  content: "\2192";
  transition: transform 0.2s ease;
}

.market-rail-broker-link-v6:hover .text-link::after {
  transform: translateX(3px);
}

/* A tinted callout box instead of a plain top-border continuation of the
   list above it — reads as "the one thing here worth acting on" rather than
   one more row, same gradient-wash recipe the Activity & Alerts cards use
   elsewhere in the app (dashboard sidebar) for an info-toned card. */
.market-rail-cta {
  margin-top: 18px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--sbr-teal-light) 0%, var(--sbr-white) 70%);
  border: 1px solid #bfe6df;
}

.market-rail-cta h4 {
  font-size: 19px;
}

.market-rail-cta-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
}

.market-rail-cta-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sbr-navy);
}

.market-rail-cta-list i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sbr-teal);
  color: #fff;
  font-size: 9px;
}

@media (max-width: 1024px) {
  .hero-grid,
  .auth-shell,
  .search-layout,
  .detail-layout,
  .install-shell,
  .wizard-shell,
  .admin-shell,
  .map-page,
  .footer-grid,
  .dashboard-layout-v3,
  .member-dashboard-shell,
  .home-v3-hero-inner,
  .login-v3-shell,
  .signup-v3-shell {
    grid-template-columns: 1fr;
  }

  .market-search-row,
  .market-filter-row,
  .market-card-grid,
  .market-broker-grid,
  .market-why-grid,
  .market-step-grid,
  .market-results-shell,
  .market-map-shell,
  .market-result-card {
    grid-template-columns: 1fr;
  }

  .listing-grid,
  .pricing-grid,
  .three-up,
  .grid-3,
  .grid-4,
  .stats-row,
  .member-stat-grid,
  .member-stat-grid.four-col,
  .member-mini-grid,
  .home-v3-why,
  .media-manager,
  .pc-stats,
  .market-home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .broker-grid {
    grid-template-columns: 1fr;
  }

  .admin-hero {
    grid-template-columns: 1fr;
  }

  .admin-command-grid,
  .admin-side-metrics,
  .admin-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-map-canvas-wrap {
    position: static;
    /* Stacked single-column layout here — no sticky sidebar to cap, so show
       full content instead of a short internal-scroll box. */
    max-height: none;
    overflow-y: visible;
  }

  .wizard-sidebar {
    position: static;
  }

  .admin-sidebar {
    position: static;
  }

  .dashboard-action-stack,
  .dashboard-link-row {
    justify-items: start;
    justify-content: flex-start;
  }

  .dashboard-panel-grid.two-col,
  .dashboard-hero-metrics,
  .broker-crm-layout,
  .crm-message-grid,
  .crm-context-panel {
    grid-template-columns: 1fr;
  }

  .crm-thread-panel {
    border-right: 0;
    border-bottom: 1px solid var(--sbr-border);
  }

  .listing-table .actions-col {
    text-align: left;
  }

  .detail-columns {
    grid-template-columns: 1fr;
  }

  .admin-record-grid,
  .admin-related-grid,
  .admin-action-grid,
  .admin-module-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .nav-inner,
  .section-heading,
  .admin-hero,
  .admin-record-header,
  .market-results-hero-inner,
  .market-filter-toolbar-inner,
  .market-results-head,
  .market-map-results-head,
  .market-map-canvas-head,
  .dashboard-hero-panel,
  .crm-message-head,
  .dashboard-list-row,
  .hero-actions,
  .cta-panel,
  .footer-bottom,
  .table-head,
  .map-panel-header,
  .summary-row,
  .auth-topbar,
  .login-form-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-module-header,
  .admin-module-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* .nav-shell is the positioned ancestor .main-nav opens into (below) — see
     the toggle button + .main-nav.is-open rules right after. */
  .nav-shell {
    position: relative;
  }

  .nav-mobile-toggle {
    display: inline-flex;
    position: absolute;
    top: 16px;
    right: 20px;
  }

  .main-nav {
    display: none;
  }

  .main-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sbr-navy);
    border-bottom: 2px solid var(--sbr-teal);
    box-shadow: 0 16px 28px rgba(11, 29, 58, 0.25);
    padding: 4px 20px 14px;
    z-index: 40;
  }

  .main-nav.is-open a {
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .listing-grid,
  .pricing-grid,
  .member-stat-grid,
  .member-stat-grid.four-col,
  .member-mini-grid,
  .admin-command-grid,
  .admin-side-metrics,
  .admin-quick-grid,
  .admin-mini-grid,
  .admin-section-grid,
  .admin-detail-grid,
  .admin-record-grid,
  .admin-kpi-grid,
  .admin-related-grid,
  .admin-module-grid,
  .stats-row,
  .detail-stats,
  .thumb-row,
  .plan-type-grid,
  .chip-check-grid,
  .result-card,
  .analytics-summary,
  .home-metric-row,
  .login-stat-grid,
  .signup-side-stats,
  .account-type-grid,
  .plan-pick-grid,
  .home-v3-why,
  .media-manager,
  .pc-stats,
  .market-home-stats,
  .market-card-metrics,
  .market-result-card .market-card-metrics,
  .market-map-shell,
  .market-why-grid,
  .market-step-grid,
  .pc-stats {
    grid-template-columns: 1fr;
  }

  .auth-topbar-links,
  .home-quick-filters,
  .login-socials,
  .search-input-row-v3,
  .dashboard-hero-actions,
  .result-actions,
  .market-section-head,
  .market-section-actions,
  .market-results-hero-inner,
  .market-results-head,
  .market-filter-toolbar-inner,
  .market-results-top-actions,
  .market-card-head,
  .market-result-head,
  .market-card-foot,
  .market-result-foot,
  .market-home-cta-actions,
  .market-inline-form,
  .market-result-actions,
  .market-broker-head,
  .admin-filter-toolbar,
  .market-map-card-head,
  .admin-module-tabs,
  .crm-compose-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-menu-trigger {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .profile-menu-caret {
    display: none;
  }

  .login-v3-brand,
  .login-v3-form,
  .signup-v3-side,
  .signup-v3-form,
  .home-v3-copy,
  .home-v3-search,
  .market-search-panel {
    padding: 24px;
  }

  .result-card img {
    height: 220px;
  }

  .market-card-media img,
  .market-result-media img {
    height: 220px;
  }

  .market-card-price {
    min-width: 0;
    text-align: left;
  }

  .market-home-copy {
    text-align: left;
  }

  .market-home-copy p {
    margin-left: 0;
  }

  .hero {
    padding-top: 32px;
  }

  .welcome-bar-v3,
  .cc-head,
  .promo-row,
  .admin-user-card,
  .ops-list-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-list-meta {
    justify-items: start;
    text-align: left;
  }

  .status-stack {
    justify-items: start;
    text-align: left;
  }

  .listing-table,
  .listing-table thead,
  .listing-table tbody,
  .listing-table tr,
  .listing-table th,
  .listing-table td {
    display: block;
    width: 100%;
  }

  .listing-table thead {
    display: none;
  }

  .listing-table tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--sbr-border);
  }

  .listing-table td {
    padding: 8px 0;
    border-bottom: 0;
    text-align: left;
  }

  .market-map-results-head,
  .market-map-results-list,
  .market-map-canvas-head {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.market-horizontal-search {
  padding: 0 0 18px;
}

.market-horizontal-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  padding: 18px;
  border: 1px solid var(--sbr-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 32px rgba(11, 29, 58, 0.06);
}

.market-inline-field {
  min-width: 150px;
  flex: 1 1 160px;
}

.market-inline-field.short {
  flex: 0 1 140px;
}

/* "Active + Under Contract" (the default Status option) needs ~200px to
   render without clipping — .short's 140px was cutting it down to "Active +
   Unde". A dedicated floor here instead of widening .short itself, since
   short still fits Min/Max Price (plain numbers) fine at 140px. flex-grow:0
   (unlike the plain .market-inline-field default of 1) matters on the
   business variant specifically — with Category/Cuisine/Min Revenue added,
   Status is the field most likely to wrap onto a row by itself, and with
   grow:1 that meant stretching alone to the row's full width instead of
   just sitting at its own natural size. */
.market-inline-field.status-field {
  flex: 0 1 220px;
  min-width: 220px;
}

.market-inline-field span {
  display: block;
  margin-bottom: 6px;
  color: var(--sbr-navy);
  font-size: 14px;
  font-weight: 700;
}

.market-inline-field input,
.market-inline-field select,
.market-inline-select {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--sbr-border);
  border-radius: 12px;
  background: #fff;
}

.market-inline-select {
  min-width: 146px;
  font-size: 14px;
}

/* Replaces the old left "Filter Results" sidebar — every field that used to
   live in that vertical list now sits in one horizontal bar above the
   results grid, reusing the exact .market-inline-field/.market-inline-select
   look already proven on the map page's search bar. */
/* Dark navy fading to a blue-grey at the trailing edge, rather than the
   plain white panel this used to be. Everything below overrides the
   (otherwise shared with the map page's white bar) label/pill colors for
   legibility on the dark fill — scoped to .market-filter-bar specifically
   so the map page's own bar, still white, is untouched. */
.market-filter-bar {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(90deg, var(--sbr-navy) 0%, #46505f 100%);
  box-shadow: 0 16px 32px rgba(11, 29, 58, 0.18);
}

.market-filter-bar .market-inline-field span {
  color: rgba(255, 255, 255, 0.85);
}

.market-filter-bar .market-quick-pills {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.market-filter-bar .market-quick-pills-label {
  color: rgba(255, 255, 255, 0.7);
}

.market-filter-bar .market-quick-pill span {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
}

.market-filter-bar .market-quick-pill:hover span {
  border-color: var(--sbr-teal);
}

.market-filter-bar .market-quick-pill:has(input:checked) span {
  background: var(--sbr-teal);
  border-color: var(--sbr-teal);
  color: #fff;
}

.market-filter-bar-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.market-filter-bar-submit {
  align-self: end;
}

.market-quick-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sbr-border);
}

.market-quick-pills-label {
  margin-right: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sbr-text-secondary);
}

/* Quick filters as one-click pills instead of a radio list with an "Apply"
   step — visually hide the native radio and style its label as the pill;
   :has() lets the checked state style that label without any JS. */
.market-quick-pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.market-quick-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--sbr-border);
  background: var(--sbr-white);
  color: var(--sbr-text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s ease;
}

.market-quick-pill:hover span {
  border-color: var(--sbr-teal);
}

.market-quick-pill:has(input:checked) span {
  background: var(--sbr-navy);
  border-color: var(--sbr-navy);
  color: #fff;
}

.market-map-search-form {
  gap: 10px;
  border-radius: 20px;
}

.market-map-search .market-inline-field {
  flex: 1 1 150px;
}

.market-map-search .market-inline-field.short {
  flex: 0 1 136px;
}

.market-result-body {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.market-result-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
}

.market-result-head h3 {
  margin: 0;
}

.market-result-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  color: var(--sbr-text-secondary);
  font-size: 13px;
}

.market-result-media {
  position: relative;
}

.market-result-media .badge {
  position: absolute;
  top: 14px;
  left: 14px;
}

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

.market-map-page {
  padding: 0 0 32px;
}

.market-map-shell-full {
  display: grid;
  grid-template-columns: minmax(320px, 25%) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 190px);
  border-top: 1px solid var(--sbr-border);
  border-bottom: 1px solid var(--sbr-border);
  background: #fff;
}

.market-map-shell-full .market-map-results-panel,
.market-map-shell-full .market-map-canvas-wrap {
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.market-map-shell-full .market-map-results-panel {
  border-right: 1px solid var(--sbr-border);
}

.market-map-results-panel {
  background:
    linear-gradient(180deg, rgba(11, 29, 58, 0.03), rgba(11, 29, 58, 0)),
    #fff;
}

.market-map-results-head {
  padding: 26px 24px 18px;
  border-bottom: 1px solid var(--sbr-border);
  background: rgba(255, 255, 255, 0.94);
}

.market-map-results-list {
  overflow-y: auto;
  max-height: calc(100vh - 286px);
  padding: 18px;
  gap: 12px;
}

.market-map-canvas-wrap {
  min-height: calc(100vh - 190px);
  background: #f6f5f0;
}

.market-map-canvas-head {
  padding: 24px 24px 16px;
}

.map-canvas {
  min-height: calc(100vh - 254px);
}

.map-card-category {
  display: inline-flex;
  margin: 8px 0 6px;
  color: var(--sbr-text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.market-map-result-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  margin-bottom: 0;
  border: 1px solid var(--sbr-border);
  border-radius: 18px;
  background: var(--sbr-white);
  box-shadow: 0 10px 22px rgba(11, 29, 58, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.market-map-result-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 166, 142, 0.42);
  box-shadow: 0 18px 34px rgba(11, 29, 58, 0.12);
}

.market-map-result-card img {
  width: 108px;
  height: 108px;
  border-radius: 14px;
  object-fit: cover;
}

.market-map-result-card img.is-nda-locked {
  filter: blur(10px) saturate(0.7);
}

.market-map-card-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.market-map-card-location,
.market-map-card-summary {
  margin: 0;
  color: var(--sbr-text-secondary);
}

.market-map-card-location {
  font-size: 13px;
}

.market-map-card-price-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.market-map-card-price-row strong {
  color: var(--sbr-navy);
  font-size: 15px;
}

.market-map-card-price-row span {
  font-size: 12px;
  color: var(--sbr-text-secondary);
  font-weight: 700;
}

.market-map-card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.55;
}

.market-chip-row-compact {
  gap: 6px;
}

.market-chip-row-compact .market-chip {
  padding: 5px 9px;
  font-size: 11px;
}

.broker-directory-hero,
.broker-profile-hero {
  padding: 42px 0 24px;
  background:
    linear-gradient(270deg, rgba(15, 166, 142, 0.4) 0%, rgba(15, 166, 142, 0.12) 30%, transparent 55%),
    linear-gradient(180deg, rgba(11, 29, 58, 0.98) 0%, rgba(17, 44, 79, 0.96) 100%);
  color: rgba(255, 255, 255, 0.92);
}

.broker-profile-hero.is-premium {
  background:
    linear-gradient(90deg, rgba(212, 168, 67, 0.4) 0%, rgba(212, 168, 67, 0.12) 30%, transparent 55%),
    linear-gradient(180deg, rgba(11, 29, 58, 0.98) 0%, rgba(17, 44, 79, 0.96) 100%);
}

.broker-directory-hero-inner,
.broker-profile-hero-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}

.broker-directory-stats,
.broker-profile-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 360px;
}

.broker-directory-stats article,
.broker-profile-side article {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.broker-directory-stats strong,
.broker-profile-side strong {
  font-size: 22px;
  color: #fff;
}

.broker-profile-side span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.broker-search-strip {
  padding: 18px 0 0;
}

.broker-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  padding: 18px;
  border: 1px solid var(--sbr-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sbr-shadow);
}

.broker-search-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding-bottom: 4px;
}

.broker-feature-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.broker-feature-card,
.broker-card-centered {
  position: relative;
  padding-top: 44px;
}

.broker-card-header-band {
  position: absolute;
  inset: 0 0 auto 0;
  height: 82px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(135deg, #0b1d3a 0%, #16406d 100%);
}

.broker-card-header-band.is-premium {
  background: linear-gradient(135deg, #d4a843 0%, #f2d58a 100%);
}

.broker-avatar-centered {
  position: relative;
  z-index: 1;
  margin: 0 auto 16px;
  width: 86px;
  height: 86px;
  border: 6px solid #fff;
  box-shadow: 0 14px 28px rgba(11, 29, 58, 0.14);
}

.broker-avatar-xl {
  width: 104px;
  height: 104px;
  font-size: 28px;
}

.broker-card-top.centered,
.chip-row.centered {
  justify-content: center;
}

.broker-profile-main {
  display: flex;
  align-items: center;
  gap: 20px;
}

.broker-profile-main h1 {
  margin: 6px 0 8px;
  color: #fff;
}

.broker-profile-main p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
}

.broker-profile-main .eyebrow {
  color: var(--sbr-teal);
}

.listing-contact-profile {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--sbr-border);
}

.listing-contact-profile strong {
  display: block;
  margin: 4px 0 6px;
  color: var(--sbr-navy);
  font-size: 18px;
}

.listing-contact-profile p {
  margin: 0 0 6px;
  color: var(--sbr-text-secondary);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .market-map-shell-full {
    grid-template-columns: 1fr;
  }

  .market-map-shell-full .market-map-results-panel {
    border-right: 0;
    border-bottom: 1px solid var(--sbr-border);
  }

  .market-map-results-list,
  .map-canvas {
    max-height: none;
    min-height: 420px;
  }

  .broker-directory-hero-inner,
  .broker-profile-hero-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .broker-directory-stats,
  .broker-profile-side {
    min-width: 0;
  }
}

@media (max-width: 800px) {
  .broker-feature-grid {
    grid-template-columns: 1fr;
  }

  .market-result-card {
    grid-template-columns: 1fr;
  }

  .market-map-result-card {
    grid-template-columns: 1fr;
  }

  .market-map-result-card img {
    width: 100%;
    height: 180px;
  }
}

.broker-dashboard-v4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.broker-dashboard-main-v4,
.broker-dashboard-side-v4 {
  min-width: 0;
}

.broker-welcome-v4 {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 24px 26px;
  border-radius: 14px;
  background: var(--sbr-navy);
  color: #fff;
  margin-bottom: 18px;
}

.broker-kicker-v4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sbr-teal);
  font-weight: 700;
  margin-bottom: 6px;
}

.broker-welcome-v4 h1 {
  margin: 0 0 6px;
  color: #fff;
}

.broker-welcome-v4 p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
}

.broker-welcome-actions-v4 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.broker-kpi-card-v4 {
  margin-bottom: 18px;
}

.broker-kpi-strip-v4 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.broker-kpi-item-v4 {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  border-right: 1px solid var(--sbr-border);
}

.broker-kpi-item-v4:last-child {
  border-right: 0;
}

.broker-kpi-item-v4 span,
.broker-kpi-item-v4 small {
  color: var(--sbr-text-secondary);
}

.broker-kpi-item-v4 strong {
  font-family: "Playfair Display", serif;
  font-size: 28px;
  color: var(--sbr-navy);
}

.broker-tabs-v4 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.broker-tab-v4 {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--sbr-border);
  background: #fff;
  color: var(--sbr-text-secondary);
  text-decoration: none;
  font-weight: 700;
}

.broker-tab-v4.is-active {
  background: var(--sbr-teal-light);
  border-color: rgba(15, 166, 142, 0.35);
  color: var(--sbr-teal-dark);
}

.broker-card-v4 {
  margin-bottom: 18px;
}

.broker-card-header-v4 {
  padding: 16px 20px;
}

.broker-summary-list-v4,
.broker-overview-list-v4 {
  display: grid;
  gap: 12px;
}

.broker-summary-row-v4,
.broker-overview-item-v4 {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--sbr-border);
}

.broker-summary-row-v4:last-child,
.broker-overview-item-v4:last-child {
  border-bottom: 0;
}

.broker-overview-item-v4 strong {
  display: block;
  color: var(--sbr-navy);
}

.broker-overview-item-v4 p {
  margin: 4px 0 0;
  color: var(--sbr-text-secondary);
  font-size: 13px;
}

.broker-overview-meta-v4 {
  display: grid;
  gap: 8px;
  justify-items: end;
  text-align: right;
}

.broker-table-wrap-v4 {
  padding-top: 0;
}

.broker-table-v4 td,
.broker-table-v4 th {
  padding-right: 14px;
}

.broker-crm-filters-v4 {
  display: flex;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.broker-crm-shell-v4 {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  border: 1px solid var(--sbr-border);
  border-radius: 14px;
  overflow: hidden;
  min-height: 720px;
  background: #fff;
}

.broker-crm-queue-v4 {
  border-right: 1px solid var(--sbr-border);
  background: #fbfaf7;
}

.broker-crm-queue-head-v4 {
  padding: 16px;
  border-bottom: 1px solid var(--sbr-border);
  display: grid;
  gap: 4px;
}

.broker-crm-queue-head-v4 strong {
  color: var(--sbr-navy);
}

.broker-crm-queue-head-v4 span {
  font-size: 12px;
  color: var(--sbr-text-secondary);
}

.broker-crm-queue-list-v4 {
  display: grid;
}

.broker-crm-queue-item-v4 {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--sbr-border);
}

.broker-crm-queue-item-v4 strong {
  color: var(--sbr-navy);
}

.broker-crm-queue-item-v4 span,
.broker-crm-queue-item-v4 small {
  color: var(--sbr-text-secondary);
}

.broker-crm-queue-item-v4.is-active {
  background: var(--sbr-teal-light);
}

.broker-crm-thread-v4 {
  padding: 18px;
  display: grid;
  gap: 16px;
}

.broker-crm-thread-head-v4 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.broker-crm-thread-head-v4 h3 {
  margin: 0 0 4px;
}

.broker-crm-thread-head-v4 p {
  margin: 0;
  color: var(--sbr-text-secondary);
}

.broker-crm-contact-strip-v4 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.broker-crm-contact-strip-v4 > div {
  display: flex;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--sbr-border);
  border-radius: 12px;
  background: #fbfaf7;
}

.crm-icon-box-v4 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-weight: 700;
  flex-shrink: 0;
}

.broker-crm-contact-strip-v4 strong {
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
  color: var(--sbr-navy);
}

.broker-crm-contact-strip-v4 p {
  margin: 0;
  color: var(--sbr-text-secondary);
  font-size: 13px;
}

.broker-crm-message-card-v4 {
  display: grid;
  gap: 12px;
}

.broker-crm-message-bubble-v4,
.broker-crm-note-v4 {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--sbr-border);
  background: #fff;
}

.broker-crm-message-bubble-v4 {
  background: #f7fbfa;
}

.broker-crm-message-label-v4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sbr-teal-dark);
  font-weight: 700;
  margin-bottom: 8px;
}

.broker-crm-message-bubble-v4 p,
.broker-crm-note-v4 p {
  margin: 0;
  color: var(--sbr-text);
}

.broker-crm-note-head-v4 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.broker-crm-note-head-v4 span {
  color: var(--sbr-text-secondary);
  font-size: 12px;
}

.broker-crm-panel-v4 {
  padding: 18px;
  border: 1px solid var(--sbr-border);
  border-radius: 14px;
  background: #fbfaf7;
}

.broker-crm-panel-head-v4 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.broker-crm-panel-head-v4 h4 {
  margin: 0;
  color: var(--sbr-navy);
}

.broker-crm-panel-head-v4 span {
  color: var(--sbr-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.broker-inline-actions-v4,
.broker-inline-unlock-v4 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.broker-inline-unlock-v4 {
  margin-top: 10px;
}

.broker-empty-thread-v4 {
  display: grid;
  place-items: center;
  min-height: 520px;
  text-align: center;
}

.broker-profile-card-v4 {
  background: var(--sbr-navy);
  border-radius: 14px;
  padding: 22px 18px;
  color: #fff;
  margin-bottom: 18px;
  text-align: center;
}

.broker-profile-avatar-v4 {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 12px;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.12);
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-size: 26px;
  font-weight: 700;
}

.broker-profile-avatar-v4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.broker-profile-name-v4 {
  font-family: "Playfair Display", serif;
  font-size: 18px;
  margin-bottom: 4px;
}

.broker-profile-firm-v4 {
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
  margin-bottom: 14px;
}

.broker-profile-stats-v4 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}

.broker-profile-stats-v4 div {
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.03);
}

.broker-profile-stats-v4 strong {
  display: block;
  color: var(--sbr-teal-light);
  font-family: "Playfair Display", serif;
  font-size: 20px;
}

.broker-profile-stats-v4 span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.48);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.broker-profile-menu-v4 summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

.broker-profile-menu-v4 summary::-webkit-details-marker {
  display: none;
}

.broker-profile-menu-list-v4 {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.broker-profile-menu-list-v4 a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 13px;
}

.broker-avatar-editor-v4 {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--sbr-border);
  border-radius: 14px;
  background: #fbfaf7;
}

.broker-avatar-editor-preview-v4 {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-size: 28px;
  font-weight: 700;
  flex-shrink: 0;
}

.broker-avatar-editor-preview-v4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.broker-avatar-editor-copy-v4 p {
  margin: 6px 0 12px;
  color: var(--sbr-text-secondary);
}

.listing-builder-frame-v6 {
  max-width: none;
  margin: 0 auto;
  margin-top: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.listing-builder-page-v9 {
  padding-top: 24px;
  padding-bottom: 40px;
}

.listing-builder-container-v9 {
  width: min(1480px, calc(100% - 48px));
}

.listing-builder-page-head-v8 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 2px;
}

.listing-builder-page-head-v8 h1 {
  margin: 0;
  color: var(--sbr-navy);
  font-size: 24px;
  line-height: 1.08;
}

.listing-builder-page-actions-v8 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.listing-builder-page-pill-v8 {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eef6f4;
  color: var(--sbr-teal-dark);
  font-size: 12px;
  font-weight: 700;
}

.listing-builder-shell-v4 {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.listing-builder-sidebar-v4 {
  position: sticky;
  top: 104px;
  padding: 10px;
  border-radius: 16px;
  background: #f6f9fc;
  color: var(--sbr-navy);
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-shadow: 0 6px 16px rgba(11, 29, 58, 0.04);
}

.listing-builder-steps-v4 {
  display: grid;
  gap: 4px;
}

.listing-builder-step-v4 {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: start;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px;
  background: transparent;
  color: var(--sbr-text-secondary);
  text-align: left;
  cursor: pointer;
}

.listing-builder-step-v4.is-active {
  background: #fff;
  border-color: rgba(15, 166, 142, 0.18);
  color: var(--sbr-navy);
  box-shadow: 0 8px 18px rgba(11, 29, 58, 0.06);
}

.listing-builder-step-number-v4 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(11, 29, 58, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--sbr-navy);
  background: rgba(255, 255, 255, 0.8);
}

.listing-builder-step-v4 strong {
  display: block;
  color: inherit;
  font-size: 12px;
}

.listing-builder-step-v4 small {
  display: block;
  margin-top: 2px;
  color: var(--sbr-text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.listing-builder-main-v4 {
  min-width: 0;
}

.listing-panel-v4 {
  padding: 18px;
}

.listing-panel-head-v4 {
  margin-bottom: 14px;
}

.listing-panel-head-v4 h2 {
  margin: 6px 0;
  font-size: 20px;
  line-height: 1.12;
}

.listing-panel-head-v4 p {
  margin: 0;
  color: var(--sbr-text-secondary);
}

.listing-type-grid-v4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.listing-type-card-v4 {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--sbr-border);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.listing-type-card-v4 input {
  display: none;
}

.listing-type-card-v4:has(input:checked) {
  border-color: var(--sbr-teal);
  box-shadow: 0 0 0 4px rgba(15, 166, 142, 0.08);
}

.listing-type-card-v4 strong {
  font-size: 16px;
}

.listing-type-card-v4 small {
  line-height: 1.45;
  font-size: 14px;
}

.listing-type-icon-v4 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}

.listing-type-icon-v4 i {
  font-size: 20px;
  line-height: 1;
}

.listing-type-icon-v4.is-teal {
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
}

.listing-type-icon-v4.is-gold {
  background: var(--sbr-gold-light);
  color: #946d0e;
}

.listing-section-card-v4 {
  padding: 18px;
  border: 1px solid var(--sbr-border);
  border-radius: 16px;
  background: #fff;
  margin-bottom: 18px;
}

.listing-section-title-v4 {
  display: flex;
  gap: 12px;
  align-items: start;
  margin-bottom: 16px;
}

.listing-section-icon-v4 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.listing-section-icon-v4 i {
  font-size: 14px;
  line-height: 1;
}

.listing-section-title-v4 strong {
  display: block;
  color: var(--sbr-navy);
}

.listing-section-title-v4 small {
  display: block;
  color: var(--sbr-text-secondary);
  margin-top: 2px;
}

.listing-review-card-v4 {
  padding: 18px;
  border: 1px solid var(--sbr-border);
  border-radius: 16px;
  background: #fff;
}

.listing-review-row-v4 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sbr-border);
}

.listing-review-row-v4:last-child {
  border-bottom: 0;
}

.listing-review-row-v4 span {
  color: var(--sbr-text-secondary);
}

.listing-builder-footer-v4 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.wizard-actions-final {
  justify-content: flex-start;
  margin-top: 18px;
}

@media (max-width: 1100px) {
  .broker-dashboard-v4,
  .listing-builder-shell-v4 {
    grid-template-columns: 1fr;
  }

  .listing-builder-sidebar-v4 {
    position: static;
  }

  .broker-kpi-strip-v4 {
    grid-template-columns: 1fr;
  }

  .broker-kpi-item-v4 {
    border-right: 0;
    border-bottom: 1px solid var(--sbr-border);
  }

  .broker-kpi-item-v4:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 820px) {
  .broker-welcome-v4,
  .broker-summary-row-v4,
  .broker-overview-item-v4,
  .broker-crm-thread-head-v4,
  .listing-review-row-v4,
  .listing-step-notice-v10 {
    flex-direction: column;
    align-items: flex-start;
  }

  .broker-overview-meta-v4 {
    justify-items: start;
    text-align: left;
  }

  .broker-crm-shell-v4,
  .listing-type-grid-v4,
  .broker-crm-contact-strip-v4 {
    grid-template-columns: 1fr;
  }

  .wizard-footer-actions-v10 {
    width: 100%;
    justify-content: stretch;
  }

  .wizard-footer-actions-v10 .btn {
    width: 100%;
    justify-content: center;
  }
}

.broker-dashboard-v5 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.broker-dashboard-main-v5,
.broker-dashboard-side-v5 {
  min-width: 0;
}

.broker-hero-v5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0d1f3d 0%, #12284c 100%);
  color: #fff;
  box-shadow: 0 14px 24px rgba(11, 29, 58, 0.12);
  margin-bottom: 16px;
}

.broker-hero-copy-v5 {
  min-width: 0;
}

.broker-kicker-v5 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sbr-teal);
  margin-bottom: 8px;
}

.broker-hero-v5 h1 {
  margin: 0 0 4px;
  color: #fff;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.broker-hero-v5 p {
  margin: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.64);
  overflow-wrap: anywhere;
}

.broker-hero-actions-v5 {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.broker-hero-actions-v5 .btn {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 14px rgba(15, 166, 142, 0.12);
}

.broker-ghost-action-v5 {
  border-color: rgba(255, 255, 255, 0.16);
  color: #f3f7fb;
  background: rgba(255, 255, 255, 0.04);
}

.broker-stats-grid-v5 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.broker-stat-card-v5 {
  display: grid;
  gap: 6px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(11, 29, 58, 0.09);
  border-top-width: 3px;
  box-shadow: 0 8px 14px rgba(11, 29, 58, 0.05);
  min-width: 0;
}

.broker-stat-card-v5.is-teal {
  border-top-color: var(--sbr-teal);
}

.broker-stat-card-v5.is-gold {
  border-top-color: var(--sbr-gold);
}

.broker-stat-card-v5.is-navy {
  border-top-color: var(--sbr-navy);
}

.broker-stat-card-v5 span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #647081;
}

.broker-stat-card-v5 strong {
  font-family: "Playfair Display", serif;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.02;
  color: var(--sbr-navy);
  overflow-wrap: anywhere;
}

.broker-stat-card-v5.is-teal strong {
  color: var(--sbr-teal);
}

.broker-stat-card-v5.is-gold strong {
  color: #d1a02a;
}

.broker-stat-card-v5 small {
  color: #2f8b56;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.broker-tabs-v5 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.broker-tab-v5 {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(11, 29, 58, 0.08);
  color: #5d6877;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 6px 12px rgba(11, 29, 58, 0.04);
}

.broker-tab-v5.is-active {
  color: var(--sbr-teal-dark);
  background: #e7faf5;
  border-color: rgba(15, 166, 142, 0.24);
}

.broker-panel-v5 {
  margin-bottom: 14px;
}

.broker-panel-priority-v6 {
  margin-bottom: 16px;
}

.broker-section-head-v5 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 10px;
}

.broker-section-head-v5 h2 {
  margin: 0 0 5px;
  font-size: clamp(15px, 1.8vw, 20px);
  font-family: "Inter", "DM Sans", sans-serif;
}

.broker-empty-thread-v5 h3 {
  margin: 0 0 5px;
  font-size: 18px;
  font-family: "Inter", "DM Sans", sans-serif;
}

.broker-section-head-v5 p {
  margin: 0;
  color: var(--sbr-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.broker-listings-card-v5,
.broker-form-panel-v5,
.broker-simple-stack-v5,
.broker-side-card-v5 {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-shadow: 0 8px 14px rgba(11, 29, 58, 0.05);
}

.broker-simple-stack-v5 {
  padding: 18px 20px;
}

.broker-listing-status-tabs-v5 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 14px;
  border-bottom: 1px solid var(--sbr-border);
}

.broker-listing-status-tab-v5 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  text-decoration: none;
  color: #5d6877;
  font-size: 12px;
  font-weight: 800;
  border-bottom: 3px solid transparent;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
}

.broker-listing-status-tab-v5 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f1efea;
  color: #66707d;
  font-size: 10px;
}

.broker-listing-status-tab-v5.is-active {
  color: var(--sbr-teal-dark);
  border-bottom-color: var(--sbr-teal);
}

.broker-listing-status-tab-v5.is-active span {
  background: #e8faf5;
  color: var(--sbr-teal-dark);
}

.broker-listing-table-wrap-v5 {
  overflow-x: auto;
}

.broker-listing-table-wrap--priority-v6 {
  min-height: 360px;
}

.broker-listing-table-v5 {
  width: 100%;
  border-collapse: collapse;
}

.broker-listing-table-v5 th,
.broker-listing-table-v5 td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--sbr-border);
  vertical-align: middle;
}

.broker-listing-table-v5 th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d6877;
  white-space: nowrap;
}

.broker-listing-title-v5 {
  font-size: 14px;
  font-weight: 800;
  color: var(--sbr-navy);
  margin-bottom: 6px;
  line-height: 1.35;
}

.broker-listing-meta-v5 {
  color: #6d7785;
  font-size: 11px;
  line-height: 1.45;
}

.broker-listing-price-v5 {
  font-size: 14px;
  font-weight: 900;
  color: var(--sbr-teal);
}

.broker-listing-price-label-v5 {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #6d7785;
}

.broker-metric-link-v5 {
  color: var(--sbr-navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}

.broker-row-actions-v5 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.broker-status-select-v5 {
  min-width: 122px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 2px solid rgba(15, 166, 142, 0.22);
  background: #ebfaf5;
  color: var(--sbr-teal-dark);
  font-weight: 800;
  font-size: 11px;
}

.broker-inline-edit-v5 {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 11px;
}

.broker-row-menu-trigger-v6 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(11, 29, 58, 0.12);
  background: #fff;
  color: var(--sbr-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.broker-row-menu-trigger-v6 i {
  font-size: 13px;
}

.broker-action-menu-v5 summary {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(11, 29, 58, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 12px;
}

.broker-overview-stack-v6 {
  display: grid;
  gap: 14px;
}

.broker-overview-card-v6 {
  background: #fff;
  border: 1px solid rgba(11, 29, 58, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 14px rgba(11, 29, 58, 0.05);
  overflow: hidden;
}

.broker-overview-head-v6 {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--sbr-border);
}

.broker-overview-head-v6 h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.broker-overview-head-v6 p {
  margin: 0;
  color: var(--sbr-text-secondary);
  font-size: 12px;
}

.broker-overview-rows-v6 {
  display: grid;
}

.broker-overview-row-v6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--sbr-border);
  text-decoration: none;
  color: inherit;
}

.broker-overview-row-v6:first-child {
  border-top: 0;
}

.broker-overview-row-v6 strong {
  display: block;
  color: var(--sbr-navy);
  margin-bottom: 3px;
  font-size: 13px;
}

.broker-overview-row-v6 span {
  display: block;
  color: var(--sbr-text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.broker-overview-row-v6 em {
  font-style: normal;
  color: var(--sbr-navy);
  font-weight: 800;
  font-size: 13px;
  text-align: right;
  max-width: 38%;
  overflow-wrap: anywhere;
}

.broker-crm-toolbar-v5 {
  display: flex;
  gap: 14px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.broker-crm-toolbar-v6 {
  margin-bottom: 16px;
}

.broker-crm-toolbar-line-v6 {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(11, 29, 58, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 14px rgba(11, 29, 58, 0.05);
}

.broker-crm-toolbar-group-v6 {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.broker-crm-toolbar-group-v6 > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #66707d;
}

.field-inline-v6 select {
  min-height: 42px;
}

.broker-crm-shell-v5 {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 700px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-shadow: 0 12px 22px rgba(11, 29, 58, 0.05);
  overflow: hidden;
}

.broker-crm-list-v5 {
  border-right: 1px solid var(--sbr-border);
  background: #fbfaf7;
}

.broker-crm-list-head-v5 {
  display: grid;
  gap: 6px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--sbr-border);
}

.broker-crm-list-head-v5 strong {
  color: var(--sbr-navy);
}

.broker-crm-list-head-v5 span {
  color: var(--sbr-text-secondary);
  font-size: 12px;
}

.broker-crm-list-items-v5 {
  display: grid;
}

.broker-crm-list-item-v5 {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--sbr-border);
}

.broker-crm-list-item-v5 strong {
  color: var(--sbr-navy);
  font-size: 13px;
  line-height: 1.35;
}

.broker-crm-list-item-v5 span,
.broker-crm-list-item-v5 small {
  color: var(--sbr-text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.broker-crm-list-item-v5.is-active {
  background: #e9faf5;
}

.broker-crm-workspace-v5 {
  padding: 18px;
}

.broker-empty-thread-v5 {
  min-height: 560px;
  display: grid;
  place-items: center;
  text-align: center;
}

.broker-crm-head-v5 {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  margin-bottom: 14px;
}

.broker-crm-summary-row-v6 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.broker-crm-summary-pill-v6 {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--sbr-border);
  background: #fbfaf7;
}

.broker-crm-summary-pill-v6 strong {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #66717d;
}

.broker-crm-summary-pill-v6 span {
  display: block;
  color: var(--sbr-navy);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.broker-crm-head-v5 h3 {
  margin: 0 0 5px;
  font-size: 18px;
  font-family: "Inter", "DM Sans", sans-serif;
}

.broker-crm-head-v5 p {
  margin: 0;
  color: var(--sbr-text-secondary);
  font-size: 12px;
}

.broker-crm-contact-grid-v5 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.broker-crm-contact-lines-v6 {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.broker-crm-contact-line-v6 {
  display: grid;
  grid-template-columns: 28px 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--sbr-border);
  border-radius: 12px;
  background: #fbfaf7;
}

.broker-crm-contact-line-v6 strong {
  color: #66717d;
  font-size: 11px;
}

.broker-crm-contact-line-v6 span:last-child {
  color: var(--sbr-navy);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.broker-crm-stage-actions-v6 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.broker-stage-btn-v6 {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
}

.broker-stage-btn-lost-v6 {
  border-color: rgba(11, 29, 58, 0.12);
}

.broker-crm-contact-card-v5 {
  display: flex;
  gap: 10px;
  align-items: start;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid var(--sbr-border);
  background: #fbfaf7;
}

.crm-icon-box-v5 {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8faf5;
  color: var(--sbr-teal-dark);
  font-weight: 800;
  flex-shrink: 0;
  font-size: 11px;
}

.crm-icon-box-v5 i,
.broker-side-link-icon-v5 i {
  line-height: 1;
}

.broker-crm-contact-card-v5 strong {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #66717d;
}

.broker-crm-contact-card-v5 p {
  margin: 0;
  color: var(--sbr-navy);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.broker-crm-columns-v5 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.broker-crm-thread-column--full-v6 {
  padding: 0;
  border: 0;
  background: transparent;
}

.broker-crm-thread-column-v5,
.broker-crm-side-panel-v5,
.broker-avatar-editor-v5 {
  background: #fff;
  border: 1px solid var(--sbr-border);
  border-radius: 14px;
}

.broker-crm-thread-column-v5 {
  padding: 14px;
}

.broker-crm-statusline-v6 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.broker-crm-statusline-v6 span {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--sbr-border);
  background: #fff;
  color: var(--sbr-navy);
  font-size: 12px;
  font-weight: 700;
}

.broker-crm-statusline-v6 strong {
  color: #66717d;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.broker-unlock-inline-v6 {
  margin-bottom: 14px;
}

.broker-crm-message-bubble-v5 {
  padding: 13px 14px;
  border-radius: 14px;
  background: #f4fbf8;
  border: 1px solid rgba(15, 166, 142, 0.12);
}

.broker-crm-message-label-v5 {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sbr-teal-dark);
}

.broker-crm-message-bubble-v5 p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.broker-crm-note-stream-v5 {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.broker-crm-note-v5 {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--sbr-border);
  background: #fff;
}

.broker-crm-note-head-v5 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.broker-crm-note-head-v5 span {
  color: var(--sbr-text-secondary);
  font-size: 11px;
}

.broker-crm-note-v5 p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.broker-crm-compose-v5 {
  display: grid;
  gap: 14px;
}

.broker-inline-actions-v5 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.broker-crm-side-panel-v5 {
  padding: 14px;
  background: #fbfaf7;
}

.broker-floating-menu-v6 {
  position: fixed;
  z-index: 1200;
  min-width: 220px;
}

.broker-floating-menu-panel-v6 {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--sbr-border);
  box-shadow: 0 22px 44px rgba(11, 29, 58, 0.16);
}

.broker-floating-menu-panel-v6 a,
.broker-floating-menu-panel-v6 button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  color: var(--sbr-text);
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
}

.broker-floating-menu-panel-v6 a:hover,
.broker-floating-menu-panel-v6 button:hover {
  background: #f4f1eb;
}

.broker-crm-side-head-v5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.broker-crm-side-head-v5 h4 {
  margin: 0;
  font-size: 15px;
}

.broker-crm-side-head-v5 span {
  font-size: 11px;
  font-weight: 700;
  color: var(--sbr-text-secondary);
}

.broker-unlock-form-v5 {
  margin-top: 14px;
}

.broker-summary-grid-v5 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.broker-summary-card-v5 {
  padding: 14px;
  border: 1px solid var(--sbr-border);
  border-radius: 14px;
  background: #fbfaf7;
}

.broker-summary-card-v5 span {
  display: block;
  margin-bottom: 6px;
  color: var(--sbr-text-secondary);
  font-size: 12px;
}

.broker-summary-card-v5 strong {
  font-size: 16px;
  color: var(--sbr-navy);
  overflow-wrap: anywhere;
}

.broker-list-rows-v5 {
  display: grid;
}

.broker-list-row-v5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  border-top: 1px solid var(--sbr-border);
}

.broker-list-row-v5:first-child {
  border-top: 0;
}

.broker-list-row-v5 p {
  margin: 5px 0 0;
  color: var(--sbr-text-secondary);
  font-size: 12px;
}

.broker-list-row-meta-v5 {
  display: grid;
  gap: 6px;
  justify-items: end;
  font-size: 12px;
}

.broker-form-panel-v5 {
  padding: 16px;
}

.broker-avatar-editor-v5 {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: #fbfaf7;
}

.broker-avatar-editor-trigger-v6 {
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
}

.broker-avatar-editor-preview-v5 {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e7faf5;
  color: var(--sbr-teal-dark);
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}

.broker-avatar-editor-preview-v5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.broker-avatar-editor-overlay-v6 {
  position: absolute;
  inset: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  background: rgba(11, 29, 58, 0.72);
  color: var(--sbr-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.broker-avatar-editor-trigger-v6:hover .broker-avatar-editor-overlay-v6,
.broker-avatar-editor-trigger-v6:focus-visible .broker-avatar-editor-overlay-v6 {
  opacity: 1;
}

.broker-avatar-file-hidden-v6 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.broker-avatar-editor-copy-v5 p {
  margin: 6px 0 10px;
  color: var(--sbr-text-secondary);
  font-size: 12px;
}

.broker-side-profile-v5 {
  padding: 16px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #0d1f3d 0%, #102544 100%);
  color: #fff;
  text-align: center;
  box-shadow: 0 12px 20px rgba(11, 29, 58, 0.12);
  margin-bottom: 14px;
}

.broker-side-avatar-v5 {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(231, 250, 245, 0.88);
  background: #e7faf5;
  color: var(--sbr-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-size: 18px;
  font-weight: 800;
}

.broker-side-avatar-link-v6 {
  text-decoration: none;
}

.broker-side-avatar-v5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.broker-side-avatar-overlay-v6 {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 29, 58, 0.58);
  color: var(--sbr-white);
  font-size: 0.95rem;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.broker-side-avatar-link-v6:hover .broker-side-avatar-overlay-v6,
.broker-side-avatar-link-v6:focus-visible .broker-side-avatar-overlay-v6 {
  opacity: 1;
}

.broker-side-name-v5 {
  font-family: "Playfair Display", serif;
  font-size: 16px;
  margin-bottom: 4px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.broker-side-firm-v5 {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.broker-side-stats-v5 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}

.broker-side-stats-v5 div {
  padding: 10px 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.broker-side-stats-v5 div:last-child {
  border-right: 0;
}

.broker-side-stats-v5 strong {
  display: block;
  margin-bottom: 4px;
  font-family: "Playfair Display", serif;
  font-size: 16px;
  color: #f2fbf8;
}

.broker-side-stats-v5 span {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}

.broker-account-menu-v5 summary {
  list-style: none;
  cursor: pointer;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 800;
  font-size: 11px;
}

.broker-account-menu-v5 summary::-webkit-details-marker {
  display: none;
}

.broker-account-menu-list-v5 {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.broker-account-menu-list-v5 a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-size: 12px;
}

.broker-side-card-v5 {
  padding: 14px;
  margin-bottom: 14px;
}

.broker-side-card-head-v5 {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d6877;
}

.broker-side-link-v5 {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--sbr-border);
  text-decoration: none;
  color: inherit;
}

.broker-side-link-v5:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.broker-side-link-icon-v5 {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #e8faf5;
  color: var(--sbr-teal-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.broker-side-link-icon-v5 i {
  font-size: 14px;
}

.broker-side-link-copy-v5 {
  flex: 1;
  min-width: 0;
}

.broker-side-link-copy-v5 strong {
  display: block;
  color: var(--sbr-navy);
  margin-bottom: 3px;
  font-size: 13px;
}

.broker-side-link-copy-v5 span {
  display: block;
  color: var(--sbr-text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.broker-side-link-arrow-v5 {
  color: #97a1ae;
  font-size: 18px;
}

.broker-note-item-v5 {
  padding: 12px 0;
  border-top: 1px solid var(--sbr-border);
}

.broker-note-item-v5:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.broker-note-item-v5 strong {
  display: block;
  margin-bottom: 5px;
  color: var(--sbr-navy);
  font-size: 13px;
}

.broker-note-item-v5 p {
  margin: 0;
  color: var(--sbr-text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.broker-dashboard-v5 .btn.btn-ghost {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 11px;
}

.broker-dashboard-v5 .action-menu .action-menu-list {
  min-width: 190px;
}

.broker-dashboard-v5 .action-menu .action-menu-list a,
.broker-dashboard-v5 .action-menu .action-menu-list button,
.broker-dashboard-v5 .action-menu .action-menu-list select {
  font-size: 12px;
}

@media (max-width: 1300px) {
  .broker-dashboard-v5 {
    grid-template-columns: 1fr;
  }

  .broker-dashboard-side-v5 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .broker-side-profile-v5,
  .broker-side-card-v5 {
    margin-bottom: 0;
  }
}

@media (max-width: 1100px) {
  .broker-stats-grid-v5,
  .broker-summary-grid-v5,
  .broker-crm-contact-grid-v5,
  .broker-crm-summary-row-v6,
  .broker-crm-statusline-v6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .broker-overview-row-v6 {
    align-items: flex-start;
  }

  .broker-crm-shell-v5 {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .broker-hero-v5 {
    padding: 18px 18px;
  }

  .broker-stats-grid-v5,
  .broker-summary-grid-v5,
  .broker-crm-contact-grid-v5,
  .broker-crm-summary-row-v6,
  .broker-crm-statusline-v6,
  .broker-crm-stage-actions-v6,
  .broker-dashboard-side-v5 {
    grid-template-columns: 1fr;
  }

  .broker-hero-v5,
  .broker-section-head-v5,
  .broker-list-row-v5,
  .broker-crm-head-v5 {
    flex-direction: column;
    align-items: flex-start;
  }

  .broker-crm-shell-v5 {
    grid-template-columns: 1fr;
  }

  .broker-crm-list-v5 {
    border-right: 0;
    border-bottom: 1px solid var(--sbr-border);
  }
}

@media (max-width: 680px) {
  .broker-hero-v5 h1 {
    font-size: 20px;
  }

  .broker-hero-actions-v5 .btn,
  .broker-tab-v5,
  .broker-listing-status-tab-v5 {
    width: 100%;
    justify-content: center;
  }

  .broker-tabs-v5,
  .broker-listing-status-tabs-v5,
  .broker-row-actions-v5,
  .broker-inline-actions-v5,
  .broker-crm-toolbar-v5,
  .broker-crm-toolbar-line-v6 {
    flex-direction: column;
    align-items: stretch;
  }

  .broker-listing-table-v5 th,
  .broker-listing-table-v5 td {
    padding: 18px 16px;
  }

  .broker-status-select-v5,
  .broker-inline-edit-v5,
  .broker-action-menu-v5 summary {
    width: 100%;
  }

  .broker-overview-row-v6 {
    flex-direction: column;
    align-items: flex-start;
  }

  .broker-overview-row-v6 em {
    max-width: 100%;
    text-align: left;
  }

  .broker-crm-contact-line-v6 {
    grid-template-columns: 28px 1fr;
  }

  .broker-crm-contact-line-v6 strong {
    grid-column: 2;
  }

  .broker-crm-contact-line-v6 span:last-child {
    grid-column: 2;
  }

  .broker-avatar-editor-v5 {
    flex-direction: column;
    text-align: center;
  }
}

.listing-builder-main-v5 {
  display: grid;
  gap: 12px;
}

.listing-panel-v4 {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #fbfaf7 100%);
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-shadow: 0 12px 26px rgba(11, 29, 58, 0.05);
  padding: 22px;
}

.listing-panel-head-v4 {
  margin-bottom: 16px;
}

.listing-panel-head-v4 h2 {
  font-size: 22px;
  line-height: 1.12;
}

.listing-type-grid-v4 {
  gap: 14px;
}

.listing-type-card-v4 {
  padding: 18px;
  border-radius: 16px;
}

.listing-type-card-v4 strong {
  font-size: 18px;
}

.listing-type-card-v4 small {
  line-height: 1.55;
}

.listing-section-card-v4 {
  border-radius: 18px;
  border-color: rgba(11, 29, 58, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.listing-section-icon-v4 {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 12px;
}

.listing-review-card-v4 {
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(11, 29, 58, 0.05);
}

.admin-module-toggle-card-v7 {
  border: 1px solid rgba(15, 166, 142, 0.16);
  background: linear-gradient(180deg, rgba(230, 249, 245, 0.42), #fff 58%);
}

.chip-muted {
  background: rgba(11, 29, 58, 0.08);
  color: var(--sbr-text-secondary);
}

.broker-search-form {
  border-radius: 22px;
  box-shadow: 0 16px 34px rgba(11, 29, 58, 0.08);
}

.broker-feature-card,
.broker-card-centered {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(11, 29, 58, 0.08);
}

.broker-feature-card .hero-actions,
.broker-card-centered .hero-actions {
  margin-top: 16px;
}

.broker-directory-hero-inner h1,
.broker-directory-hero-inner p,
.broker-directory-hero-inner .eyebrow {
  color: var(--sbr-white);
}

.broker-profile-grid-v5 {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 360px;
  gap: 24px;
  align-items: start;
}

.broker-profile-side-v5 {
  display: grid;
  gap: 20px;
}

.broker-profile-story-v5,
.broker-profile-contact-v5,
.broker-profile-metrics-v5 {
  border-radius: 22px;
}

.broker-profile-highlights-v9 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 0.4rem;
}

.broker-profile-highlight-v9 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: #f7f4ee;
}

.broker-profile-highlight-v9 i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-size: 1rem;
}

.broker-profile-highlight-v9 strong {
  display: block;
  color: var(--sbr-navy);
  font-size: 1rem;
}

.broker-profile-highlight-v9 span {
  color: var(--sbr-text-secondary);
  font-size: 0.82rem;
}

.broker-profile-mini-stats-v5 {
  display: grid;
  gap: 12px;
}

.broker-profile-mini-stats-v5 article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--sbr-border);
}

.broker-profile-mini-stats-v5 article:first-child {
  border-top: 0;
  padding-top: 0;
}

.broker-profile-mini-stats-v5 strong {
  color: var(--sbr-navy);
  font-size: 22px;
}

.broker-profile-mini-stats-v5 span {
  color: var(--sbr-text-secondary);
  font-size: 14px;
  font-weight: 700;
}

.detail-broker-card-v5,
.inquiry-card {
  border-radius: 22px;
}

.detail-nda-text-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--sbr-bg);
  border: 1px solid var(--sbr-border);
  color: var(--sbr-text-secondary);
  font-size: 13.5px;
  margin-bottom: 14px;
}

.detail-nda-cta-box {
  padding: 14px;
  border-radius: 10px;
  background: var(--sbr-bg);
  border: 1px dashed var(--sbr-border);
  margin-bottom: 14px;
}

.detail-nda-cta-box p {
  font-size: 12.5px;
  color: var(--sbr-text-secondary);
  line-height: 1.5;
  margin: 0 0 12px;
}

.detail-nda-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--sbr-text);
  margin-top: 10px;
  cursor: pointer;
}

.detail-nda-checkbox input {
  margin-top: 3px;
}

.detail-broker-card-v5 {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid rgba(11, 29, 58, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
}

.detail-broker-quickfacts-v5 {
  display: grid;
  gap: 10px;
}

.detail-broker-card-v5 .text-link {
  display: inline-flex;
  margin-top: 4px;
}

.detail-broker-quickfacts-v5 .summary-row {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f5f0;
  border: 1px solid rgba(11, 29, 58, 0.06);
}

.detail-inquiry-kicker-v5 {
  margin-bottom: 10px;
  color: var(--sbr-teal-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.listing-contact-profile {
  align-items: center;
}

.broker-crm-stats-v6 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.broker-crm-stat-v6 {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-shadow: 0 10px 18px rgba(11, 29, 58, 0.05);
  text-decoration: none;
  color: inherit;
}

.broker-crm-stat-v6 span {
  color: var(--sbr-text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.broker-crm-stat-v6 strong {
  color: var(--sbr-navy);
  font-size: 22px;
  font-family: "Playfair Display", serif;
}

@media (max-width: 1100px) {
  .listing-builder-frame-v6 {
    max-width: none;
  }

  .listing-builder-container-v9 {
    width: min(1480px, calc(100% - 32px));
  }

  .listing-builder-page-head-v8 {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-builder-page-actions-v8 {
    justify-content: flex-start;
  }

  .listing-builder-shell-v4 {
    grid-template-columns: 1fr;
  }

  .broker-profile-grid-v5 {
    grid-template-columns: 1fr;
  }

  .broker-crm-stats-v6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
  }

}

@media (max-width: 800px) {
  .market-result-topline-v5,
  .market-result-broker-v5 {
    align-items: flex-start;
  }

  .listing-builder-frame-v6 {
    max-width: none;
  }

  .listing-builder-page-v9 {
    padding-top: 18px;
  }

  .listing-builder-container-v9 {
    width: calc(100% - 24px);
  }

  .listing-builder-sidebar-v4 {
    position: static;
    border-radius: 18px;
  }

  .listing-type-grid-v4 {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 680px) {
  .broker-crm-stats-v6 {
    grid-template-columns: 1fr;
  }

  .market-result-topline-v5,
  .market-result-broker-v5 {
    flex-direction: column;
  }

}

.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.btn-with-icon i {
  transition: transform 0.2s ease;
}

.btn-with-icon:hover i {
  transform: translateX(3px);
}

.detail-layout-v6 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1.6rem;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.detail-main-v6 {
  min-width: 0;
}

.detail-sidebar-v6 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.detail-hero-v6,
.detail-section-card-v6 {
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  border-radius: 18px;
  box-shadow: 0 22px 46px rgba(11, 29, 58, 0.08);
}

.detail-hero-v6 {
  overflow: hidden;
}

.detail-favorite-card-v6 {
  margin-top: 1rem;
}

.detail-hero-media-v6 {
  position: relative;
  min-height: 470px;
  background: #0b1d3a;
  overflow: hidden;
}

.detail-hero-media-v6.is-nda-locked img {
  filter: blur(24px) saturate(0.7);
  transform: scale(1.08);
}

.detail-hero-media-v6.is-nda-locked .detail-gallery-arrow,
.detail-hero-media-v6.is-nda-locked .detail-gallery-main-button {
  pointer-events: none;
}

.detail-nda-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: #fff;
  background: rgba(11, 29, 58, 0.35);
  padding: 24px;
}

.detail-nda-photo-overlay i {
  font-size: 1.6rem;
}

.detail-nda-photo-overlay span {
  font-weight: 600;
  max-width: 260px;
}

.detail-thumb-row-v6.is-nda-locked img {
  filter: blur(10px) saturate(0.7);
}

.detail-thumb-row-v6.is-nda-locked .detail-thumb-button-v6 {
  pointer-events: none;
}

.detail-hero-media-v6 img,
.detail-gallery-main-button img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  border: 0 !important;
  border-radius: 0 !important;
}

.detail-gallery-main-button {
  display: block !important;
  width: 100% !important;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  line-height: 0;
  box-shadow: none;
}

.detail-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 29, 58, 0.72);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.detail-gallery-arrow-prev {
  left: 16px;
}

.detail-gallery-arrow-next {
  right: 16px;
}

.detail-hero-body-v6 {
  padding: 1.8rem 2rem 2rem;
}

.detail-hero-head-v6 {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
}

.detail-hero-meta-v6 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

.detail-location-v6 {
  color: var(--sbr-text-secondary);
  font-size: 0.94rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.detail-hero-head-v6 h1 {
  margin: 0;
  color: var(--sbr-navy);
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.08;
}

.detail-hero-summary-v6 {
  margin: 0.95rem 0 0;
  color: var(--sbr-text-secondary);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 760px;
}

.detail-hero-actions-v6 {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-end;
}

.detail-hero-price-v6 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--sbr-teal);
  text-align: right;
}

.detail-icon-actions-v6 {
  display: flex;
  gap: 0.65rem;
}

.btn-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--sbr-border);
  background: #fff;
  color: var(--sbr-navy);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-icon:hover,
.btn-icon:focus-visible {
  border-color: var(--sbr-teal);
  color: var(--sbr-teal);
  background: rgba(230, 249, 245, 0.6);
}

.btn-icon.is-active {
  border-color: var(--sbr-teal);
  color: var(--sbr-teal);
  background: rgba(230, 249, 245, 0.9);
}

.btn-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: var(--sbr-navy);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.btn-icon[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--sbr-navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.btn-icon[data-tooltip]:hover::after,
.btn-icon[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.btn-icon[data-tooltip]:hover::before,
.btn-icon[data-tooltip]:focus-visible::before {
  opacity: 1;
}

.detail-metrics-v6 {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--sbr-border);
}

.detail-metric-v6 {
  padding: 1rem 1rem 0 0;
}

.detail-metric-v6 span {
  display: block;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--sbr-text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.detail-metric-v6 strong {
  display: block;
  color: var(--sbr-navy);
  font-size: 1rem;
  line-height: 1.35;
}

.detail-metric-v6 strong.price {
  color: var(--sbr-teal);
}

.detail-thumb-row-v6 {
  padding: 1rem 1rem 1.15rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.detail-thumb-row-v6 img {
  width: 100%;
  height: 98px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--sbr-border);
}

.detail-thumb-button-v6 {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.detail-thumb-button-v6 img {
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.detail-thumb-button-v6.is-active img {
  border-color: var(--sbr-teal);
  box-shadow: 0 0 0 2px rgba(26, 175, 148, 0.18);
  transform: translateY(-1px);
}

.detail-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(11, 29, 58, 0.84);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.detail-gallery-modal[hidden] {
  display: none;
}

.detail-gallery-modal-stage {
  max-width: min(1100px, 88vw);
  max-height: 84vh;
}

.detail-gallery-modal-stage img {
  display: block;
  max-width: 100%;
  max-height: 84vh;
  border-radius: 20px;
}

.detail-gallery-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 900px) {
  .listing-media-upload-callout,
  .listing-media-row,
  .listing-media-fields-top {
    flex-direction: column;
  }

  .listing-media-row {
    align-items: stretch;
  }

  .listing-media-preview,
  .listing-media-preview img {
    width: 100%;
    min-width: 0;
  }

  .listing-media-row-actions {
    justify-content: flex-start;
  }

  .detail-hero-media-v6 {
    min-height: 320px;
  }

  .detail-thumb-row-v6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-gallery-arrow {
    width: 40px;
    height: 40px;
  }
}

.detail-section-card-v6 {
  margin-top: 1rem;
  padding: 1.5rem 1.6rem;
}

.detail-section-head-v6 {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.detail-section-head-v6 h2 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--sbr-navy);
}

.detail-section-head-v6 p {
  margin: 0.2rem 0 0;
  color: var(--sbr-text-secondary);
}

.detail-section-icon-v6 {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.detail-section-icon-v6.is-teal {
  background: var(--sbr-teal-light);
  color: var(--sbr-teal);
}

.detail-section-icon-v6.is-navy {
  background: rgba(11, 29, 58, 0.08);
  color: var(--sbr-navy);
}

.detail-section-icon-v6.is-gold {
  background: var(--sbr-gold-light);
  color: var(--sbr-gold);
}

.detail-data-list-v6,
.detail-data-grid-v6 {
  border: 1px solid rgba(226, 221, 213, 0.8);
  border-radius: 14px;
  overflow: hidden;
}

.detail-data-grid-v6 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-data-row-v6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.92rem 1rem;
  border-bottom: 1px solid rgba(226, 221, 213, 0.8);
}

.detail-data-grid-v6 .detail-data-row-v6 {
  border-right: 1px solid rgba(226, 221, 213, 0.8);
}

.detail-data-grid-v6 .detail-data-row-v6:nth-child(2n) {
  border-right: 0;
}

.detail-data-grid-v6 .detail-data-row-v6:nth-last-child(-n + 2),
.detail-data-list-v6 .detail-data-row-v6:last-child {
  border-bottom: 0;
}

.detail-data-row-v6 span {
  color: var(--sbr-text-secondary);
  font-weight: 500;
}

.detail-data-row-v6 strong {
  color: var(--sbr-text);
  font-weight: 700;
  text-align: right;
}

.detail-floorplan-v6 {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: rgba(245, 243, 239, 0.8);
  color: var(--sbr-navy);
  text-decoration: none;
  font-weight: 700;
}

.detail-traffic-row-v6 {
  margin-top: 1rem;
}

.detail-revenue-bar-v6 {
  height: 34px;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(11, 29, 58, 0.08);
}

.detail-revenue-bar-v6 .segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sbr-white);
  font-size: 0.82rem;
  font-weight: 700;
}

.detail-revenue-legend-v6 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.9rem;
}

.detail-revenue-legend-v6 .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--sbr-text-secondary);
  font-size: 0.92rem;
}

.detail-revenue-legend-v6 .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.detail-marketing-grid-v6 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.detail-marketing-grid-v6 article {
  border: 1px solid rgba(226, 221, 213, 0.8);
  border-radius: 14px;
  padding: 1rem;
  text-align: center;
  background: rgba(245, 243, 239, 0.65);
}

.detail-marketing-grid-v6 i {
  color: var(--sbr-teal);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.detail-marketing-grid-v6 strong {
  display: block;
  color: var(--sbr-navy);
  font-size: 1.2rem;
  margin-bottom: 0.15rem;
}

.detail-marketing-grid-v6 span {
  color: var(--sbr-text-secondary);
  font-size: 0.82rem;
}

.detail-description-v6 {
  color: var(--sbr-text);
  line-height: 1.8;
}

.detail-description-v6 p {
  margin: 0 0 1rem;
}

.detail-similar-v6 {
  margin-top: 1.2rem;
}

.broker-widget-v6 {
  padding: 1.4rem;
}

.broker-widget-head-v6 {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(226, 221, 213, 0.8);
}

.broker-widget-head-v6 strong {
  display: block;
  font-size: 1.1rem;
  color: var(--sbr-navy);
}

.broker-widget-head-v6 p {
  margin: 0.2rem 0 0;
  color: var(--sbr-text-secondary);
}

.broker-widget-actions-v6 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1rem 0;
}

.detail-broker-quickfacts-v6 {
  display: grid;
  gap: 0.55rem;
}

.broker-inquiry-card-v6 {
  padding: 1.4rem;
}

.broker-card-v6,
.broker-feature-card-v6 {
  position: relative;
}

.broker-avatar-card-v6,
.broker-avatar-hero-v6 {
  width: 84px;
  height: 84px;
  border: 4px solid var(--sbr-white);
  box-shadow: 0 16px 26px rgba(11, 29, 58, 0.16);
}

.broker-card-v6 .broker-card-body {
  padding-top: 1rem;
}

.broker-card-v6 .broker-card-top h3,
.broker-feature-card-v6 h3 {
  color: var(--sbr-navy);
}

.broker-card-contact-row-v6,
.broker-card-actions-v6,
.broker-profile-contact-grid-v6 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.broker-contact-list-v6 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.95rem 0 0.85rem;
}

.broker-contact-pill-v6 {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(230, 249, 245, 0.9);
  color: var(--sbr-navy);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
}

.btn-icon-only-v6 {
  min-width: 44px;
  padding-inline: 0.9rem;
}

.broker-feature-card-v6 {
  text-align: center;
  padding: 1.8rem 1.5rem 1.5rem;
}

.broker-feature-card-v6 .broker-stats {
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.broker-feature-card-v6 .broker-card-contact-row-v6 {
  justify-content: center;
}

.broker-profile-hero {
  padding-top: 1.3rem;
}

.broker-avatar-link-v6 {
  display: inline-flex;
  text-decoration: none;
}

.broker-profile-hero-inner {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 2rem;
  color: var(--sbr-white);
  background: url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1600&q=80") center/cover no-repeat;
}

.broker-profile-hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to left, rgba(15, 166, 142, 0.32), rgba(11, 29, 58, 0) 60%),
    linear-gradient(135deg, rgba(11, 29, 58, 0.93), rgba(20, 52, 98, 0.9));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.broker-profile-hero-inner.is-premium::before {
  background: linear-gradient(135deg, rgba(122, 84, 0, 0.82), rgba(11, 29, 58, 0.9));
}

.broker-profile-hero-inner > * {
  position: relative;
  z-index: 1;
}

.broker-profile-hero-inner .broker-avatar-xl {
  border: 3px solid rgba(255, 255, 255, 0.8);
}

.broker-profile-hero-inner.is-premium .broker-avatar-xl {
  border-color: #f0d27e;
  box-shadow: 0 0 0 4px rgba(212, 168, 67, 0.3);
}

.broker-profile-main h1,
.broker-profile-main p,
.broker-profile-main .eyebrow {
  color: var(--sbr-white);
}

.broker-profile-main-column-v6 {
  display: grid;
  gap: 1rem;
}

.broker-profile-metrics-inline-v6 {
  margin-top: 0;
}

.broker-profile-contact-sticky-v6 {
  position: sticky;
  top: 100px;
}

.broker-profile-side-sticky-v8 {
  position: sticky;
  top: 100px;
  align-self: start;
}

.broker-profile-contact-grid-v6 {
  display: grid;
  grid-template-columns: 1fr;
}

.broker-profile-inquiry-form-v6 {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(226, 221, 213, 0.85);
}

.broker-premium-badge-v7 {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d4a843, #f2d58a);
  color: #7a5400;
  border: 2px solid var(--sbr-white);
  box-shadow: 0 10px 18px rgba(11, 29, 58, 0.16);
  font-size: 0.78rem;
  z-index: 2;
}

.broker-avatar-premium-wrap-v7 {
  position: relative;
}

.broker-profile-inventory-v7 {
  border-radius: 22px;
}

.broker-profile-inventory-head-v7 {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.broker-profile-tabs-v7 {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: var(--sbr-bg);
  border: 1px solid var(--sbr-border);
}

.broker-profile-tabs-v7 .dashboard-tab {
  gap: 7px;
  border-radius: 9px;
  font-weight: 700;
}

.broker-profile-tabs-v7 .dashboard-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(11, 29, 58, 0.08);
  font-size: 11px;
  font-weight: 800;
}

.broker-profile-tabs-v7 .dashboard-tab.is-active .dashboard-tab-count {
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
}

.broker-profile-listing-grid-v7 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.broker-profile-empty-v7 {
  margin-top: 0.25rem;
}

[data-broker-listings-panel].is-loading {
  opacity: 0.55;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.broker-feature-card-v7,
.broker-card-v7 {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(11, 29, 58, 0.08);
  overflow: hidden;
}

.broker-feature-card-v7:hover,
.broker-card-v7:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(11, 29, 58, 0.12);
}

.broker-feature-card-v7 {
  position: relative;
  padding: 44px 1.5rem 1.5rem;
  text-align: center;
}

.broker-card-v7 {
  position: relative;
  padding-top: 52px;
}

.broker-card-v7 .broker-card-body {
  padding: 0.75rem 1.35rem 1.35rem;
  text-align: center;
}

.broker-avatar-card-v7,
.broker-feature-card-v7 .broker-avatar {
  width: 108px;
  height: 108px;
  margin-bottom: 1rem;
  border-width: 6px;
}

.broker-stats-v7 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.broker-stats-v7 span {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.55rem;
  border-radius: 14px;
  background: rgba(245, 243, 239, 0.85);
  color: var(--sbr-navy);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.broker-stats-v7 i {
  color: var(--sbr-teal);
}

.broker-card-open-v7 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--sbr-teal-dark);
  font-weight: 800;
}

.broker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.broker-directory-grid-v8 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.broker-directory-card-v8 {
  min-height: 100%;
}

.broker-directory-card-v8 .broker-card-body,
.broker-directory-card-v8.broker-feature-card-v7 {
  display: grid;
  align-content: start;
}

.broker-directory-card-v8 .broker-card-top h3,
.broker-directory-card-v8 h3 {
  margin-bottom: 0.35rem;
}

.broker-directory-card-v8 .broker-meta {
  min-height: 2.8em;
}

.broker-directory-card-v8 p {
  margin-bottom: 0;
}

.broker-directory-card-v8 .broker-card-open-v7 {
  margin-top: auto;
  padding-top: 1rem;
}

.broker-stats-v8 {
  margin-top: 1.1rem;
}

.guest-favorite-modal[hidden] {
  display: none;
}

.guest-favorite-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.guest-favorite-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 29, 58, 0.55);
  backdrop-filter: blur(4px);
}

.guest-favorite-dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 460px);
  margin: 12vh auto 0;
  background: var(--sbr-white);
  border-radius: 20px;
  border: 1px solid var(--sbr-border);
  box-shadow: 0 28px 60px rgba(11, 29, 58, 0.22);
  padding: 1.8rem;
}

.guest-favorite-dialog h3 {
  margin: 0.4rem 0 0.55rem;
  color: var(--sbr-navy);
  font-size: 1.55rem;
}

.guest-favorite-dialog p {
  margin: 0;
  color: var(--sbr-text-secondary);
  line-height: 1.7;
}

.guest-favorite-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  border: 0;
  background: transparent;
  color: var(--sbr-text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
}

.guest-favorite-actions {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.35rem;
}

body.has-modal-open {
  overflow: hidden;
}

/* Full-message view for a long announcement-bar entry — same fixed-overlay/
   backdrop/centered-dialog pattern as .guest-favorite-modal / .newalert-modal
   above, reused as a single shared instance (see bindAnnouncementViewModal()
   in app.js) rather than one dialog per announcement. */
.announcement-modal[hidden] {
  display: none;
}

.announcement-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.announcement-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 29, 58, 0.55);
  backdrop-filter: blur(4px);
}

.announcement-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 520px);
  margin: 14vh auto 0;
  background: var(--sbr-white);
  border-radius: 20px;
  border: 1px solid var(--sbr-border);
  box-shadow: 0 28px 60px rgba(11, 29, 58, 0.22);
  padding: 1.9rem 1.9rem 1.7rem;
}

.announcement-modal-text {
  margin: 0.4rem 0 0;
  color: var(--sbr-text);
  line-height: 1.7;
  font-size: 15.5px;
  white-space: pre-wrap;
}

.announcement-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  border: 0;
  background: transparent;
  color: var(--sbr-text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
}

.announcement-modal-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1.3rem;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--sbr-navy);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

/* "You have N new notifications" popup shown once per fresh batch of
   activity (dashboard.php renders this only when $activityFeedNewCount >
   0) — same fixed-overlay/backdrop/centered-dialog pattern as
   .guest-favorite-modal above, just under its own class names since this
   one has no [hidden] toggle: PHP either renders it or doesn't. */
.newalert-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.newalert-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 29, 58, 0.55);
  backdrop-filter: blur(4px);
}

.newalert-dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  margin: 16vh auto 0;
  background: var(--sbr-white);
  border-radius: 20px;
  border: 1px solid var(--sbr-border);
  box-shadow: 0 28px 60px rgba(11, 29, 58, 0.22);
  padding: 2rem 1.8rem 1.8rem;
  text-align: center;
}

.newalert-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-size: 22px;
}

.newalert-icon.gold {
  background: var(--sbr-gold-light);
  color: #896515;
}

.newalert-dialog h3 {
  margin: 0 0 8px;
  color: var(--sbr-navy);
  font-size: 1.3rem;
}

.newalert-dialog p {
  margin: 0 0 18px;
  color: var(--sbr-text-secondary);
  line-height: 1.6;
  font-size: 14px;
}

.newalert-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  border: 0;
  background: transparent;
  color: var(--sbr-text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
}

/* The NDA-signed variant of this popup (detail.php) is the only one with two
   stacked buttons instead of one — a gap between them, scoped to a[href]
   sibling so the single-button dashboard version above is untouched. */
.newalert-dialog a.btn + button.btn {
  margin-top: 10px;
}

/* NDA signing modal (detail.php) — same fixed backdrop/dialog pattern as
   .guest-favorite-modal above, wider and scrollable since it carries the
   full agreement text rather than a couple of sentences. */
.nda-sign-modal[hidden] {
  display: none;
}

.nda-sign-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.nda-sign-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 29, 58, 0.55);
  backdrop-filter: blur(4px);
}

.nda-sign-dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 560px);
  max-height: 86vh;
  overflow-y: auto;
  margin: 6vh auto 0;
  background: var(--sbr-white);
  border-radius: 20px;
  border: 1px solid var(--sbr-border);
  box-shadow: 0 28px 60px rgba(11, 29, 58, 0.22);
  padding: 2rem;
}

.nda-sign-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  border: 0;
  background: transparent;
  color: var(--sbr-text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
}

.nda-sign-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sbr-teal);
  margin-bottom: 4px;
}

.nda-sign-dialog h3 {
  margin: 0 0 16px;
  color: var(--sbr-navy);
  font-size: 1.35rem;
}

.nda-sign-text {
  padding: 16px;
  border-radius: 12px;
  background: var(--sbr-bg);
  border: 1px solid var(--sbr-border);
  margin-bottom: 14px;
}

.nda-sign-text p {
  margin: 0 0 8px;
  color: var(--sbr-text);
  font-size: 0.88rem;
}

.nda-sign-text ol {
  margin: 0;
  padding-left: 18px;
  color: var(--sbr-text);
  font-size: 0.88rem;
  line-height: 1.6;
}

.nda-sign-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(216, 122, 22, 0.08);
  border: 1px solid rgba(216, 122, 22, 0.3);
  color: #8a4c0f;
  margin-bottom: 14px;
}

.nda-sign-warning i {
  margin-top: 2px;
  font-size: 1rem;
  flex-shrink: 0;
}

.nda-sign-warning p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
}

.nda-sign-transparency {
  font-size: 0.8rem;
  color: var(--sbr-text-secondary);
  margin: 0 0 14px;
}

.nda-signature-preview {
  min-height: 52px;
  padding: 6px 4px 0;
  margin-bottom: 16px;
  border-bottom: 1.5px solid var(--sbr-border);
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  color: var(--sbr-navy);
  line-height: 1.2;
}

.nda-sign-dialog .detail-nda-checkbox {
  margin-bottom: 10px;
}

.broker-profile-side article {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.broker-profile-side article i {
  color: var(--sbr-teal);
  font-size: 0.85rem;
}

.broker-profile-hero-inner.is-premium .broker-profile-side article i {
  color: #f0d27e;
}

.broker-profile-side article strong,
.broker-profile-side article span {
  color: var(--sbr-white);
}

.broker-profile-side article strong {
  font-size: 24px;
}

.broker-directory-hero-v10 {
  background:
    radial-gradient(circle at top right, rgba(15, 166, 142, 0.12), transparent 32%),
    linear-gradient(135deg, #0b1d3a 0%, #152f55 100%);
  padding: 1.5rem 0 1.9rem;
}

.broker-directory-hero-inner-v10 {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 280px;
  gap: 1.35rem;
  align-items: end;
}

.broker-directory-copy-v10 h1 {
  margin: 0.2rem 0 0.55rem;
  max-width: 18ch;
  color: var(--sbr-white);
  font-size: clamp(1.95rem, 3vw, 2.85rem);
  line-height: 1.02;
}

.broker-directory-copy-v10 p,
.broker-directory-copy-v10 .eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.broker-directory-copy-v10 p {
  max-width: 56ch;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.broker-directory-stats-v10 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.broker-directory-stats-v10 article {
  min-height: 0;
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.broker-directory-stats-v10 article strong {
  display: block;
  color: var(--sbr-white);
  font-size: 1.55rem;
  line-height: 1;
}

.broker-directory-stats-v10 article span {
  display: block;
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  font-weight: 700;
}

.broker-directory-search-v10 {
  margin-top: -0.8rem;
  padding-bottom: 0.5rem;
}

.broker-search-form-v10 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 1.1rem 1.2rem;
  padding: 1.5rem;
  border: 1px solid var(--sbr-border);
  border-radius: 18px;
  background: var(--sbr-white);
  box-shadow: 0 22px 40px rgba(11, 29, 58, 0.08);
}

.broker-search-form-v10 .market-inline-field {
  min-width: 0;
}

.broker-search-checks-v10 {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--sbr-border);
}

.broker-search-check-v10 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 30px;
  color: var(--sbr-text);
  font-size: 1rem;
  font-weight: 700;
}

.broker-search-check-v10 input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--sbr-teal);
  cursor: pointer;
}

.broker-search-actions-v10 {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.broker-directory-section-v10 {
  padding-top: 1.4rem;
  padding-bottom: 1rem;
}

.broker-section-head-v10 {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.broker-section-head-v10 h2 {
  margin: 0.2rem 0 0.35rem;
  color: var(--sbr-navy);
  font-size: clamp(1.8rem, 2.6vw, 2.35rem);
}

.broker-cards-grid-v10 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
}

.broker-directory-card-v10 {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--sbr-white);
  border: 1px solid rgba(11, 29, 58, 0.08);
  border-radius: 26px;
  box-shadow: 0 24px 48px rgba(11, 29, 58, 0.08);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.broker-directory-card-v10:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 56px rgba(11, 29, 58, 0.12);
  border-color: rgba(15, 166, 142, 0.28);
}

.broker-directory-card-topband-v10 {
  height: 72px;
  background: linear-gradient(135deg, #0b1d3a 0%, #1d3f73 100%);
}

.broker-directory-card-v10.is-featured .broker-directory-card-topband-v10 {
  background: linear-gradient(135deg, #d4a843 0%, #f0d27e 100%);
}

.broker-directory-avatar-wrap-v10 {
  display: flex;
  justify-content: center;
  margin-top: -36px;
}

.broker-directory-avatar-v10 {
  width: 102px;
  height: 102px;
  border: 6px solid var(--sbr-white);
  box-shadow: 0 16px 30px rgba(11, 29, 58, 0.18);
}

.broker-directory-card-body-v10 {
  display: grid;
  align-content: start;
  min-height: 330px;
  padding: 0.95rem 1.25rem 1.25rem;
  text-align: center;
}

.broker-directory-card-head-v10 h3 {
  margin: 0.3rem 0 0.15rem;
  color: var(--sbr-navy);
  font-size: 1.35rem;
}

.broker-directory-card-meta-v10 {
  margin: 0;
  min-height: 2.8em;
  color: var(--sbr-text-secondary);
  font-size: 0.92rem;
  line-height: 1.4;
}

.broker-directory-badges-v10 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.broker-directory-badges-v10 .badge {
  padding: 7px 13px;
  font-size: 12px;
}

.broker-directory-card-bio-v10 {
  margin: 0.9rem 0 0;
  color: var(--sbr-text);
  font-size: 1rem;
  line-height: 1.6;
}

.broker-directory-stats-line-v10 {
  margin: 1.1rem 0 0;
  padding: 0.85rem 0.6rem;
  border-radius: 14px;
  background: #f7f4ee;
  color: var(--sbr-navy);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.5;
}

.broker-directory-card-footer-v10 {
  margin-top: auto;
  padding-top: 1.1rem;
}

.broker-directory-profile-link-v10 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sbr-teal-dark);
  font-weight: 800;
}

@media (max-width: 1100px) {
  .broker-directory-hero-inner-v10 {
    grid-template-columns: 1fr;
  }

  .broker-directory-stats-v10 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .detail-layout-v6 {
    grid-template-columns: 1fr;
  }

  .detail-metrics-v6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1rem;
  }

  .detail-marketing-grid-v6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .broker-profile-contact-sticky-v6 {
    position: static;
  }

  .broker-profile-side-sticky-v8 {
    position: static;
  }

  .broker-profile-listing-grid-v7,
  .broker-grid,
  .broker-feature-grid,
  .broker-cards-grid-v10 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .broker-search-form-v10 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .broker-directory-hero-v10 {
    padding: 2rem 0 2.35rem;
  }

  .broker-directory-stats-v10,
  .broker-cards-grid-v10 {
    grid-template-columns: 1fr;
  }

  .broker-search-form-v10 {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .detail-hero-head-v6 {
    flex-direction: column;
  }

  .detail-hero-actions-v6 {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  .detail-metrics-v6,
  .detail-data-grid-v6,
  .detail-marketing-grid-v6,
  .detail-thumb-row-v6,
  .broker-widget-actions-v6 {
    grid-template-columns: 1fr;
  }

  .detail-thumb-row-v6 img {
    height: 150px;
  }

  .broker-stats-v7 {
    grid-template-columns: 1fr;
  }

  .broker-profile-inventory-head-v7 {
    flex-direction: column;
  }
}
.listing-section-card-managed-v7 {
  position: relative;
  border-color: rgba(11, 29, 58, 0.09);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.listing-section-card-managed-v7::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(15, 166, 142, 0.9), rgba(15, 166, 142, 0.18));
}

.listing-managed-grid-v7 {
  align-items: start;
}

.listing-managed-grid-v7 .field-span-2 {
  grid-column: 1 / -1;
}

.listing-managed-grid-v7 .field {
  min-width: 0;
}

.field-label-v7 {
  display: grid;
  gap: 4px;
}

.listing-managed-grid-v7 .field-help {
  display: block;
  margin-top: 6px;
  color: var(--sbr-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.field-checkbox-block-v7 {
  gap: 10px;
}

.checkbox-card-v7 {
  padding: 14px 16px;
  border: 1px solid var(--sbr-border);
  border-radius: 12px;
  background: #fcfbf9;
  align-items: flex-start;
}

.checkbox-card-v7 input {
  margin-top: 3px;
}

.checkbox-card-v7 span {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sbr-text);
}

.admin-table .muted {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

/* v1.0.57 listing form restore: revert listing builder layout to the pre-regression version */
.listing-builder-shell-v4 {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.listing-builder-sidebar-v4 {
  position: sticky;
  top: 104px;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, #102341 0%, #132b4d 100%);
  color: #fff;
}

.listing-builder-sidebar-head-v4 h1 {
  color: #fff;
  margin: 6px 0;
}

.listing-builder-sidebar-head-v4 p {
  color: rgba(255, 255, 255, 0.58);
  margin-bottom: 14px;
}

.listing-builder-type-badge-v4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15, 166, 142, 0.14);
  color: #8ce8d8;
  border: 1px solid rgba(15, 166, 142, 0.26);
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
}

.listing-builder-type-badge-v4.is-gold {
  background: rgba(212, 168, 67, 0.14);
  color: #f0d08b;
  border-color: rgba(212, 168, 67, 0.3);
}

.listing-builder-type-dot-v4 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.listing-builder-steps-v4 {
  display: grid;
  gap: 8px;
}

.listing-builder-step-v4 {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: start;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
  cursor: pointer;
}

.listing-builder-step-v4.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.listing-builder-step-number-v4 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.listing-builder-step-v4 strong {
  display: block;
  font-size: 13px;
}

.listing-builder-step-v4 small {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.42);
}

.listing-builder-main-v4 {
  min-width: 0;
}

.listing-panel-v4 {
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #fbfaf7 100%);
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-shadow: 0 16px 34px rgba(11, 29, 58, 0.06);
}

.listing-panel-head-v4 {
  margin-bottom: 20px;
}

.listing-panel-head-v4 h2 {
  margin: 6px 0;
}

.listing-panel-head-v4 p {
  margin: 0;
  color: var(--sbr-text-secondary);
}

.listing-type-grid-v4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.listing-type-card-v4 {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 2px solid var(--sbr-border);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
}

.listing-type-card-v4 input {
  display: none;
}

.listing-type-card-v4:has(input:checked) {
  border-color: var(--sbr-teal);
  box-shadow: 0 0 0 4px rgba(15, 166, 142, 0.08);
}

.listing-type-icon-v4 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}

.listing-type-icon-v4 i {
  font-size: 20px;
  line-height: 1;
}

.listing-type-icon-v4.is-teal {
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
}

.listing-type-icon-v4.is-gold {
  background: var(--sbr-gold-light);
  color: #946d0e;
}

.listing-section-card-v4 {
  padding: 18px;
  border: 1px solid rgba(11, 29, 58, 0.09);
  border-radius: 18px;
  background: #fff;
  margin-bottom: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.listing-section-title-v4 {
  display: flex;
  gap: 12px;
  align-items: start;
  margin-bottom: 16px;
}

.listing-section-icon-v4 {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.listing-section-icon-v4 i {
  font-size: 14px;
  line-height: 1;
}

.listing-section-title-v4 strong {
  display: block;
  color: var(--sbr-navy);
}

.listing-section-title-v4 small {
  display: block;
  color: var(--sbr-text-secondary);
  margin-top: 2px;
}

.listing-step-notice-v10 {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(11, 29, 58, 0.1);
  border-radius: 16px;
  background: #f8fbff;
}

.listing-step-notice-v10 i {
  color: var(--sbr-teal);
  margin-top: 0.1rem;
}

.listing-step-notice-v10 strong,
.listing-step-notice-v10 span {
  display: block;
}

.listing-step-notice-v10 span {
  color: var(--sbr-text-secondary);
  margin-top: 0.15rem;
}

.listing-review-card-v4 {
  padding: 18px;
  border: 1px solid var(--sbr-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(11, 29, 58, 0.05);
  display: grid;
  gap: 1rem;
}

.listing-review-group-v10 {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(11, 29, 58, 0.08);
  border-radius: 16px;
  background: #fcfbf8;
}

.listing-review-group-v10 h3 {
  margin: 0 0 0.65rem;
  color: var(--sbr-navy);
  font-size: 1rem;
}

.listing-review-summary-text-v10 {
  color: var(--sbr-text-secondary);
  line-height: 1.7;
  white-space: pre-wrap;
}

.listing-review-row-v4 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sbr-border);
}

.listing-review-row-v4:last-child {
  border-bottom: 0;
}

.listing-review-row-v4 span {
  color: var(--sbr-text-secondary);
}

.listing-builder-footer-v4 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.wizard-footer-actions-v10 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.wizard-actions-final {
  justify-content: flex-start;
  margin-top: 18px;
}

.listing-builder-main-v5 {
  display: grid;
  gap: 22px;
}

.listing-builder-topbar-v5 {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 26px 28px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(212, 168, 67, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(11, 29, 58, 0.98) 0%, rgba(17, 44, 79, 0.95) 100%);
  color: #fff;
  box-shadow: 0 18px 44px rgba(11, 29, 58, 0.14);
}

.listing-builder-topbar-copy-v5 h2 {
  margin: 8px 0;
  color: #fff;
}

.listing-builder-topbar-copy-v5 p {
  margin: 0;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.68);
}

.listing-builder-topbar-stats-v5 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 320px;
}

.listing-builder-topbar-stats-v5 article {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.listing-builder-topbar-stats-v5 strong {
  font-family: "Playfair Display", serif;
  font-size: 28px;
  color: #fff;
}

.listing-builder-topbar-stats-v5 span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .listing-builder-shell-v4 {
    grid-template-columns: 1fr;
  }

  .listing-builder-sidebar-v4 {
    position: static;
  }

  .listing-builder-topbar-v5 {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-builder-topbar-stats-v5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 680px) {
  .listing-builder-topbar-stats-v5 {
    grid-template-columns: 1fr;
  }
}

/* v1.0.58 listing form realignment */
.listing-form-workspace-v10 {
  padding-top: 28px;
  padding-bottom: 56px;
}

.listing-form-container-v10 {
  width: min(1360px, calc(100% - 48px));
  margin: 0 auto;
}

.listing-form-shell-v10 {
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.listing-form-sidebar-v10 {
  top: 104px;
}

.listing-form-sidebar-head-v10 h1 {
  margin-bottom: 4px;
  font-size: 18px;
}

.listing-form-sidebar-head-v10 p {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.38);
}

.listing-form-score-v10 {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.listing-form-score-top-v10 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.listing-form-score-top-v10 span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
  font-weight: 700;
}

.listing-form-score-top-v10 strong {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  color: var(--sbr-teal);
}

.listing-form-score-track-v10 {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-bottom: 8px;
}

.listing-form-score-track-v10 span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sbr-teal), #36d1b6);
}

.listing-form-score-v10 p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
}

.listing-form-main-v10 {
  gap: 20px;
}

.listing-form-toolbar-v10 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 6px 4px 0;
}

.listing-form-toolbar-copy-v10 h2 {
  margin: 6px 0 0;
  color: var(--sbr-navy);
  font-size: clamp(2rem, 3vw, 3rem);
}

.listing-form-toolbar-actions-v10 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.listing-form-type-pill-v10 {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-size: 14px;
  font-weight: 800;
}

.listing-form-type-pill-v10.is-gold {
  background: var(--sbr-gold-light);
  color: #946d0e;
}

.listing-form-main-v10 .listing-builder-topbar-v5,
.listing-form-main-v10 .listing-builder-topbar-stats-v5,
.listing-form-main-v10 .listing-builder-topbar-copy-v5 {
  all: unset;
}

@media (max-width: 1100px) {
  .listing-form-container-v10 {
    width: min(100%, calc(100% - 32px));
  }

  .listing-form-shell-v10 {
    grid-template-columns: 1fr;
  }

  .listing-form-sidebar-v10 {
    position: static;
  }

  .listing-form-toolbar-v10 {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 680px) {
  .listing-form-container-v10 {
    width: calc(100% - 24px);
  }

  .listing-form-toolbar-copy-v10 h2 {
    font-size: 2rem;
  }
}

/* v1.0.59 hard reset for listing form page layout */
.listing-form-workspace-v10.section-space {
  padding: 20px 0 120px;
}

.listing-form-workspace-v10 .container,
.listing-form-workspace-v10 .listing-builder-v4,
.listing-form-workspace-v10 .listing-builder-frame-v6,
.listing-form-workspace-v10 .listing-builder-page-head-v8 {
  all: unset;
}

.listing-form-container-v10 {
  width: min(1560px, calc(100% - 48px));
  margin: 0 auto;
}

.listing-form-shell-v10 {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.listing-form-sidebar-v10 {
  position: sticky;
  top: 92px;
  min-height: calc(100vh - 124px);
  padding: 22px 18px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #122244 0%, #102341 100%);
  box-shadow: 0 20px 40px rgba(11, 29, 58, 0.18);
}

.listing-form-main-v10 {
  min-width: 0;
  display: grid;
  gap: 20px;
}

.listing-form-toolbar-v10 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 4px 2px 2px;
}

.listing-form-toolbar-copy-v10 .eyebrow {
  margin-bottom: 6px;
}

.listing-form-toolbar-copy-v10 h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.05;
  color: var(--sbr-navy);
}

.listing-form-toolbar-actions-v10 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.listing-form-type-pill-v10 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.listing-form-type-pill-v10.is-gold {
  background: var(--sbr-gold-light);
  color: #946d0e;
}

.listing-form-main-v10 .listing-panel-v4 {
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(11, 29, 58, 0.08);
  box-shadow: 0 16px 34px rgba(11, 29, 58, 0.06);
}

.listing-form-main-v10 .listing-panel-head-v4 {
  margin-bottom: 24px;
}

.listing-form-main-v10 .listing-type-grid-v4 {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 20px;
}

.listing-form-main-v10 .listing-type-card-v4 {
  min-height: 240px;
  align-content: start;
}

.listing-form-main-v10 .grid-2,
.listing-form-main-v10 .grid-3 {
  min-width: 0;
}

.listing-form-main-v10 .field {
  min-width: 0;
}

@media (max-width: 1200px) {
  .listing-form-container-v10 {
    width: min(100%, calc(100% - 32px));
  }
}

@media (max-width: 1100px) {
  .listing-form-shell-v10 {
    grid-template-columns: 1fr;
  }

  .listing-form-sidebar-v10 {
    position: static;
    min-height: 0;
  }

  .listing-form-toolbar-v10 {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .listing-form-container-v10 {
    width: calc(100% - 24px);
  }

  .listing-form-main-v10 .listing-type-grid-v4 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Get Listed (role explainer) page ---------- */

.get-listed-hero-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #09172d 0%, #123260 55%, #0b1d3a 100%);
}

.get-listed-hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(212, 168, 67, 0.24), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(15, 166, 142, 0.28), transparent 38%);
  filter: blur(6px);
}

.get-listed-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 56px 0;
}

.get-listed-hero-copy .eyebrow {
  color: rgba(255, 255, 255, 0.74);
}

.get-listed-hero-copy h1 {
  margin: 10px 0 16px;
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--sbr-white);
}

.get-listed-hero-copy p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 12px;
}

.get-listed-offer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 26px 54px rgba(5, 15, 30, 0.28);
}

.get-listed-offer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sbr-white);
  color: var(--sbr-teal-dark);
  font-size: 16px;
}

.get-listed-offer-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sbr-teal-dark);
  margin-bottom: 2px;
}

.get-listed-offer strong {
  display: block;
  color: var(--sbr-navy);
  margin-bottom: 4px;
}

.get-listed-offer p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--sbr-text-muted);
}

.get-listed-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px rgba(9, 23, 45, 0.5);
}

.get-listed-roles-band {
  position: relative;
  overflow: hidden;
  padding: 56px 0;
  background: linear-gradient(180deg, #0b1d3a 0%, #112a50 100%);
}

.get-listed-roles-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 85% 10%, rgba(212, 168, 67, 0.18), transparent 32%),
    radial-gradient(circle at 8% 90%, rgba(15, 166, 142, 0.24), transparent 34%);
  filter: blur(6px);
}

.get-listed-roles-band .container {
  position: relative;
  z-index: 1;
}

.get-listed-roles-band .market-why-head h2 {
  color: var(--sbr-white);
}

.role-card-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.role-card {
  padding: 28px 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
}

.role-card.is-highlighted {
  background: rgba(15, 166, 142, 0.16);
  border-color: rgba(15, 166, 142, 0.4);
}

.role-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--sbr-teal-light);
  font-size: 22px;
}

.role-card h3 {
  margin: 0 0 10px;
  color: var(--sbr-white);
}

.role-card p {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
}

.role-card-btn {
  width: 100%;
}

.role-card-btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.role-card-soon {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.get-listed-accent {
  color: var(--sbr-teal-dark);
  font-weight: 600;
}

.get-listed-wash {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sbr-teal-light) 0%, #eef6f4 100%);
}

.get-listed-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 90% 15%, rgba(15, 166, 142, 0.16), transparent 40%);
  filter: blur(10px);
}

.get-listed-wash .container {
  position: relative;
  z-index: 1;
}

.get-listed-two-way {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.get-listed-two-way .market-step-card {
  padding: 32px 24px;
  border-radius: 18px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  box-shadow: var(--sbr-shadow);
}

.get-listed-two-way .market-step-card h3 {
  color: var(--sbr-navy);
}

.get-listed-two-way .market-step-card p {
  color: var(--sbr-text-muted);
}

.get-listed-connector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  color: var(--sbr-text-muted);
  font-size: 14px;
}

@media (max-width: 900px) {
  .get-listed-hero {
    grid-template-columns: 1fr;
  }

  .get-listed-hero-media {
    order: -1;
  }

  .role-card-grid {
    grid-template-columns: 1fr;
  }

  .get-listed-two-way {
    grid-template-columns: 1fr;
  }

  .get-listed-connector {
    justify-self: center;
  }
}

/* ---------- Contact Us page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.contact-info-stack {
  display: grid;
  gap: 20px;
}

.contact-info-card {
  padding: 24px;
  border-radius: 16px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  box-shadow: var(--sbr-shadow);
}

.contact-info-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--sbr-navy);
  font-size: 15px;
}

.contact-info-card p {
  margin: 0 0 4px;
  color: var(--sbr-text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
}

.contact-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-size: 17px;
}

.contact-quick-links {
  display: grid;
  gap: 8px;
}

.contact-quick-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--sbr-bg);
  color: var(--sbr-navy);
  font-weight: 700;
  font-size: 13px;
  transition: background-color 0.15s ease;
}

.contact-quick-links a:hover {
  background: #eeece5;
}

.contact-quick-links a i {
  font-size: 11px;
  color: var(--sbr-text-muted);
}

.contact-faq {
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid var(--sbr-border);
}

.contact-faq-item {
  border-bottom: 1px solid var(--sbr-border);
}

.contact-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  color: var(--sbr-navy);
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  list-style: none;
}

.contact-faq-item summary::-webkit-details-marker {
  display: none;
}

.contact-faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 400;
  color: var(--sbr-teal);
  transition: transform 0.2s ease;
}

.contact-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.contact-faq-item p {
  margin: 0 0 18px;
  padding: 0 4px;
  color: var(--sbr-text-secondary);
  font-size: 13.5px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Owner & Seller Program page ---------- */

.owner-hero-wrap {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 40%, var(--sbr-navy) 88%),
    linear-gradient(90deg, #1b6d5e 0%, #124a56 35%, var(--sbr-navy) 75%);
}

.owner-hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 6% 20%, rgba(15, 166, 142, 0.35), transparent 42%),
    radial-gradient(circle at 92% 85%, rgba(11, 29, 58, 0.3), transparent 38%);
  filter: blur(38px);
}

.owner-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: start;
  padding: 48px 0 64px;
}

.owner-hero-copy .eyebrow {
  color: var(--sbr-teal-light);
}

.owner-hero-copy h1 {
  margin: 10px 0 16px;
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--sbr-white);
}

.owner-hero-copy p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 12px;
}

.owner-hero-checklist li {
  color: rgba(255, 255, 255, 0.85);
}

.owner-hero-checklist li::before {
  color: var(--sbr-teal-light);
}

.owner-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--sbr-white);
  font-size: 0.88rem;
  font-weight: 600;
}

.owner-hero-media {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 32px;
  border-radius: 20px;
  box-shadow: var(--sbr-shadow);
}

.owner-hero-media-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.owner-hero-offer {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 30px 26px 26px;
  border-radius: 16px;
  background: var(--sbr-white);
  box-shadow: 0 26px 54px rgba(11, 29, 58, 0.35);
  text-align: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.owner-hero-offer:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 64px rgba(11, 29, 58, 0.45);
}

.owner-hero-offer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-size: 19px;
}

.owner-hero-offer-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sbr-text-muted);
}

.owner-hero-offer h3 {
  margin: 0 0 12px;
  color: var(--sbr-teal-dark);
  font-size: 1.5rem;
}

.owner-hero-offer p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--sbr-text-muted);
}

.owner-hero-offer .btn {
  margin-top: 10px;
}

.owner-note {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  text-align: center;
  color: var(--sbr-text-muted);
}

.owner-band {
  position: relative;
  overflow: hidden;
  padding: 48px 0;
}

.owner-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: blur(10px);
}

.owner-band .container {
  position: relative;
  z-index: 1;
}

.owner-band.is-navy {
  background: linear-gradient(180deg, #0b1d3a 0%, #112a50 100%);
}

.owner-band.is-navy::before {
  background: radial-gradient(circle at 85% 45%, rgba(15, 166, 142, 0.26), transparent 42%);
}

.owner-band.is-navy .market-why-accent {
  background: var(--sbr-teal);
}

.owner-band.is-navy h2 {
  color: var(--sbr-white);
}

.owner-band.is-navy p.muted,
.owner-band.is-navy .owner-spec-footer {
  color: rgba(255, 255, 255, 0.72);
}

.owner-band.is-navy .owner-type-icon.is-navy {
  background: rgba(255, 255, 255, 0.14);
  color: var(--sbr-white);
}

.owner-buyers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.owner-buyers-grid h2 {
  margin: 10px 0 14px;
  font-size: 1.6rem;
}

.owner-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
}

.owner-spec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sbr-navy);
}

.owner-spec-item i {
  color: var(--sbr-teal);
}

.owner-spec-footer {
  font-size: 0.88rem;
}

.owner-type-cards {
  display: grid;
  gap: 14px;
}

.owner-type-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 14px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
}

.owner-type-card.is-gold {
  background: var(--sbr-gold-light);
  border-color: rgba(212, 168, 67, 0.35);
}

.owner-type-card h4 {
  margin: 0 0 6px;
}

.owner-type-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--sbr-text-muted);
}

.owner-type-card .badge {
  margin-top: 10px;
}

.owner-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 18px;
}

.owner-type-icon.is-teal {
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
}

.owner-type-icon.is-navy {
  background: rgba(11, 29, 58, 0.08);
  color: var(--sbr-navy);
}

.owner-type-icon.is-gold {
  background: rgba(212, 168, 67, 0.18);
  color: #896515;
}

.owner-hero-checklist {
  margin: 16px 0;
}

.owner-free-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 40px;
  align-items: center;
}

.owner-free-grid h2 {
  margin: 10px 0 14px;
}

.owner-free-card {
  padding: 28px 24px;
  border-radius: 18px;
  background: var(--sbr-white);
  border: 1px solid var(--sbr-border);
  box-shadow: var(--sbr-shadow);
  text-align: center;
}

.owner-free-card h3 {
  margin: 6px 0 10px;
  color: var(--sbr-navy);
}

.owner-free-card p {
  margin: 0 0 18px;
  color: var(--sbr-text-muted);
  font-size: 0.9rem;
}

.role-card-icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: var(--sbr-teal-light);
  color: var(--sbr-teal-dark);
  font-size: 20px;
}

.owner-band.is-broker-navy .owner-free-grid > div:first-child .bullet-list li {
  color: rgba(255, 255, 255, 0.85);
}

.owner-band.is-broker-navy .owner-free-grid > div:first-child .bullet-list li::before {
  color: var(--sbr-gold);
}

.owner-billing-row {
  justify-content: center;
  margin: 0 auto 28px;
  padding: 6px;
  width: fit-content;
  border-radius: 14px;
  background: var(--sbr-bg);
  border: 1px solid var(--sbr-border);
}

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

.owner-plan-row {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto 32px;
  padding: 22px 26px;
  border-radius: 16px;
  background: var(--sbr-white);
  border: 1px dashed var(--sbr-border);
}

.owner-plan-row-info {
  flex: 1;
}

.owner-plan-row-info h3 {
  margin: 4px 0 4px;
  font-size: 1.1rem;
}

.owner-plan-row-info p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--sbr-text-muted);
}

.owner-plan-row-price {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.owner-plan-row-price strong {
  font-size: 1.6rem;
  color: var(--sbr-navy);
}

.owner-plan-row-price span {
  display: block;
  font-size: 0.78rem;
  color: var(--sbr-text-muted);
}

.owner-plan-row .btn {
  flex: 0 0 auto;
}

.owner-plan-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sbr-text-muted);
}

.owner-included-grid .market-why-card {
  padding: 12px 16px;
  background: none;
  border: none;
  box-shadow: none;
}

.owner-included-grid .market-why-icon-circle {
  border: none;
  background: var(--sbr-teal);
  color: var(--sbr-white);
}

.owner-plans-grid .pricing-card {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.owner-plans-grid .pricing-card:hover {
  transform: translateY(-8px);
  border-color: var(--sbr-teal);
  box-shadow: 0 24px 48px rgba(11, 29, 58, 0.18);
}

.owner-plans-grid .pricing-card.is-owner-highlight {
  border-color: var(--sbr-teal);
  box-shadow: 0 20px 45px rgba(15, 166, 142, 0.18);
}

.owner-plans-grid .pricing-card.is-owner-highlight:hover {
  box-shadow: 0 28px 54px rgba(15, 166, 142, 0.3);
}

.owner-plan-ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--sbr-teal);
  color: var(--sbr-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.owner-plans-grid .pricing-card > p {
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--sbr-border);
  color: var(--sbr-text-muted);
  font-size: 0.88rem;
}

.owner-plan-checklist li {
  padding-left: 26px;
}

.owner-plan-checklist li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--sbr-teal);
  font-size: 16px;
}

.owner-plans-grid .pricing-card .btn.btn-primary {
  background: var(--sbr-white);
  color: var(--sbr-navy);
  border: 1.5px solid var(--sbr-navy);
}

.owner-plans-grid .pricing-card .btn.btn-primary:hover {
  background: var(--sbr-bg);
}

.owner-plans-grid .pricing-card.is-owner-highlight .btn.btn-primary {
  background: var(--sbr-teal);
  color: var(--sbr-white);
  border-color: var(--sbr-teal);
}

.owner-plans-grid .pricing-card.is-owner-highlight .btn.btn-primary:hover {
  background: var(--sbr-teal-dark);
}

.owner-final-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  text-align: left;
}

.owner-final-cta-copy {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 560px;
}

.owner-final-cta-copy h2 {
  color: var(--sbr-white);
  margin: 0 0 8px;
  font-size: 1.7rem;
}

.owner-final-cta-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.owner-final-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--sbr-teal-light);
  font-size: 22px;
}

.owner-final-cta-actions {
  text-align: right;
}

.owner-final-cta-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.68);
}

.owner-final-cta-note a {
  color: var(--sbr-teal-light);
  font-weight: 600;
}

@media (max-width: 900px) {
  .owner-hero {
    grid-template-columns: 1fr;
    padding-bottom: 48px;
  }

  .owner-buyers-grid,
  .owner-free-grid {
    grid-template-columns: 1fr;
  }

  .owner-plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-plan-row {
    flex-wrap: wrap;
    text-align: center;
  }

  .owner-plan-row-price {
    text-align: center;
  }

  .owner-plan-row .btn {
    width: 100%;
  }

  .owner-final-cta-inner {
    text-align: center;
    justify-content: center;
  }

  .owner-final-cta-copy {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .owner-final-cta-actions {
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .owner-spec-grid {
    grid-template-columns: 1fr;
  }

  .owner-plans-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Broker Program page (gold camouflaged with navy) ---------- */

.broker-hero-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #8a6a1f 0%, #4a3d2e 35%, var(--sbr-navy) 75%);
}

.broker-hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 40%, var(--sbr-navy) 88%),
    radial-gradient(circle at 6% 20%, rgba(212, 168, 67, 0.4), transparent 42%),
    radial-gradient(circle at 92% 85%, rgba(11, 29, 58, 0.3), transparent 38%);
  filter: blur(38px);
}

.broker-hero-wrap .owner-hero-copy .eyebrow {
  color: var(--sbr-gold-light);
}

.broker-hero-pill {
  background: rgba(255, 255, 255, 0.12);
  color: var(--sbr-white);
}

.broker-hero-offer-icon {
  background: var(--sbr-gold-light);
  color: #896515;
}

.broker-offer-heading {
  color: #896515 !important;
}

/* Buyer Program hero — same structure as .owner-hero-wrap/.broker-hero-wrap
   (teal/gold respectively) but in the slate-gray-into-navy blend that already
   reads as "buyer" on the Get Listed role card (a translucent white card over
   the dark navy band), so the program page carries the same identity. */
.buyer-hero-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #4b5568 0%, #29334a 35%, var(--sbr-navy) 75%);
}

.buyer-hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 40%, var(--sbr-navy) 88%),
    radial-gradient(circle at 6% 20%, rgba(148, 163, 184, 0.38), transparent 42%),
    radial-gradient(circle at 92% 85%, rgba(11, 29, 58, 0.3), transparent 38%);
  filter: blur(38px);
}

.buyer-hero-wrap .owner-hero-copy .eyebrow {
  color: #cbd5e1;
}

.buyer-hero-offer-icon {
  background: #e2e8f0;
  color: #334155;
}

.buyer-offer-heading {
  color: var(--sbr-navy) !important;
}

.owner-band.is-broker-navy {
  background: linear-gradient(180deg, #0b1d3a 0%, #112a50 100%);
}

.owner-band.is-broker-navy::before {
  background: radial-gradient(circle at 85% 45%, rgba(212, 168, 67, 0.28), transparent 42%);
}

.owner-band.is-broker-navy .market-why-accent {
  background: var(--sbr-gold);
}

.owner-band.is-broker-navy h2 {
  color: var(--sbr-white);
}

.owner-band.is-broker-navy p.muted,
.owner-band.is-broker-navy .owner-spec-footer,
.owner-band.is-broker-navy .broker-setup-label {
  color: rgba(255, 255, 255, 0.72);
}

.owner-band.is-broker-navy .broker-setup-label {
  font-weight: 700;
  margin: 4px 0 10px;
}

.broker-spec-item i {
  color: var(--sbr-gold);
}

.broker-included-grid .market-why-icon-circle {
  background: var(--sbr-gold);
  color: var(--sbr-white);
}

.broker-icon-gold {
  background: var(--sbr-gold-light) !important;
  color: #896515 !important;
}

.broker-contact-card h3 {
  color: var(--sbr-navy);
}

.broker-plans-grid .price-figure {
  color: #896515;
}

.broker-plans-grid .owner-plan-checklist li::before {
  color: var(--sbr-gold);
}

.broker-plans-grid .pricing-card:hover {
  border-color: var(--sbr-gold);
  box-shadow: 0 24px 48px rgba(11, 29, 58, 0.18);
}

.broker-plans-grid .pricing-card.is-broker-highlight {
  border-color: var(--sbr-gold);
  box-shadow: 0 20px 45px rgba(212, 168, 67, 0.25);
}

.broker-plans-grid .pricing-card.is-broker-highlight:hover {
  box-shadow: 0 28px 54px rgba(212, 168, 67, 0.35);
}

.broker-plan-ribbon {
  background: var(--sbr-gold);
}

.broker-plans-grid .pricing-card.is-broker-highlight .btn.btn-primary {
  background: var(--sbr-gold);
  border-color: var(--sbr-gold);
}

.broker-plans-grid .pricing-card.is-broker-highlight .btn.btn-primary:hover {
  background: #b6871f;
}

.broker-final-cta-icon {
  color: var(--sbr-gold-light);
}