/* Operator Design System — exact humanoid-atlas source match */
/* SURGICAL: Only override design tokens + specific operator classes. */
/* Do NOT blanket-override nav a, h1, h2, p, etc. with !important */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Inter:wght@300;400;500&display=swap');

/* === DESIGN TOKENS === */
:root {
  --bg: #f5f2ed;
  --bg-card: #ffffff;
  --bg-base: #f5f2ed;
  --bg-surface: #f5f2ed;
  --bg-elevated: #ffffff;
  --bg-highlight: #ebe7e1;
  --bg-invert: #1a1a1a;
  --bg-muted: #ebe7e1;
  --text: #1a1a1a;
  --text-primary: #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-dim: #a0a0a0;
  --text-tertiary: #a0a0a0;
  --text-invert: #f5f2ed;
  --border: #e0ddd8;
  --border-default: #e0ddd8;
  --border-hover: #c5c0b8;
  --border-strong: #c5c0b8;
  --accent: #1a1a1a;
  --red: #c53030;
  --green: #276749;
  --dot-filled: #1a1a1a;
  --dot-empty: #c5c0b8;
  --signal-positive: #276749;
  --signal-warning: #7a4f00;
  --signal-negative: #c53030;
  --font-display: 'Share Tech Mono', monospace;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --page-padding: 20px;
  --section-gap: 40px;
}

/* === BASE === */
body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === WORDMARK — plain text, NO pill/border === */
.nav-wordmark,
.logo-text {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--text-primary, #1a1a1a) !important;
  line-height: 1 !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* === NAV LINKS — clean Inter body font, NOT mono uppercase === */
.site-nav .nav-links a,
.site-nav .nav-links .nav-dropdown-trigger {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--text-secondary, #888) !important;
}
.site-nav .nav-links a:hover,
.site-nav .nav-links .nav-dropdown-trigger:hover {
  color: var(--text-primary, #1a1a1a) !important;
}
/* Override generic nav a color rule */
.site-nav .nav-links a.btn-primary {
  color: #f5f2ed !important;
}

/* === PILL BUTTONS === */
/* Only apply to elements with explicit .pill class or .op-pill */
.pill,
.op-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 3px;
  border: 1px solid var(--text-primary);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}
.pill:hover, .op-pill:hover {
  background: rgba(0,0,0,0.04);
}
.pill.active, .op-pill.active {
  background: var(--bg-invert);
  color: var(--text-invert);
  border-color: var(--bg-invert);
}

/* === UNDERLINE TABS === */
/* Simple text, no border, underline on active */
.op-tab {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.op-tab:hover { color: var(--text-primary); }
.op-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
  font-weight: 700;
}

/* === SECTION EYEBROW === */
/* "ROBOTIC WORLD MODELS" — tiny, very wide tracking, grey */
.op-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1;
}

/* === HERO DISPLAY HEADING === */
/* "WORLD MODELS" — massive, black, wide tracking */
.op-display {
  font-family: var(--font-display);
  font-size: clamp(42px, 8vw, 80px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--text-primary);
}

/* === SECTION LABEL === */
/* "CAPABILITY MATRIX", "PLATFORM DIRECTORY" */
.op-section-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* === STATS TICKER === */
/* "19 TRACKED · 6 VIDEO GEN · 5 LATENT" */
.op-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.op-stats .sep { color: var(--text-tertiary); }

/* === DATA ROWS === */
/* Grey label left, dark value right, thin dividers */
.op-data-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-default);
  gap: 16px;
}
.op-data-row:last-child { border-bottom: none; }
.op-data-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.op-data-value {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  text-align: right;
  flex: 1;
}

/* === CAPABILITY MATRIX === */
.op-matrix { width: 100%; border-collapse: collapse; }
.op-matrix th {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--border-strong);
  max-width: 60px;
  line-height: 1.2;
}
.op-matrix th:first-child { text-align: left; max-width: none; }
.op-matrix td {
  padding: 9px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.op-matrix td:first-child { text-align: left; padding-left: 0; }
.op-matrix tr:last-child td { border-bottom: none; }
.op-matrix tr.highlighted { background: var(--bg-highlight); }

/* Capability dots */
.op-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.op-dot.filled { background: var(--dot-filled); }
.op-dot.empty { background: var(--dot-empty); }

/* === ENTITY CARD === */
.op-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 0;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: none;
}
.op-card:hover { border-color: #c5c0b8; }
.op-card-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.1;
}
.op-card-meta {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 3px;
}
.op-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
}
.op-stat-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1;
}
.op-stat-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 3px;
}

/* === TRUST BADGES === */
.op-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: transparent;
}

/* === SEARCH BAR === */
.op-search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
}

/* === SECTION HERO === */
.op-hero {
  padding: 52px var(--page-padding) 48px;
  text-align: center;
  border-bottom: 1px solid var(--border-default);
  max-width: 700px;
  margin: 0 auto;
  background: transparent;
}
.op-hero .op-eyebrow { margin-bottom: 10px; }
.op-hero .op-display { margin-bottom: 14px; }

/* === SECTION DIVIDERS === */
.op-divider {
  height: 1px;
  background: var(--border-default);
  margin: 0;
}
.op-section {
  padding: 32px var(--page-padding);
  border-bottom: 1px solid var(--border-default);
}

