/* ============================================================
   Maven Business Compendium — dark B2B design system
   ------------------------------------------------------------
   Deep navy / slate / charcoal, medium-gray text. Visually
   distinct from the light Maven Search site. Form aesthetic
   ported from RankGalactic (.rg-input-group / validation states)
   as .cmp-* equivalents. No build step, no framework.
   ============================================================ */

:root {
  --cmp-navy:        #0b1f3a;   /* deepest brand navy */
  --cmp-bg:          #0d1626;   /* page background (near-black navy) */
  --cmp-surface:     #131d31;   /* cards / panels (slate) */
  --cmp-surface-2:   #1a2740;   /* raised surface / inputs */
  --cmp-border:      #25334d;   /* hairline borders */
  --cmp-border-soft: #1e2a42;
  --cmp-text:        #e6ecf5;   /* primary text */
  --cmp-text-muted:  #9fb0c7;   /* medium-gray body text */
  --cmp-text-faint:  #6b7c96;   /* labels / hints */
  --cmp-primary:     #38bdf8;   /* sky accent (ties to Maven) */
  --cmp-primary-600: #0ea5e9;
  --cmp-gold:        #d8b15a;   /* premium / verified badge */
  --cmp-success:     #34d399;
  --cmp-danger:      #f87171;
  --cmp-warning:     #fbbf24;
  --cmp-radius:      12px;
  --cmp-radius-sm:   8px;
  --cmp-radius-pill: 999px;
  --cmp-shadow:      0 18px 50px rgba(0,0,0,0.45);
  --cmp-ease:        cubic-bezier(.4,0,.2,1);
  --cmp-font:        'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --cmp-font-display:'Space Grotesk', var(--cmp-font);
}

* { box-sizing: border-box; }

body.cmp-body {
  margin: 0;
  background: var(--cmp-bg);
  color: var(--cmp-text);
  font-family: var(--cmp-font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

.cmp-body h1, .cmp-body h2, .cmp-body h3, .cmp-body .cmp-display {
  font-family: var(--cmp-font-display);
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.15;
}

a { color: var(--cmp-primary); text-decoration: none; }
a:hover, a:focus { text-decoration: none; }

.cmp-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.cmp-narrow { max-width: 560px; margin: 0 auto; padding: 0 24px; }

/* ── Header / nav ───────────────────────────────────────── */
.cmp-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,31,58,0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cmp-border);
}
/* Header bar runs wider than the 1140px body content so the large logo +
   wordmark + compact search + nav links never crowd on inner pages. */
.cmp-header > .cmp-container { max-width: 1320px; padding-left: 32px; padding-right: 32px; }
.cmp-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 116px; padding: 14px 0; }
.cmp-brand { display: flex; align-items: center; gap: 14px; font-family: var(--cmp-font-display); font-weight: 600; font-size: 1.18rem; color: #fff; }
.cmp-brand-mark { width: 88px; height: 88px; border-radius: 10px; display: block; object-fit: contain; }
/* Two-line brand: large title over a smaller control sublabel. */
.cmp-brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.cmp-brand-sub { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.05em; color: var(--cmp-text-muted); }
/* Right-side cluster: primary nav + utilities (share, mobile toggle) hug the edge. */
.cmp-nav-end { display: flex; align-items: center; gap: 12px; }
.cmp-nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cmp-nav-form { margin: 0; }
.cmp-nav-utils { display: flex; align-items: center; gap: 10px; }

/* Nav link/button base — icon + label. A reserved 1.5px transparent border means
   the hover wash never shifts neighbours (owner's no-layout-shift rule). */
.cmp-nav-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-family: var(--cmp-font); font-size: 0.92rem; font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  padding: 10px 14px; background: transparent;
  border: 1.5px solid transparent; border-radius: var(--cmp-radius-sm);
  transition: color .18s var(--cmp-ease), background .2s var(--cmp-ease), border-color .18s var(--cmp-ease), box-shadow .2s var(--cmp-ease);
}
.cmp-nav-link i, .cmp-nav-link svg { font-size: 1.02rem; color: var(--cmp-primary); transition: color .18s var(--cmp-ease), transform .2s var(--cmp-ease); }
/* Hover/focus: soft sky wash + faint glow ring — colour/shadow only, no reflow. */
.cmp-nav-link:hover, .cmp-nav-link:focus-visible {
  color: #fff; outline: none;
  background: linear-gradient(180deg, rgba(56,189,248,0.15), rgba(56,189,248,0.06));
  border-color: rgba(56,189,248,0.38);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.10);
}
.cmp-nav-link:hover i, .cmp-nav-link:focus-visible i,
.cmp-nav-link:hover svg, .cmp-nav-link:focus-visible svg { transform: scale(1.12); }
.cmp-nav-link.is-active { color: #fff; background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.5); }

/* "List your business" — the primary CTA carries real weight: gradient fill + glow. */
.cmp-nav-cta {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  color: #fff; font-family: var(--cmp-font); font-size: 0.92rem; font-weight: 700; line-height: 1;
  text-decoration: none; padding: 10px 16px; border: 1.5px solid transparent; border-radius: var(--cmp-radius-sm);
  background: linear-gradient(135deg, #7dd3fc 0%, var(--cmp-primary) 45%, var(--cmp-primary-600) 100%);
  box-shadow: 0 4px 14px rgba(56,189,248,0.28);
  transition: box-shadow .2s var(--cmp-ease), filter .2s var(--cmp-ease);
}
.cmp-nav-cta i, .cmp-nav-cta svg { font-size: 1.02rem; color: #fff; }
.cmp-nav-cta:hover, .cmp-nav-cta:focus-visible {
  outline: none; text-decoration: none; filter: saturate(1.15) brightness(1.06);
  box-shadow: 0 6px 22px rgba(56,189,248,0.46), 0 0 0 3px rgba(56,189,248,0.18);
}

/* Browse dropdown — click-toggled by compendium-nav.js. */
.cmp-nav-dd { position: relative; }
.cmp-nav-dd-caret { font-size: 0.86rem !important; color: var(--cmp-text-faint) !important; transition: transform .2s var(--cmp-ease); }
.cmp-nav-dd-trigger[aria-expanded="true"] { color: #fff; background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.4); }
.cmp-nav-dd-trigger[aria-expanded="true"] .cmp-nav-dd-caret { transform: rotate(180deg); }
.cmp-nav-dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 200; min-width: 216px; padding: 8px;
  background: var(--cmp-surface); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius);
  box-shadow: var(--cmp-shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--cmp-ease), transform .16s var(--cmp-ease), visibility .16s var(--cmp-ease);
}
.cmp-nav-dd.is-open .cmp-nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cmp-nav-dd-menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--cmp-radius-sm);
  color: var(--cmp-text); font-size: 0.9rem; text-decoration: none;
  transition: background .16s var(--cmp-ease), color .16s var(--cmp-ease);
}
.cmp-nav-dd-menu a i, .cmp-nav-dd-menu a svg { font-size: 1rem; color: var(--cmp-primary); }
.cmp-nav-dd-menu a:hover, .cmp-nav-dd-menu a:focus-visible { background: var(--cmp-surface-2); color: #fff; outline: none; }

/* Mobile hamburger toggle — hidden until the primary nav collapses (<=920px). */
.cmp-nav-toggle {
  display: none; width: 46px; height: 46px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-sm); cursor: pointer;
  transition: border-color .18s var(--cmp-ease), background .18s var(--cmp-ease);
}
.cmp-nav-toggle:hover { border-color: var(--cmp-primary); background: var(--cmp-surface-2); }
.cmp-burger, .cmp-burger::before, .cmp-burger::after {
  content: ''; display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .25s var(--cmp-ease), opacity .2s var(--cmp-ease);
}
.cmp-burger { position: relative; }
.cmp-burger::before { position: absolute; left: 0; top: -7px; }
.cmp-burger::after  { position: absolute; left: 0; top: 7px; }
body.cmp-nav-open .cmp-burger { background: transparent; }
body.cmp-nav-open .cmp-burger::before { transform: translateY(7px) rotate(45deg); }
body.cmp-nav-open .cmp-burger::after  { transform: translateY(-7px) rotate(-45deg); }

/* Mobile slide-in panel + backdrop. */
.cmp-mobile-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(5,10,20,0.62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--cmp-ease);
}
.cmp-mobile-backdrop.is-open { opacity: 1; pointer-events: auto; }
.cmp-mobile-panel {
  position: fixed; top: 0; right: 0; z-index: 70; width: min(86vw, 340px); height: 100%;
  display: flex; flex-direction: column; padding: 16px; overflow-y: auto;
  background: var(--cmp-navy);
  background-image: radial-gradient(circle at 100% 0, rgba(56,189,248,0.18), transparent 55%);
  border-left: 1px solid var(--cmp-border); box-shadow: -30px 0 60px rgba(0,0,0,0.5);
  transform: translateX(100%); transition: transform .3s var(--cmp-ease);
}
.cmp-mobile-panel.is-open { transform: translateX(0); }
.cmp-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 4px 6px; }
.cmp-mobile-title { font-family: var(--cmp-font-display); font-weight: 600; color: #fff; font-size: 1.05rem; }
.cmp-mobile-close {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-sm);
  color: var(--cmp-text-muted); font-size: 1.15rem; cursor: pointer;
  transition: color .18s var(--cmp-ease), border-color .18s var(--cmp-ease), background .18s var(--cmp-ease);
}
.cmp-mobile-close:hover { color: #fff; border-color: var(--cmp-primary); background: var(--cmp-surface-2); }
.cmp-mobile-links { display: flex; flex-direction: column; gap: 4px; }
.cmp-mobile-panel form { margin: 0; }
.cmp-mobile-links a, .cmp-mobile-signout {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 14px;
  color: #fff; font-family: var(--cmp-font); font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--cmp-radius-sm);
  transition: background .18s var(--cmp-ease), border-color .18s var(--cmp-ease);
}
.cmp-mobile-links a i, .cmp-mobile-links a svg,
.cmp-mobile-signout i, .cmp-mobile-signout svg { font-size: 1.15rem; color: var(--cmp-primary); }
.cmp-mobile-links a:hover, .cmp-mobile-links a:focus-visible, .cmp-mobile-signout:hover {
  background: var(--cmp-surface-2); border-color: var(--cmp-border); outline: none;
}
.cmp-mobile-links a.is-active { background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.4); }
.cmp-mobile-cta {
  margin-top: 8px; color: #fff !important; font-weight: 700 !important; border-color: transparent !important;
  background: linear-gradient(135deg, #7dd3fc, var(--cmp-primary-600)) !important;
  box-shadow: 0 4px 14px rgba(56,189,248,0.26);
}
.cmp-mobile-cta i, .cmp-mobile-cta svg { color: #fff !important; }

/* Collapse the primary nav into the hamburger below the desktop breakpoint.
   1024px keeps the elevated nav clear of the tight zone where the inline search
   and full menu would otherwise crowd (interior pages need ~1150px for both). */
@media (max-width: 1024px) {
  .cmp-nav-links { display: none; }
  .cmp-nav-toggle { display: inline-flex; }
}
/* Lighten the tall brand block on phones so the header isn't top-heavy. */
@media (max-width: 560px) {
  .cmp-nav { min-height: 74px; }
  .cmp-brand { gap: 10px; font-size: 1rem; }
  .cmp-brand-mark { width: 54px; height: 54px; }
  .cmp-brand-sub { font-size: 0.64rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-mobile-panel, .cmp-mobile-backdrop, .cmp-burger,
  .cmp-burger::before, .cmp-burger::after, .cmp-nav-dd-menu { transition: none; }
}

/* ── Subheader / breadcrumbs ────────────────────────────── */
.cmp-subheader { border-bottom: 1px solid var(--cmp-border); background: rgba(11,31,58,0.55); }
.cmp-subheader-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 50px; }
/* Back link now reads as a real affordance — a subtle chip with a clear hover. */
.cmp-back-link { display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--cmp-text-muted); font-size: 0.88rem; font-weight: 600; padding: 7px 13px; border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-pill); transition: color .15s var(--cmp-ease), border-color .15s var(--cmp-ease), background .15s var(--cmp-ease); }
.cmp-back-link:hover, .cmp-back-link:focus-visible { color: #fff; text-decoration: none; border-color: var(--cmp-primary); background: var(--cmp-surface-2); outline: none; }
.cmp-back-link i, .cmp-back-link svg { font-size: 1rem; }
.cmp-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; min-height: 50px; padding-top: 9px; padding-bottom: 9px; font-size: 0.9rem; color: var(--cmp-text-faint); }
.cmp-breadcrumbs a { color: var(--cmp-text); font-weight: 500; transition: color .15s var(--cmp-ease); }
.cmp-breadcrumbs a:hover, .cmp-breadcrumbs a:focus-visible { color: var(--cmp-primary); text-decoration: none; outline: none; }
.cmp-breadcrumbs .sep { opacity: .55; }
.cmp-breadcrumbs [aria-current="page"] { color: #fff; font-weight: 600; }

/* ── Listing card cell + hover affordances ──────────────────
   The "Unverified" pill and "Claim this business" link are built on first
   hover/focus by compendium-card.js and revealed only while the card is
   hovered/focused — keeping the directory grid's initial DOM light. */
.cmp-listing-cell { position: relative; display: flex; flex-direction: column; align-self: start; }
.cmp-card-hover { opacity: 0; transition: opacity .15s var(--cmp-ease); }
.cmp-listing-cell:hover .cmp-card-hover,
.cmp-listing-cell:focus-within .cmp-card-hover { opacity: 1; }
.cmp-claim-overlay {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 0.74rem; font-weight: 600; color: var(--cmp-gold);
  border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-sm);
  background: rgba(13,22,38,0.86);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity .15s var(--cmp-ease), border-color .15s var(--cmp-ease), color .15s var(--cmp-ease);
}
.cmp-claim-overlay:hover { color: #fff; border-color: var(--cmp-gold); text-decoration: none; }

/* ── Hero ───────────────────────────────────────────────── */
.cmp-hero {
  position: relative;
  padding: 146px 0 142px;
  /* Bustling-city photo under a deep-navy overlay so white text stays legible. */
  background:
    linear-gradient(180deg, rgba(11,31,58,0.50) 0%, rgba(13,22,38,0.74) 100%),
    url('/images/mvn/Maven-Business-Compendium.jpg');
  background-size: cover;
  background-position: center 35%;
  border-bottom: 1px solid var(--cmp-border);
  overflow: hidden;
}
.cmp-hero::after { /* extra bottom fade to seat the content above the skyline */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(13,22,38,0.38));
  pointer-events: none;
}
/* Optional override hook if a different photo is set inline via --cmp-hero-photo. */
.cmp-hero.has-photo {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.50) 0%, rgba(13,22,38,0.74) 100%),
    var(--cmp-hero-photo);
}
.cmp-hero-inner { position: relative; z-index: 1; }
.cmp-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--cmp-primary); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cmp-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cmp-primary); box-shadow: 0 0 12px var(--cmp-primary); }
.cmp-hero h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); margin: 16px 0 12px; max-width: 18ch; }
.cmp-hero p { color: var(--cmp-text-muted); font-size: 1.08rem; max-width: 52ch; margin: 0; }

/* Shield + copy laid side by side. The shield's height mirrors the h1 clamp x ~2
   line-heights, so it reads as "as tall as the two headline lines" at any width. */
.cmp-hero-lead { display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); }
.cmp-hero-copy { min-width: 0; }
.cmp-hero-shield { flex: none; width: auto; height: clamp(6rem, 13.5vw, 9.2rem); color: #fff; filter: drop-shadow(0 0 22px rgba(56,189,248,0.35)); }
@media (max-width: 560px) { .cmp-hero-shield { height: clamp(4.4rem, 18vw, 6.2rem); } .cmp-hero-lead { gap: 14px; } }

/* ── Directory page primitives (replace per-view inline styles) ──────────
   Shared building blocks for the content area of index / browse / search /
   category pages so those views stay semantic markup, not inline CSS. */
.cmp-page { max-width: 1140px; margin: 0 auto; padding: 36px 24px 64px; }
.cmp-page-title { font-size: 1.6rem; line-height: 1.2; margin: 0 0 6px; }
.cmp-page-title.is-tight { margin-bottom: 24px; }   /* title with no subtitle under it */
.cmp-page-sub { color: var(--cmp-text-muted); margin: 0 0 22px; }
.cmp-page-sub.is-sm { font-size: 0.9rem; margin: 6px 0 0; }
.cmp-results-head { margin: 24px 0 18px; }
.cmp-section-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cmp-text-faint); margin-bottom: 10px; }
.cmp-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.cmp-pill-muted { background: var(--cmp-surface-2); color: var(--cmp-text-muted); border: 1px solid var(--cmp-border); }

/* Larger section heading with a leading Lucide icon (used by "Popular categories").
   Flex keeps the icon optically centered with the cap-height of the text. */
.cmp-section-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.4rem; font-weight: 600; color: #fff; }
.cmp-section-head i, .cmp-section-head svg { width: 22px; height: 22px; flex: none; color: var(--cmp-primary); }
.cmp-section-head-count { color: var(--cmp-text-faint); font-weight: 500; }

/* Category row: a manual scroller. The row stays still and only travels while the
   user hovers (or holds, or focuses) the flanking left/right buttons — never on its
   own. End buttons disable when the track reaches that edge. JS in index.blade.php. */
.cmp-catscroll { display: flex; align-items: stretch; gap: 8px; margin-bottom: 28px; }
.cmp-catscroll-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.cmp-catscroll-track { display: flex; gap: 10px; width: max-content; }
.cmp-catscroll-btn {
  flex: none; width: 42px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cmp-surface); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-sm);
  color: var(--cmp-text-muted); cursor: pointer;
  transition: color .15s var(--cmp-ease), border-color .15s var(--cmp-ease), background .15s var(--cmp-ease);
}
.cmp-catscroll-btn:hover, .cmp-catscroll-btn:focus-visible { color: #fff; border-color: var(--cmp-primary); background: var(--cmp-surface-2); }
.cmp-catscroll-btn:disabled { opacity: 0.3; cursor: default; }
.cmp-catscroll-btn i, .cmp-catscroll-btn svg { width: 20px; height: 20px; }
/* Two-class selector so it beats the `.cmp-pill { max-width:240px; overflow:hidden }`
   clamp further down — that clamp truncated long category names AND clipped the
   count pill to nothing. Category pills are meant to show in full, never truncate. */
.cmp-catscroll .cmp-catscroll-pill { flex: none; max-width: none; overflow: visible; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.cmp-pill-count { font-size: 0.72rem; font-weight: 600; color: var(--cmp-text-faint); background: rgba(255,255,255,0.04); border-radius: var(--cmp-radius-pill); padding: 1px 8px; }
@media (hover: none) {
  /* Touch devices have no hover: hide the buttons and let the row swipe natively. */
  .cmp-catscroll-btn { display: none; }
  .cmp-catscroll-viewport { overflow-x: auto; }
}
.cmp-empty { text-align: center; padding: 64px 0; }
.cmp-empty [data-lucide] { width: 32px; height: 32px; color: var(--cmp-text-faint); }
.cmp-empty h2 { margin: 16px 0 8px; }
.cmp-empty p { color: var(--cmp-text-muted); margin: 0; }
.cmp-empty.is-sm { padding: 48px 0; }
.cmp-empty.is-sm [data-lucide] { width: 28px; height: 28px; }
.cmp-empty.is-sm p { margin-top: 10px; }

/* ── Cards ──────────────────────────────────────────────── */
.cmp-card { background: var(--cmp-surface); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius); box-shadow: var(--cmp-shadow); }
.cmp-card-pad { padding: 28px; }
.cmp-grid { display: grid; gap: 20px; }
.cmp-grid-2-lg { display: grid; grid-template-columns: 1fr; gap: 24px; }
.cmp-card-accent { border-left: 3px solid var(--cmp-gold); }

/* "Explore more" rail on listing pages — lateral links so a business isn't a dead-end. */
.cmp-explore-more { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--cmp-border); }
.cmp-explore-head-2 { margin-top: 36px; }
.cmp-explore-grid { margin-top: 4px; }
/* minmax(0,1fr): without the 0 floor a long, nowrap category name forces the
   track to min-content and stretches the card. The 0 lets the cell shrink so the
   label can ellipsize instead. */
@media (min-width: 720px) { .cmp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cmp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 880px) { .cmp-grid-2-lg { grid-template-columns: 1fr 320px !important; } }

/* ── Listing detail page (show.blade.php) ───────────────── */
.cmp-page.is-narrow { max-width: 980px; }

/* Claim / owner callouts */
.cmp-claim-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.cmp-claim-id { display: flex; align-items: center; gap: 14px; }
/* One larger icon sized to sit beside both lines of the prompt. Icons here are
   sized via font-size because the global `.cmp-body svg.lucide { width:1em }`
   rule wins on specificity over width/height. */
.cmp-claim-id > i, .cmp-claim-id > svg { flex: none; font-size: 40px; color: var(--cmp-gold); }
.cmp-claim-id strong { color: #fff; }
.cmp-claim-sub { color: var(--cmp-text-muted); font-size: 0.9rem; }
.cmp-claim-link { color: var(--cmp-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.cmp-claim-link:hover { color: #fff; text-decoration: underline; }
.cmp-owner-card { margin-bottom: 20px; }
.cmp-owner-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cmp-gold); }
.cmp-owner-quote { margin: 8px 0 0; color: var(--cmp-text); font-style: italic; }

/* Header */
.cmp-listing-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.cmp-listing-title { font-size: 2rem; margin: 0 0 10px; }
.cmp-meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cmp-meta-rating { display: inline-flex; align-items: center; gap: 7px; }
.cmp-meta-note { font-size: 0.82rem; color: var(--cmp-text-muted); }
.cmp-meta-note.is-faint { color: var(--cmp-text-faint); }
.cmp-link-sm { font-size: 0.82rem; }
.cmp-pill-cat { background: var(--cmp-surface-2); color: var(--cmp-primary); border: 1px solid var(--cmp-border); }
.cmp-listing-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

/* Listing tools toolbar — export/copy grouped in one compact panel under the header. */
.cmp-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  width: fit-content; max-width: 100%;
  margin: 0 0 22px; padding: 10px 14px;
  background: var(--cmp-surface); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius);
}
.cmp-toolbar-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cmp-text-faint); }
.cmp-toolbar-label i, .cmp-toolbar-label svg { font-size: 0.95rem; color: var(--cmp-text-faint); }
.cmp-toolbar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-tool {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; font-family: var(--cmp-font); font-size: 0.84rem; font-weight: 600;
  color: var(--cmp-text); background: var(--cmp-surface-2);
  border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-sm); cursor: pointer; text-decoration: none;
  transition: color .16s var(--cmp-ease), border-color .16s var(--cmp-ease), background .16s var(--cmp-ease), box-shadow .16s var(--cmp-ease);
}
.cmp-tool i, .cmp-tool svg { font-size: 1rem; color: var(--cmp-primary); transition: color .16s var(--cmp-ease); }
.cmp-tool:hover, .cmp-tool:focus-visible {
  color: #fff; border-color: rgba(56,189,248,0.4); background: var(--cmp-surface);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.10); outline: none;
}
.cmp-tool.is-copied { color: var(--cmp-success); border-color: rgba(52,211,153,0.45); background: rgba(52,211,153,0.08); }
.cmp-tool.is-copied i, .cmp-tool.is-copied svg { color: var(--cmp-success); }