/* === MOBILE === */
@media (max-width: 640px) {
  .pill, .op-pill { padding: 4px 10px; font-size: 10px; }
  .op-tab { padding: 8px 10px; font-size: 10px; }
  .op-display { font-size: 36px; }
  .op-hero { padding: 36px 16px 32px; }
  .op-card-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   EXISTING SITE OVERRIDES
   Gentle overrides that don't break existing layout
   ============================================ */

/* Background for all pages */
html, body {
  background: var(--bg-base) !important;
}

/* Make all headings use Share Tech Mono */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Body text uses Inter */
p, li, td, th, label, span, div {
  font-family: var(--font-body);
}

/* Cards — subtle editorial style */
.card, .business-card, .listing-card, .pricing-card {
  border-radius: 4px;
  border: 1px solid var(--border-default);
  box-shadow: none;
}

/* Sections have cream bg, not white */
section, .section, main {
  background-color: transparent;
}

/* Header/nav bar */
header, nav, .navbar, .site-header {
  background: var(--bg-base);
}

/* Footer */
footer {
  background: var(--bg-base);
  border-top: 1px solid var(--border-default);
}

/* ============================================
   KILL ALL DARK MODE — force cream/light only
   ============================================ */
/* Override main.css dark mode variables no matter what */
:root,
:root[data-theme="dark"],
:root[data-theme="light"],
:root:not([data-theme="light"]),
html.dark,
html[data-theme="dark"] {
  --ink: #1a1a1a !important;
  --body: #1a1a1a !important;
  --muted: #6b6b6b !important;
  --border: #e0ddd8 !important;
  --surface: #f5f2ed !important;
  --white: #ffffff !important;
  --page-bg: #f5f2ed !important;
  --accent: #1a1a1a !important;
  --accent-hover: #333333 !important;
  --hero-fade: rgba(245,242,237,1) !important;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05) !important;
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06) !important;
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08) !important;
  --shadow-xl: 0 8px 32px rgba(0,0,0,0.10) !important;
  color-scheme: light !important;
}

/* Force body bg and color everywhere */
html, body {
  background: #f5f2ed !important;
  color: #1a1a1a !important;
  color-scheme: light !important;
}

/* Kill any dark bg on hero sections */
.hero, .hero-section, [class*="hero"] {
  background: transparent !important;
  color: #1a1a1a !important;
}

/* Force headings to be dark/readable */
h1, h2, h3, h4, h5, h6 {
  color: #1a1a1a !important;
}

/* Force h1 specifically — Share Tech Mono, thinner like humanoid-atlas */
h1 {
  font-family: 'Share Tech Mono', monospace !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
}

/* Nav links — handled by .site-nav rules above, keep generic for non-site-nav contexts */
.nav-link, header a:not(.nav-links a) {
  color: #1a1a1a;
}

/* Hide dark mode toggle buttons */
.theme-toggle,
[class*="theme-toggle"],
[class*="dark-mode"],
[class*="light-mode"],
button[aria-label*="theme"],
button[aria-label*="dark"],
button[aria-label*="light"] {
  display: none !important;
}

/* Cards should be white on cream background */
.card, .business-card, .listing-card, .pricing-card,
[class*="card"] {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-color: #e0ddd8 !important;
}

/* Fix letter-spacing on main headings — NO negative values */
[style*="letter-spacing: -1.5px"],
[style*="letter-spacing: -1px"],
[style*="letter-spacing:-1.5px"],
[style*="letter-spacing:-1px"] {
  letter-spacing: 0.04em !important;
}

/* All paragraphs dark */
p, li, span, div, td, th, label {
  color: inherit;
}

/* Badge text should be dark */
.badge, .trust-badge, [class*="badge"] {
  color: #1a1a1a !important;
  background: transparent !important;
  border: 1px solid #e0ddd8 !important;
}

/* Buttons: primary = black fill */
.btn-primary, .cta-btn, button[type="submit"] {
  background: #1a1a1a !important;
  color: #f5f2ed !important;
  border: none !important;
}

/* Search inputs */
input, textarea, select {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #e0ddd8 !important;
}

/* ============================================
   HIDE PHOTO CARDS — data-driven, not photo-led
   ============================================ */
/* Hide all business card photo/image containers */
.card-image,
.card-img,
.card-photo,
.business-photo,
.listing-photo,
.result-image,
.result-card-image,
[class*="card-image"],
[class*="card-img"],
[class*="result-image"],
.biz-img-wrap,
.featured-card .card-img-wrap,
.card-img-wrap {
  display: none !important;
}