/* Photos */
.cmp-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; margin-bottom: 28px; }
.cmp-photo-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--cmp-border); }

.cmp-listing-desc { color: var(--cmp-text-muted); line-height: 1.7; margin-bottom: 28px; }

/* Sidebar cards (contact / hours / location) */
.cmp-card-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cmp-text-faint); margin: 0 0 12px; }
.cmp-card-mb { margin-bottom: 16px; }
.cmp-card-mt { margin-top: 16px; }
.cmp-contact-list { display: flex; flex-direction: column; gap: 8px; color: var(--cmp-text-muted); font-size: 0.9rem; }
.cmp-contact-list > div { display: flex; align-items: center; gap: 9px; }
.cmp-contact-list i { color: var(--cmp-primary); }
.cmp-contact-list a { color: inherit; }
.cmp-contact-empty { color: var(--cmp-text-faint); font-style: italic; }
.cmp-hours-tz {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--cmp-text-muted);
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.22);
}
.cmp-hours-tz i { color: var(--cmp-primary); flex-shrink: 0; }
.cmp-hours-tz strong { color: var(--cmp-text); font-weight: 600; }
.cmp-hours-list { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; color: var(--cmp-text-muted); }
.cmp-hours-list > div { display: flex; justify-content: space-between; gap: 12px; }
/* position + z-index:0 gives the map its own stacking context, so Leaflet's
   internal panes/controls (z-index 400-1000) can't paint over the mobile menu. */
.cmp-map-embed { height: 200px; border-radius: 8px; overflow: hidden; position: relative; z-index: 0; }
.cmp-map-note { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--cmp-text-faint); margin: 9px 0 0; }
.cmp-map-note i { color: var(--cmp-text-faint); }
.cmp-loc-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cmp-loc-addr { font-size: 0.85rem; color: var(--cmp-text-muted); display: inline-flex; align-items: center; gap: 7px; }
.cmp-loc-addr i { color: var(--cmp-primary); }

/* Reviews */
.cmp-reviews { margin-top: 40px; border-top: 1px solid var(--cmp-border); padding-top: 28px; }
.cmp-reviews-title { font-size: 1.3rem; margin: 0 0 4px; }
.cmp-reviews-summary { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; }

/* Aggregate rating badge — the score sits in a gold circle over a single star
   that softly pulses/fades behind it. Replaces the repeated 5-star rows. */
.cmp-rating-orb {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  border: 2px solid rgba(216,177,90,0.55);
  background: radial-gradient(circle at 50% 45%, rgba(216,177,90,0.10), transparent 70%);
}
.cmp-rating-orb-star {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cmp-gold); animation: cmp-orb-pulse 2.6s var(--cmp-ease) infinite;
}
.cmp-rating-orb-star i, .cmp-rating-orb-star svg { font-size: 44px; fill: currentColor; }
.cmp-rating-orb-num {
  position: relative; z-index: 1;
  font-family: var(--cmp-font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: #fff;
}
.cmp-rating-orb-meta { display: flex; flex-direction: column; gap: 2px; }
.cmp-rating-orb-outof { font-family: var(--cmp-font-display); font-weight: 600; font-size: 0.95rem; color: #fff; }
@keyframes cmp-orb-pulse {
  0%, 100% { opacity: 0.14; transform: scale(0.86); }
  50%      { opacity: 0.40; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .cmp-rating-orb-star { animation: none; opacity: 0.22; } }
.cmp-reviews-empty { color: var(--cmp-text-faint); font-style: italic; }
.cmp-review-form { margin-top: 22px; max-width: 640px; }
.cmp-review-form h3 { font-size: 1rem; margin: 0 0 12px; }
.cmp-form-err { color: var(--cmp-danger); font-size: 0.82rem; }
.cmp-hp-field { display: none; }

/* Analyze overlay copy */
.cmp-analyze-title { margin: 0 0 6px; color: #fff; font-size: 1.1rem; }
.cmp-analyze-stage { color: var(--cmp-text-muted); font-size: 0.9rem; margin: 0; }
.cmp-analyze-hint { font-size: 0.76rem; color: var(--cmp-text-faint); margin: 14px 0 0; }
.cmp-analyze-errmsg { color: var(--cmp-text-muted); font-size: 0.9rem; margin: 0 0 18px; }

/* ── Listing card (partials/listing-card) ───────────────── */
/* Shell is an <article> (border/surface). Main listing link is .cmp-listing-main
   so social icons can be real <a>s without nesting. Nested <a> is invalid HTML:
   browsers close the card link early and leave a blank bordered .cmp-card in the
   social row — the empty "button" on search/directory cards. */
.cmp-listing-card { display: flex; flex-direction: column; flex: 1 1 auto; overflow: hidden; height: 100%; }
.cmp-listing-main {
  display: flex; flex-direction: column; flex: 1 1 auto;
  min-width: 0; text-decoration: none; color: inherit;
}
.cmp-listing-main:hover { text-decoration: none; color: inherit; }
.cmp-listing-main:focus-visible { outline: none; }
.cmp-listing-main:focus-visible .cmp-listing-name { color: var(--cmp-primary); }
/* Pexels headers run bright; darken into the theme, reveal on hover. */
.cmp-listing-photo { width: 100%; height: 160px; flex: none; object-fit: cover; filter: brightness(0.62) saturate(0.85) contrast(1.04); transition: filter 0.35s var(--cmp-ease), transform 0.45s var(--cmp-ease); }
.cmp-listing-card:hover .cmp-listing-photo,
.cmp-listing-card:focus-within .cmp-listing-photo { filter: brightness(0.95) saturate(1.05) contrast(1.02); transform: scale(1.04); }
.cmp-listing-noimg {
  width: 100%; height: 160px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(
    145deg,
    var(--cmp-surface-2) 0%,
    var(--cmp-navy) 48%,
    rgba(56, 189, 248, 0.14) 100%
  );
  border-bottom: 1px solid var(--cmp-border-soft);
}
.cmp-listing-noimg i,
.cmp-listing-noimg svg {
  width: 64px; height: 64px; min-width: 64px; min-height: 64px;
  color: var(--cmp-primary); opacity: 0.72;
}
/* Breathing room between text and the card border. */
.cmp-listing-body {
  display: flex; flex-direction: column; gap: 0;
  padding: 18px 20px 16px; flex: 1 1 auto; min-width: 0;
}
.cmp-listing-card:has(.cmp-listing-social) .cmp-listing-body { padding-bottom: 10px; }
.cmp-listing-titlerow { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.cmp-listing-name {
  font-size: 1.05rem; font-weight: 650; margin: 0; color: #fff; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Verified badge sits under the title with real spacing. Unverified .is-slot
   reserves pill height so hover-injected "Pending..." does not reflow the card. */
.cmp-listing-badge { margin-top: 10px; }
.cmp-listing-badge.is-slot { min-height: 28px; }
.cmp-listing-badge:not(.is-slot):empty { display: none; margin: 0; }
/* Category on its own line; city/state on the next (no joining bullet). */
.cmp-listing-meta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  margin: 10px 0 0; min-width: 0;
  font-size: 0.8rem; line-height: 1.3; color: var(--cmp-text-muted);
}
.cmp-listing-cat,
.cmp-listing-loc {
  display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%;
  margin: 0;
}
.cmp-listing-cat { color: var(--cmp-primary); font-weight: 600; }
.cmp-listing-loc { color: var(--cmp-text-muted); font-weight: 500; }
.cmp-listing-cat > i, .cmp-listing-cat > svg,
.cmp-listing-loc > i, .cmp-listing-loc > svg { flex: none; width: 13px; height: 13px; }
.cmp-cat-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.cmp-cat-count {
  flex: none; color: var(--cmp-text-faint); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cmp-listing-excerpt {
  font-size: 0.88rem; color: var(--cmp-text-muted); margin: 12px 0 0; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cmp-listing-score { margin-top: 14px; align-self: flex-start; }
/* Social sits outside the main link (sibling), still inside the card shell. */
.cmp-listing-social {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 20px 16px; margin: 0;
  border-top: 1px solid var(--cmp-border-soft);
  padding-top: 12px;
}
.cmp-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 8px;
  border: 1px solid var(--cmp-border-soft);
  background: var(--cmp-surface-2);
  color: var(--cmp-text-muted);
  text-decoration: none;
  transition: color .15s var(--cmp-ease), border-color .15s var(--cmp-ease),
    background .15s var(--cmp-ease), box-shadow .15s var(--cmp-ease);
}
.cmp-social-icon:hover,
.cmp-social-icon:focus-visible {
  color: #fff; border-color: var(--cmp-primary); background: rgba(56,189,248,0.12);
  text-decoration: none; outline: none;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.14);
}
/* Force icon size even before/after lucide swaps <i> → <svg>. */
.cmp-social-icon i,
.cmp-social-icon svg { width: 15px; height: 15px; display: block; flex: none; }

/* ── Review (partials/review) ───────────────────────────── */
.cmp-review { border-bottom: 1px solid var(--cmp-border-soft); padding: 16px 0; }
.cmp-review-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmp-review-author { font-weight: 600; color: #fff; font-size: 0.9rem; }
.cmp-review-body { font-size: 0.9rem; color: var(--cmp-text-muted); margin: 8px 0 0; line-height: 1.55; }
.cmp-review-date { font-size: 0.74rem; color: var(--cmp-text-faint); margin-top: 4px; display: block; }

/* ── Account area (account/*, auth/*, claim) ────────────── */
.cmp-page-title.is-lg { font-size: 1.8rem; }
.cmp-mt-24 { margin-top: 24px; }
.cmp-mb-24 { margin-bottom: 24px; }
.cmp-link-muted { color: var(--cmp-text-muted); }
.cmp-callout-title { color: #fff; }
.cmp-callout-title i { color: var(--cmp-gold); }
.cmp-callout-text { color: var(--cmp-text-muted); margin: 6px 0 0; font-size: 0.92rem; }
/* Quick-action cards */
.cmp-action-card { text-decoration: none; display: block; }
.cmp-action-card.is-gold { border: 1px solid rgba(216,177,90,0.4); }
.cmp-action-icon { width: 24px; height: 24px; color: var(--cmp-primary); }
.cmp-action-icon.is-gold { color: var(--cmp-gold); }
.cmp-action-title { font-size: 1.05rem; margin: 12px 0 4px; }
.cmp-action-title span { color: var(--cmp-text-faint); font-weight: 400; }
.cmp-action-text { color: var(--cmp-text-muted); font-size: 0.88rem; margin: 0; }
/* Narrow auth/form column */
.cmp-form-narrow { max-width: 460px; margin: 0 auto; }
.cmp-form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Auth / settings / claim forms */
.cmp-narrow.is-pad { padding-top: 64px; padding-bottom: 64px; }
.cmp-narrow.is-form { padding-top: 36px; padding-bottom: 72px; }
.cmp-text-center { text-align: center; }
.cmp-mt-10 { margin-top: 10px; }
.cmp-mt-28 { margin-top: 28px; }
.cmp-error-list { margin: 0; padding-left: 18px; }
.cmp-form-title { font-size: 1.4rem; margin: 0 0 18px; }
.cmp-form-title.is-tight { margin-bottom: 4px; }
.cmp-form-sub { color: var(--cmp-text-muted); margin: 0 0 24px; font-size: 0.92rem; display: flex; align-items: center; gap: 8px; }
.cmp-form-sub i { color: var(--cmp-gold); }
.cmp-form-note { color: var(--cmp-text-faint); font-size: 0.84rem; margin: 0 0 14px; }
.cmp-divider { border: none; border-top: 1px solid var(--cmp-border); margin: 18px 0; }
.cmp-checkbox-row { display: flex; align-items: flex-start; gap: 8px; color: var(--cmp-text-muted); font-size: 0.86rem; margin-bottom: 16px; cursor: pointer; }
.cmp-checkbox-row input[type="checkbox"] { margin-top: 2px; flex: none; accent-color: var(--cmp-primary); }
.cmp-publish-email { margin: 4px 0 0; line-height: 1.4; }
.cmp-publish-email .cmp-hint-trigger { display: inline-flex; vertical-align: middle; margin-left: 2px; }
.cmp-auth-alt { text-align: center; color: var(--cmp-text-faint); font-size: 0.86rem; margin: 18px 0 0; }
.cmp-grid.is-top { align-items: start; }
.cmp-signup-wrap { max-width: 860px; margin: -44px auto 0; position: relative; z-index: 2; padding: 0 24px 64px; }
.cmp-claim-icon { width: 36px; height: 36px; color: var(--cmp-gold); }

/* Login stage: a translucent card centered on the navy background. The radial
   scrim deepens contrast under the form. */
.cmp-auth-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 64px 24px;
  background-color: var(--cmp-bg);
}
.cmp-auth-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 42%,
              rgba(13, 22, 38, 0.30) 0%,
              rgba(13, 22, 38, 0.78) 58%,
              var(--cmp-bg) 100%);
  pointer-events: none;
}
.cmp-auth-stage > * { position: relative; z-index: 1; }
.cmp-auth-card {
  width: 100%;
  max-width: 440px;
  background: rgba(19, 29, 49, 0.82);          /* --cmp-surface at 82% so the art reads through */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(56, 189, 248, 0.18);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65);
}
@media (max-width: 640px) {
  .cmp-auth-stage { min-height: 0; padding: 40px 18px 56px; }
}

/* Listing edit form (account/listing) */
.cmp-form-page { max-width: 820px; margin: 0 auto; padding: 36px 24px 72px; }
.cmp-listing-editor { padding-bottom: 96px; }
.cmp-card-stack { margin-bottom: 20px; }
.cmp-card-h3 { font-size: 1.05rem; margin: 0 0 14px; }
.cmp-card-h3.is-tight { margin-bottom: 4px; }
.cmp-card-note { color: var(--cmp-text-faint); font-size: 0.82rem; margin: 0 0 14px; }
.cmp-count-note { color: var(--cmp-text-faint); font-weight: 400; font-size: 0.85rem; margin-left: 6px; }
.cmp-field-rel { position: relative; }
.cmp-field.is-last { margin-bottom: 0; }
.cmp-textarea-sm { min-height: 80px; }
.cmp-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Editor header */
.cmp-editor-head { margin: 14px 0 18px; }
.cmp-editor-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 10px 0 0; color: var(--cmp-text-muted); font-size: 0.9rem;
}
.cmp-editor-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-editor-meta i, .cmp-editor-meta svg { width: 15px; height: 15px; flex: none; }

/* Public URL bar */
.cmp-url-bar {
  margin: 0 0 22px; padding: 14px 16px;
  background: var(--cmp-surface); border: 1px solid var(--cmp-border);
  border-radius: var(--cmp-radius); box-shadow: var(--cmp-shadow);
}
.cmp-url-bar-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--cmp-text-faint); margin-bottom: 10px;
}
.cmp-url-bar-label i, .cmp-url-bar-label svg { width: 14px; height: 14px; color: var(--cmp-primary); }
.cmp-url-live-note {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--cmp-warning); background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.28); border-radius: var(--cmp-radius-pill);
  padding: 2px 8px; font-size: 0.72rem;
}
.cmp-url-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cmp-url-bar-text {
  flex: 1 1 200px; min-width: 0; padding: 10px 12px;
  background: var(--cmp-surface-2); border: 1px solid var(--cmp-border-soft);
  border-radius: var(--cmp-radius-sm); color: var(--cmp-text);
  font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-url-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.cmp-copy-btn.is-copied { color: var(--cmp-success); border-color: rgba(52,211,153,0.4); }
.cmp-copy-btn.is-failed { color: var(--cmp-danger); }

/* Numbered accordion sections — panel height + homepage-style icon blast */
.cmp-accordion-stack {
  display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px;
}
.cmp-accordion {
  background: var(--cmp-surface); border: 1px solid var(--cmp-border);
  border-radius: var(--cmp-radius); box-shadow: var(--cmp-shadow);
  overflow: visible;
}
.cmp-accordion-photos { margin-top: 18px; }
.cmp-accordion-sum {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  padding: 14px 16px; cursor: pointer; list-style: none;
  font-weight: 600; color: #fff; user-select: none;
  border-radius: var(--cmp-radius) var(--cmp-radius) 0 0;
  /* Keep a transparent border always so layout doesn't jump; never flash a
     light/white rule while the body is still height:0 on open. */
  border-bottom: 1px solid transparent;
  transition: background .38s cubic-bezier(0.22, 0.82, 0.24, 1),
    border-color .25s cubic-bezier(0.22, 0.82, 0.24, 1);
}
.cmp-accordion-sum::-webkit-details-marker { display: none; }
.cmp-accordion-sum::marker { content: ''; }
.cmp-accordion-sum:hover { background: rgba(255,255,255,0.03); }
/* Header tint while open/opening — no separator line until expand finishes. */
.cmp-accordion[open] > .cmp-accordion-sum,
.cmp-accordion.is-opening > .cmp-accordion-sum {
  background: rgba(56,189,248,0.04);
}
/* Divider only when fully open (not mid open/close height anim). */
.cmp-accordion[open]:not(.is-opening):not(.is-closing) > .cmp-accordion-sum {
  border-bottom-color: var(--cmp-border-soft);
}
.cmp-accordion.is-closing > .cmp-accordion-sum {
  border-bottom-color: transparent;
  background: transparent;
}
.cmp-accordion-num {
  flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--cmp-primary); background: rgba(56,189,248,0.12);
  border: 1px solid rgba(56,189,248,0.28); border-radius: 6px;
  padding: 3px 7px; min-width: 2rem; text-align: center;
  transition: box-shadow .38s cubic-bezier(0.22, 0.82, 0.24, 1),
    border-color .38s cubic-bezier(0.22, 0.82, 0.24, 1);
}
.cmp-accordion[open] .cmp-accordion-num,
.cmp-accordion.is-opening .cmp-accordion-num {
  box-shadow: 0 0 0 3px rgba(56,189,248,0.12);
  border-color: rgba(56,189,248,0.45);
}

/* Real header icon — fixed seat, never animates transform (clone does the blast) */
.cmp-accordion-sum > .cmp-accordion-ico,
.cmp-accordion-sum > svg.cmp-accordion-ico,
.cmp-accordion-sum > i.cmp-accordion-ico {
  flex: 0 0 18px;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  color: var(--cmp-primary);
  display: block;
  transition: color .38s cubic-bezier(0.22, 0.82, 0.24, 1);
}
.cmp-accordion[open] .cmp-accordion-sum > .cmp-accordion-ico,
.cmp-accordion.is-opening .cmp-accordion-sum > .cmp-accordion-ico,
.cmp-accordion[open] .cmp-accordion-sum > svg.cmp-accordion-ico,
.cmp-accordion.is-opening .cmp-accordion-sum > svg.cmp-accordion-ico {
  color: #7dd3fc;
}

/*
  Icon blast — same motion language as homepage Mission/Vision/Purpose
  (maven-public.css @keyframes mv-intro-blast). An HTML wrapper (not the SVG
  itself) is fixed on <body> so Lucide SVGs don't break className / animation.
  Real header icon never moves.
*/
.cmp-ico-blast {
  position: fixed;
  z-index: 10050;
  pointer-events: none;
  margin: 0;
  box-sizing: border-box;
  /* left/top = icon center (JS); transform origin for toward-camera grow */
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  color: #d6d6d6; /* same fixed light gray as .mv-intro-word */
  will-change: transform, opacity, filter;
  line-height: 0;
}
.cmp-ico-blast .cmp-ico-blast-svg,
.cmp-ico-blast svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  stroke: currentColor;
  fill: none;
  /* beat .cmp-body svg.lucide { width:1em } if styles leak */
  max-width: none !important;
  max-height: none !important;
}

.cmp-ico-blast.is-blasting {
  /* 1.3s + curve match .mv-intro-word.is-blasting / @keyframes mv-intro-blast */
  animation: cmp-ico-blast 1.3s cubic-bezier(0.3, 0.6, 0.35, 1) forwards;
}

@keyframes cmp-ico-blast {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7);  filter: blur(5px); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1);    filter: blur(0);  }
  48%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25); filter: blur(0);  }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(6);    filter: blur(8px); }
}

.cmp-accordion-title { flex: 1 1 auto; min-width: 0; font-size: 0.98rem; }
.cmp-count-note { flex: 0 0 auto; }
.cmp-accordion-body {
  overflow: hidden;
  border-radius: 0 0 var(--cmp-radius) var(--cmp-radius);
  /* Same fill as the card so height expand never paints a white flash */
  background: var(--cmp-surface);
}
.cmp-accordion-body-inner {
  padding: 20px 18px 22px;
  background: var(--cmp-surface);
}
.cmp-accordion-body-inner .cmp-field:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .cmp-accordion-sum,
  .cmp-accordion-num,
  .cmp-accordion-sum > .cmp-accordion-ico,
  .cmp-accordion-sum > svg.cmp-accordion-ico {
    transition: none !important;
  }
  .cmp-ico-blast { display: none !important; }
}