/* Make cards compact data rows instead */
.result-card,
.featured-card,
.business-card,
.listing-card {
  background: #ffffff !important;
  border: 1px solid #e0ddd8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}
.result-card:hover,
.featured-card:hover {
  border-color: #c5c0b8 !important;
}

/* Card titles — condensed uppercase */
.result-card h3,
.result-card .card-title,
.featured-card h3,
.business-card h3 {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  line-height: 1.2 !important;
}

/* Card meta text (city, rating) */
.result-card .card-meta,
.result-card .card-subtitle,
.featured-card .card-meta {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #888 !important;
}

/* Star ratings — smaller, muted */
.stars, .rating, [class*="star"] {
  font-size: 12px !important;
}

/* Featured section header */
.featured-label, .featured-tag {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Hero gradients — remove all colored/dark gradients */
.hero-gradient,
.hero-bg,
[class*="hero-gradient"],
[style*="linear-gradient"],
.hero-image {
  background: transparent !important;
  background-image: none !important;
}

/* Listing page hero — no purple gradient */
.listing-hero,
.business-hero,
.detail-hero,
[class*="listing-hero"] {
  background: var(--bg) !important;
  background-image: none !important;
}

/* Remove colored badges — make them minimal */
.badge-verified, .badge-top-rated, .badge-unclaimed,
.badge-open, .result-badge, .trust-badge {
  background: transparent !important;
  border: 1px solid #e0ddd8 !important;
  color: #1a1a1a !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 2px 6px !important;
}

/* CTA buttons on listing pages — black, not red/coral */
.cta-primary, .btn-quote, .btn-call,
[class*="cta-primary"], [class*="btn-quote"] {
  background: #1a1a1a !important;
  color: #f5f2ed !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* Remove any coral/red accent colors */
[style*="background: #FF5A5F"],
[style*="background: #ff5a5f"],
[style*="background-color: #FF5A5F"],
[style*="background-color: #ff5a5f"],
[style*="background: rgb(255, 90, 95)"],
[style*="color: #FF5A5F"],
[style*="color: #ff5a5f"] {
  background: #1a1a1a !important;
  color: #f5f2ed !important;
}

/* Category filter pills on browse page */
.category-pills a,
.category-filter a,
.filter-pill {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
  border: 1px solid #e0ddd8 !important;
  padding: 5px 12px !important;
}

/* Browse page heading */
.browse-heading, .browse-title {
  font-family: 'Share Tech Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Section headings across all pages */
.section-heading, .page-heading {
  font-family: 'Share Tech Mono', monospace !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ============================================
   GLOBAL BORDER-RADIUS FORCE — 3px everywhere
   Terminal aesthetic. No round pills anywhere.
   ============================================ */

/* ALL buttons, pills, badges, tags — 3px */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-outline,
.btn-cta,
.cta-btn,
.offer-hero-cta,
[class*="btn-"],
button:not(.nav-hamburger),
a.btn-primary,
a.btn-ghost {
  border-radius: 3px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  transition: all 0.15s !important;
}

/* Primary buttons = solid black */
.btn-primary,
a.btn-primary,
.offer-hero-cta {
  background: var(--text, #1a1a1a) !important;
  color: var(--bg, #f5f2ed) !important;
  border: 1px solid var(--text, #1a1a1a) !important;
}
.btn-primary:hover,
a.btn-primary:hover {
  background: #333 !important;
  border-color: #333 !important;
}

/* Ghost/outline buttons = bordered */
.btn-ghost,
.btn-outline,
.btn-secondary,
a.btn-ghost {
  background: transparent !important;
  color: var(--text, #1a1a1a) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
}
.btn-ghost:hover,
a.btn-ghost:hover {
  border-color: var(--text, #1a1a1a) !important;
  color: var(--text, #1a1a1a) !important;
}

/* ALL cards — sharp corners, white bg */
.value-card,
.pricing-card,
.tier-card,
.feature-card,
.info-card,
.result-card,
.entity-card,
[class*="card"] {
  border-radius: 3px !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  box-shadow: none !important;
  transition: all 0.15s !important;
}
[class*="card"]:hover {
  border-color: var(--border-hover, #c5c0b8) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Card icons */
.value-card-icon,
[class*="card-icon"] {
  border-radius: 3px !important;
}

/* ALL badges, tags, popular tags */
.upgrade-popular-tag,
.tv-free-tag,
[class*="tag"],
[class*="badge"],
[class*="pill"],
.popular-badge,
.most-popular {
  border-radius: 3px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* Category filter nav on browse page */
.category-nav a,
.category-filter a,
.cat-pill,
.filter-btn,
.sort-btn,
[class*="filter-pill"],
[class*="sort-pill"] {
  border-radius: 3px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transition: all 0.15s !important;
}

/* Active state for category filters */
.cat-pill.active,
.filter-btn.active,
[class*="filter-pill"].active,
[class*="sort-pill"].active {
  background: var(--text, #1a1a1a) !important;
  color: var(--bg, #f5f2ed) !important;
  border-color: var(--text, #1a1a1a) !important;
}

/* Search inputs — 3px */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
textarea,
select,
.search-input,
.nav-search input {
  border-radius: 3px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  background: var(--bg, #f5f2ed) !important;
  transition: all 0.15s !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--text, #1a1a1a) !important;
  outline: none !important;
}

/* ============================================
   NAV CONSISTENCY — force same look across all pages
   ============================================ */

/* Site nav bar on ALL pages */
.site-nav,
.navbar,
nav.site-nav,
header nav {
  background: var(--bg, #f5f2ed) !important;
  border-bottom: 1px solid var(--border, #e0ddd8) !important;
  font-family: 'Share Tech Mono', monospace !important;
}

/* Nav wordmark on ALL pages */
.nav-logo,
.site-logo,
.logo,
.brand,
a[class*="logo"],
a[class*="brand"],
.nav-inner a:first-child {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--text, #1a1a1a) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

/* Nav links — now handled by shared NAV LINKS block above */
.site-nav a:hover,
.navbar a:hover,
header nav a:hover,
.nav-inner a:hover {
  color: var(--text, #1a1a1a) !important;
}

/* ACTIVE pills/buttons in nav — cream text on black bg */
/* MUST be higher specificity than the nav a color rule above */
nav .nav-pill.active,
nav a.nav-pill.active,
.op-nav .nav-pill.active,
.op-nav a.nav-pill.active,
.site-nav .nav-pill.active,
.site-nav a.active,
header nav a.active,
a.nav-pill.active,
.nav-pill.active,
.country-pill--active,
.tab-group-pill--active,
[class*="pill"].active,
[class*="pill--active"] {
  background: #1a1a1a !important;
  color: #f5f2ed !important;
  border-color: #1a1a1a !important;
}

/* "Free AI Audit" CTA button in nav */
.site-nav .btn-primary,
header .btn-primary {
  border-radius: 3px !important;
  padding: 6px 14px !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  background: #1a1a1a !important;
  color: #f5f2ed !important;
}

/* ============================================
   HOVER STATES — consistent 0.15s transitions
   ============================================ */

a, button, input, select, textarea,
[class*="btn"], [class*="card"], [class*="pill"],
[class*="badge"], [class*="tag"], [class*="filter"] {
  transition: all 0.15s !important;
}

/* Link hover — darken from dim to full */
a:hover {
  color: var(--text, #1a1a1a) !important;
}

/* Card hover — subtle border + shadow */
[class*="card"]:hover {
  border-color: var(--border-hover, #c5c0b8) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Button hover states */
.btn-primary:hover { background: #333 !important; }
.btn-ghost:hover { border-color: var(--text, #1a1a1a) !important; }

/* ============================================
   PRICING PAGE SPECIFIC
   ============================================ */

/* Pricing tier cards */
.tier-card,
.pricing-card,
.pricing-tier {
  border-radius: 3px !important;
  background: var(--bg-card, #ffffff) !important;
}

/* "MOST POPULAR" badge */
.upgrade-popular-tag,
.popular-badge,
[class*="popular"] {
  border-radius: 3px !important;
  background: var(--text, #1a1a1a) !important;
  color: var(--bg, #f5f2ed) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
}

/* Green checkmarks — make them grey/black instead */
.feature-check,
[class*="check-icon"],
svg.check {
  color: var(--text, #1a1a1a) !important;
  fill: var(--text, #1a1a1a) !important;
}

/* ============================================
   BROWSE PAGE SPECIFIC
   ============================================ */

/* Category icon row */
.category-scroll a,
.browse-categories a {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--text-dim, #a0a0a0) !important;
  transition: all 0.15s !important;
}
.category-scroll a:hover,
.category-scroll a.active {
  color: var(--text, #1a1a1a) !important;
}

/* Rating/Reviews/Verified filter buttons */
.sort-controls button,
.filter-controls button,
[class*="sort-btn"],
[class*="filter-btn"] {
  border-radius: 3px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  background: transparent !important;
  color: var(--text-dim, #a0a0a0) !important;
  padding: 4px 12px !important;
}

/* Grid/list view toggle */
.view-toggle button,
[class*="view-btn"] {
  border-radius: 3px !important;
  border: 1px solid var(--border, #e0ddd8) !important;
}

/* Recently viewed cards */
.recent-card,
[class*="recent"] {
  border-radius: 3px !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  font-family: 'Share Tech Mono', monospace !important;
}

/* ============================================
   LISTING/DETAIL PAGE SPECIFIC
   ============================================ */

/* Remove hero gradient */
.listing-hero,
.detail-hero,
[class*="hero-bg"],
[class*="hero-gradient"] {
  background: var(--bg, #f5f2ed) !important;
  background-image: none !important;
}

/* Quote/call CTA buttons */
.quote-btn,
.call-btn,
[class*="cta-primary"],
[class*="quote-cta"],
[class*="call-cta"] {
  border-radius: 3px !important;
  background: var(--text, #1a1a1a) !important;
  color: var(--bg, #f5f2ed) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* Trust badges on listing */
.trust-badge,
.badge-verified,
.badge-top-rated {
  border-radius: 3px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  background: transparent !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  color: var(--text, #1a1a1a) !important;
}

/* ============================================
   FOOTER — consistent across all pages
   ============================================ */
footer,
.site-footer {
  background: var(--bg, #f5f2ed) !important;
  border-top: 1px solid var(--border, #e0ddd8) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  color: var(--text-dim, #a0a0a0) !important;
}
footer a,
.site-footer a {
  color: var(--text-secondary, #6b6b6b) !important;
}
footer a:hover {
  text-decoration: underline !important;
}

/* ============================================
   LISTING PAGE FIXES — kill purple gradient,
   force monochrome accents
   ============================================ */

/* Kill the purple gradient placeholder on listing hero */
.ab-photo-placeholder,
[class*="photo-placeholder"],
[class*="hero-placeholder"] {
  background: var(--bg-muted, #ebe7e1) !important;
  background-image: none !important;
}

/* Kill the entire photo hero — replace with plain section */
.ab-photo-hero,
[class*="photo-hero"] {
  background: var(--bg, #f5f2ed) !important;
  min-height: auto !important;
}

/* Business name on listing should be in Share Tech Mono — dark text, no shadow */
.ab-photo-hero h1,
.ab-photo-hero h2,
.ab-photo-hero .business-name,
.ab-photo-hero .ab-photo-name,
[class*="photo-hero"] h1,
[class*="photo-hero"] h2,
[class*="photo-hero"] [class*="name"] {
  font-family: 'Share Tech Mono', monospace !important;
  color: var(--text, #1a1a1a) !important;
  text-shadow: none !important;
}

/* Subtitle text on listing hero — dark text */
.ab-photo-hero p,
.ab-photo-hero span,
.ab-photo-hero .business-subtitle,
.ab-photo-hero .ab-photo-subtitle,
[class*="photo-hero"] p,
[class*="photo-hero"] span,
[class*="photo-hero"] [class*="subtitle"] {
  color: var(--text-secondary, #6b6b6b) !important;
  text-shadow: none !important;
}

/* Subtitle inside placeholder — was white, now dark */
.ab-photo-placeholder-sub {
  color: var(--text-secondary, #6b6b6b) !important;
}

/* Lock icon on placeholder — hide or restyle */
.ab-photo-hero svg,
.ab-photo-placeholder svg {
  color: var(--text-dim, #a0a0a0) !important;
  opacity: 0.5 !important;
}

/* Business name inside placeholder — was white, now dark */
.ab-photo-placeholder-name,
[class*="placeholder-name"] {
  color: var(--text, #1a1a1a) !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-shadow: none !important;
}

/* Kill ALL colored stars — make them black/grey */
.star-rating,
[class*="star"],
.rating-star {
  color: var(--text, #1a1a1a) !important;
  fill: var(--text, #1a1a1a) !important;
}

/* Kill green "Looking good" text */
.health-good,
[class*="health-"],
[style*="color: green"],
[style*="color: #22c55e"],
[style*="color: rgb(34, 197, 94)"] {
  color: var(--text, #1a1a1a) !important;
}

/* Green check icons/SVGs across all pages — make black */
svg[class*="check"],
.check-icon,
[class*="feature-check"],
li svg,
.pricing-feature svg {
  color: var(--text, #1a1a1a) !important;
  fill: var(--text, #1a1a1a) !important;
  stroke: var(--text, #1a1a1a) !important;
}

/* Red/orange/colored status badges — force monochrome */
[style*="color: #ef4444"],
[style*="color: #f59e0b"],
[style*="color: #22c55e"],
[style*="color: #3b82f6"],
[class*="text-red"],
[class*="text-green"],
[class*="text-blue"],
[class*="text-yellow"] {
  color: var(--text, #1a1a1a) !important;
}

/* Breadcrumb nav on listing pages */
.breadcrumb,
[class*="breadcrumb"] {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.breadcrumb a,
[class*="breadcrumb"] a {
  color: var(--text-dim, #a0a0a0) !important;
}
.breadcrumb a:hover {
  color: var(--text, #1a1a1a) !important;
}

/* SHARE/SAVE buttons on listing */
.share-btn,
.save-btn,
[class*="share"],
[class*="save"] {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
}

/* "Ask about this business" chat box */
.chat-input,
[class*="chat-input"],
[class*="ask-input"] {
  border-radius: 3px !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* "SHOW DETAILS" links */
.show-details,
[class*="show-details"],
.expand-link {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--text-dim, #a0a0a0) !important;
}
.show-details:hover {
  color: var(--text, #1a1a1a) !important;
}

/* "Call" button on listing sidebar */
.call-btn,
[class*="call-btn"],
a[href^="tel:"] {
  border-radius: 3px !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

/* ============================================
   BROWSE PAGE — hide recently viewed, fix card lines
   ============================================ */

/* Hide "Recently Viewed" section entirely */
.recently-viewed,
.recently-viewed-section,
[class*="recently-viewed"],
[class*="recent-history"],
.recent-section {
  display: none !important;
}

/* List-view avatars — monochrome, not colored circles */
.list-item-avatar,
[class*="avatar"] {
  background: var(--bg-muted, #ebe7e1) !important;
  color: var(--text-dim, #a0a0a0) !important;
  border-radius: 3px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
}

/* Grid-view card initials/placeholders — monochrome */
.card-avatar,
.card-initial,
[class*="card-avatar"],
[class*="placeholder-initials"] {
  background: var(--bg-muted, #ebe7e1) !important;
  color: var(--text-dim, #a0a0a0) !important;
  border-radius: 3px !important;
}

/* Remove extra lines/borders inside business cards */
.result-card hr,
.result-card .card-divider,
.entity-card hr,
[class*="card"] hr,
[class*="card"] .divider,
.result-card-info::before,
.result-card-info::after {
  display: none !important;
  border: none !important;
}

/* Remove bottom border inside card that creates the "extra line" */
.result-card .result-card-name,
.result-card .card-title,
.result-card h3,
[class*="card"] h3 {
  border-bottom: none !important;
  padding-bottom: 2px !important;
}

/* ============================================
   NUCLEAR FIX: Active pill text color
   This must come LAST to win all specificity battles
   ============================================ */
.nav-pill.active { color: #f5f2ed !important; }
a.nav-pill.active { color: #f5f2ed !important; }
nav .nav-pill.active { color: #f5f2ed !important; }
nav a.nav-pill.active { color: #f5f2ed !important; }
.op-nav .nav-pill.active { color: #f5f2ed !important; }
.op-nav a.nav-pill.active { color: #f5f2ed !important; }

/* ============================================
   BROWSE PAGE — clean data-row cards
   ============================================ */
/* Card grid: clean, minimal lines */
.photo-card-grid {
  gap: 0 !important;
}

/* Cards: completely borderless, only hover highlight */
.photo-card {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 14px 20px !important;
  transition: background 0.15s !important;
}
.photo-card:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--bg-muted) !important;
}
/* Kill ALL borders inside cards */
.photo-card *,
.photo-card-body *,
.photo-card-meta,
.photo-card-rating,
.photo-card-price {
  border: none !important;
  border-bottom: none !important;
  outline: none !important;
}

/* Hide image/placeholder entirely */
.photo-card-img,
.photo-card-placeholder,
.photo-card-niche-badge,
.placeholder-initials,
.placeholder-niche {
  display: none !important;
}

/* Card body: no extra padding, no borders */
.photo-card-body {
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
}

/* Card title: Share Tech Mono, compact */
.photo-card-title {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
}

/* Card meta: Inter, small grey */
.photo-card-meta,
.photo-card-rating,
.photo-card-price {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
}
.photo-card-rating .star {
  color: var(--text) !important;
}

/* ============================================
   LISTING PAGE — remove grey hero, fix layout
   ============================================ */
/* Kill the grey hero placeholder */
.listing-hero,
.business-hero,
.detail-hero,
[class*="listing-hero"],
.biz-header-image,
.hero-img-wrap,
.hero-image-wrap {
  display: none !important;
}

/* Listing h1 — center, Share Tech Mono */
.listing-header h1,
.biz-header h1,
.detail-header h1 {
  font-family: 'Share Tech Mono', monospace !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-align: left !important;
  font-size: clamp(24px, 4vw, 36px) !important;
}

/* Sidebar card */
.listing-sidebar,
.biz-sidebar,
.detail-sidebar {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
}

/* CTA button on listing */
.quote-btn, .cta-quote, [class*="quote-btn"],
.book-btn, [class*="book-btn"] {
  background: var(--accent) !important;
  color: var(--text-invert) !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
}

/* About section heading */
.listing-body h2,
.listing-body h3,
.biz-body h2,
.biz-body h3 {
  font-family: 'Share Tech Mono', monospace !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

/* Body text on listing */
.listing-body p,
.biz-body p {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--text) !important;
}

/* ============================================
   GLOBAL NAV — all pages, wordmark fix
   ============================================ */
/* Wordmark on all pages (browse, listing, pricing, etc) */
.nav-brand, .logo, .site-logo, a[href="/"] {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
}

/* Nav links — now handled by shared NAV LINKS block above */

/* Top right CTA button (Free AI Audit etc) */
.site-nav .nav-cta .btn-primary,
.site-nav .nav-cta a.btn-primary,
.nav-cta .btn-primary {
  background: #1a1a1a !important;
  color: #f5f2ed !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 6px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.site-nav .nav-cta,
.nav-cta {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
button.nav-pill.active { color: #f5f2ed !important; }

/* 2. Hide category tab icons — text only */
.category-tab svg,
.category-tab img,
.category-tab .cat-icon,
.category-tab i {
  display: none !important;
}

/* 3. Style category tabs as terminal pills */
.category-tab {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  border-radius: 3px !important;
  padding: 5px 12px !important;
  background: transparent !important;
  color: var(--text, #1a1a1a) !important;
  white-space: nowrap !important;
}
.category-tab:hover {
  border-color: var(--text, #1a1a1a) !important;
}
.category-tab.active,
.category-tab[aria-selected="true"] {
  background: var(--text, #1a1a1a) !important;
  color: var(--bg, #f5f2ed) !important;
  border-color: var(--text, #1a1a1a) !important;
}

/* 4. Category tab strip — clean horizontal scroll */
.category-tabs-strip {
  border-bottom: 1px solid var(--border, #e0ddd8) !important;
  background: transparent !important;
  padding: 8px 0 !important;
}
.category-tabs-inner {
  gap: 6px !important;
}

/* 5. Hide category scroll arrows */
.cat-scroll-btn {
  background: var(--bg, #f5f2ed) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  border-radius: 3px !important;
  color: var(--text, #1a1a1a) !important;
}

/* 6. Filter pills (Rating, Reviews, Verified) */
.filter-pill {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  border-radius: 3px !important;
  padding: 5px 12px !important;
  background: transparent !important;
  color: var(--text, #1a1a1a) !important;
}
.filter-pill:hover {
  border-color: var(--text, #1a1a1a) !important;
}
.filter-pill.active {
  background: var(--text, #1a1a1a) !important;
  color: var(--bg, #f5f2ed) !important;
  border-color: var(--text, #1a1a1a) !important;
}
/* Hide filter pill icons */
.filter-pill svg,
.filter-pill i,
.filter-pill img {
  display: none !important;
}

/* 7. Filter dropdown — clean styling */
.filter-dropdown {
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  border-radius: 3px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  font-family: 'Share Tech Mono', monospace !important;
}
.filter-dropdown-title {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* 8. Location bar — clean */
.location-bar,
.location-pill {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
}

/* 9. Browse heading "IN HONOLULU" */
.browse-heading,
[class*="browse-heading"],
.results-heading {
  font-family: 'Share Tech Mono', monospace !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* 10. Grid/list toggle buttons */
.view-toggle button,
[class*="view-toggle"] button {
  border: 1px solid var(--border, #e0ddd8) !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: var(--text, #1a1a1a) !important;
  padding: 5px 8px !important;
}
.view-toggle button.active,
[class*="view-toggle"] button.active {
  background: var(--text, #1a1a1a) !important;
  color: var(--bg, #f5f2ed) !important;
}

/* 11. Hide "Recently Viewed" section */
.recently-viewed,
[class*="recently-viewed"],
[class*="recent-"] {
  display: none !important;
}

/* 12. Bottom CTA section — minimal */
.browse-owner-cta-section {
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  border-radius: 0 !important;
}

/* 13. Nav hamburger — hide on desktop */
@media (min-width: 768px) {
  .nav-hamburger {
    display: none !important;
  }
}

/* 14. Location modal */
.location-modal {
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  border-radius: 3px !important;
  font-family: 'Share Tech Mono', monospace !important;
}
.location-modal-overlay {
  background: rgba(0, 0, 0, 0.3) !important;
}
.location-modal-input {
  font-family: 'Inter', -apple-system, sans-serif !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  border-radius: 3px !important;
}

/* 15. Results count text */
.results-count,
[class*="results-count"] {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  color: var(--text-secondary, #6b6b6b) !important;
}

/* ============================================
   LARGE VIEWPORT OPTIMIZATION (1440px+)
   ============================================ */

/* Widen max-width containers at large screens */
@media (min-width: 1440px) {
  .container, .wrapper, .page-content, main,
  .browse-container, .listing-container,
  .pricing-container, [class*="container"] {
    max-width: 1400px !important;
  }
  
  /* Homepage hero can go wider */
  .hero {
    max-width: 1200px !important;
  }
  
  /* Globe bigger on large screens */
  .globe-wrap {
    max-width: 560px !important;
  }
  
  /* Data rows wider */
  .data-row, .stat-row, [class*="data-row"] {
    max-width: 1200px !important;
  }
  
  /* Browse grid: 5 columns at xl */
  .photo-card-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
  
  /* Pricing: 5 cards in a row */
  .pricing-cards, .pricing-grid, [class*="pricing-grid"],
  [class*="pricing-cards"] {
    grid-template-columns: repeat(5, 1fr) !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
  }
}

@media (min-width: 1800px) {
  .container, .wrapper, .page-content, main,
  [class*="container"] {
    max-width: 1600px !important;
  }
  
  /* Browse grid: 6 columns at xxl */
  .photo-card-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* ============================================
   LISTING PAGE FIXES
   ============================================ */

/* Kill the grey hero image placeholder */
.listing-hero-image,
.business-hero-image,
.hero-image-placeholder,
[class*="hero-image"],
[class*="hero-placeholder"],
.hero-photo,
.listing-header-image {
  display: none !important;
}

/* Also target inline style grey backgrounds on listing heroes */
.listing-hero,
.business-hero,
[class*="listing-hero"] {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  min-height: auto !important;
  height: auto !important;
}

/* Listing page: wider content at large screens */
@media (min-width: 1200px) {
  .listing-content,
  .business-content,
  [class*="listing-content"] {
    max-width: 1200px !important;
    margin: 0 auto !important;
  }
  
  /* Two-column layout: content + sidebar */
  .listing-main,
  [class*="listing-main"] {
    max-width: 720px !important;
  }
}

/* ============================================
   COLOR FIXES — remove all colored accents
   ============================================ */

/* Red stars → black */
.stars, .star, [class*="star-rating"],
.rating-star, [class*="rating"] .star,
svg.star, .star-icon {
  color: var(--text, #1a1a1a) !important;
  fill: var(--text, #1a1a1a) !important;
}

/* Green checkmarks → black */
.check, .checkmark, .check-icon,
[class*="check-icon"], [class*="pricing"] svg,
[class*="pricing"] .check,
.feature-check, .plan-feature svg {
  color: var(--text, #1a1a1a) !important;
  fill: var(--text, #1a1a1a) !important;
  stroke: var(--text, #1a1a1a) !important;
}

/* Green health badges → muted */
.health-badge, .website-health,
[class*="health"], [class*="website-grade"] {
  background: var(--bg-muted, #ebe7e1) !important;
  color: var(--text, #1a1a1a) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
}

/* Chat widget — cream/white, not dark */
.chat-widget, .ask-widget, [class*="chat-box"],
[class*="ask-about"], .contractor-chat {
  background: var(--bg-card, #ffffff) !important;
  color: var(--text, #1a1a1a) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
}
.chat-widget input, .ask-widget input,
[class*="chat-box"] input {
  background: var(--bg, #f5f2ed) !important;
  color: var(--text, #1a1a1a) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  border-radius: 3px !important;
}

/* "Most Popular" pricing badge */
.most-popular-badge, [class*="most-popular"],
.popular-badge {
  background: var(--text, #1a1a1a) !important;
  color: var(--bg, #f5f2ed) !important;
  border-radius: 3px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
}

/* Pricing card highlighted/active state */
.pricing-card.popular,
.pricing-card.highlighted,
[class*="pricing-card"].active {
  border: 2px solid var(--text, #1a1a1a) !important;
  box-shadow: none !important;
}

/* ============================================
   PRICING PAGE — wide viewport 5-up layout
   ============================================ */

/* Price values */
.price, .plan-price, [class*="price-value"] {
  font-family: 'Share Tech Mono', monospace !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

/* Plan names */
.plan-name, .plan-title, [class*="plan-name"] {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* CTA buttons in pricing cards */
.plan-cta, .pricing-cta, [class*="plan-cta"],
[class*="pricing-card"] button,
[class*="pricing-card"] a.btn {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
  border: 1px solid var(--text, #1a1a1a) !important;
  background: transparent !important;
  color: var(--text, #1a1a1a) !important;
  padding: 10px 20px !important;
}
[class*="pricing-card"].popular button,
[class*="pricing-card"].popular a.btn,
[class*="pricing-card"].highlighted button {
  background: var(--text, #1a1a1a) !important;
  color: var(--bg, #f5f2ed) !important;
}

/* ============================================
   LISTING PAGE — kill photo hero placeholder
   ============================================ */
.ab-photo-hero,
.ab-photo-hero--single,
.ab-photo-placeholder,
.ab-photo-hero--gallery {
  display: none !important;
}

/* Red star → black on listing pages */
.ab-rating-stars,
.ab-rating-stars svg,
[class*="ab-rating"] svg {
  color: var(--text, #1a1a1a) !important;
  fill: var(--text, #1a1a1a) !important;
}

/* Sidebar card — white bg, clean border */
.ab-sidebar-card {
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Ask widget — white bg */
.ab-sidebar-ask {
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
  border-radius: 0 !important;
}

/* Listing layout — wider on large screens */
@media (min-width: 1440px) {
  .ab-page {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
  }
  .ab-layout {
    gap: 60px !important;
  }
  .ab-content {
    max-width: 800px !important;
  }
}

/* Section headings on listing pages */
.ab-section-title {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--text-secondary, #6b6b6b) !important;
}

/* Trust bar badges */
.ab-trust-bar {
  border-top: 1px solid var(--border, #e0ddd8) !important;
  border-bottom: 1px solid var(--border, #e0ddd8) !important;
}

/* Highlight icons — muted */
.ab-highlight-icon {
  color: var(--text-secondary, #6b6b6b) !important;
  opacity: 0.6 !important;
}

/* Map container */
.ab-map-container {
  border-radius: 0 !important;
  border: 1px solid var(--border, #e0ddd8) !important;
}

/* ============================================
   CLAIM PAGE — fix dark section + green text
   ============================================ */

/* "Total Value" dark banner → cream with border */
.total-value, .value-section, [class*="total-value"],
[class*="value-banner"], .claim-value-section {
  background: var(--bg-card, #ffffff) !important;
  color: var(--text, #1a1a1a) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
}
.total-value *, .value-section *, [class*="total-value"] *,
[class*="value-banner"] * {
  color: var(--text, #1a1a1a) !important;
}

/* Green $0 → black */
[style*="color: #22c55e"],
[style*="color: #10b981"],
[style*="color: #059669"],
[style*="color: #4ade80"],
[style*="color: rgb(34, 197, 94)"],
[style*="color: rgb(16, 185, 129)"] {
  color: var(--text, #1a1a1a) !important;
}

/* Green "FREE FOREVER" badge → black pill */
.free-badge, [class*="free-badge"],
[class*="free-tag"], .price-free {
  background: var(--text, #1a1a1a) !important;
  color: var(--bg, #f5f2ed) !important;
  border-radius: 3px !important;
}

/* ============================================
   PRICING PAGE — green checkmarks → black
   ============================================ */

/* SVG checkmarks inside pricing feature lists */
.pricing-feature svg,
.plan-feature svg,
.feature-list svg,
[class*="pricing"] li svg,
[class*="plan-feature"] svg,
.check-icon, .feature-check {
  color: var(--text, #1a1a1a) !important;
  fill: var(--text, #1a1a1a) !important;
  stroke: var(--text, #1a1a1a) !important;
}

/* Also catch inline green via style attribute */
svg[style*="color: #22c55e"],
svg[style*="color: #10b981"],
svg[style*="color: #059669"],
svg[style*="color: green"],
svg[fill="#22c55e"],
svg[fill="#10b981"],
svg[fill="#059669"],
svg[stroke="#22c55e"],
svg[stroke="#10b981"] {
  color: var(--text, #1a1a1a) !important;
  fill: var(--text, #1a1a1a) !important;
  stroke: var(--text, #1a1a1a) !important;
}

/* Any remaining dark sections on claim/pricing */
[style*="background: #1a1a1a"],
[style*="background-color: #1a1a1a"],
[style*="background: #0f0f0f"],
[style*="background-color: #0f0f0f"],
[style*="background: rgb(26, 26, 26)"],
[style*="background-color: rgb(26, 26, 26)"],
[style*="background: #111"],
[style*="background-color: #111"],
[style*="background: #222"],
[style*="background-color: #222"] {
  background: var(--bg-card, #ffffff) !important;
  color: var(--text, #1a1a1a) !important;
  border: 1px solid var(--border, #e0ddd8) !important;
}

/* ============================================
   DESIGN REVIEW FIXES — March 26, 2026
   ============================================ */

/* DR-001: Touch targets — pills minimum 44px height */
.nav-pill, a.nav-pill, .country-pill, .tab-group-pill,
.category-tab, .filter-pill,
.op-nav .nav-pill, [class*="nav-pill"] {
  min-height: 36px !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* DR-002: Search input — taller, more padding */
.nav-search input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea {
  min-height: 40px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
}

/* DR-003: Wordmark — larger clickable area */
.nav-wordmark, a.nav-wordmark,
.nav-logo, a[class*="logo"],
.nav-inner a:first-child {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 0 !important;
}

/* DR-004: H1 always centered */
h1 {
  text-align: center !important;
}

/* DR-005: Force ALL SVG checkmarks to black via universal selector */
svg[viewBox] path[stroke="#22c55e"],
svg[viewBox] path[stroke="#10b981"],
svg[viewBox] path[stroke="#059669"],
svg path[fill="#22c55e"],
svg path[fill="#10b981"],
svg path[fill="#059669"],
svg circle[fill="#22c55e"],
svg circle[fill="#10b981"] {
  stroke: #1a1a1a !important;
  fill: #1a1a1a !important;
}

/* DR-006: Kill ALL dark inline backgrounds */
[style*="background:#1a1a1a"],
[style*="background: #1a1a1a"],
[style*="background-color:#1a1a1a"],
[style*="background-color: #1a1a1a"],
[style*="background:#0f0f0f"],
[style*="background: #0f0f0f"],
[style*="background-color:#0f0f0f"],
[style*="background-color: #0f0f0f"],
[style*="background:#111"],
[style*="background: #111"],
[style*="background-color:#111"],
[style*="background-color: #111"] {
  background: var(--bg-card, #ffffff) !important;
  color: var(--text, #1a1a1a) !important;
}
[style*="background:#1a1a1a"] *,
[style*="background: #1a1a1a"] *,
[style*="background-color:#1a1a1a"] *,
[style*="background-color: #1a1a1a"] *,
[style*="background:#0f0f0f"] *,
[style*="background: #0f0f0f"] *,
[style*="background:#111"] *,
[style*="background: #111"] * {
  color: var(--text, #1a1a1a) !important;
}

/* Improve readability: body text line-height */
p, li, td {
  line-height: 1.65 !important;
}

/* Fix focus-visible ring — a11y requirement */
a:focus-visible, button:focus-visible, input:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--text, #1a1a1a) !important;
  outline-offset: 2px !important;
}

/* Improve footer contrast — scoped to top-level footer only */
footer, .site-footer, .op-footer {
  border-top: 1px solid var(--border, #e0ddd8) !important;
  padding-top: 40px !important;
  margin-top: 60px !important;
}
/* Reset children that inherit "footer" in class name */
.footer-col, .footer-grid, .footer-col-label, .footer-bottom, .footer-brand, .footer-inner, .footer-columns {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ============================================
   FINAL OVERRIDES — must be last to win cascade
   ============================================ */

/* Nav links: Inter body font, sentence case, NOT mono uppercase */
.site-nav .nav-links a,
.site-nav .nav-links li a,
.site-nav .nav-inner .nav-links a,
.nav-inner a,
.site-nav a,
.site-nav .nav-links .nav-dropdown-trigger {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: #888 !important;
}
.site-nav .nav-links a:hover,
.site-nav a:hover,
.nav-inner a:hover,
.site-nav .nav-links .nav-dropdown-trigger:hover {
  color: #1a1a1a !important;
}
/* CTA button keeps its own style */
.site-nav .nav-cta a.btn-primary,
.nav-cta a.btn-primary,
.nav-cta .btn-primary {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #f5f2ed !important;
  background: #1a1a1a !important;
  padding: 6px 16px !important;
}
/* Wordmark stays mono bold */
.site-nav .nav-wordmark,
.site-nav .nav-wordmark a,
.nav-wordmark a {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
}
/* Region indicator (Hawaii locked) */
.nav-region {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-left: 12px !important;
  padding: 3px 10px !important;
  border: 1px solid var(--border, rgba(0,0,0,0.10)) !important;
  border-radius: 3px !important;
  cursor: default !important;
  background: transparent !important;
}
.nav-region span {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #888 !important;
}