/* Sticky save */
.cmp-editor-save {
  position: sticky; bottom: 12px; z-index: 20;
  display: flex; justify-content: flex-end; margin-top: 18px;
  padding: 12px 0 4px;
  background: linear-gradient(180deg, transparent 0%, var(--cmp-bg, #0b1424) 28%);
}

/* Locations */
.cmp-field-hint-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.cmp-field-hint-inline { margin: 0; }
.cmp-location-rows { display: flex; flex-direction: column; gap: 16px; }
.cmp-location-row {
  padding: 14px; border: 1px solid var(--cmp-border-soft);
  border-radius: var(--cmp-radius-sm); background: var(--cmp-surface-2);
}
.cmp-location-row .cmp-field { margin-bottom: 12px; }
.cmp-location-locality {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end;
}
@media (max-width: 560px) {
  .cmp-location-locality { grid-template-columns: 1fr 1fr; }
  .cmp-location-remove-wrap { grid-column: 1 / -1; justify-self: end; }
}
.cmp-btn-icon { width: 40px; height: 40px; padding: 0; }
.cmp-btn-icon i, .cmp-btn-icon svg { width: 16px; height: 16px; }

/* NAICS typeahead */
.cmp-naics-results {
  position: absolute; z-index: 40; left: 0; right: 0; margin-top: 4px;
  max-height: 260px; overflow: auto; padding: 4px 0;
  box-shadow: var(--cmp-shadow);
}
.cmp-naics-results[hidden] { display: none !important; }
.cmp-naics-item {
  display: block; width: 100%; text-align: left; border: none; border-radius: 0;
  border-bottom: 1px solid var(--cmp-border-soft); padding: 10px 14px;
  white-space: normal; line-height: 1.35;
}
.cmp-naics-item.is-active,
.cmp-naics-item:hover { background: rgba(56,189,248,0.1); color: #fff; }

.cmp-hint-trigger i, .cmp-hint-trigger svg { width: 12px; height: 12px; display: block; }

.cmp-hours-row { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.cmp-hours-day { color: var(--cmp-text-muted); font-size: 0.9rem; }
.cmp-photo-edit-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cmp-photo-edit { position: relative; }
.cmp-photo-edit img { width: 140px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--cmp-border); }
.cmp-photo-del { position: absolute; top: 6px; right: 6px; }
.cmp-photo-del-btn { padding: 4px 8px; background: rgba(0,0,0,0.6); }
.cmp-photo-status { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: var(--cmp-radius-pill); font-size: 0.68rem; font-weight: 600; background: rgba(251,191,36,0.92); color: #3a2c05; }
.cmp-photo-edit:has(.cmp-photo-status) img { opacity: 0.7; }
.cmp-file-input { max-width: 340px; }

/* ── Buttons ────────────────────────────────────────────── */
.cmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--cmp-font); font-weight: 600; font-size: 0.95rem; line-height: 1.2; padding: 11px 20px; border-radius: var(--cmp-radius-sm); border: 1px solid transparent; cursor: pointer; transition: all .18s var(--cmp-ease); text-decoration: none; }
.cmp-btn-sm { padding: 7px 14px; }
/* Gradient fill + white text (matches the nav CTA); glow-only hover (no layout shift). */
.cmp-btn-primary {
  background: linear-gradient(135deg, #7dd3fc 0%, var(--cmp-primary) 45%, var(--cmp-primary-600) 100%);
  color: #fff; box-shadow: 0 4px 14px rgba(56,189,248,0.28);
}
.cmp-btn-primary:hover {
  text-decoration: none; filter: saturate(1.15) brightness(1.06);
  box-shadow: 0 6px 22px rgba(56,189,248,0.46), 0 0 0 3px rgba(56,189,248,0.18);
}
.cmp-btn-ghost { background: transparent; color: var(--cmp-text); border-color: var(--cmp-border); }
.cmp-btn-ghost:hover { background: var(--cmp-surface-2); text-decoration: none; }
/* "Maven ranked this site" — gold award badge that replaces the analyze button,
   same footprint as .cmp-btn. Glow-only hover (no lift / layout shift). */
.cmp-btn-ranked { background: rgba(216,177,90,0.14); color: var(--cmp-gold); border-color: rgba(216,177,90,0.4); }
.cmp-btn-ranked:hover { background: rgba(216,177,90,0.22); color: var(--cmp-gold); text-decoration: none; box-shadow: 0 0 0 3px rgba(216,177,90,0.18); }
.cmp-btn-lg { padding: 14px 26px; font-size: 1rem; }
.cmp-btn-block { width: 100%; }

/* ── Badges / pills ─────────────────────────────────────── */
.cmp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--cmp-radius-pill); font-size: 0.74rem; font-weight: 600; line-height: 1; }
.cmp-pill-verified { background: rgba(216,177,90,0.14); color: var(--cmp-gold); border: 1px solid rgba(216,177,90,0.35); }
.cmp-pill-unverified { background: rgba(251,191,36,0.12); color: var(--cmp-warning); border: 1px solid rgba(251,191,36,0.3); }
.cmp-pill-score { background: rgba(56,189,248,0.12); color: var(--cmp-primary); border: 1px solid rgba(56,189,248,0.3); }
/* Any pill rendered as a link gets a subtle glow on hover (no layout shift). */
a.cmp-pill:hover { filter: brightness(1.15); text-decoration: none; }

/* ── Forms (ported from RankGalactic .rg-* aesthetic) ───── */
.cmp-field { margin-bottom: 18px; }
.cmp-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--cmp-text-muted); margin-bottom: 7px; }
.cmp-label .req { color: var(--cmp-danger); }
.cmp-input, .cmp-select, .cmp-textarea {
  width: 100%; background: var(--cmp-surface-2); color: var(--cmp-text);
  border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-sm);
  padding: 11px 14px; font-family: var(--cmp-font); font-size: 0.95rem;
  outline: none; transition: border-color .16s var(--cmp-ease), box-shadow .16s var(--cmp-ease);
}
.cmp-input::placeholder, .cmp-textarea::placeholder { color: var(--cmp-text-faint); }
.cmp-input:focus, .cmp-select:focus, .cmp-textarea:focus {
  border-color: var(--cmp-primary);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.14);
}
.cmp-textarea { min-height: 110px; resize: vertical; }

/* Leading-icon inputs */
.cmp-input-group { position: relative; }
.cmp-input-group .cmp-input { padding-left: 42px; }
.cmp-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--cmp-text-faint); pointer-events: none; }
.cmp-input-group:focus-within .cmp-input-icon { color: var(--cmp-primary); }

/* Validation states */
.cmp-input.is-invalid, .cmp-select.is-invalid, .cmp-textarea.is-invalid { border-color: var(--cmp-danger); }
.cmp-input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(248,113,113,0.16); }
.cmp-input.is-valid, .cmp-select.is-valid { border-color: var(--cmp-success); }
.cmp-input.is-valid:focus { box-shadow: 0 0 0 4px rgba(52,211,153,0.14); }
.cmp-input-group .cmp-input.is-invalid ~ .cmp-input-icon { color: var(--cmp-danger); }
.cmp-input-group .cmp-input.is-valid ~ .cmp-input-icon { color: var(--cmp-success); }
.cmp-field-error { display: none; color: var(--cmp-danger); font-size: 0.78rem; margin-top: 6px; }
.cmp-field-error.is-visible { display: block; }
.cmp-field-hint { color: var(--cmp-text-faint); font-size: 0.78rem; margin-top: 6px; }

/* Password strength meter + suggest */
.cmp-pw-meter { height: 6px; border-radius: 999px; background: var(--cmp-surface-2); margin-top: 8px; overflow: hidden; }
.cmp-pw-meter > span { display: block; height: 100%; width: 0; transition: width .25s var(--cmp-ease), background .25s; border-radius: 999px; }
.cmp-pw-weak   > span { background: var(--cmp-danger); }
.cmp-pw-fair   > span { background: var(--cmp-warning); }
.cmp-pw-good   > span { background: var(--cmp-primary); }
.cmp-pw-strong > span { background: var(--cmp-success); }
.cmp-pw-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.cmp-pw-label { font-size: 0.76rem; color: var(--cmp-text-faint); }
.cmp-pw-suggest { background: none; border: none; color: var(--cmp-primary); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 0; }
.cmp-pw-suggest:hover { color: #fff; }

/* ── Alerts ─────────────────────────────────────────────── */
.cmp-alert { border-radius: var(--cmp-radius-sm); padding: 12px 16px; font-size: 0.9rem; margin-bottom: 18px; border: 1px solid; }
.cmp-alert-success { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.3); color: #a7f3d0; }
.cmp-alert-error   { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); color: #fecaca; }
.cmp-alert-info    { background: rgba(56,189,248,0.1); border-color: rgba(56,189,248,0.3); color: #bae6fd; }

/* ── Footer ─────────────────────────────────────────────── */
.cmp-footer { border-top: 1px solid var(--cmp-border); margin-top: 64px; color: var(--cmp-text-faint); font-size: 0.82rem; }
/* When the quote band is present it already provides the separation — let it run
   flush into the footer instead of leaving a blank strip of page background. */
.cmp-quote-band + .cmp-footer { margin-top: 0; border-top: none; }

/* ── SSL trust badge + modal (dark) ─────────────────────── */
.cmp-ssl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--cmp-radius-pill);
  background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3);
  color: var(--cmp-success); font: inherit; font-size: 0.74rem; font-weight: 600;
  cursor: pointer; transition: background .2s var(--cmp-ease), box-shadow .25s var(--cmp-ease);
}
/* Hover = diffuse glow only. No transform/lift — never introduce layout shift. */
.cmp-ssl-badge:hover { background: rgba(52,211,153,0.18); box-shadow: 0 0 0 4px rgba(52,211,153,0.10), 0 0 20px 3px rgba(52,211,153,0.42); }
.cmp-ssl-badge svg { width: 12px; height: 12px; }
.cmp-ssl-modal { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 20px; }
.cmp-ssl-modal.is-open { display: flex; }
.cmp-ssl-modal-backdrop { position: absolute; inset: 0; background: rgba(5,12,24,0.66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cmp-ssl-modal-dialog {
  position: relative; z-index: 1; background: var(--cmp-surface); color: var(--cmp-text);
  border: 1px solid var(--cmp-border); border-radius: 14px; box-shadow: var(--cmp-shadow);
  max-width: 460px; width: 100%; padding: 30px;
}
.cmp-ssl-modal-close { position: absolute; top: 14px; right: 14px; background: transparent; border: none; color: var(--cmp-text-faint); cursor: pointer; padding: 6px; border-radius: 6px; line-height: 0; }
.cmp-ssl-modal-close:hover { color: var(--cmp-text); background: var(--cmp-surface-2); }
.cmp-ssl-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ── Balloon hints ──────────────────────────────────────── */
.cmp-hint-bubble {
  position: absolute; z-index: 9000; max-width: 260px;
  background: var(--cmp-surface-2); color: var(--cmp-text);
  border: 1px solid var(--cmp-border); border-radius: 10px;
  padding: 10px 13px; font-size: 0.82rem; line-height: 1.45;
  box-shadow: var(--cmp-shadow);
  opacity: 0; transform: translateY(6px);
  transition: opacity 1.1s var(--cmp-ease), transform 1.1s var(--cmp-ease);
  pointer-events: none;
}
.cmp-hint-bubble.is-in { opacity: 1; transform: translateY(0); }
.cmp-hint-bubble::after { content: ''; position: absolute; top: -6px; left: 18px; width: 11px; height: 11px; background: var(--cmp-surface-2); border-left: 1px solid var(--cmp-border); border-top: 1px solid var(--cmp-border); transform: rotate(45deg); }
.cmp-hint-trigger { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--cmp-surface-2); color: var(--cmp-text-faint); border: 1px solid var(--cmp-border); font-size: 0.7rem; font-weight: 700; cursor: help; margin-left: 6px; }

@media (prefers-reduced-motion: reduce) {
  .cmp-hint-bubble { transition: opacity .2s; transform: none; }
  .cmp-btn:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Part A — public listing polish (formatter clamp, pagination, stars,
   breadcrumb chevrons, Analyze-with-Maven overlay).
   ════════════════════════════════════════════════════════════════════ */

/* A5 — Lucide icons replace Font Awesome; size to the surrounding text by default */
.cmp-body svg.lucide { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }

/* A1 — category / pill clamp backstop (imported data can still run long) */
.cmp-cat-label { display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-pill { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Elastic category pill — the full text is always in the DOM (SEO); it fades out at
   the edge when it overflows and expands to full length on click. `.is-clip` is added
   by compendium-nav.js only when the text actually overflows (so short labels stay
   plain, no misleading fade/cursor). */
button.cmp-cat-elastic { font-family: var(--cmp-font); }
.cmp-cat-elastic { max-width: 300px; text-overflow: clip; }
.cmp-cat-elastic .cmp-cat-label { text-overflow: clip; }
.cmp-cat-elastic.is-clip { cursor: pointer; }
.cmp-cat-elastic.is-clip .cmp-cat-label {
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
}
.cmp-cat-elastic[aria-expanded="true"] { max-width: 100%; }
.cmp-cat-elastic[aria-expanded="true"] .cmp-cat-label {
  -webkit-mask-image: none; mask-image: none; overflow: visible;
}

/* A5 — breadcrumbs: right-aligned with » separators (glyph lives in CSS, not HTML) */
.cmp-breadcrumbs { justify-content: flex-end; text-align: right; flex-wrap: nowrap; overflow: hidden; }
.cmp-breadcrumbs > * + *::before {
  content: '\00BB'; display: inline-block; margin-right: 8px;
  color: var(--cmp-text-faint); opacity: .55;
}
/* Single-line trail: crumbs don't wrap; JS collapses the middle behind an
   ellipsis when it overflows. The current-page crumb may itself ellipsize. */
.cmp-breadcrumbs > a, .cmp-breadcrumbs > span { white-space: nowrap; flex: 0 0 auto; }
.cmp-breadcrumbs > [aria-current="page"] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Leading location pin — a touch larger, aligned with the trail, no separator after it. */
.cmp-bc-pin { flex: none; font-size: 16px; color: var(--cmp-primary); }
.cmp-breadcrumbs .cmp-bc-pin + *::before { content: none; margin-right: 0; }
.cmp-bc-ellipsis { color: var(--cmp-text-faint); }

/* A3 — styled pagination: left summary, right controls */
.cmp-pagination-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cmp-pagination-summary { color: var(--cmp-text-faint); font-size: 0.82rem; }
.cmp-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cmp-pagination a, .cmp-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 11px; border-radius: var(--cmp-radius-sm);
  border: 1px solid var(--cmp-border); font-size: 0.85rem; font-weight: 600;
  color: var(--cmp-text-muted); transition: all .16s var(--cmp-ease);
}
.cmp-pagination a:hover { border-color: var(--cmp-primary); color: #fff; text-decoration: none; }
.cmp-pagination .is-active { background: var(--cmp-primary); border-color: var(--cmp-primary); color: #06283b; }
.cmp-pagination .is-disabled { color: var(--cmp-text-faint); opacity: .5; }
.cmp-pagination .dots { border-color: transparent; }

/* A4 — aggregate / review star rating (Lucide stars; fill via CSS) */
.cmp-stars { display: inline-flex; align-items: center; gap: 2px; }
.cmp-stars svg { width: 16px; height: 16px; }
.cmp-star-on { color: var(--cmp-gold); fill: var(--cmp-gold); }
.cmp-star-off { color: var(--cmp-border); fill: none; }

/* Interactive star-rating input for the review form (compendium-rating.js).
   Sized via font-size to win over the global `.cmp-body svg.lucide` rule. */
.cmp-rating { display: inline-flex; gap: 6px; }
.cmp-rating-star { background: none; border: 0; margin: 0; padding: 2px; line-height: 0; cursor: pointer; font-size: 30px; color: var(--cmp-text-faint); transition: color .12s var(--cmp-ease); }
.cmp-rating-star.is-on { color: var(--cmp-gold); }
.cmp-rating-star.is-on svg { fill: var(--cmp-gold); }
.cmp-rating-star:focus-visible { outline: 2px solid var(--cmp-primary); outline-offset: 2px; border-radius: 4px; }
.cmp-rating.is-error .cmp-rating-star { color: var(--cmp-danger); }
.cmp-rating-native { display: none; }

/* A4 — Analyze-with-Maven progress overlay */
.cmp-analyze-overlay { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(6,18,30,0.72); backdrop-filter: blur(4px); }
.cmp-analyze-overlay.is-open { display: flex; }
.cmp-analyze-card { width: 100%; max-width: 420px; background: var(--cmp-surface); border: 1px solid var(--cmp-border); border-radius: 14px; padding: 30px 28px; text-align: center; box-shadow: var(--cmp-shadow); }
.cmp-analyze-spinner { width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%; border: 3px solid var(--cmp-border); border-top-color: var(--cmp-primary); animation: cmp-spin 0.8s linear infinite; }
@keyframes cmp-spin { to { transform: rotate(360deg); } }
.cmp-analyze-bar { height: 8px; width: 100%; border-radius: 99px; background: var(--cmp-surface-2); overflow: hidden; margin-top: 16px; }
.cmp-analyze-bar > div { height: 100%; width: 5%; border-radius: 99px; background: var(--cmp-primary); transition: width .5s ease; }
.cmp-analyze-err { display: none; }
.cmp-analyze-overlay.is-error .cmp-analyze-run { display: none; }
.cmp-analyze-overlay.is-error .cmp-analyze-err { display: block; }

/* ════════════════════════════════════════════════════════════════════
   Part B — hybrid search + State/City/Category location drill-down.
   ════════════════════════════════════════════════════════════════════ */

/* Search form (hero + search page + header-compact variant) */
.cmp-search-form { position: relative; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.cmp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cmp-search-field { position: relative; flex: 1 1 220px; min-width: 0; display: flex; align-items: stretch; }
.cmp-search-field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--cmp-text-faint); pointer-events: none; width: 16px; height: 16px; }
.cmp-search-field input { width: 100%; height: 46px; padding: 0 14px 0 36px; background: var(--cmp-surface-2); color: var(--cmp-text); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-sm); font-size: 0.95rem; box-sizing: border-box; }
.cmp-search-field input::placeholder { color: var(--cmp-text-faint); }
.cmp-search-field input:focus { outline: none; border-color: var(--cmp-primary); }
.cmp-search-form .cmp-btn {
  height: 46px; min-height: 46px; box-sizing: border-box;
  padding-top: 0; padding-bottom: 0; align-self: stretch;
}
/* Results page: what | where | Search — one row, three columns, equal height */
.cmp-search-form.is-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  flex-wrap: nowrap;
}
.cmp-search-form.is-results .cmp-search-field { flex: none; width: auto; min-width: 0; }
.cmp-search-form.is-results .cmp-search-field input,
.cmp-search-form.is-results .cmp-btn {
  height: 46px; min-height: 46px; max-height: 46px;
}
.cmp-search-form.is-results .cmp-btn {
  min-width: 7.5rem; padding-left: 22px; padding-right: 22px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .cmp-search-form.is-results {
    grid-template-columns: 1fr;
  }
  .cmp-search-form.is-results .cmp-btn { width: 100%; }
}
.cmp-search-form.is-compact { gap: 6px; flex-wrap: nowrap; }
.cmp-search-form.is-compact .cmp-search-field { flex-basis: 150px; }
.cmp-search-form.is-compact .cmp-search-field input { height: 38px; font-size: 0.85rem; }
.cmp-search-form.is-compact .cmp-btn { height: 38px; min-height: 38px; max-height: 38px; padding: 0 14px; }
.cmp-header-search { flex: 1 1 auto; max-width: 420px; margin: 0 18px; }
/* Inline header search only appears once there's room for it AND the full nav
   side by side; below that, the in-page search form (and Browse > Search) serve. */
@media (max-width: 1199px) { .cmp-header-search { display: none; } }

/* Hero floating search — enlarged "is-hero" controls for a premium feel. */
.cmp-search-form.is-hero { gap: 12px; }
.cmp-search-form.is-hero .cmp-search-field { flex: 1 1 240px; }
.cmp-search-form.is-hero .cmp-search-field input { height: 56px; font-size: 1.02rem; padding-left: 42px; }
.cmp-search-form.is-hero .cmp-search-field svg { left: 15px; width: 19px; height: 19px; }
.cmp-search-form.is-hero .cmp-btn { height: 56px; padding: 0 30px; font-size: 1rem; }

/* Host: centered, a touch wider than the 1140px content area, pulled up so the
   panel sits halfway across the hero's bottom edge. */
.cmp-hero-search-host {
  position: relative; z-index: 5;
  max-width: 1240px; margin: -48px auto 0; padding: 0 24px;
}
.cmp-hero-search {
  background: rgba(19,29,49,0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--cmp-border); border-radius: 14px;
  padding: 18px;
  /* diffuse glow: deep drop shadow + soft sky-tinted halo to lift it off the photo */
  box-shadow: 0 26px 60px rgba(0,0,0,0.55), 0 6px 34px rgba(56,189,248,0.12);
}
@media (max-width: 600px) {
  .cmp-hero-search-host { margin-top: -32px; padding: 0 16px; }
  .cmp-hero-search { padding: 14px; }
  .cmp-search-form.is-hero .cmp-search-field input,
  .cmp-search-form.is-hero .cmp-btn { height: 50px; }
}

/* State / county / city link grids */
.cmp-state-grid, .cmp-city-grid, .cmp-county-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 30px; }
.cmp-state-link, .cmp-city-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--cmp-surface); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-sm); color: var(--cmp-text); font-size: 0.9rem; text-decoration: none; transition: border-color .15s var(--cmp-ease), background .15s var(--cmp-ease); }
.cmp-state-link:hover, .cmp-city-link:hover { border-color: var(--cmp-primary); background: var(--cmp-surface-2); text-decoration: none; }
.cmp-city-count { color: var(--cmp-text-faint); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* State cards (index "Browse by state"): scenic state photo (center top) under a
   legibility gradient, with a small flag chip left of the name. --cmp-state-bg is
   set per-card inline. A missing photo just falls back to the surface colour. */
.cmp-state-link {
  position: relative; overflow: hidden;
  min-height: 96px; align-items: flex-end; padding: 12px 14px;
  background-color: var(--cmp-surface);
}
/* Image layer (::before): the scenic photo lives here — on its own layer so its
   filter never dims the label. Resting state is deep (dark + desaturated) so the
   card seats into the dark theme; hover brings it up to near-full brightness. */
.cmp-state-link::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--cmp-state-bg, none);
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  filter: brightness(0.5) saturate(0.72) contrast(1.1);
  transition: filter 0.55s var(--cmp-ease), transform 0.6s var(--cmp-ease);
}
/* Overlay layer (::after): legibility gradient + a diagonal band of light that
   sweeps left -> right across the card on hover (the "swipe" shine). */
.cmp-state-link::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.30) 50%, transparent 62%),
    linear-gradient(180deg, rgba(13,22,38,0.16) 0%, rgba(13,22,38,0.9) 82%);
  background-size: 240% 100%, 100% 100%;
  background-position: -140% 0, 0 0;
  background-repeat: no-repeat;
  transition: background-position 0.7s var(--cmp-ease);
}
.cmp-state-link > * { position: relative; z-index: 2; }
.cmp-state-link:hover::before, .cmp-state-link:focus-visible::before { filter: brightness(0.95) saturate(1.08) contrast(1.04); transform: scale(1.03); }
.cmp-state-link:hover::after, .cmp-state-link:focus-visible::after { background-position: 140% 0, 0 0; }
@media (prefers-reduced-motion: reduce) {
  .cmp-state-link::before, .cmp-state-link::after { transition: none; }
  .cmp-state-link:hover::after, .cmp-state-link:focus-visible::after { background-position: -140% 0, 0 0; }
}
.cmp-state-id { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.cmp-state-flag { width: 28px; height: 19px; flex: none; border-radius: 3px; background-size: cover; background-position: center; box-shadow: 0 1px 5px rgba(0,0,0,0.5); }
.cmp-state-name { font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-state-link .cmp-city-count { color: var(--cmp-text); text-shadow: 0 1px 3px rgba(0,0,0,0.65); }

/* Location browse helpers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.cmp-state-search { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0 0 24px; }
.cmp-state-search .cmp-search-field { flex: 1 1 220px; margin: 0; }
.cmp-top-cities { margin-bottom: 26px; }
.cmp-location-filter { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.cmp-location-filter-label { display: inline-flex; color: var(--cmp-text-muted); }
.cmp-location-filter-label svg, .cmp-location-filter-label i { width: 16px; height: 16px; }
.cmp-location-filter-input, .cmp-slice-search-input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-sm);
  background: var(--cmp-surface); color: var(--cmp-text); font-size: 0.9rem;
}
.cmp-location-filter-input:focus, .cmp-slice-search-input:focus { outline: none; border-color: var(--cmp-primary); }
.cmp-slice-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.cmp-slice-search-label { display: inline-flex; color: var(--cmp-text-muted); }
.cmp-slice-search-label svg, .cmp-slice-search-label i { width: 16px; height: 16px; }
.cmp-slice-search-input { flex: 1 1 200px; }
.cmp-slice-search-btn { height: 40px; }
.cmp-slice-search-clear { font-size: 0.82rem; color: var(--cmp-text-muted); text-decoration: none; }
.cmp-slice-search-clear:hover { color: var(--cmp-primary); text-decoration: none; }
.cmp-city-link[hidden] { display: none !important; }

/* Header logo scales down on small screens (full size on desktop). */
@media (max-width: 600px) {
  .cmp-nav { min-height: 78px; padding: 10px 0; gap: 10px; }
  .cmp-brand { font-size: 1rem; gap: 10px; }
  .cmp-brand-mark { width: 56px; height: 56px; }
}

/* ════════════════════════════════════════════════════════════════════
   Footer — three-column (brand / links / subscribe) + bottom legal bar.
   ════════════════════════════════════════════════════════════════════ */
.cmp-footer-grid {
  display: grid; grid-template-columns: 1.5fr 1.4fr 1.3fr; gap: 48px;
  padding: 52px 24px 40px;
}
.cmp-footer-brand { max-width: 340px; }
.cmp-footer-logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--cmp-font-display); font-weight: 600; font-size: 1rem; color: #fff; }
.cmp-footer-logo img { width: 52px; height: 52px; border-radius: 8px; object-fit: contain; display: block; }
.cmp-footer-brand p { color: var(--cmp-text-muted); font-size: 0.86rem; line-height: 1.6; margin: 16px 0 18px; }

.cmp-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cmp-footer-links h4, .cmp-footer-subscribe h4 {
  font-family: var(--cmp-font); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--cmp-primary); margin: 0 0 16px;
}
.cmp-footer-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cmp-footer-links a { display: inline-flex; align-items: center; gap: 5px; color: var(--cmp-text-muted); font-size: 0.88rem; }
.cmp-footer-links a:hover { color: #fff; text-decoration: none; }
/* Arrow that slides in on hover (white SVG, no layout shift). */
.cmp-footer-links a::after {
  content: ''; width: 13px; height: 13px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .15s var(--cmp-ease), transform .15s var(--cmp-ease);
}
.cmp-footer-links a:hover::after { opacity: 1; transform: translateX(0); }

.cmp-footer-subscribe p { color: var(--cmp-text-muted); font-size: 0.86rem; line-height: 1.55; margin: 0 0 14px; }
.cmp-sub-row { display: flex; gap: 8px; }
.cmp-sub-row .cmp-input { flex: 1; padding: 9px 13px; font-size: 0.88rem; }
.cmp-sub-row .cmp-btn { padding: 9px 18px; white-space: nowrap; }
.cmp-footer-sub-ok { display: flex; align-items: center; gap: 9px; color: var(--cmp-success); background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3); border-radius: var(--cmp-radius-sm); padding: 12px 14px; font-size: 0.86rem; line-height: 1.4; }
.cmp-footer-sub-ok svg { flex: none; }
.cmp-footer-sub-err { display: flex; align-items: flex-start; justify-content: flex-start; gap: 7px; color: var(--cmp-primary); font-size: 0.8rem; text-align: left; line-height: 1.4; margin: 16px 0 0; padding: 0; }
.cmp-footer-sub-err svg { flex: none; margin-top: 1px; }

.cmp-footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 18px 24px; border-top: 1px solid var(--cmp-border-soft); font-size: 0.8rem;
}
.cmp-footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.cmp-footer-legal a { color: var(--cmp-text-faint); }
.cmp-footer-legal a:hover { color: var(--cmp-text); text-decoration: none; }

@media (max-width: 860px) {
  .cmp-footer-grid { grid-template-columns: 1fr; gap: 36px; padding: 40px 24px 32px; }
  .cmp-footer-brand { max-width: none; }
}
@media (max-width: 420px) {
  .cmp-sub-row { flex-direction: column; }
  .cmp-sub-row .cmp-btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   Quote band — context-aware "quote of the day", sits above the footer.
   ════════════════════════════════════════════════════════════════════ */
.cmp-quote-band {
  position: relative; margin-top: 64px; overflow: hidden;
  border-top: 1px solid var(--cmp-border-soft);
  /* Slow aurora: drifting sky/gold glows over a panning navy gradient. */
  background:
    radial-gradient(680px 200px at 12% 8%,  rgba(56,189,248,0.18), transparent 62%),
    radial-gradient(620px 220px at 88% 92%, rgba(216,177,90,0.13), transparent 60%),
    radial-gradient(720px 240px at 60% 120%, rgba(14,165,233,0.13), transparent 60%),
    linear-gradient(125deg, #0b1626, #122036 48%, #0b1626);
  background-size: 160% 160%, 160% 160%, 160% 160%, 200% 200%;
  background-position: 0% 0%, 100% 100%, 50% 100%, 0% 50%;
  animation: cmp-aurora 24s ease-in-out infinite alternate;
}
/* Thin luminous accent along the top edge. */
.cmp-quote-band::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.55), transparent);
}
@keyframes cmp-aurora {
  0%   { background-position: 0% 0%,   100% 100%, 50% 100%,  0% 50%; }
  50%  { background-position: 28% 18%, 72% 82%,   42% 92%,  60% 42%; }
  100% { background-position: 10% 10%, 90% 90%,   62% 112%, 100% 50%; }
}
@media (prefers-reduced-motion: reduce) { .cmp-quote-band { animation: none; } }

.cmp-quote-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 48px 24px; }
.cmp-quote-icon { width: 26px; height: 26px; color: var(--cmp-primary); opacity: .85; filter: drop-shadow(0 0 10px rgba(56,189,248,0.35)); }
.cmp-quote-text { font-family: var(--cmp-font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.55; font-style: italic; color: #f1f5fb; max-width: 760px; margin: 0; text-shadow: 0 1px 14px rgba(5,12,24,0.55); }
.cmp-quote-author { color: var(--cmp-text-muted); font-size: 0.85rem; font-style: normal; letter-spacing: 0.02em; }
@media (max-width: 600px) { .cmp-quote-text { font-size: 1.02rem; } .cmp-quote-inner { padding: 38px 20px; } }

/* ── Share popover (header) — ported from RankGalactic's .rg-share-* ─────────
   Desktop: inline popover anchored to the trigger. Mobile: bottom sheet. */
.cmp-share-wrap { position: relative; display: inline-flex; }
.cmp-share-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; background: transparent;
  border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-sm);
  color: #fff; font: inherit; font-size: 0.86rem; cursor: pointer;
  transition: color 0.18s var(--cmp-ease), border-color 0.18s var(--cmp-ease), background 0.2s var(--cmp-ease), box-shadow 0.2s var(--cmp-ease);
}
.cmp-share-trigger svg { width: 16px; height: 16px; flex: none; transition: transform 0.2s var(--cmp-ease); }
/* Match the nav-link hover: sky wash + glow ring + icon lift (no layout shift). */
.cmp-share-trigger:hover, .cmp-share-trigger:focus-visible {
  color: #fff; outline: none;
  background: linear-gradient(180deg, rgba(56,189,248,0.15), rgba(56,189,248,0.06));
  border-color: rgba(56,189,248,0.38);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.10);
}
.cmp-share-trigger:hover svg, .cmp-share-trigger:focus-visible svg { transform: scale(1.12); }
.cmp-share-trigger[aria-expanded="true"] { color: var(--cmp-primary); border-color: var(--cmp-primary); background: rgba(56,189,248,0.08); }

.cmp-share-popover {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 300;
  width: 340px; max-width: calc(100vw - 32px);
  background-color: var(--cmp-surface);
  background-image: radial-gradient(circle at 100% 100%, rgba(56,189,248,0.18) 0%, rgba(56,189,248,0.05) 40%, transparent 72%);
  border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius);
  box-shadow: var(--cmp-shadow); padding: 20px; display: none;
  animation: cmp-share-in 180ms var(--cmp-ease);
}
.cmp-share-popover.is-open { display: block; }
@keyframes cmp-share-in { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.cmp-share-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cmp-share-header h3 { margin: 0; font-size: 0.95rem; font-weight: 600; color: #fff; }
.cmp-share-close { background: transparent; border: none; color: var(--cmp-text-faint); cursor: pointer; line-height: 0; padding: 4px; border-radius: var(--cmp-radius-sm); transition: color 0.18s var(--cmp-ease); }
.cmp-share-close:hover { color: var(--cmp-text); }

.cmp-share-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cmp-text-faint); margin-bottom: 6px; }
.cmp-share-text {
  width: 100%; min-height: 82px; padding: 10px 12px; font-family: inherit; font-size: 0.875rem;
  color: var(--cmp-text); background: var(--cmp-surface-2); border: 1px solid var(--cmp-border);
  border-radius: var(--cmp-radius-sm); resize: vertical; line-height: 1.5;
  transition: border-color 0.18s var(--cmp-ease);
}
.cmp-share-text:focus { outline: none; border-color: var(--cmp-primary); box-shadow: 0 0 0 3px rgba(56,189,248,0.12); }

.cmp-share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.cmp-share-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 6px; background: var(--cmp-surface-2); border: 1px solid var(--cmp-border);
  border-radius: var(--cmp-radius-sm); color: var(--cmp-text-muted);
  font-family: inherit; font-size: 0.72rem; font-weight: 500; cursor: pointer;
  transition: color 0.18s var(--cmp-ease), border-color 0.18s var(--cmp-ease), background 0.18s var(--cmp-ease), transform 0.18s var(--cmp-ease);
}
.cmp-share-btn:hover { color: var(--cmp-primary); border-color: var(--cmp-primary); transform: translateY(-1px); }
.cmp-share-btn svg { width: 18px; height: 18px; }

.cmp-share-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cmp-border-soft); }
.cmp-share-copy {
  flex: 1; padding: 8px 12px; background: var(--cmp-surface-2); border: 1px solid var(--cmp-border);
  border-radius: var(--cmp-radius-sm); color: var(--cmp-text-muted);
  font-family: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  transition: color 0.18s var(--cmp-ease), border-color 0.18s var(--cmp-ease), background 0.18s var(--cmp-ease);
}
.cmp-share-copy:hover { color: var(--cmp-primary); border-color: var(--cmp-primary); }
.cmp-share-copy.is-copied { color: var(--cmp-success); border-color: rgba(52,211,153,0.45); background: rgba(52,211,153,0.08); }

/* Mobile: full-width bottom sheet so it never overflows the viewport. The trigger
   drops its label and becomes a 46px square icon button — a proper touch target that
   matches the hamburger beside it. */
@media (max-width: 640px) {
  .cmp-share-trigger-label { display: none; }
  .cmp-share-trigger { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .cmp-share-popover { position: fixed; top: auto; right: 12px; left: 12px; bottom: 12px; width: auto; max-width: none; }
}

/* ── Bubble tooltip (replaces native title="" tooltips) ─────────────────────
   One body-level element driven by compendium-tooltip.js, so it escapes card
   overflow. position:fixed; a little speech-bubble tail points at the target. */
.cmp-tip {
  position: fixed; z-index: 400; left: 0; top: 0; pointer-events: none;
  max-width: 260px; padding: 7px 11px;
  background: var(--cmp-surface-2); color: var(--cmp-text);
  border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-sm);
  box-shadow: var(--cmp-shadow);
  font-size: 0.76rem; line-height: 1.4; white-space: normal;
  opacity: 0; transform: translateY(4px);
  transition: opacity .14s var(--cmp-ease), transform .14s var(--cmp-ease);
}
.cmp-tip.is-visible { opacity: 1; transform: translateY(0); }
.cmp-tip::after { /* tail — points down when the bubble sits above the target */
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--cmp-surface-2);
}
.cmp-tip.is-below::after { /* flipped when the bubble drops below the target */
  top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--cmp-surface-2);
}

/* ── Account dashboard (Command Center) ─────────────────── */
.cmp-dash-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; }
.cmp-dash-hero-main { min-width: 0; flex: 1 1 320px; }
.cmp-dash-title { font-family: var(--cmp-font-display); font-size: 1.9rem; font-weight: 700; color: #fff; margin: 0 0 12px; line-height: 1.15; }
.cmp-dash-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-dash-meter-side { flex: 1 1 260px; max-width: 360px; }

.cmp-meter { height: 8px; border-radius: 999px; background: var(--cmp-surface-2); overflow: hidden; }
.cmp-meter-fill { display: block; height: 100%; width: var(--cmp-fill, 0%); border-radius: 999px;
  background: linear-gradient(90deg, var(--cmp-primary) 0%, var(--cmp-success) 100%);
  transition: width .4s var(--cmp-ease); }
.cmp-meter-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.cmp-meter-label { font-size: 0.8rem; color: var(--cmp-text-muted); font-weight: 600; }
.cmp-meter-pct { font-family: var(--cmp-font-display); font-size: 1.1rem; font-weight: 700; color: var(--cmp-primary); }

.cmp-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0; }
.cmp-stat { display: flex; align-items: center; gap: 12px; padding: 16px;
  background: var(--cmp-surface); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius); }
.cmp-stat-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none;
  border-radius: var(--cmp-radius-sm); background: var(--cmp-surface-2); color: var(--cmp-primary); }
.cmp-stat-ico svg, .cmp-stat-ico i { width: 18px; height: 18px; }
.cmp-stat-body { min-width: 0; }
.cmp-stat-num { font-family: var(--cmp-font-display); font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1; }
.cmp-stat-unit { font-size: 0.9rem; font-weight: 500; color: var(--cmp-text-faint); }
.cmp-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cmp-text-faint); margin-top: 5px; }

.cmp-dash-section { margin-top: 26px; }
.cmp-dash-section-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.2rem; font-weight: 700; color: #fff; }
.cmp-dash-section-head i, .cmp-dash-section-head svg { width: 19px; height: 19px; flex: none; color: var(--cmp-primary); }

.cmp-checklist { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.cmp-check { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--cmp-text-muted); }
.cmp-check-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none;
  border-radius: 999px; border: 1px solid var(--cmp-border); color: var(--cmp-text-faint); background: var(--cmp-surface-2); }
.cmp-check-ico svg, .cmp-check-ico i { width: 13px; height: 13px; }
.cmp-check.is-done { color: var(--cmp-text); }
.cmp-check.is-done .cmp-check-ico { background: rgba(52,211,153,0.16); border-color: rgba(52,211,153,0.4); color: var(--cmp-success); }

.cmp-promote-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.cmp-promote-card { display: flex; flex-direction: column; padding: 22px;
  background: var(--cmp-surface); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius); }
.cmp-promote-card.is-featured { border-color: rgba(216,177,90,0.4); }
.cmp-promote-card.is-sponsored { border-color: rgba(56,189,248,0.35); }
.cmp-promote-ico { width: 26px; height: 26px; flex: none; }
.cmp-promote-card.is-featured .cmp-promote-ico { color: var(--cmp-gold); }
.cmp-promote-card.is-sponsored .cmp-promote-ico { color: var(--cmp-primary); }
.cmp-promote-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 12px 0 4px; }
.cmp-promote-text { font-size: 0.86rem; color: var(--cmp-text-muted); margin: 0 0 16px; flex: 1; }
.cmp-promote-price { font-family: var(--cmp-font-display); font-size: 1.5rem; font-weight: 700; color: #fff; white-space: nowrap; }
.cmp-promote-price span { font-size: 0.82rem; font-weight: 500; color: var(--cmp-text-faint); }
.cmp-promote-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }

.cmp-quicklinks { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 640px) {
  .cmp-stat-grid { grid-template-columns: repeat(4, 1fr); }
  .cmp-checklist { grid-template-columns: repeat(2, 1fr); }
  .cmp-promote-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Search results: count chip + "add your business" CTA ── */
.cmp-results-head { margin: 30px 0 24px; }
.cmp-results-head .cmp-page-title { margin: 0 0 12px; }
.cmp-results-head.is-inline { margin: 22px 0 18px; }
.cmp-results-head.is-inline .cmp-page-title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.3;
}
.cmp-results-count { display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--cmp-radius-pill);
  background: var(--cmp-surface-2); border: 1px solid var(--cmp-border);
  color: var(--cmp-text-muted); font-size: 0.85rem; font-weight: 600; }
.cmp-results-head.is-inline .cmp-results-count {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0;
  font-family: var(--cmp-font);
  padding: 5px 12px;
  vertical-align: middle;
}
.cmp-results-count i, .cmp-results-count svg { width: 15px; height: 15px; flex: none; color: var(--cmp-primary); }
.cmp-results-head.is-inline .cmp-results-count i,
.cmp-results-head.is-inline .cmp-results-count svg { width: 13px; height: 13px; }

.cmp-results-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 28px; margin-top: 44px; padding: 28px 32px;
  background: linear-gradient(135deg, var(--cmp-surface) 0%, var(--cmp-surface-2) 100%);
  border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius); }
.cmp-results-cta-copy { min-width: 0; flex: 1 1 320px; }
.cmp-results-cta-title { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 6px; }
.cmp-results-cta-text { color: var(--cmp-text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0; max-width: 56ch; }

/* ── Empty search: 3-col pitch + discovery + service buckets ── */
.cmp-empty-pitch {
  margin: 0 0 28px; padding: 22px 22px 20px;
  background: linear-gradient(145deg, rgba(56,189,248,0.10) 0%, var(--cmp-surface) 42%, var(--cmp-surface-2) 100%);
  border: 1px solid rgba(56,189,248,0.28);
  border-radius: var(--cmp-radius);
  box-shadow: var(--cmp-shadow);
}
.cmp-empty-pitch-head { text-align: center; margin-bottom: 18px; }
.cmp-empty-pitch-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 10px 0 0; padding: 4px 11px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--cmp-gold);
  background: rgba(216,177,90,0.12); border: 1px solid rgba(216,177,90,0.35);
  border-radius: var(--cmp-radius-pill);
}
.cmp-empty-pitch-col .cmp-empty-pitch-badge { align-self: flex-start; }
.cmp-empty-pitch-badge i, .cmp-empty-pitch-badge svg { width: 13px; height: 13px; }
.cmp-empty-pitch-title {
  font-size: clamp(1.05rem, 2vw, 1.28rem); font-weight: 700; color: #fff;
  margin: 0 auto 8px; line-height: 1.3; max-width: 40ch;
}
.cmp-empty-pitch-lead {
  color: var(--cmp-text-muted); font-size: 0.88rem; line-height: 1.5;
  margin: 0 auto; max-width: 48ch;
}
.cmp-empty-pitch-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}
@media (min-width: 720px) {
  .cmp-empty-pitch-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
.cmp-empty-pitch-col {
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 100%;
  padding: 16px 16px 14px;
  background: rgba(13, 22, 38, 0.45);
  border: 1px solid var(--cmp-border);
  border-radius: var(--cmp-radius-sm);
}
.cmp-empty-pitch-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 12px;
  background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.28);
  color: var(--cmp-primary);
}
.cmp-empty-pitch-ico i, .cmp-empty-pitch-ico svg { width: 20px; height: 20px; }
.cmp-empty-pitch-col-title {
  font-size: 0.98rem; font-weight: 700; color: #fff; margin: 0 0 6px; line-height: 1.25;
}
.cmp-empty-pitch-col-text {
  flex: 1 1 auto;
  color: var(--cmp-text-muted); font-size: 0.84rem; line-height: 1.45;
  margin: 0 0 14px;
}
.cmp-empty-pitch-link {
  color: var(--cmp-primary); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(56, 189, 248, 0.35);
}
.cmp-empty-pitch-link:hover {
  color: #7dd3fc; border-bottom-color: rgba(125, 211, 252, 0.7);
  text-decoration: none;
}
.cmp-empty-pitch-col .cmp-btn { margin-top: auto; }
.cmp-empty-pitch-col .cmp-btn + .cmp-empty-pitch-badge { margin-top: 10px; }

/* Discovery zone */
.cmp-discovery { margin-top: 36px; padding-top: 8px; scroll-margin-top: 24px; }

.cmp-location-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 22px;
}
.cmp-location-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--cmp-radius-pill);
  background: rgba(56,189,248,0.10); border: 1px solid rgba(56,189,248,0.28);
  color: var(--cmp-text-muted); font-size: 0.84rem;
}
.cmp-location-chip i, .cmp-location-chip svg {
  width: 15px; height: 15px; flex: none; color: var(--cmp-primary);
}
.cmp-location-chip strong { color: #fff; font-weight: 600; }
.cmp-location-exact { color: var(--cmp-primary); font-weight: 500; }
.cmp-location-status { font-size: 0.8rem; color: var(--cmp-text-faint); }

/* LOCAL businesses banner + bouncing chevron */
.cmp-local-banner {
  text-align: center;
  margin: 0 0 22px;
  padding: 8px 12px 4px;
}
.cmp-local-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.3);
  color: var(--cmp-primary);
  animation: cmp-chevron-bounce 1.35s var(--cmp-ease) infinite;
}
.cmp-local-chevron i, .cmp-local-chevron svg { width: 24px; height: 24px; }
@keyframes cmp-chevron-bounce {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(7px); }
  70% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-local-chevron { animation: none; }
}
.cmp-local-title {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 700; color: #fff;
  margin: 0 0 6px; line-height: 1.25;
}
.cmp-local-title em {
  font-style: normal; font-weight: 700; color: var(--cmp-primary);
  letter-spacing: 0.02em;
}
.cmp-local-sub {
  margin: 0; font-size: 0.88rem; color: var(--cmp-text-muted);
}

/* Equal-height discovery cards (no layout shift from varying body copy) */
.cmp-grid.is-equal-cards { align-items: stretch; }
.cmp-listing-cell.is-equal {
  align-self: stretch;
  height: 100%;
}
.cmp-listing-cell.is-equal .cmp-listing-card { height: 100%; }
.cmp-listing-cell.is-equal .cmp-listing-excerpt {
  -webkit-line-clamp: 2;
  min-height: calc(1.55em * 2);
}
.cmp-listing-cell.is-equal .cmp-listing-score { margin-top: auto; padding-top: 12px; }
.cmp-listing-cell.is-equal .cmp-listing-body { min-height: 0; }

.cmp-listing-sponsored {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 8px 0 0; padding: 3px 9px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--cmp-gold);
  background: rgba(216,177,90,0.12); border: 1px solid rgba(216,177,90,0.35);
  border-radius: var(--cmp-radius-pill);
}
.cmp-listing-sponsored i, .cmp-listing-sponsored svg { width: 12px; height: 12px; }

.cmp-section-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--cmp-text-faint); margin: 0 0 16px;
}
.cmp-section-label i, .cmp-section-label svg {
  width: 16px; height: 16px; color: var(--cmp-primary);
}
.cmp-section-label-muted { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--cmp-text-muted); }

.cmp-service-buckets { margin-top: 36px; }
.cmp-bucket-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  align-items: stretch;
}
@media (min-width: 720px) {
  .cmp-bucket-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .cmp-bucket-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cmp-bucket-tile {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 92px;
  height: 100%;
  padding: 14px 12px 14px 14px;
  background: var(--cmp-surface); border: 1px solid var(--cmp-border);
  border-radius: var(--cmp-radius-sm); text-decoration: none; color: inherit;
  transition: border-color .15s var(--cmp-ease), background .15s var(--cmp-ease),
    box-shadow .15s var(--cmp-ease);
}
.cmp-bucket-tile:hover {
  border-color: var(--cmp-primary); background: var(--cmp-surface-2);
  text-decoration: none; box-shadow: 0 0 0 3px rgba(56,189,248,0.12);
}
.cmp-bucket-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(56,189,248,0.12); color: var(--cmp-primary);
  border: 1px solid rgba(56,189,248,0.22);
}
.cmp-bucket-ico i, .cmp-bucket-ico svg { width: 20px; height: 20px; }
.cmp-bucket-body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 58px;
}
.cmp-bucket-label {
  font-weight: 650; color: #fff; font-size: 0.92rem;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.cmp-bucket-hint {
  font-size: 0.75rem; color: var(--cmp-text-muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.3em * 2);
}
.cmp-bucket-count { font-size: 0.7rem; font-weight: 600; color: var(--cmp-primary); margin-top: auto; padding-top: 4px; }
.cmp-bucket-chev { flex: none; width: 16px; height: 16px; color: var(--cmp-text-faint); margin-top: 12px; }

@media (max-width: 560px) {
  .cmp-empty-pitch { padding: 16px 14px 14px; }
  .cmp-empty-pitch-col .cmp-btn { width: 100%; justify-content: center; }
  .cmp-bucket-grid { grid-template-columns: 1fr; }
}